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

package/CHANGELOG.md

@@ -20,10 +20,6 @@
 * `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.
@@ -38,10 +34,6 @@
     * `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, Thunkable } from './types/Types';
+import { PlainObject, Some, 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, 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?: ReactNode;
+    items?: Some<ReactNode>;
     /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: ReactNode;
+    item?: Some<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,9 +1,8 @@
-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 {
     /**
@@ -12,7 +11,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?: GridLayoutProps;
+    rglOptions?: ReactGridLayoutProps;
 }
 /**
  * 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,5 +1,3 @@
-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';
@@ -20,35 +18,8 @@ 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. Default `[0, 0]`. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     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;
@@ -74,12 +45,7 @@ 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;
@@ -88,7 +54,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, showAddViewButtonWhenEmpty, droppable, onDropDone, onDropDragOver }: DashCanvasConfig);
+    constructor({ viewSpecs, viewSpecDefaults, initialState, layoutLocked, contentLocked, renameLocked, persistWith, emptyText, addViewButtonText, columns, rowHeight, compact, margin, maxRows, containerPadding, extraMenuItems }: DashCanvasConfig);
     /** Removes all views from the canvas */
     clear(): void;
     /**
@@ -126,14 +92,6 @@ 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[];
     }>;
@@ -142,7 +100,7 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     }>): void;
     private getLayoutFromPosition;
     private addViewInternal;
-    onRglLayoutChange(rglLayout: LayoutItem[]): void;
+    onRglLayoutChange(rglLayout: any): 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?: ReactNode;
+    tbar?: Some<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?: ReactNode;
+    bbar?: Some<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 } from '@xh/hoist/core';
+import { HoistProps, PlainObject, Some } 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?: ReactNode | (() => ReactNode);
+    extraToolbarItems?: Some<ReactNode> | (() => Some<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?: ReactNode;
+    tbar?: Some<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?: ReactNode;
+    bbar?: Some<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?: ReactNode;
+    tbar?: Some<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, Thunkable} from './types/Types';
+import {PlainObject, Some, 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?: ReactNode;
+    items?: Some<ReactNode>;
 
     /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: ReactNode;
+    item?: Some<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));
+        return createElement(component, normalizeArgs(args, component));
     };
     ret.isElementFactory = true;
     return ret;
@@ -135,7 +135,7 @@ export function elementFactory(component: ReactComponent): ElementFactory {
 //------------------------
 // Implementation
 //------------------------
-function normalizeArgs(args: any[]) {
+function normalizeArgs(args: any[], type: any) {
     const len = args.length;
     if (len === 0) return {};
     if (len === 1) {

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

@@ -4,16 +4,6 @@
  *
  * 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';
@@ -30,12 +20,13 @@ 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 {
@@ -45,7 +36,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?: GridLayoutProps;
+    rglOptions?: ReactGridLayoutProps;
 }
 
 /**
@@ -67,14 +58,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            [padX, padY] = model.containerPadding,
-            topLevelRglOptions: Partial<GridLayoutProps> = omit(rglOptions ?? {}, [
-                'gridConfig',
-                'dragConfig',
-                'resizeConfig',
-                'dropConfig'
-            ]),
-            {width, containerRef, mounted} = useContainerWidth();
+            [padX, padY] = model.containerPadding;
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -85,55 +69,37 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isResizable ? `${className}--resizable` : null
                 ),
                 style: {padding: `${padY}px ${padX}px`},
-                ref: composeRefs(ref, model.ref, containerRef),
+                ref: composeRefs(ref, model.ref),
                 onContextMenu: e => onContextMenu(e, model),
-                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})
-                      ]
-                    : [],
+                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()
+                ],
                 [TEST_ID]: testId
             })
         });
@@ -181,4 +147,4 @@ const onContextMenu = (e, model) => {
     }
 };
 
-const reactGridLayout = elementFactory<GridLayoutProps>(ReactGridLayout);
+const reactGridLayout = elementFactory(WidthProvider(ReactGridLayout));

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

@@ -4,9 +4,6 @@
  *
  * 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 '../';
@@ -19,7 +16,6 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
-    omit,
     uniqBy,
     times,
     without,
@@ -52,42 +48,8 @@ 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. Default `[0, 0]`. */
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
     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 {
@@ -120,16 +82,11 @@ 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 {
@@ -149,27 +106,21 @@ export class DashCanvasModel
     private isLoadingState: boolean;
 
     get rglLayout() {
-        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);
+        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
+            };
+        });
     }
 
     constructor({
@@ -187,12 +138,8 @@ export class DashCanvasModel
         compact = true,
         margin = [10, 10],
         maxRows = Infinity,
-        containerPadding = [0, 0],
-        extraMenuItems,
-        showAddViewButtonWhenEmpty = true,
-        droppable = false,
-        onDropDone,
-        onDropDragOver
+        containerPadding = margin,
+        extraMenuItems
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -235,15 +182,11 @@ 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();
@@ -369,56 +312,6 @@ 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
     //------------------------
@@ -491,19 +384,13 @@ export class DashCanvasModel
         return model;
     }
 
-    onRglLayoutChange(rglLayout: LayoutItem[]) {
+    onRglLayoutChange(rglLayout) {
         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: LayoutItem[]) {
+    private setLayout(layout) {
         layout = sortBy(layout, 'i');
         const layoutChanged = !isEqual(layout, this.layout);
         if (!layoutChanged) return;
@@ -605,7 +492,6 @@ 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?: ReactNode;
+    tbar?: Some<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?: ReactNode;
+    bbar?: Some<ReactNode>;
 
     /** Title text added to the panel's header. */
     title?: ReactNode;