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

package/desktop/cmp/dash/canvas/DashCanvasModel.ts

@@ -4,6 +4,9 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {wait} from '@xh/hoist/promise';
+import {DragEvent} from 'react';
+import type {LayoutItem} from 'react-grid-layout';
 import {Persistable, PersistableState, PersistenceProvider, XH} from '@xh/hoist/core';
 import {required} from '@xh/hoist/data';
 import {DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel} from '../';
@@ -16,6 +19,7 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
+    omit,
     uniqBy,
     times,
     without,
@@ -48,8 +52,42 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
 
-    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
+    /** Padding inside the container [x, y] in pixels. Default `[0, 0]`. */
     containerPadding?: [number, number];
+
+    /**
+     * Whether the canvas should accept drag-and-drop of views from outside
+     * the canvas. Default false.
+     */
+    droppable?: boolean;
+
+    /**
+     * Optional Callback to invoke after a view is successfully dropped onto the canvas.
+     */
+    onDropDone?: (viewModel: DashCanvasViewModel) => void;
+
+    /**
+     * Optional callback to invoke when an item is dragged over the canvas. This may be used to
+     * customize how the size of the dropping placeholder is calculated. The callback should
+     * return an object with optional properties indicating the desired width, height (in grid units),
+     * and offset (in pixels) of the dropping placeholder.
+     * If not provided, Hoist's own default logic will be used.
+     */
+    onDropDragOver?: (e: DragEvent) =>
+        | {
+              w?: number;
+              h?: number;
+              dragOffsetX?: number;
+              dragOffsetY?: number;
+          }
+        | false
+        | void;
+
+    /**
+     * Whether an overlay with an Add View button should be rendered
+     * when the canvas is empty. Default true.
+     */
+    showAddViewButtonWhenEmpty?: boolean;
 }
 
 export interface DashCanvasItemState {
@@ -82,11 +120,16 @@ export class DashCanvasModel
     @bindable compact: boolean;
     @bindable.ref margin: [number, number]; // [x, y]
     @bindable.ref containerPadding: [number, number]; // [x, y]
+    @bindable showAddViewButtonWhenEmpty: boolean;
 
     //-----------------------------
     // Public properties
     //-----------------------------
+    DROPPING_ELEM_ID = '__dropping-elem__';
     maxRows: number;
+    droppable: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;
 
     /** Current number of rows in canvas */
     get rows(): number {
@@ -106,21 +149,27 @@ export class DashCanvasModel
     private isLoadingState: boolean;
 
     get rglLayout() {
-        return this.layout.map(it => {
-            const dashCanvasView = this.getView(it.i),
-                {autoHeight, viewSpec} = dashCanvasView;
-
-            return {
-                ...it,
-                resizeHandles: autoHeight
-                    ? ['w', 'e']
-                    : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
-                maxH: viewSpec.maxHeight,
-                minH: viewSpec.minHeight,
-                maxW: viewSpec.maxWidth,
-                minW: viewSpec.minWidth
-            };
-        });
+        return this.layout
+            .map(it => {
+                const dashCanvasView = this.getView(it.i);
+
+                // `dashCanvasView` will not be found if `it` is a dropping element.
+                if (!dashCanvasView) return null;
+
+                const {autoHeight, viewSpec} = dashCanvasView;
+
+                return {
+                    ...it,
+                    resizeHandles: autoHeight
+                        ? ['w', 'e']
+                        : ['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'],
+                    maxH: viewSpec.maxHeight,
+                    minH: viewSpec.minHeight,
+                    maxW: viewSpec.maxWidth,
+                    minW: viewSpec.minWidth
+                };
+            })
+            .filter(Boolean);
     }
 
     constructor({
@@ -138,8 +187,12 @@ export class DashCanvasModel
         compact = true,
         margin = [10, 10],
         maxRows = Infinity,
-        containerPadding = margin,
-        extraMenuItems
+        containerPadding = [0, 0],
+        extraMenuItems,
+        showAddViewButtonWhenEmpty = true,
+        droppable = false,
+        onDropDone,
+        onDropDragOver
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -182,11 +235,15 @@ export class DashCanvasModel
         this.maxRows = maxRows;
         this.containerPadding = containerPadding;
         this.margin = margin;
-        this.containerPadding = containerPadding;
         this.compact = compact;
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
+        this.showAddViewButtonWhenEmpty = showAddViewButtonWhenEmpty;
+        this.droppable = droppable;
+        this.onDropDone = onDropDone;
+        // Override default onDropDragOver if provided
+        if (onDropDragOver) this.onDropDragOver = onDropDragOver;
 
         this.loadState(initialState);
         this.state = this.buildState();
@@ -312,6 +369,56 @@ export class DashCanvasModel
         this.getView(id)?.ensureVisible();
     }
 
+    onDrop(rglLayout: LayoutItem[], layoutItem: LayoutItem, evt: Event) {
+        throwIf(
+            !this.draggedInView,
+            `No draggedInView set on DashCanvasModel prior to onDrop operation.
+            Typically a developer would set this in response to dragstart events from
+             a DashViewTray or similar component.`
+        );
+
+        const {viewSpecId, title, state} = this.draggedInView,
+            layout = omit(layoutItem, 'i'),
+            newViewModel: DashCanvasViewModel = this.addViewInternal(viewSpecId, {
+                title,
+                state,
+                layout
+            }),
+            droppingItem: any = rglLayout.find(it => it.i === this.DROPPING_ELEM_ID);
+
+        // Change ID of dropping item to the new view's id
+        // so that the new view goes where the dropping item is.
+        droppingItem.i = newViewModel.id;
+
+        // must wait a tick for RGL to settle
+        wait().then(() => {
+            this.draggedInView = null;
+            this.onRglLayoutChange(rglLayout);
+            this.onDropDone?.(newViewModel);
+        });
+    }
+
+    setDraggedInView(view?: DashCanvasItemState) {
+        this.draggedInView = view;
+    }
+
+    onDropDragOver(evt: DragEvent):
+        | {
+              w?: number;
+              h?: number;
+              dragOffsetX?: number;
+              dragOffsetY?: number;
+          }
+        | false
+        | void {
+        if (!this.draggedInView) return false;
+
+        return {
+            w: this.draggedInView.layout.w,
+            h: this.draggedInView.layout.h
+        };
+    }
+
     //------------------------
     // Persistable Interface
     //------------------------
@@ -384,13 +491,19 @@ export class DashCanvasModel
         return model;
     }
 
-    onRglLayoutChange(rglLayout) {
+    onRglLayoutChange(rglLayout: LayoutItem[]) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
+
+        // Early out if RGL is changing layout as user is dragging droppable
+        // item around the canvas.  This will be called again once dragging
+        // has stopped and user has dropped the item onto the canvas.
+        if (rglLayout.some(it => it.i === this.DROPPING_ELEM_ID)) return;
+
         this.setLayout(rglLayout);
     }
 
     @action
-    private setLayout(layout) {
+    private setLayout(layout: LayoutItem[]) {
         layout = sortBy(layout, 'i');
         const layoutChanged = !isEqual(layout, this.layout);
         if (!layoutChanged) return;
@@ -492,6 +605,7 @@ export class DashCanvasModel
                 }
             }
         }
+
         const checkPosition = (originX, originY) => {
             for (let y = originY; y < originY + height; y++) {
                 for (let x = originX; x < originX + width; x++) {

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

@@ -81,13 +81,13 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
      * A toolbar to be docked at the top of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 
     /**
      * A toolbar to be docked at the bottom of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
 
     /** Title text added to the panel's header. */
     title?: ReactNode;

package/desktop/cmp/rest/RestGrid.ts

@@ -7,7 +7,7 @@
 
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, PlainObject, Some, uses} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, PlainObject, uses} from '@xh/hoist/core';
 import {MaskProps} from '@xh/hoist/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
@@ -21,8 +21,7 @@ import {restGridToolbar} from './impl/RestGridToolbar';
 import {RestGridModel} from './RestGridModel';
 
 export interface RestGridProps
-    extends HoistProps<RestGridModel>,
-        Omit<PanelProps, 'model' | 'modelConfig' | 'modelRef'> {
+    extends HoistProps<RestGridModel>, Omit<PanelProps, 'model' | 'modelConfig' | 'modelRef'> {
     /**
      * This constitutes an 'escape hatch' for applications that need to get to the underlying
      * AG Grid API. Use with care - settings made here might be overwritten and/or interfere with
@@ -34,7 +33,7 @@ export interface RestGridProps
      * Optional components rendered adjacent to the top toolbar's action buttons.
      * See also {@link tbar} to take full control of the toolbar.
      */
-    extraToolbarItems?: Some<ReactNode> | (() => Some<ReactNode>);
+    extraToolbarItems?: ReactNode | (() => ReactNode);
 
     /** Classname to be passed to RestForm. */
     formClassName?: string;
@@ -51,7 +50,7 @@ export interface RestGridProps
      * configs `toolbarActions`, `filterFields`, and `showRefreshButton`. If specified as an array,
      * will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 }
 
 export const [RestGrid, restGrid] = hoistCmp.withFactory<RestGridProps>({

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

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';
+    }
+}