@xh/hoist 79.0.0-SNAPSHOT.1765212789495 → 79.0.0-SNAPSHOT.1765213676051

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

@@ -4,6 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import type {DragOverEvent, Layout} 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 +17,7 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
+    omit,
     uniqBy,
     times,
     without,
@@ -50,6 +52,31 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
 
     /** 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 'w' and 'h' properties indicating the desired width and height
+     * (in grid units) of the dropping placeholder. If not provided, Hoist's own default logic will be used.
+     */
+    onDropDragOver?: (e: DragOverEvent) => {w?: number; h?: number} | false | undefined;
+
+    /**
+     * Whether an overlay with an Add View button should be rendered
+     * when the canvas is empty. Default true.
+     */
+    showAddViewButtonWhenEmpty?: boolean;
 }
 
 export interface DashCanvasItemState {
@@ -86,7 +113,12 @@ export class DashCanvasModel
     //-----------------------------
     // Public properties
     //-----------------------------
+    DROPPING_ELEM_ID = '__dropping-elem__';
     maxRows: number;
+    showAddViewButtonWhenEmpty: boolean;
+    droppable: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;
 
     /** Current number of rows in canvas */
     get rows(): number {
@@ -106,21 +138,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({
@@ -139,7 +177,11 @@ export class DashCanvasModel
         margin = [10, 10],
         maxRows = Infinity,
         containerPadding = margin,
-        extraMenuItems
+        extraMenuItems,
+        showAddViewButtonWhenEmpty = true,
+        droppable = false,
+        onDropDone,
+        onDropDragOver
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -187,6 +229,11 @@ export class DashCanvasModel
         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 +359,31 @@ export class DashCanvasModel
         this.getView(id)?.ensureVisible();
     }
 
+    onDrop(rglLayout: Layout[], layoutItem: Layout, 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 = this.doDrop(viewSpecId, {title, state, layout}, rglLayout);
+
+        this.draggedInView = null;
+        this.onDropDone?.(newViewModel);
+    }
+
+    setDraggedInView(view?: DashCanvasItemState) {
+        this.draggedInView = view;
+    }
+
+    onDropDragOver(e: DragOverEvent): {w?: number; h?: number} | false | undefined {
+        if (!this.draggedInView) return false;
+        return {w: 6, h: 6};
+    }
+
     //------------------------
     // Persistable Interface
     //------------------------
@@ -327,6 +399,24 @@ export class DashCanvasModel
     //------------------------
     // Implementation
     //------------------------
+    @action
+    private doDrop(
+        specId: string,
+        opts: {
+            title: string;
+            state: any;
+            layout: DashCanvasItemLayout;
+        },
+        rglLayout: Layout[]
+    ): DashCanvasViewModel {
+        const newViewModel: DashCanvasViewModel = this.addViewInternal(specId, opts),
+            droppingItem: any = rglLayout.find(it => it.i === this.DROPPING_ELEM_ID);
+
+        droppingItem.i = newViewModel.id;
+        this.onRglLayoutChange(rglLayout);
+        return newViewModel;
+    }
+
     private getLayoutFromPosition(position: string, specId: string) {
         switch (position) {
             case 'first':
@@ -384,8 +474,14 @@ export class DashCanvasModel
         return model;
     }
 
-    onRglLayoutChange(rglLayout) {
+    onRglLayoutChange(rglLayout: Layout[]) {
         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);
     }
 

package/desktop/cmp/grid/find/GridFindField.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import composeRefs from '@seznam/compose-react-refs/composeRefs';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {hbox, span, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, LayoutProps, useLocalModel} from '@xh/hoist/core';
@@ -61,7 +60,7 @@ export interface GridFindFieldProps extends TextInputProps, LayoutProps {
 export const [GridFindField, gridFindField] = hoistCmp.withFactory<GridFindFieldProps>({
     displayName: 'GridFindField',
     className: 'xh-grid-find-field',
-    render({className, model, ...props}, ref) {
+    render({className, model, ...props}) {
         let [layoutProps, restProps] = splitLayoutProps(props);
         const impl = useLocalModel(GridFindFieldImplModel);
 
@@ -73,7 +72,7 @@ export const [GridFindField, gridFindField] = hoistCmp.withFactory<GridFindField
                 textInput({
                     model: impl,
                     bind: 'query',
-                    ref: composeRefs(impl.inputRef, ref),
+                    ref: impl.inputRef,
                     commitOnChange: true,
                     leftIcon: Icon.search(),
                     enableClear: true,

package/desktop/cmp/grid/impl/colchooser/ColChooserModel.ts

@@ -8,7 +8,6 @@ import {GridModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {LeftRightChooserModel} from '@xh/hoist/desktop/cmp/leftrightchooser';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {sortBy} from 'lodash';
 
 /**
  * State management for the ColChooser component.
@@ -56,8 +55,6 @@ export class ColChooserModel extends HoistModel {
             rightTitle: 'Displayed Columns',
             rightEmptyText: 'No columns will be visible.',
             leftSorted: true,
-            leftSortBy: 'text',
-            rightSorted: true,
             rightGroupingEnabled: false,
             onChange: () => {
                 if (this.commitOnChange) this.commit();
@@ -98,7 +95,7 @@ export class ColChooserModel extends HoistModel {
             }
         });
 
-        gridModel.updateColumnState(colChanges);
+        gridModel.applyColumnStateChanges(colChanges);
         if (autosizeOnCommit && colChanges.length) gridModel.autosizeAsync({showMask: true});
     }
 
@@ -114,33 +111,19 @@ export class ColChooserModel extends HoistModel {
     //------------------------
     syncChooserData() {
         const {gridModel, lrModel} = this,
-            hasGrouping = gridModel.getLeafColumns().some(it => it.chooserGroup),
-            columnState = sortBy(gridModel.columnState, it => {
-                const {pinned} = it;
-                if (pinned === 'left') {
-                    return 0;
-                }
-
-                if (pinned === 'right') {
-                    return 2;
-                }
-
-                return 1;
-            });
-
-        const data = columnState.map((it, idx) => {
-            const visible = !it.hidden,
-                col = gridModel.getColumn(it.colId);
+            columns = gridModel.getLeafColumns(),
+            hasGrouping = columns.some(it => it.chooserGroup);
 
+        const data = columns.map(it => {
+            const visible = gridModel.isColumnVisible(it.colId);
             return {
                 value: it.colId,
-                text: col.chooserName,
-                description: col.chooserDescription,
-                group: hasGrouping ? (col.chooserGroup ?? 'Ungrouped') : null,
-                exclude: col.excludeFromChooser,
-                locked: visible && !col.hideable,
-                side: visible ? 'right' : 'left',
-                sortValue: idx
+                text: it.chooserName,
+                description: it.chooserDescription,
+                group: hasGrouping ? (it.chooserGroup ?? 'Ungrouped') : null,
+                exclude: it.excludeFromChooser,
+                locked: visible && !it.hideable,
+                side: visible ? 'right' : 'left'
             } as const;
         });
 

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -26,10 +26,10 @@ import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
-import {elemWithin, getTestId} from '@xh/hoist/utils/js';
+import {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {isEmpty, isNil} from 'lodash';
+import {isEmpty, isNil, isUndefined} from 'lodash';
 import './GroupingChooser.scss';
 import {ReactNode} from 'react';
 
@@ -55,6 +55,9 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     /** Position of popover relative to target button. */
     popoverPosition?: 'bottom' | 'top';
 
+    /** @deprecated - use `editorTitle` instead */
+    popoverTitle?: ReactNode;
+
     /**
      * Width in pixels of the popover menu itself.
      * If unspecified, will default based on favorites enabled status + side.
@@ -86,6 +89,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             favoritesTitle = 'Favorites',
             popoverWidth,
             popoverMinHeight,
+            popoverTitle,
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
@@ -100,6 +104,15 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             favesClassNameMod = `faves-${persistFavorites ? favoritesSide : 'disabled'}`,
             favesTB = isTB(favoritesSide);
 
+        if (!isUndefined(popoverTitle)) {
+            apiDeprecated('GroupingChooser.popoverTitle', {
+                msg: `Update to use 'editorTitle' instead`,
+                v: `v78`,
+                source: GroupingChooser
+            });
+            editorTitle = popoverTitle;
+        }
+
         popoverWidth = popoverWidth || (persistFavorites && !favesTB ? 500 : 250);
 
         return box({

package/desktop/cmp/leftrightchooser/LeftRightChooserModel.ts

@@ -4,9 +4,9 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {GridModel, GridSorterLike} from '@xh/hoist/cmp/grid';
+import {GridModel} from '@xh/hoist/cmp/grid';
 import {div} from '@xh/hoist/cmp/layout';
-import {HoistModel, HSide, managed, Some, XH} from '@xh/hoist/core';
+import {HoistModel, HSide, managed, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
@@ -29,14 +29,12 @@ export interface LeftRightChooserConfig {
 
     leftTitle?: string;
     leftSorted?: boolean;
-    leftSortBy?: Some<GridSorterLike>;
     leftGroupingEnabled?: boolean;
     leftGroupingExpanded?: boolean;
     leftEmptyText?: string;
 
     rightTitle?: string;
     rightSorted?: boolean;
-    rightSortBy?: Some<GridSorterLike>;
     rightGroupingEnabled?: boolean;
     rightGroupingExpanded?: boolean;
     rightEmptyText?: string;
@@ -66,9 +64,6 @@ export interface LeftRightChooserItem {
 
     /* True to exclude the item from the chooser entirely. */
     exclude?: boolean;
-
-    /* Value to use for sorting. If unset then sort order will be based solely on the text value. */
-    sortValue?: any;
 }
 
 /**
@@ -127,14 +122,12 @@ export class LeftRightChooserModel extends HoistModel {
         ungroupedName = 'Ungrouped',
         leftTitle = 'Available',
         leftSorted = false,
-        leftSortBy = ['sortValue', 'text'],
         leftGroupingEnabled = true,
         leftGroupingExpanded = true,
         leftEmptyText = null,
         readonly = false,
         rightTitle = 'Selected',
         rightSorted = false,
-        rightSortBy = ['sortValue', 'text'],
         rightGroupingEnabled = true,
         rightGroupingExpanded = true,
         rightEmptyText = null,
@@ -161,8 +154,7 @@ export class LeftRightChooserModel extends HoistModel {
                 {name: 'group', type: 'string'},
                 {name: 'side', type: 'string'},
                 {name: 'locked', type: 'bool'},
-                {name: 'exclude', type: 'bool'},
-                {name: 'sortValue'}
+                {name: 'exclude', type: 'bool'}
             ]
         };
 
@@ -187,19 +179,15 @@ export class LeftRightChooserModel extends HoistModel {
                 field: 'group',
                 headerName: 'Group',
                 hidden: true
-            },
-            sortValueCol = {
-                field: 'sortValue',
-                hidden: true
             };
 
         this.leftModel = new GridModel({
             store,
             selModel: 'multiple',
-            sortBy: leftSorted ? leftSortBy : null,
+            sortBy: leftSorted ? 'text' : null,
             emptyText: leftEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [leftTextCol, groupCol, sortValueCol],
+            columns: [leftTextCol, groupCol],
             contextMenu: false,
             expandLevel: leftGroupingExpanded ? 1 : 0,
             xhImpl: true
@@ -208,10 +196,10 @@ export class LeftRightChooserModel extends HoistModel {
         this.rightModel = new GridModel({
             store,
             selModel: 'multiple',
-            sortBy: rightSorted ? rightSortBy : null,
+            sortBy: rightSorted ? 'text' : null,
             emptyText: rightEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [rightTextCol, groupCol, sortValueCol],
+            columns: [rightTextCol, groupCol],
             contextMenu: false,
             expandLevel: rightGroupingExpanded ? 1 : 0,
             xhImpl: true

package/kit/ag-grid/index.ts

@@ -60,11 +60,7 @@ export type {
     CellEditingStoppedEvent
 } from 'ag-grid-community';
 
-export type {
-    CustomCellEditorProps,
-    CustomCellRendererProps,
-    CustomMenuItemProps
-} from 'ag-grid-react';
+export type {CustomCellEditorProps, CustomMenuItemProps} from 'ag-grid-react';
 export {useGridCellEditor, useGridMenuItem} from 'ag-grid-react';
 
 const MIN_VERSION = '34.2.0';

package/mobile/cmp/grid/impl/ColChooserModel.ts

@@ -132,7 +132,7 @@ export class ColChooserModel extends HoistModel {
             return {colId, hidden, pinned};
         });
 
-        gridModel.updateColumnState(colChanges);
+        gridModel.applyColumnStateChanges(colChanges);
         if (autosizeOnCommit) gridModel.autosizeAsync({showMask: true});
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765212789495",
+  "version": "79.0.0-SNAPSHOT.1765213676051",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/GridAutosizeService.ts

@@ -79,7 +79,7 @@ export class GridAutosizeService extends HoistService {
 
         runInAction(() => {
             // Apply calculated widths to grid.
-            gridModel.updateColumnState(requiredWidths);
+            gridModel.applyColumnStateChanges(requiredWidths);
             this.logDebug(
                 `Auto-sized ${requiredWidths.length} columns`,
                 `${records.length} records`
@@ -94,7 +94,7 @@ export class GridAutosizeService extends HoistService {
                     fillMode,
                     asManuallySized
                 );
-                gridModel.updateColumnState(fillWidths);
+                gridModel.applyColumnStateChanges(fillWidths);
                 this.logDebug(`Auto-sized ${fillWidths.length} columns using fillMode`);
             }
         });