@xh/hoist 79.0.0-SNAPSHOT.1766098199305 → 79.0.0-SNAPSHOT.1766100504431

package/CHANGELOG.md

@@ -20,6 +20,10 @@
 * `TabContainerConfig.switcher` has been repurposed to accept a `TabSwitcherConfig`. To pass
   `TabSwitcherProps` via a parent `TabContainer`, use `TabContainerProps.switcher`.
 
+### 🎁 New Features
+
+* DashCanvas component now supports dragging and dropping widgets in from an external container.
+
 ### 🐞 Bug Fixes
 
 * Fixed column chooser to display columns in the same order as they appear in the grid.
@@ -34,6 +38,10 @@
     * `GroupingChooserProps.popoverTitle` - use `editorTitle`
     * `RelativeTimestampProps.options` - provide directly as top-level props
 
+### 📚 Libraries
+
+* react-grid-layout `1.5.0 → 2.1.0`
+
 ## 78.1.4 - 2025-12-05
 
 ### 🐞 Bug Fixes

package/build/types/core/elem.d.ts

@@ -1,6 +1,6 @@
 import { TEST_ID } from '@xh/hoist/utils/js';
 import { ComponentType, JSX, Key, ReactElement, ReactNode } from 'react';
-import { PlainObject, Some, Thunkable } from './types/Types';
+import { PlainObject, Thunkable } from './types/Types';
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
  * provide a well-formatted, declarative, native javascript approach to configuring Elements and
@@ -26,9 +26,9 @@ import { PlainObject, Some, Thunkable } from './types/Types';
  */
 export type ElementSpec<P> = Omit<P, 'items' | 'item' | 'omit'> & {
     /** Child Element(s). Equivalent provided as Rest Arguments to React.createElement.*/
-    items?: Some<ReactNode>;
+    items?: ReactNode;
     /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: Some<ReactNode>;
+    item?: ReactNode;
     /** True to exclude the Element. */
     omit?: Thunkable<boolean>;
     /** React key for this component. */

package/build/types/desktop/cmp/dash/canvas/DashCanvas.d.ts

@@ -1,8 +1,9 @@
+import { type GridLayoutProps } from 'react-grid-layout';
 import { HoistProps, TestSupportProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import type { ReactGridLayoutProps } from 'react-grid-layout';
 import { DashCanvasModel } from './DashCanvasModel';
 import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import './DashCanvas.scss';
 export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSupportProps {
     /**
@@ -11,7 +12,7 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
      * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: GridLayoutProps;
 }
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.

package/build/types/desktop/cmp/dash/canvas/DashCanvasModel.d.ts

@@ -1,3 +1,5 @@
+import { DragEvent } from 'react';
+import type { LayoutItem } from 'react-grid-layout';
 import { Persistable, PersistableState } from '@xh/hoist/core';
 import { DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel } from '../';
 import '@xh/hoist/desktop/register';
@@ -18,8 +20,35 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     margin?: [number, number];
     /** 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 {
     layout: DashCanvasItemLayout;
@@ -45,7 +74,12 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     compact: boolean;
     margin: [number, number];
     containerPadding: [number, number];
+    showAddViewButtonWhenEmpty: boolean;
+    DROPPING_ELEM_ID: string;
     maxRows: number;
+    droppable: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;
     /** Current number of rows in canvas */
     get rows(): number;
     get isEmpty(): boolean;
@@ -54,7 +88,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     isResizing: boolean;
     private isLoadingState;
     get rglLayout(): any[];
-    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems, showAddViewButtonWhenEmpty, droppable, onDropDone, onDropDragOver }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -92,6 +126,14 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     renameView(id: string): void;
     /** Scrolls a DashCanvasView into view. */
     ensureViewVisible(id: string): void;
+    onDrop(rglLayout: LayoutItem[], layoutItem: LayoutItem, evt: Event): void;
+    setDraggedInView(view?: DashCanvasItemState): void;
+    onDropDragOver(evt: DragEvent): {
+        w?: number;
+        h?: number;
+        dragOffsetX?: number;
+        dragOffsetY?: number;
+    } | false | void;
     getPersistableState(): PersistableState<{
         state: DashCanvasItemState[];
     }>;
@@ -100,7 +142,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     }>): void;
     private getLayoutFromPosition;
     private addViewInternal;
-    onRglLayoutChange(rglLayout: any): void;
+    onRglLayoutChange(rglLayout: LayoutItem[]): void;
     private setLayout;
     private loadState;
     private buildState;

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -42,12 +42,12 @@ 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;
     /** Title to be used when the panel is collapsed. Defaults to `title`. */

package/build/types/desktop/cmp/rest/RestGrid.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps, PlainObject, Some } from '@xh/hoist/core';
+import { HoistProps, PlainObject } from '@xh/hoist/core';
 import { PanelProps } from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import { ReactElement, ReactNode } from 'react';
@@ -14,7 +14,7 @@ export interface RestGridProps extends HoistProps<RestGridModel>, Omit<PanelProp
      * 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;
     /**
@@ -28,6 +28,6 @@ export interface RestGridProps extends HoistProps<RestGridModel>, Omit<PanelProp
      * 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 declare const RestGrid: import("react").FC<RestGridProps>, restGrid: import("@xh/hoist/core").ElementFactory<RestGridProps>;

package/build/types/mobile/cmp/panel/Panel.d.ts

@@ -4,7 +4,7 @@ import { ReactNode, ReactElement } from 'react';
 import './Panel.scss';
 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;
     /** Items to be added to the right-side of the panel's header. */
@@ -30,7 +30,7 @@ export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** Allow the panel to scroll vertically */
     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/core/elem.ts

@@ -15,7 +15,7 @@ import {
     ReactElement,
     ReactNode
 } from 'react';
-import {PlainObject, Some, Thunkable} from './types/Types';
+import {PlainObject, Thunkable} from './types/Types';
 
 /**
  * Alternative format for specifying React Elements in render functions. This type is designed to
@@ -45,10 +45,10 @@ export type ElementSpec<P> = Omit<P, 'items' | 'item' | 'omit'> & {
     // Enhanced attributes to support element factory
     //---------------------------------------------
     /** Child Element(s). Equivalent provided as Rest Arguments to React.createElement.*/
-    items?: Some<ReactNode>;
+    items?: ReactNode;
 
     /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: Some<ReactNode>;
+    item?: ReactNode;
 
     /** True to exclude the Element. */
     omit?: Thunkable<boolean>;
@@ -126,7 +126,7 @@ export function elementFactory<C extends ReactComponent>(component: C): ElementF
 export function elementFactory<P extends PlainObject>(component: ReactComponent): ElementFactory<P>;
 export function elementFactory(component: ReactComponent): ElementFactory {
     const ret = function (...args) {
-        return createElement(component, normalizeArgs(args, component));
+        return createElement(component, normalizeArgs(args));
     };
     ret.isElementFactory = true;
     return ret;
@@ -135,7 +135,7 @@ export function elementFactory(component: ReactComponent): ElementFactory {
 //------------------------
 // Implementation
 //------------------------
-function normalizeArgs(args: any[], type: any) {
+function normalizeArgs(args: any[]) {
     const len = args.length;
     if (len === 0) return {};
     if (len === 1) {

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

@@ -4,6 +4,16 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {omit} from 'lodash';
+import {DragEvent} from 'react';
+import ReactGridLayout, {
+    type LayoutItem,
+    type GridLayoutProps,
+    useContainerWidth,
+    noCompactor,
+    verticalCompactor
+} from 'react-grid-layout';
+
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
@@ -20,13 +30,12 @@ import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {consumeEvent, TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
-import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
-import type {ReactGridLayoutProps} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
 import {dashCanvasContextMenu} from './impl/DashCanvasContextMenu';
 import {dashCanvasView} from './impl/DashCanvasView';
 
 import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import './DashCanvas.scss';
 
 export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSupportProps {
@@ -36,7 +45,7 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
      * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: GridLayoutProps;
 }
 
 /**
@@ -58,7 +67,14 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            [padX, padY] = model.containerPadding;
+            [padX, padY] = model.containerPadding,
+            topLevelRglOptions: Partial<GridLayoutProps> = omit(rglOptions ?? {}, [
+                'gridConfig',
+                'dragConfig',
+                'resizeConfig',
+                'dropConfig'
+            ]),
+            {width, containerRef, mounted} = useContainerWidth();
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -69,37 +85,55 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isResizable ? `${className}--resizable` : null
                 ),
                 style: {padding: `${padY}px ${padX}px`},
-                ref: composeRefs(ref, model.ref),
+                ref: composeRefs(ref, model.ref, containerRef),
                 onContextMenu: e => onContextMenu(e, model),
-                items: [
-                    reactGridLayout({
-                        layout: model.rglLayout,
-                        cols: model.columns,
-                        rowHeight: model.rowHeight,
-                        isDraggable,
-                        isResizable,
-                        compactType: model.compact ? 'vertical' : null,
-                        margin: model.margin,
-                        maxRows: model.maxRows,
-                        containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990
-                        autoSize: true,
-                        isBounded: true,
-                        draggableHandle:
-                            '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
-                        draggableCancel: '.xh-button',
-                        onLayoutChange: layout => model.onRglLayoutChange(layout),
-                        onResizeStart: () => (model.isResizing = true),
-                        onResizeStop: () => (model.isResizing = false),
-                        items: model.viewModels.map(vm =>
-                            div({
-                                key: vm.id,
-                                item: dashCanvasView({model: vm})
-                            })
-                        ),
-                        ...rglOptions
-                    }),
-                    emptyContainerOverlay()
-                ],
+                items: mounted
+                    ? [
+                          reactGridLayout({
+                              layout: model.rglLayout,
+                              width,
+                              gridConfig: {
+                                  cols: model.columns,
+                                  rowHeight: model.rowHeight,
+                                  margin: model.margin,
+                                  maxRows: model.maxRows,
+                                  ...(rglOptions?.gridConfig ?? {})
+                              },
+                              dragConfig: {
+                                  enabled: isDraggable,
+                                  handle: '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
+                                  cancel: '.xh-button',
+                                  bounded: true,
+                                  ...(rglOptions?.dragConfig ?? {})
+                              },
+                              resizeConfig: {
+                                  enabled: isResizable,
+                                  ...(rglOptions?.resizeConfig ?? {})
+                              },
+                              dropConfig: {
+                                  enabled: model.contentLocked ? false : model.droppable,
+                                  defaultItem: {w: 6, h: 6},
+                                  ...(rglOptions?.dropConfig ?? {})
+                              },
+                              compactor: model.compact ? verticalCompactor : noCompactor,
+                              onLayoutChange: (layout: LayoutItem[]) =>
+                                  model.onRglLayoutChange(layout),
+                              onResizeStart: () => (model.isResizing = true),
+                              onResizeStop: () => (model.isResizing = false),
+                              children: model.viewModels.map(vm =>
+                                  div({
+                                      key: vm.id,
+                                      item: dashCanvasView({model: vm})
+                                  })
+                              ),
+                              onDropDragOver: (evt: DragEvent) => model.onDropDragOver(evt),
+                              onDrop: (layout: LayoutItem[], layoutItem: LayoutItem, evt: Event) =>
+                                  model.onDrop(layout, layoutItem, evt),
+                              ...topLevelRglOptions
+                          }),
+                          emptyContainerOverlay({omit: !model.showAddViewButtonWhenEmpty})
+                      ]
+                    : [],
                 [TEST_ID]: testId
             })
         });
@@ -147,4 +181,4 @@ const onContextMenu = (e, model) => {
     }
 };
 
-const reactGridLayout = elementFactory(WidthProvider(ReactGridLayout));
+const reactGridLayout = elementFactory<GridLayoutProps>(ReactGridLayout);

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/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;