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

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

@@ -4,7 +4,6 @@
  *
  * 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 '../';
@@ -17,7 +16,6 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {
     defaultsDeep,
     find,
-    omit,
     uniqBy,
     times,
     without,
@@ -52,31 +50,6 @@ 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 {
@@ -113,12 +86,7 @@ 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 {
@@ -138,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({
@@ -177,11 +139,7 @@ export class DashCanvasModel
         margin = [10, 10],
         maxRows = Infinity,
         containerPadding = margin,
-        extraMenuItems,
-        showAddViewButtonWhenEmpty = true,
-        droppable = false,
-        onDropDone,
-        onDropDragOver
+        extraMenuItems
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -229,11 +187,6 @@ 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();
@@ -359,31 +312,6 @@ 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
     //------------------------
@@ -399,24 +327,6 @@ 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':
@@ -474,14 +384,8 @@ export class DashCanvasModel
         return model;
     }
 
-    onRglLayoutChange(rglLayout: Layout[]) {
+    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);
     }
 

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

@@ -4,6 +4,7 @@
  *
  * 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';
@@ -60,7 +61,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}) {
+    render({className, model, ...props}, ref) {
         let [layoutProps, restProps] = splitLayoutProps(props);
         const impl = useLocalModel(GridFindFieldImplModel);
 
@@ -72,7 +73,7 @@ export const [GridFindField, gridFindField] = hoistCmp.withFactory<GridFindField
                 textInput({
                     model: impl,
                     bind: 'query',
-                    ref: impl.inputRef,
+                    ref: composeRefs(impl.inputRef, ref),
                     commitOnChange: true,
                     leftIcon: Icon.search(),
                     enableClear: true,

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

@@ -8,6 +8,7 @@ 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.
@@ -55,6 +56,8 @@ 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();
@@ -95,7 +98,7 @@ export class ColChooserModel extends HoistModel {
             }
         });
 
-        gridModel.applyColumnStateChanges(colChanges);
+        gridModel.updateColumnState(colChanges);
         if (autosizeOnCommit && colChanges.length) gridModel.autosizeAsync({showMask: true});
     }
 
@@ -111,19 +114,33 @@ export class ColChooserModel extends HoistModel {
     //------------------------
     syncChooserData() {
         const {gridModel, lrModel} = this,
-            columns = gridModel.getLeafColumns(),
-            hasGrouping = columns.some(it => it.chooserGroup);
+            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);
 
-        const data = columns.map(it => {
-            const visible = gridModel.isColumnVisible(it.colId);
             return {
                 value: it.colId,
-                text: it.chooserName,
-                description: it.chooserDescription,
-                group: hasGrouping ? (it.chooserGroup ?? 'Ungrouped') : null,
-                exclude: it.excludeFromChooser,
-                locked: visible && !it.hideable,
-                side: visible ? 'right' : 'left'
+                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
             } 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 {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
+import {elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {isEmpty, isNil, isUndefined} from 'lodash';
+import {isEmpty, isNil} from 'lodash';
 import './GroupingChooser.scss';
 import {ReactNode} from 'react';
 
@@ -55,9 +55,6 @@ 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.
@@ -89,7 +86,6 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             favoritesTitle = 'Favorites',
             popoverWidth,
             popoverMinHeight,
-            popoverTitle,
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
@@ -104,15 +100,6 @@ 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} from '@xh/hoist/cmp/grid';
+import {GridModel, GridSorterLike} from '@xh/hoist/cmp/grid';
 import {div} from '@xh/hoist/cmp/layout';
-import {HoistModel, HSide, managed, XH} from '@xh/hoist/core';
+import {HoistModel, HSide, managed, Some, 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,12 +29,14 @@ 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;
@@ -64,6 +66,9 @@ 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;
 }
 
 /**
@@ -122,12 +127,14 @@ 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,
@@ -154,7 +161,8 @@ export class LeftRightChooserModel extends HoistModel {
                 {name: 'group', type: 'string'},
                 {name: 'side', type: 'string'},
                 {name: 'locked', type: 'bool'},
-                {name: 'exclude', type: 'bool'}
+                {name: 'exclude', type: 'bool'},
+                {name: 'sortValue'}
             ]
         };
 
@@ -179,15 +187,19 @@ 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 ? 'text' : null,
+            sortBy: leftSorted ? leftSortBy : null,
             emptyText: leftEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [leftTextCol, groupCol],
+            columns: [leftTextCol, groupCol, sortValueCol],
             contextMenu: false,
             expandLevel: leftGroupingExpanded ? 1 : 0,
             xhImpl: true
@@ -196,10 +208,10 @@ export class LeftRightChooserModel extends HoistModel {
         this.rightModel = new GridModel({
             store,
             selModel: 'multiple',
-            sortBy: rightSorted ? 'text' : null,
+            sortBy: rightSorted ? rightSortBy : null,
             emptyText: rightEmptyText,
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
-            columns: [rightTextCol, groupCol],
+            columns: [rightTextCol, groupCol, sortValueCol],
             contextMenu: false,
             expandLevel: rightGroupingExpanded ? 1 : 0,
             xhImpl: true

package/kit/ag-grid/index.ts

@@ -60,7 +60,11 @@ export type {
     CellEditingStoppedEvent
 } from 'ag-grid-community';
 
-export type {CustomCellEditorProps, CustomMenuItemProps} from 'ag-grid-react';
+export type {
+    CustomCellEditorProps,
+    CustomCellRendererProps,
+    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.applyColumnStateChanges(colChanges);
+        gridModel.updateColumnState(colChanges);
         if (autosizeOnCommit) gridModel.autosizeAsync({showMask: true});
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765213676051",
+  "version": "79.0.0-SNAPSHOT.1765213979166",
   "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.applyColumnStateChanges(requiredWidths);
+            gridModel.updateColumnState(requiredWidths);
             this.logDebug(
                 `Auto-sized ${requiredWidths.length} columns`,
                 `${records.length} records`
@@ -94,7 +94,7 @@ export class GridAutosizeService extends HoistService {
                     fillMode,
                     asManuallySized
                 );
-                gridModel.applyColumnStateChanges(fillWidths);
+                gridModel.updateColumnState(fillWidths);
                 this.logDebug(`Auto-sized ${fillWidths.length} columns using fillMode`);
             }
         });