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

package/CHANGELOG.md

@@ -2,24 +2,9 @@
 
 ## 79.0.0-SNAPSHOT - unreleased
 
-### 💥 Breaking Changes
-
-* Renamed `GridModel.applyColumnStateChanges()` to `updateColumnState()` for clarity and better
-  symmetry with `setColumnState()`. The prior method remains as an alias but is now deprecated and
-  scheduled for removal in v82.
-
 ### 🐞 Bug Fixes
 
-* Fixed column chooser to display columns in the same order as they appear in the grid.
 * Defaulted Highcharts font to Hoist default (--xh-font-family)
-* Tweaked `GridFindField` to forward a provided `ref` to its underlying `TextInput`.
-
-### ⚙️ Technical
-
-* Removed the following previously deprecated configs as planned:
-    * `AppSpec.websocketsEnabled` - enabled by default, disable via `disableWebSockets`
-    * `GroupingChooserProps.popoverTitle` - use `editorTitle`
-    * `RelativeTimestampProps.options` - provide directly as top-level props
 
 ## 78.1.4 - 2025-12-05
 

package/build/types/cmp/grid/GridModel.d.ts

@@ -1,9 +1,9 @@
+import { CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, CellEditingStartedEvent, CellEditingStoppedEvent, AgColumnState, RowClickedEvent, RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid';
 import { AgGridModel } from '@xh/hoist/cmp/ag-grid';
 import { Column, ColumnGroup, ColumnGroupSpec, ColumnSpec, GridAutosizeMode, GridFilterModelConfig, GridGroupSortFn, TreeStyle } from '@xh/hoist/cmp/grid';
 import { GridFilterModel } from '@xh/hoist/cmp/grid/filter/GridFilterModel';
 import { Awaitable, HoistModel, HSide, PlainObject, SizingMode, Some, TaskObserver, Thunkable, VSide } from '@xh/hoist/core';
 import { Store, StoreConfig, StoreRecord, StoreRecordId, StoreRecordOrId, StoreSelectionConfig, StoreSelectionModel, StoreTransaction } from '@xh/hoist/data';
-import { AgColumnState, CellClickedEvent, CellContextMenuEvent, CellDoubleClickedEvent, CellEditingStartedEvent, CellEditingStoppedEvent, RowClickedEvent, RowDoubleClickedEvent } from '@xh/hoist/kit/ag-grid';
 import { ExportOptions } from '@xh/hoist/svc/GridExportService';
 import { ReactNode, RefObject } from 'react';
 import { GridAutosizeOptions } from './GridAutosizeOptions';
@@ -483,8 +483,6 @@ export declare class GridModel extends HoistModel {
      * @param colStateChanges - changes to apply to the columns. If all leaf
      *     columns are represented in these changes then the sort order will be applied as well.
      */
-    updateColumnState(colStateChanges: Partial<ColumnState>[]): void;
-    /** @deprecated - use {@link updateColumnState} instead. */
     applyColumnStateChanges(colStateChanges: Partial<ColumnState>[]): void;
     getColumn(colId: string): Column;
     getColumnGroup(groupId: string): ColumnGroup;

package/build/types/cmp/relativetimestamp/RelativeTimestamp.d.ts

@@ -7,6 +7,12 @@ interface RelativeTimestampProps extends HoistProps, BoxProps, RelativeTimestamp
     bind?: string;
     /** Date or milliseconds representing the starting time / time to compare. See also `bind`. */
     timestamp?: Date | number;
+    /**
+     * Formatting options.
+     *
+     * @deprecated - these options should be spread into this object directly.
+     */
+    options?: RelativeTimestampOptions;
 }
 export interface RelativeTimestampOptions {
     /** Allow dates greater than Date.now().*/

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

@@ -116,7 +116,9 @@ export declare class AppSpec<T extends HoistAppModel = HoistAppModel> {
      *  initialized, including a breakdown of elapsed time throughout the init process.
      */
     trackAppLoad?: boolean;
-    constructor({ authModelClass, checkAccess, clientAppCode, clientAppName, componentClass, containerClass, disableWebSockets, enableXssProtection, enableLoginForm, enableLogout, idlePanel, isMobileApp, lockoutMessage, lockoutPanel, loginMessage, modelClass, showBrowserContextMenu, trackAppLoad }: {
+    /** @deprecated - use {@link AppSpec.disableWebSockets} instead. */
+    webSocketsEnabled?: boolean;
+    constructor({ authModelClass, checkAccess, clientAppCode, clientAppName, componentClass, containerClass, disableWebSockets, enableXssProtection, enableLoginForm, enableLogout, idlePanel, isMobileApp, lockoutMessage, lockoutPanel, loginMessage, modelClass, showBrowserContextMenu, trackAppLoad, webSocketsEnabled }: {
         authModelClass?: typeof HoistAuthModel;
         checkAccess: any;
         clientAppCode?: string;
@@ -135,5 +137,6 @@ export declare class AppSpec<T extends HoistAppModel = HoistAppModel> {
         modelClass: any;
         showBrowserContextMenu?: boolean;
         trackAppLoad?: boolean;
+        webSocketsEnabled: any;
     });
 }

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

@@ -1,6 +1,6 @@
+import { type ReactGridLayoutProps } 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 './DashCanvas.scss';

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

@@ -1,3 +1,4 @@
+import type { DragOverEvent, Layout } from 'react-grid-layout';
 import { Persistable, PersistableState } from '@xh/hoist/core';
 import { DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel } from '../';
 import '@xh/hoist/desktop/register';
@@ -20,6 +21,30 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
     maxRows?: number;
     /** 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 {
     layout: DashCanvasItemLayout;
@@ -45,7 +70,12 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     compact: boolean;
     margin: [number, number];
     containerPadding: [number, number];
+    DROPPING_ELEM_ID: string;
     maxRows: number;
+    showAddViewButtonWhenEmpty: boolean;
+    droppable: boolean;
+    onDropDone: (viewModel: DashCanvasViewModel) => void;
+    draggedInView: DashCanvasItemState;
     /** Current number of rows in canvas */
     get rows(): number;
     get isEmpty(): boolean;
@@ -54,7 +84,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,15 +122,22 @@ export declare class DashCanvasModel extends DashModel<DashCanvasViewSpec, DashC
     renameView(id: string): void;
     /** Scrolls a DashCanvasView into view. */
     ensureViewVisible(id: string): void;
+    onDrop(rglLayout: Layout[], layoutItem: Layout, evt: Event): void;
+    setDraggedInView(view?: DashCanvasItemState): void;
+    onDropDragOver(e: DragOverEvent): {
+        w?: number;
+        h?: number;
+    } | false | undefined;
     getPersistableState(): PersistableState<{
         state: DashCanvasItemState[];
     }>;
     setPersistableState(persistableState: PersistableState<{
         state: DashCanvasItemState[];
     }>): void;
+    private doDrop;
     private getLayoutFromPosition;
     private addViewInternal;
-    onRglLayoutChange(rglLayout: any): void;
+    onRglLayoutChange(rglLayout: Layout[]): void;
     private setLayout;
     private loadState;
     private buildState;

package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts

@@ -20,6 +20,8 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     popoverMinHeight?: number;
     /** 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.

package/build/types/desktop/cmp/leftrightchooser/LeftRightChooserModel.d.ts

@@ -1,5 +1,5 @@
-import { GridModel, GridSorterLike } from '@xh/hoist/cmp/grid';
-import { HoistModel, HSide, Some } from '@xh/hoist/core';
+import { GridModel } from '@xh/hoist/cmp/grid';
+import { HoistModel, HSide } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import { FilterTestFn, StoreRecord } from '@xh/hoist/data';
 export interface LeftRightChooserConfig {
@@ -14,13 +14,11 @@ export interface LeftRightChooserConfig {
     showCounts?: boolean;
     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;
@@ -41,7 +39,6 @@ export interface LeftRightChooserItem {
     /** True to prevent the user from moving the item between sides. */
     locked?: boolean;
     exclude?: boolean;
-    sortValue?: any;
 }
 /**
  * A Model for managing the state of a LeftRightChooser.
@@ -75,7 +72,7 @@ export declare class LeftRightChooserModel extends HoistModel {
     get rightValues(): any[];
     /** Currently 'selected' values on the left hand side. */
     get leftValues(): any[];
-    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftSortBy, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightSortBy, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
+    constructor({ data, onChange, ungroupedName, leftTitle, leftSorted, leftGroupingEnabled, leftGroupingExpanded, leftEmptyText, readonly, rightTitle, rightSorted, rightGroupingEnabled, rightGroupingExpanded, rightEmptyText, showCounts, xhImpl }: LeftRightChooserConfig);
     setData(data: LeftRightChooserItem[]): void;
     moveRows(rows: StoreRecord[]): void;
     private getTextColRenderer;

package/cmp/grid/GridModel.ts

@@ -4,6 +4,17 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {
+    CellClickedEvent,
+    CellContextMenuEvent,
+    CellDoubleClickedEvent,
+    CellEditingStartedEvent,
+    CellEditingStoppedEvent,
+    ColumnEvent,
+    AgColumnState,
+    RowClickedEvent,
+    RowDoubleClickedEvent
+} from '@xh/hoist/kit/ag-grid';
 import {AgGridModel} from '@xh/hoist/cmp/ag-grid';
 import {
     Column,
@@ -45,27 +56,15 @@ import {
 import {ColChooserModel as DesktopColChooserModel} from '@xh/hoist/dynamics/desktop';
 import {ColChooserModel as MobileColChooserModel} from '@xh/hoist/dynamics/mobile';
 import {Icon} from '@xh/hoist/icon';
-import {
-    AgColumnState,
-    CellClickedEvent,
-    CellContextMenuEvent,
-    CellDoubleClickedEvent,
-    CellEditingStartedEvent,
-    CellEditingStoppedEvent,
-    ColumnEvent,
-    RowClickedEvent,
-    RowDoubleClickedEvent
-} from '@xh/hoist/kit/ag-grid';
 import {action, bindable, makeObservable, observable, when} from '@xh/hoist/mobx';
 import {wait, waitFor} from '@xh/hoist/promise';
 import {ExportOptions} from '@xh/hoist/svc/GridExportService';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {
-    apiDeprecated,
+    sharePendingPromise,
     deepFreeze,
     executeIfFunction,
     logWithDebug,
-    sharePendingPromise,
     throwIf,
     warnIf,
     withDefault
@@ -1184,7 +1183,7 @@ export class GridModel extends HoistModel {
         );
 
         pull(colStateChanges, null);
-        this.updateColumnState(colStateChanges);
+        this.applyColumnStateChanges(colStateChanges);
     }
 
     @action
@@ -1215,7 +1214,7 @@ export class GridModel extends HoistModel {
         const col = this.findColumn(this.columns, colId);
         if (!width || !col || col.flex) return;
         const colStateChanges = [{colId, width, manuallySized: true}];
-        this.updateColumnState(colStateChanges);
+        this.applyColumnStateChanges(colStateChanges);
     }
 
     /**
@@ -1231,7 +1230,7 @@ export class GridModel extends HoistModel {
      *     columns are represented in these changes then the sort order will be applied as well.
      */
     @action
-    updateColumnState(colStateChanges: Partial<ColumnState>[]): void {
+    applyColumnStateChanges(colStateChanges: Partial<ColumnState>[]) {
         if (isEmpty(colStateChanges)) return;
 
         let columnState = cloneDeep(this.columnState);
@@ -1261,16 +1260,6 @@ export class GridModel extends HoistModel {
         }
     }
 
-    /** @deprecated - use {@link updateColumnState} instead. */
-    applyColumnStateChanges(colStateChanges: Partial<ColumnState>[]): void {
-        apiDeprecated('GridModel.applyColumnStateChanges()', {
-            msg: 'Use updateColumnState() instead.',
-            v: '82',
-            source: GridModel
-        });
-        this.updateColumnState(colStateChanges);
-    }
-
     getColumn(colId: string): Column {
         return this.findColumn(this.columns, colId);
     }
@@ -1306,7 +1295,7 @@ export class GridModel extends HoistModel {
     }
 
     setColumnVisible(colId: string, visible: boolean) {
-        this.updateColumnState([{colId, hidden: !visible}]);
+        this.applyColumnStateChanges([{colId, hidden: !visible}]);
     }
 
     showColumn(colId: string) {
@@ -1318,7 +1307,7 @@ export class GridModel extends HoistModel {
     }
 
     setColumnGroupVisible(groupId: string, visible: boolean) {
-        this.updateColumnState(
+        this.applyColumnStateChanges(
             this.getColumnGroup(groupId)
                 .getLeafColumns()
                 .map(({colId}) => ({colId, hidden: !visible}))

package/cmp/relativetimestamp/RelativeTimestamp.ts

@@ -4,6 +4,9 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {getLayoutProps} from '@xh/hoist/utils/react';
+import {inRange, isNil} from 'lodash';
+import moment from 'moment';
 import {box, span} from '@xh/hoist/cmp/layout';
 import {
     BoxProps,
@@ -18,10 +21,7 @@ import {fmtCompactDate, fmtDateTime} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {DAYS, HOURS, LocalDate, SECONDS} from '@xh/hoist/utils/datetime';
-import {logWarn, withDefault} from '@xh/hoist/utils/js';
-import {getLayoutProps} from '@xh/hoist/utils/react';
-import {inRange, isNil} from 'lodash';
-import moment from 'moment';
+import {apiDeprecated, logWarn, withDefault} from '@xh/hoist/utils/js';
 
 interface RelativeTimestampProps extends HoistProps, BoxProps, RelativeTimestampOptions {
     /**
@@ -32,6 +32,13 @@ interface RelativeTimestampProps extends HoistProps, BoxProps, RelativeTimestamp
 
     /** Date or milliseconds representing the starting time / time to compare. See also `bind`. */
     timestamp?: Date | number;
+
+    /**
+     * Formatting options.
+     *
+     * @deprecated - these options should be spread into this object directly.
+     */
+    options?: RelativeTimestampOptions;
 }
 
 export interface RelativeTimestampOptions {
@@ -126,7 +133,16 @@ class RelativeTimestampLocalModel extends HoistModel {
 
     @computed.struct
     get options(): RelativeTimestampOptions {
-        return this.componentProps as RelativeTimestampProps;
+        const {componentProps} = this;
+
+        apiDeprecated('options', {
+            test: componentProps.options,
+            msg: 'Spread options directly in this object instead',
+            v: `v78`,
+            source: RelativeTimestamp
+        });
+
+        return componentProps.options ?? componentProps;
     }
 
     constructor() {

package/core/AppSpec.ts

@@ -5,8 +5,8 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {ElementFactory, HoistAppModel, HoistAuthModel, HoistProps, XH} from '@xh/hoist/core';
-import {throwIf} from '@xh/hoist/utils/js';
-import {isFunction, isNil, isString} from 'lodash';
+import {apiDeprecated, throwIf} from '@xh/hoist/utils/js';
+import {isFunction, isNil, isString, isUndefined} from 'lodash';
 import {Component, ComponentClass, FunctionComponent} from 'react';
 
 /**
@@ -140,6 +140,9 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
      */
     trackAppLoad?: boolean;
 
+    /** @deprecated - use {@link AppSpec.disableWebSockets} instead. */
+    webSocketsEnabled?: boolean;
+
     constructor({
         authModelClass = HoistAuthModel,
         checkAccess,
@@ -158,7 +161,8 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         loginMessage = null,
         modelClass,
         showBrowserContextMenu = false,
-        trackAppLoad = true
+        trackAppLoad = true,
+        webSocketsEnabled
     }) {
         throwIf(!componentClass, 'A Hoist App must define a componentClass');
 
@@ -176,6 +180,17 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
             'A Hoist App must specify a required role string or a function for checkAccess.'
         );
 
+        if (!isUndefined(webSocketsEnabled)) {
+            let msg: string;
+            if (webSocketsEnabled === false) {
+                disableWebSockets = true;
+                msg = `Specify disableWebSockets: true to continue actively disabling WebSockets if required.`;
+            } else {
+                msg = `WebSockets are now enabled by default - this property can be safely removed from your appSpec.`;
+            }
+            apiDeprecated('webSocketsEnabled', {msg, v: 'v78'});
+        }
+
         this.authModelClass = authModelClass;
         this.checkAccess = checkAccess;
         this.clientAppCode = clientAppCode;
@@ -194,5 +209,6 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         this.modelClass = modelClass;
         this.showBrowserContextMenu = showBrowserContextMenu;
         this.trackAppLoad = trackAppLoad;
+        this.webSocketsEnabled = !disableWebSockets;
     }
 }

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

@@ -4,6 +4,12 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import ReactGridLayout, {
+    type ReactGridLayoutProps,
+    type DragOverEvent,
+    type Layout,
+    WidthProvider
+} 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,8 +26,6 @@ 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';
@@ -87,7 +91,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         draggableHandle:
                             '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
                         draggableCancel: '.xh-button',
-                        onLayoutChange: layout => model.onRglLayoutChange(layout),
+                        onLayoutChange: (layout: Layout[]) => model.onRglLayoutChange(layout),
                         onResizeStart: () => (model.isResizing = true),
                         onResizeStop: () => (model.isResizing = false),
                         items: model.viewModels.map(vm =>
@@ -96,9 +100,13 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                                 item: dashCanvasView({model: vm})
                             })
                         ),
+                        isDroppable: model.droppable,
+                        onDrop: (layout: Layout[], layoutItem: Layout, evt: Event) =>
+                            model.onDrop(layout, layoutItem, evt),
+                        onDropDragOver: (evt: DragOverEvent) => model.onDropDragOver(evt),
                         ...rglOptions
                     }),
-                    emptyContainerOverlay()
+                    emptyContainerOverlay({omit: !model.showAddViewButtonWhenEmpty})
                 ],
                 [TEST_ID]: testId
             })