@xh/hoist 59.1.0 → 59.2.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 59.2.0 - 2023-10-16
+
+### 🎁 New Features
+
+* New `DockViewConfig.onClose` hook invoked when a user attempts to remove a `DockContainer` view
+* Add `GridModel` APIs to lookup and show / hide entire column groups
+* Left / right borders are now rendered along `Grid` `ColumnGroup` edges by default.  Control
+ with new boolean property `ColumnGroupSpec.borders`
+* The Cube package has been enhanced to support `Query` specific post-processing functions.  See
+new properties `Query.omitFn`, `Query.bucketSpecFn` and `Query.lockFn`.  These properties default
+to their respective properties on `Cube`.
+
+### 🐞 Bug Fixes
+
+* `DashContainerModel` fixes:
+  * Fix bug where `addView` would throw when adding a view to a row or column
+  * Fix bug where `allowRemove` flag was dropped from state for containers
+  * Fix bug in `DockContainer` where adding / removing views would cause other views to be remounted
+* Fix erroneous `GridModel` warning when using a tree column within a column group
+* Fix regression to alert banners. Resume allowing elements as messages
+
+### ⚙️ Typescript API Adjustments
+
+* Add type for `ActionFnData.record`
+
 ## 59.1.0 - 2023-09-20
 
 ### 🎁 New Features

package/admin/tabs/general/alertBanner/AlertBannerModel.ts

@@ -11,7 +11,7 @@ import {HoistModel, LoadSpec, managed, XH, Intent, PlainObject} from '@xh/hoist/
 import {dateIs, required} from '@xh/hoist/data';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {AppModel} from '@xh/hoist/admin/AppModel';
-import _, {sortBy, without} from 'lodash';
+import {some, sortBy, without} from 'lodash';
 import {computed} from 'mobx';
 
 export class AlertBannerModel extends HoistModel {
@@ -151,7 +151,7 @@ export class AlertBannerModel extends HoistModel {
     @computed
     get currentValuesSavedAsPreset() {
         const {message, intent, iconName, enableClose} = this.formModel.values;
-        return _(this.savedPresets).some({message, intent, iconName, enableClose});
+        return some(this.savedPresets, {message, intent, iconName, enableClose});
     }
 
     async loadPresetsAsync() {

package/cmp/ag-grid/AgGrid.scss

@@ -5,6 +5,14 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
+@mixin group-border($side) {
+  border-#{$side}: var(--xh-border-solid);
+}
+
+@mixin pinned-border {
+  border-right: 1px solid var(--xh-grid-pinned-column-border-color);
+}
+
 // Ag-grid installs an outer div around itself.
 .xh-ag-grid > div {
   width: 100%;
@@ -121,12 +129,14 @@
 
   &--no-row-borders {
     .ag-row {
-      border-color: transparent;
+      border-bottom: none;
+      border-top: none;
 
       // Deliberately keep border on full-width grouped rows even when we aren't adding row borders.
       // Without this collapsed groups (which don't stripe) blend together in a solid block.
       &.ag-row-group.ag-full-width-row {
-        border-color: var(--xh-grid-group-border-color);
+        border-bottom: 1px solid var(--xh-grid-group-border-color);
+        border-top: 1px solid var(--xh-grid-group-border-color);
       }
     }
   }
@@ -188,7 +198,7 @@
   }
 
   .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-focus) {
-    border-right: 1px solid var(--xh-grid-pinned-column-border-color);
+    @include pinned-border;
   }
 
   // We use flexbox to consistently vertically center cell contents across
@@ -227,7 +237,7 @@
   &--no-cell-borders {
     .ag-cell,
     .ag-context-menu-open .ag-cell-focus:not(.ag-cell-range-selected) {
-      border-color: transparent;
+      border: none;
     }
   }
 
@@ -235,7 +245,19 @@
   &--no-cell-focus {
     .ag-has-focus {
       .ag-cell-focus:not(.ag-cell-range-selected) {
-        border-color: transparent;
+        border: none;
+
+        &.ag-cell.ag-cell-last-left-pinned {
+          @include pinned-border;
+        }
+
+        &.ag-cell.xh-cell--group-border-left {
+          @include group-border(left);
+        }
+
+        &.ag-cell.xh-cell--group-border-right {
+          @include group-border(right);
+        }
       }
     }
   }

package/cmp/grid/Grid.scss

@@ -6,6 +6,7 @@
  */
 
 @use 'sass:math';
+@use '../ag-grid/AgGrid';
 
 .xh-grid:not(.xh-data-view) {
   //------------------------
@@ -124,6 +125,15 @@
     }
   }
 
+  // Render left / right group borders
+  .ag-cell.xh-cell--group-border-left {
+    @include AgGrid.group-border(left);
+  }
+
+  .ag-cell.xh-cell--group-border-right {
+    @include AgGrid.group-border(right);
+  }
+
   .xh-ag-grid {
     &--tiny {
       .ag-cell.xh-cell--invalid::before {

package/cmp/grid/GridModel.ts

@@ -8,6 +8,7 @@ import {
     CellClickedEvent,
     CellContextMenuEvent,
     CellDoubleClickedEvent,
+    ColumnEvent,
     RowClickedEvent,
     RowDoubleClickedEvent
 } from '@ag-grid-community/core';
@@ -20,7 +21,8 @@ import {
     GridAutosizeMode,
     GridFilterModelConfig,
     GridGroupSortFn,
-    TreeStyle
+    TreeStyle,
+    ColumnCellClassRuleFn
 } from '@xh/hoist/cmp/grid';
 import {GridFilterModel} from '@xh/hoist/cmp/grid/filter/GridFilterModel';
 import {br, fragment} from '@xh/hoist/cmp/layout';
@@ -63,7 +65,7 @@ import {
     withDefault
 } from '@xh/hoist/utils/js';
 import equal from 'fast-deep-equal';
-import _, {
+import {
     castArray,
     clone,
     cloneDeep,
@@ -72,6 +74,7 @@ import _, {
     defaultsDeep,
     every,
     find,
+    first,
     forEach,
     isArray,
     isEmpty,
@@ -81,6 +84,7 @@ import _, {
     isString,
     isUndefined,
     keysIn,
+    last,
     max,
     min,
     omit,
@@ -1179,6 +1183,10 @@ export class GridModel extends HoistModel {
         return this.findColumn(this.columns, colId);
     }
 
+    getColumnGroup(groupId: string): ColumnGroup {
+        return this.findColumnGroup(this.columns, groupId);
+    }
+
     /** Return all leaf-level columns - i.e. excluding column groups. */
     getLeafColumns(): Column[] {
         return this.gatherLeaves(this.columns);
@@ -1217,6 +1225,22 @@ export class GridModel extends HoistModel {
         this.setColumnVisible(colId, false);
     }
 
+    setColumnGroupVisible(groupId: string, visible: boolean) {
+        this.applyColumnStateChanges(
+            this.getColumnGroup(groupId)
+                .getLeafColumns()
+                .map(({colId}) => ({colId, hidden: !visible}))
+        );
+    }
+
+    showColumnGroup(groupId: string) {
+        this.setColumnGroupVisible(groupId, true);
+    }
+
+    hideColumnGroup(groupId: string) {
+        this.setColumnGroupVisible(groupId, false);
+    }
+
     /**
      * Determine if a leaf-level column is currently pinned.
      *
@@ -1228,7 +1252,7 @@ export class GridModel extends HoistModel {
         return state ? state.pinned : null;
     }
 
-    /** Return matching leaf-level Column object from the provided collection.*/
+    /** Return matching leaf-level Column object from the provided collection. */
     findColumn(cols: Array<Column | ColumnGroup>, colId: string): Column {
         for (let col of cols) {
             if (col instanceof ColumnGroup) {
@@ -1241,6 +1265,18 @@ export class GridModel extends HoistModel {
         return null;
     }
 
+    /** Return matching ColumnGroup from the provided collection. */
+    findColumnGroup(cols: Array<Column | ColumnGroup>, groupId: string): ColumnGroup {
+        for (let col of cols) {
+            if (col instanceof ColumnGroup) {
+                if (col.groupId === groupId) return col;
+                const ret = this.findColumnGroup(col.children, groupId);
+                if (ret) return ret;
+            }
+        }
+        return null;
+    }
+
     /**
      * Return the current state object representation for the given colId.
      *
@@ -1252,30 +1288,6 @@ export class GridModel extends HoistModel {
         return find(this.columnState, {colId});
     }
 
-    buildColumn(config: ColumnGroupSpec | ColumnSpec) {
-        // Merge leaf config with defaults.
-        // Ensure *any* tooltip setting on column itself always wins.
-        if (this.colDefaults && !this.isGroupSpec(config)) {
-            let colDefaults = {...this.colDefaults};
-            if (config.tooltip) colDefaults.tooltip = null;
-            config = defaultsDeep({}, config, colDefaults);
-        }
-
-        const omit = isFunction(config.omit) ? config.omit() : config.omit;
-        if (omit) return null;
-
-        if (this.isGroupSpec(config)) {
-            const children = compact(config.children.map(c => this.buildColumn(c))) as Array<
-                ColumnGroup | Column
-            >;
-            return !isEmpty(children)
-                ? new ColumnGroup(config as ColumnGroupSpec, this, children)
-                : null;
-        }
-
-        return new Column(config, this);
-    }
-
     /**
      * Autosize columns to fit their contents.
      *
@@ -1436,6 +1448,35 @@ export class GridModel extends HoistModel {
     //-----------------------
     // Implementation
     //-----------------------
+    private buildColumn(config: ColumnGroupSpec | ColumnSpec, borderedGroup?: ColumnGroupSpec) {
+        // Merge leaf config with defaults.
+        // Ensure *any* tooltip setting on column itself always wins.
+        if (this.colDefaults && !this.isGroupSpec(config)) {
+            let colDefaults = {...this.colDefaults};
+            if (config.tooltip) colDefaults.tooltip = null;
+            config = defaultsDeep({}, config, colDefaults);
+        }
+
+        const omit = isFunction(config.omit) ? config.omit() : config.omit;
+        if (omit) return null;
+
+        if (this.isGroupSpec(config)) {
+            if (config.borders) borderedGroup = config;
+            const children = compact(
+                config.children.map(c => this.buildColumn(c, borderedGroup))
+            ) as Array<ColumnGroup | Column>;
+            return !isEmpty(children)
+                ? new ColumnGroup(config as ColumnGroupSpec, this, children)
+                : null;
+        }
+
+        if (borderedGroup) {
+            config = this.enhanceConfigWithGroupBorders(config, borderedGroup);
+        }
+
+        return new Column(config, this);
+    }
+
     private async autosizeColsInternalAsync(colIds, options) {
         await this.whenReadyAsync();
         if (!this.isReady) return;
@@ -1543,18 +1584,16 @@ export class GridModel extends HoistModel {
         if (isEmpty(cols)) return;
 
         const ids = this.collectIds(cols);
-        const nonUnique = _(ids)
-            .groupBy()
-            .pickBy(x => x.length > 1)
-            .keys();
-        if (!nonUnique.isEmpty()) {
+        const nonUnique = ids.filter((item, index) => ids.indexOf(item) !== index);
+
+        if (!isEmpty(nonUnique)) {
             const msg =
                 `Non-unique ids: [${nonUnique}] ` +
                 "Use 'ColumnSpec'/'ColumnGroupSpec' configs to resolve a unique ID for each column/group.";
             throw XH.exception(msg);
         }
 
-        const treeCols = cols.filter(it => it.isTreeColumn);
+        const treeCols = this.gatherLeaves(cols).filter(it => it.isTreeColumn);
         warnIf(
             this.treeMode && treeCols.length != 1,
             'Grids in treeMode should include exactly one column with isTreeColumn:true.'
@@ -1752,4 +1791,69 @@ export class GridModel extends HoistModel {
     defaultGroupSortFn = (a, b) => {
         return a < b ? -1 : a > b ? 1 : 0;
     };
+
+    private readonly LEFT_BORDER_CLASS = 'xh-cell--group-border-left';
+    private readonly RIGHT_BORDER_CLASS = 'xh-cell--group-border-right';
+
+    private enhanceConfigWithGroupBorders(config: ColumnSpec, group: ColumnGroupSpec): ColumnSpec {
+        return {
+            ...config,
+            cellClassRules: {
+                ...config.cellClassRules,
+                [this.LEFT_BORDER_CLASS]: this.createGroupBorderFn('left', group),
+                [this.RIGHT_BORDER_CLASS]: this.createGroupBorderFn('right', group)
+            }
+        };
+    }
+
+    private createGroupBorderFn(
+        side: 'left' | 'right',
+        group: ColumnGroupSpec
+    ): ColumnCellClassRuleFn {
+        return ({api, column, columnApi, ...ctx}) => {
+            if (!api || !column || !columnApi) return false;
+
+            // Re-evaluate cell class rules when column is re-ordered
+            // See https://www.ag-grid.com/javascript-data-grid/column-object/#reference-events
+            if (!column['xhAppliedGroupBorderListener']) {
+                column['xhAppliedGroupBorderListener'] = true;
+                column.addEventListener('leftChanged', ({api, columns, source}: ColumnEvent) => {
+                    if (source === 'uiColumnMoved') api.refreshCells({columns});
+                });
+            }
+
+            // Don't render a left-border if col is first or if prev col already has right-border
+            if (side === 'left') {
+                const prevCol = columnApi.getDisplayedColBefore(column);
+
+                if (!prevCol) return false;
+
+                const prevColDef = prevCol.getColDef(),
+                    prevRule = prevColDef.cellClassRules[this.RIGHT_BORDER_CLASS];
+                if (
+                    isFunction(prevRule) &&
+                    prevRule({
+                        ...ctx,
+                        api,
+                        colDef: prevColDef,
+                        column: prevCol,
+                        columnApi
+                    })
+                ) {
+                    return false;
+                }
+            }
+
+            // Walk up parent groups to find "bordered" group. Return true if on relevant edge.
+            const getter = side === 'left' ? first : last;
+            for (let parent = column?.getParent(); parent; parent = parent.getParent()) {
+                if (
+                    group.groupId === parent.getGroupId() &&
+                    getter(parent.getDisplayedLeafColumns()) === column
+                ) {
+                    return true;
+                }
+            }
+        };
+    }
 }

package/cmp/grid/columns/ColumnGroup.ts

@@ -26,6 +26,8 @@ export interface ColumnGroupSpec {
     headerClass?: Some<string> | ColumnHeaderClassFn;
     /** Horizontal alignment of header contents. */
     headerAlign?: HAlign;
+    /** True to render borders on column group edges. */
+    borders?: boolean;
 
     /**
      * "Escape hatch" object to pass directly to Ag-Grid for desktop implementations. Note
@@ -50,6 +52,7 @@ export class ColumnGroup {
     readonly headerName: ReactNode | ColumnHeaderNameFn;
     readonly headerClass: Some<string> | ColumnHeaderClassFn;
     readonly headerAlign: HAlign;
+    readonly borders: boolean;
 
     /**
      * "Escape hatch" object to pass directly to Ag-Grid for desktop implementations. Note
@@ -79,6 +82,7 @@ export class ColumnGroup {
             headerClass,
             headerAlign,
             agOptions,
+            borders,
             ...rest
         } = config;
 
@@ -94,6 +98,7 @@ export class ColumnGroup {
         this.headerName = withDefault(headerName, genDisplayName(this.groupId));
         this.headerClass = headerClass;
         this.headerAlign = headerAlign;
+        this.borders = withDefault(borders, true);
         this.children = children;
         this.gridModel = gridModel;
         this.agOptions = agOptions ? clone(agOptions) : {};
@@ -119,4 +124,10 @@ export class ColumnGroup {
             ...this.agOptions
         };
     }
+
+    getLeafColumns(): Column[] {
+        return this.children.flatMap(child =>
+            child instanceof Column ? child : child.getLeafColumns()
+        );
+    }
 }

package/data/RecordAction.ts

@@ -66,7 +66,7 @@ export interface ActionFnData {
     action?: RecordAction;
 
     /** Row data object (entire row, if any).*/
-    record?: any;
+    record?: StoreRecord;
 
     /** All currently selected records (if any).*/
     selectedRecords?: StoreRecord[];

package/data/cube/Query.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-import {Filter, parseFilter, StoreRecord} from '@xh/hoist/data';
+import {BucketSpecFn, Filter, LockFn, OmitFn, parseFilter, StoreRecord} from '@xh/hoist/data';
 import {isEqual, find} from 'lodash';
 import {FilterLike, FilterTestFn} from '../filter/Types';
 import {CubeField} from './CubeField';
@@ -51,6 +51,25 @@ export interface QueryConfig {
 
     /** True to include leaf nodes in return.*/
     includeLeaves?: boolean;
+
+    /**
+     * Optional function to be called for each aggregate node to determine if it should be "locked",
+     * preventing drill-down into its children.  Defaults to Cube.lockFn.
+     */
+    lockFn?: LockFn;
+
+    /**
+     * Optional function to be called for each dimension during row generation to determine if the
+     * children of that dimension should be bucketed into additional dynamic dimensions.
+     * Defaults to Cube.bucketSpecFn.
+     */
+    bucketSpecFn?: BucketSpecFn;
+
+    /**
+     * Optional function to be called on all single child rows during view processing.
+     * Return true to omit the row. Defaults to Cube.omitFn.
+     */
+    omitFn?: OmitFn;
 }
 
 /** {@inheritDoc QueryConfig} */
@@ -61,6 +80,9 @@ export class Query {
     readonly includeRoot: boolean;
     readonly includeLeaves: boolean;
     readonly cube: Cube;
+    readonly lockFn: LockFn;
+    readonly bucketSpecFn: BucketSpecFn;
+    readonly omitFn: OmitFn;
 
     private readonly _testFn: FilterTestFn;
 
@@ -70,7 +92,10 @@ export class Query {
         dimensions,
         filter = null,
         includeRoot = false,
-        includeLeaves = false
+        includeLeaves = false,
+        lockFn = cube.lockFn,
+        bucketSpecFn = cube.bucketSpecFn,
+        omitFn = cube.omitFn
     }: QueryConfig) {
         this.cube = cube;
         this.fields = this.parseFields(fields);
@@ -78,6 +103,9 @@ export class Query {
         this.includeRoot = includeRoot;
         this.includeLeaves = includeLeaves;
         this.filter = parseFilter(filter);
+        this.lockFn = lockFn;
+        this.bucketSpecFn = bucketSpecFn;
+        this.omitFn = omitFn;
 
         this._testFn = this.filter?.getTestFn(this.cube.store) ?? null;
     }
@@ -89,6 +117,9 @@ export class Query {
             filter: this.filter,
             includeRoot: this.includeRoot,
             includeLeaves: this.includeLeaves,
+            lockFn: this.lockFn,
+            bucketSpecFn: this.bucketSpecFn,
+            omitFn: this.omitFn,
             cube: this.cube,
             ...overrides
         };
@@ -121,7 +152,10 @@ export class Query {
             isEqual(this.dimensions, other.dimensions) &&
             this.cube === other.cube &&
             this.includeRoot === other.includeRoot &&
-            this.includeLeaves === other.includeLeaves
+            this.includeLeaves === other.includeLeaves &&
+            this.bucketSpecFn == other.bucketSpecFn &&
+            this.omitFn == other.omitFn &&
+            this.lockFn == other.lockFn
         );
     }
 

package/data/cube/View.ts

@@ -351,9 +351,9 @@ export class View extends HoistBase {
         parentId: string,
         appliedDimensions: PlainObject
     ): BaseRow[] {
-        if (!this.cube.bucketSpecFn) return rows;
+        if (!this.query.bucketSpecFn) return rows;
 
-        const bucketSpec = this.cube.bucketSpecFn(rows);
+        const bucketSpec = this.query.bucketSpecFn(rows);
         if (!bucketSpec) return rows;
 
         if (!this.query.includeLeaves && rows[0]?.isLeaf) return rows;

package/data/cube/row/BaseRow.ts

@@ -59,7 +59,7 @@ export abstract class BaseRow {
         let dataChildren = this.getVisibleChildrenDatas();
 
         // 2) If omitting ourselves, we are done, return visible children.
-        if (!isLeaf && view.cube.omitFn?.(this as any)) return dataChildren;
+        if (!isLeaf && view.query.omitFn?.(this as any)) return dataChildren;
 
         // 3) Otherwise, we can attach this data to the children data and return.
 
@@ -89,7 +89,7 @@ export abstract class BaseRow {
         }
 
         // Skip all children in a locked node
-        if (view.cube.lockFn?.(this as any)) {
+        if (view.query.lockFn?.(this as any)) {
             this.locked = true;
             return null;
         }

package/desktop/appcontainer/Banner.ts

@@ -11,7 +11,7 @@ import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import {markdown} from '@xh/hoist/cmp/markdown';
-import {isFunction, isEmpty} from 'lodash';
+import {isFunction, isEmpty, isString} from 'lodash';
 import classNames from 'classnames';
 
 import './Banner.scss';
@@ -44,7 +44,7 @@ export const banner = hoistCmp.factory({
                         icon,
                         div({
                             className: 'xh-banner__message',
-                            item: markdown({content: message}),
+                            item: isString(message) ? markdown({content: message}) : message,
                             onClick
                         })
                     ]

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -22,7 +22,7 @@ import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {debounced, ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {cloneDeep, defaultsDeep, find, isFinite, isNil, reject, startCase} from 'lodash';
+import {cloneDeep, defaultsDeep, find, isFinite, isNil, last, reject, startCase} from 'lodash';
 import {createRoot} from 'react-dom/client';
 import {DashConfig, DashModel} from '../';
 import {DashViewModel, DashViewState} from '../DashViewModel';
@@ -290,7 +290,8 @@ export class DashContainerModel extends DashModel<
 
         if (!isFinite(index)) index = container.contentItems.length;
         container.addChild(goldenLayoutConfig(viewSpec), index);
-        wait(1).then(() => this.onStackActiveItemChange(container));
+        const stack = container.isStack ? container : last(container.contentItems);
+        wait(1).then(() => this.onStackActiveItemChange(stack));
     }
 
     /**

package/desktop/cmp/dash/container/impl/DashContainerUtils.ts

@@ -46,8 +46,8 @@ function convertGLToStateInner(configItems = [], contentItems = [], dashContaine
 
             ret.push(view);
         } else {
-            const {type, width, height, activeItemIndex, content} = configItem,
-                container = {type} as PlainObject;
+            const {type, width, height, activeItemIndex, content, isClosable} = configItem,
+                container = {type, allowRemove: isClosable} as PlainObject;
 
             if (isFinite(width)) container.width = round(width, 2);
             if (isFinite(height)) container.height = round(height, 2);
@@ -138,12 +138,12 @@ function convertStateToGLInner(items = [], viewSpecs = [], containerSize, contai
             const content = convertStateToGLInner(item.content, viewSpecs, itemSize, item).filter(
                 it => !isNil(it)
             );
-            if (!content.length) return null;
+            if (!content.length && item.allowRemove) return null;
 
             // Below is a workaround for issue https://github.com/golden-layout/golden-layout/issues/418
             // GoldenLayouts can sometimes export its state with an out-of-bounds `activeItemIndex`.
             // If we encounter this, we overwrite `activeItemIndex` to point to the last item.
-            const ret = {...item, content};
+            const ret = {...item, content, isClosable: item.allowRemove};
             if (
                 type === 'stack' &&
                 isFinite(ret.activeItemIndex) &&

package/desktop/cmp/dock/DockViewModel.ts

@@ -13,7 +13,7 @@ import {
     RefreshContextModel,
     RefreshMode,
     RenderMode,
-    XH
+    Awaitable
 } from '@xh/hoist/core';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport/ModalSupportModel';
 import '@xh/hoist/desktop/register';
@@ -53,6 +53,8 @@ export interface DockViewConfig {
     allowClose?: boolean;
     /** true (default) to allow popping out of the dock and displaying in a modal Dialog. */
     allowDialog?: boolean;
+    /** Awaitable callback invoked on close. Return false to prevent close. */
+    onClose?: () => Awaitable<boolean | void>;
 }
 
 /**
@@ -75,6 +77,7 @@ export class DockViewModel extends HoistModel {
     collapsedWidth: number;
     allowClose: boolean;
     allowDialog: boolean;
+    onClose?: () => Awaitable<boolean | void>;
 
     containerModel: DockContainerModel;
     @managed refreshContextModel: RefreshContextModel;
@@ -109,7 +112,8 @@ export class DockViewModel extends HoistModel {
         docked = true,
         collapsed = false,
         allowClose = true,
-        allowDialog = true
+        allowDialog = true,
+        onClose
     }: DockViewConfig) {
         super();
         makeObservable(this);
@@ -128,6 +132,7 @@ export class DockViewModel extends HoistModel {
         this.collapsed = collapsed;
         this.allowClose = allowClose;
         this.allowDialog = allowDialog;
+        this.onClose = onClose;
 
         this._renderMode = renderMode;
         this._refreshMode = refreshMode;
@@ -195,11 +200,8 @@ export class DockViewModel extends HoistModel {
     // Actions
     //-----------------------
     close() {
-        this.containerModel.removeView(this.id);
-    }
-
-    override destroy() {
-        XH.safeDestroy(this.content);
-        super.destroy();
+        Promise.resolve(this.onClose?.()).then(v => {
+            if (v !== false) this.containerModel.removeView(this.id);
+        });
     }
 }

package/desktop/cmp/dock/impl/DockContainer.ts

@@ -25,6 +25,7 @@ export function dockContainerImpl(
         className: classNames(className, `xh-dock-container--${model.direction}`),
         items: model.views.map(viewModel => {
             return dockView({
+                key: viewModel.xhId,
                 model: viewModel,
                 compactHeaders
             });

package/inspector/instances/InstancesModel.ts

@@ -218,7 +218,7 @@ export class InstancesModel extends HoistModel {
                             icon: Icon.refresh({intent: 'success'}),
                             tooltip: 'Call loadAsync()',
                             actionFn: ({record}) =>
-                                (this.getInstance(record.id) as any)?.loadAsync(),
+                                (this.getInstance(record.id as string) as any)?.loadAsync(),
                             displayFn: ({record}) => ({hidden: !record.data.hasLoadSupport})
                         }
                     ]

package/mobile/appcontainer/Banner.ts

@@ -10,7 +10,7 @@ import {hframe, div} from '@xh/hoist/cmp/layout';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import {markdown} from '@xh/hoist/cmp/markdown';
-import {isEmpty, isFunction} from 'lodash';
+import {isEmpty, isFunction, isString} from 'lodash';
 import classNames from 'classnames';
 
 import './Banner.scss';
@@ -42,7 +42,7 @@ export const banner = hoistCmp.factory({
                         icon,
                         div({
                             className: 'xh-banner__message',
-                            item: markdown({content: message}),
+                            item: isString(message) ? markdown({content: message}) : message,
                             onClick
                         })
                     ]

package/mobile/cmp/menu/impl/Menu.scss

@@ -2,7 +2,13 @@
   position: fixed;
   margin: 0 !important;
   z-index: 21;
-  max-height: 90vh;
+  /**
+   * Use `svh` units target the *smallest* viewport height, which is preferred to using `vh` on mobile.
+   * Including `px` units as a fallback for older browsers that may not support `vh`/`svh` units.
+   * https://css-tricks.com/the-large-small-and-dynamic-viewports/
+   */
+  max-height: 500px;
+  max-height: 80svh;
 
   &__title {
     padding: var(--xh-pad-half-px);

package/package.json

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