Dash Canvas: add ability to drop widgets in from outside. #4183

cnrudd · 2025-12-17T19:25:57Z

Main Change:

Dash Canvas supports dragging in widgets from a "widget well".
review with new toolbox branch: https://github.com/xh/toolbox/tree/drag-onto-dash-canvas

Upgrades react-grid-layout to v2.2.2 to get their latest fixes.

now supports 'wrap' compacting (probably not likely to be used very often)

Brings in 3 new hoist components:

DashCanvasWidgetWell
CollapsibleSet
CollapsibleSetButton

Brings in 2 new tags:

fieldset
legend

Hoist P/R Checklist

Pull request authors: Review and check off the below. Items that do not apply can also be
checked off to indicate they have been considered. If unclear if a step is relevant, please leave
unchecked and note in comments.

Caught up with develop branch as of last change.
Added CHANGELOG entry
Reviewed for breaking changes: NOT a breaking change, surprisingly
Updated doc comments.
Reviewed and tested on Mobile: not required.
Created Toolbox branch/PR : Reimplement dash canvas panel demo to incorporate drop in widgets example toolbox#786

If your change is still a WIP, please use the "Create draft pull request" option in the split
button below to indicate it is not ready yet for a final review.

Pull request reviewers: when merging this P/R, please consider using a squash commit to
collapse multiple intermediate commits into a single commit representing the overall feature
change. This helps keep the commit log clean and easy to scan across releases. PRs containing a
single commit should be rebased when possible.

…e implemented via rglOptions escape hatch.

lbwexler · 2025-12-19T19:06:17Z

core/elem.ts

 //------------------------
 // Implementation
 //------------------------
-function normalizeArgs(args: any[], type: any) {


nice cleanup!

lbwexler · 2025-12-19T19:07:15Z

core/elem.ts

+    items?: ReactNode;

    /**  Equivalent to `items`, offered for code clarity when only one child is needed. */
-    item?: Some<ReactNode>;


I could go either way here.

desktop/cmp/dash/canvas/DashCanvasModel.ts

lbwexler · 2025-12-19T19:15:13Z

desktop/cmp/dash/canvas/DashCanvasModel.ts

+     * 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.


Last sentence is implicit.

What is the meaning of false and void here for this type?

I added more to that doc block to answer those questions.

lbwexler

can we have a separate PR for (a) the upgrade and proposed hoist changes and (b) the ability to drop widgets?

lbwexler · 2025-12-19T19:16:23Z

desktop/cmp/dash/canvas/DashCanvasModel.ts

+     * 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.


What is the meaning of false and void here for this type?

desktop/cmp/dash/canvas/DashCanvasModel.ts

lbwexler · 2025-12-19T19:49:23Z

desktop/cmp/dash/canvas/DashCanvasModel.ts

    maxRows: number;
+    droppable: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;


I find these name a bit confusing.

"droppable" might be "allowsDrop"

"draggedInView" might be 'droppedView'

I have made this change: "droppable" might be "allowsDrop"

I'm not sure changing "draggedInView" to 'droppedView' is correct. "draggedInView" refers to a view that has been dragged in, but not yet dropped.

lbwexler · 2025-12-19T19:52:02Z

desktop/cmp/dash/canvas/DashCanvasModel.ts

+    }
+
+    onDropDragOver(evt: DragEvent):
+        | {


Need a type for the return -- if going to appear like this.

GridBackground from 'react-grid-layout/extras';

# Conflicts: # CHANGELOG.md

+ cancel drop if no RGL droppingItem

cnrudd · 2025-12-23T18:28:05Z

can we have a separate PR for (a) the upgrade and proposed hoist changes and (b) the ability to drop widgets?
Sure, of course, no problem.
Upgrade only PR: #4190

"Warning:(65, 11) Dependency npm:qs:6.14.0 is vulnerable CVE-2025-15284 7.5 arrayLimit bypass in bracket notation allows DoS via memory exhaustion Results powered by Mend.io"

cnrudd · 2026-01-02T15:31:25Z

package.json

    "numbro": "~2.5.0",
    "onsenui": "~2.12.8",
-    "qs": "~6.14.0",
+    "qs": "~6.14.1",


Update qs dep to resolve this code analysis warning:
"Warning:(65, 11) Dependency npm:qs:6.14.0 is vulnerable CVE-2025-15284 7.5 arrayLimit bypass in bracket notation allows DoS via memory exhaustion Results powered by Mend.io"

cnrudd · 2026-01-02T15:31:50Z

cmp/tab/TabContainerModel.ts

    /**
     * @param config - TabContainer configuration.
-     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.


Unrelated linting change

cnrudd · 2026-01-02T15:32:04Z

cmp/grid/GridModel.ts

    /**
     * Begin an inline editing session.
-     * @param record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord
+     * @param opts.record - StoreRecord/ID to edit. If unspecified, the first selected StoreRecord


Unrelated linting change

…quently add wrap compact option, and use new dropConfig.onDragOver key.

# Conflicts: # CHANGELOG.md

DashCanvasWidgetWell CollapsibleFieldSet FieldsetCollapseButton

+ add support for intent & tooltip

amcclain · 2026-01-20T20:10:54Z

For discussion - would something like widgetChooser be a bit more natural than widgetWell?

cnrudd added 12 commits November 4, 2025 14:15

Handle RGL dropping item in get rglLayout

f4ede20

DashCanvas: Support dragging widget into and dropping to add

0ed3722

Merge branch 'develop' into drag-onto-dash-canvas

a642e7b

Merge branch 'develop' into drag-onto-dash-canvas

ec3613d

Merge branch 'develop' into drag-onto-dash-canvas

6837432

Merge branch 'develop' into drag-onto-dash-canvas

c788fc6

Add typings

651eaa8

Make droppable a first class option on DashCanvas, not something to b…

fb2ab47

…e implemented via rglOptions escape hatch.

Merge branch 'develop' into drag-onto-dash-canvas

e945fa8

Merge branch 'develop' into drag-onto-dash-canvas

5df8688

Merge branch 'develop' into drag-onto-dash-canvas

9b9bdb0

Update react-grid-layout to v2.1.0

d7e18d4

cnrudd mentioned this pull request Dec 17, 2025

Reimplement dash canvas panel demo to incorporate drop in widgets example xh/toolbox#786

Open

cnrudd added 7 commits December 17, 2025 14:31

CHANGELOG.md entry

f7daaeb

<Some> not needed since ReactNode includes Iterable<ReactNode>

7bdcf9b

Remove unused argument type from normalizeArgs method.

485cea6

Make not droppable if contentLocked.

9d77f34

Merge branch 'develop' into drag-onto-dash-canvas

fb80f8a

fix spreading of rglOptions

1e0c6c6

fix typing of rglOptions

d2a3610

lbwexler reviewed Dec 19, 2025

View reviewed changes

desktop/cmp/dash/canvas/DashCanvasModel.ts Outdated Show resolved Hide resolved

lbwexler reviewed Dec 19, 2025

View reviewed changes

cnrudd added 3 commits December 23, 2025 10:51

switch to "moduleResolution": "bundler", triggered by import of

e77515d

GridBackground from 'react-grid-layout/extras';

Merge branch 'develop' into drag-onto-dash-canvas

bf8cfab

# Conflicts: # CHANGELOG.md

support 2 compact strategies + support toggle grid background

12a8c8b

cnrudd changed the title ~~React Grid Layout upgrade to 2.1.0 + add ability to drop widgets in from outside.~~ React Grid Layout upgrade to 2.1.1 + add ability to drop widgets in from outside. Dec 23, 2025

comment removed as per Lee's suggestion

864b789

cnrudd added 2 commits December 23, 2025 11:46

replace droppable with allowsDrop

9d1427a

create type OnDropDragOverResult

7b558ab

+ cancel drop if no RGL droppingItem

cnrudd marked this pull request as draft December 23, 2025 18:53

cnrudd changed the title ~~React Grid Layout upgrade to 2.1.1 + add ability to drop widgets in from outside.~~ Dash Canvas: add ability to drop widgets in from outside. Dec 23, 2025

cnrudd added 2 commits January 2, 2026 10:23

merge in latest from develop

ea98f00

Update qs dep to resolve this code analysis warning:

b8fbe5f

"Warning:(65, 11) Dependency npm:qs:6.14.0 is vulnerable CVE-2025-15284 7.5 arrayLimit bypass in bracket notation allows DoS via memory exhaustion Results powered by Mend.io"

cnrudd commented Jan 2, 2026

View reviewed changes

cnrudd added 5 commits January 2, 2026 13:02

Update to "react-grid-layout": "2.2.2" to get latest fixes, and conse…

685b9ee

…quently add wrap compact option, and use new dropConfig.onDragOver key.

Merge branch 'refs/heads/develop' into drag-onto-dash-canvas

e5a8f51

# Conflicts: # CHANGELOG.md

2 new html tags

4e7ad50

Merge branch 'refs/heads/develop' into drag-onto-dash-canvas

c504c91

# Conflicts: # CHANGELOG.md

new hoist components:

4d2243b

DashCanvasWidgetWell CollapsibleFieldSet FieldsetCollapseButton

cnrudd marked this pull request as ready for review January 8, 2026 19:38

cnrudd and others added 10 commits January 8, 2026 14:42

add to docs.

38208f1

Rename CollapsibleFieldset to CollapsibleBox,

6d8fa28

+ add support for intent & tooltip

Default to flex box rendering for collapsibleBox, not block.

a013eec

Support flexDirection prop on DashCanvasWidgetWell

66b47b0

Merge branch 'develop' into drag-onto-dash-canvas

dee8742

add testId support

e4ef652

Merge branch 'develop' into drag-onto-dash-canvas

2b1d463

support collapsibleSet on mobile by creating a dynamic button

233821d

Add support for renderMode

a577133

Merge remote-tracking branch 'origin/develop' into drag-onto-dash-canvas

c93d120

amcclain mentioned this pull request Jan 20, 2026

New Card and FormFieldSet components #4204

Draft

6 tasks

Dash Canvas: add ability to drop widgets in from outside. #4183

Are you sure you want to change the base?

Dash Canvas: add ability to drop widgets in from outside. #4183

Uh oh!

Conversation

cnrudd commented Dec 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Main Change:

Upgrades react-grid-layout to v2.2.2 to get their latest fixes.

Brings in 3 new hoist components:

Brings in 2 new tags:

Hoist P/R Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lbwexler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cnrudd commented Dec 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amcclain commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cnrudd commented Dec 17, 2025 •

edited

Loading

cnrudd commented Dec 23, 2025 •

edited

Loading