@xh/hoist 44.1.0 → 44.2.0

package/.nvmrc

@@ -0,0 +1 @@
+lts/*

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## v44.2.0 - 2021-12-07
+
+### 🎁 New Features
+
+* Desktop inline grid editor `Select` now commits the value immediately on selection.
+* `DashContainerModel` now supports an observable `showMenuButton` config which will display a
+  button in the stack header for showing the context menu
+* Added `GridAutosizeMode.MANAGED` to autosize Grid columns on data or `sizingMode` changes, unless
+  the user has manually modified their column widths.
+* Copying from Grids to the clipboard will now use the value provided by the `exportValue`
+  property on the column.
+* Refresh application hotkey is now built into hoist's global hotkeys (shift + r).
+* Non-SSO applications will now automatically reload when a request fails due to session timeout.
+* New utility methods `withInfo` and `logInfo` provide variants of the existing `withDebug` and
+  `logDebug` methods, but log at the more verbose `console.log` level.
+
+### 🐞 Bug Fixes
+
+* Desktop panel splitter can now be dragged over an `iframe` and reliably resize the panel.
+* Ensure scrollbar does not appear on multi-select in toolbar when not needed.
+* `XH.isPortrait` property fixed so that it no longer changes due to the appearance of the
+  mobile keyboard.
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v44.1.0...v44.2.0)
+
 ## v44.1.0 - 2021-11-08
 
 ### 🎁 New Features

package/admin/tabs/server/logViewer/LogDisplayModel.js

@@ -43,10 +43,12 @@ export class LogDisplayModel extends HoistModel {
     }
 
     syncTail() {
-        const {tail} = this.parent,
-            rowElem = this[tail ? 'lastRowRef' : 'firstRowRef'].current;
+        const {tail} = this.parent;
 
-        if (rowElem) rowElem.scrollIntoView();
+        if (tail) {
+            const rowElem = this.lastRowRef.current;
+            if (rowElem) rowElem.scrollIntoView();
+        }
     }
 
     async doLoadAsync(loadSpec) {

package/appcontainer/ViewportSizeModel.js

@@ -21,7 +21,14 @@ export class ViewportSizeModel extends HoistModel {
     /** @returns {boolean} */
     @computed
     get isPortrait() {
-        return this.size.width < this.size.height;
+        const {size} = this; // Force triggering observation of size.
+
+        // Check Modern API and legacy API (for safari, BB Access)
+        let orientation = this.getOrientation() ?? this.getLegacyOrientation();
+        if (orientation !== null) return orientation === 0 || orientation === 180;
+
+        // Default to aspect ratio
+        return size.width < size.height;
     }
 
     /** @returns {boolean} */
@@ -46,4 +53,15 @@ export class ViewportSizeModel extends HoistModel {
             height: window.innerHeight
         };
     }
+
+    getOrientation() {
+        const {orientation} = window.screen;
+        return orientation ? orientation.angle : null;
+    }
+
+    getLegacyOrientation() {
+        const {orientation} = window;
+        return isFinite(orientation) ? orientation: null;
+    }
+
 }

package/cmp/ag-grid/AgGrid.scss

@@ -349,14 +349,24 @@
   .ag-set-filter-select-all {
     padding: var(--xh-pad-half-px) 0;
   }
-}
 
-// Ensure ag-grid popups (context menus, tooltips, and column filter controls) with default z-index of 5
-// appear over bp dialogs with z-index of 20.
-.ag-theme-balham.ag-popup,
-.ag-theme-balham-dark.ag-popup {
-  .ag-popup-child {
-    z-index: 30;
+  //------------------------
+  // Overlay masks
+  //------------------------
+  .ag-overlay {
+    // Match loading overlay color to mask, suppress display of text in center.
+    .ag-overlay-loading-wrapper {
+      background-color: var(--xh-mask-bg);
+
+      .ag-overlay-loading-center {
+        display: none;
+      }
+    }
+
+    // Reduce default contrast of emptyText.
+    .ag-overlay-no-rows-wrapper {
+      color: var(--xh-grid-empty-text-color);
+    }
   }
 }
 
@@ -371,58 +381,50 @@
   }
 }
 
-//------------------------
-// Overlay masks
-//------------------------
-.ag-overlay {
-  // Match loading overlay color to mask, suppress display of text in center.
-  .ag-overlay-loading-wrapper {
-    background-color: var(--xh-mask-bg);
-
-    .ag-overlay-loading-center {
-      display: none;
+body.xh-app {
+  // Ensure ag-grid popups (context menus, tooltips, and column filter controls) with default z-index of 5
+  // appear over bp dialogs with z-index of 20.
+  .ag-theme-balham.ag-popup,
+  .ag-theme-balham-dark.ag-popup {
+    .ag-popup-child {
+      z-index: 30;
     }
   }
 
-  // Reduce default contrast of emptyText.
-  .ag-overlay-no-rows-wrapper {
-    color: var(--xh-grid-empty-text-color);
-  }
-}
-
-//------------------------
-// Context Menu
-//------------------------
-.ag-theme-balham .ag-menu,
-.ag-theme-balham-dark .ag-menu {
-  font-family: var(--xh-font-family);
-  font-size: var(--xh-menu-item-font-size-px);
-  color: var(--xh-menu-item-text-color);
+  //------------------------
+  // Context Menu
+  //------------------------
+  .ag-theme-balham .ag-menu,
+  .ag-theme-balham-dark .ag-menu {
+    font-family: var(--xh-font-family);
+    font-size: var(--xh-menu-item-font-size-px);
+    color: var(--xh-menu-item-text-color);
 
-  // Minimal/high-contrast bg
-  background-color: var(--xh-menu-bg);
-  border: var(--xh-menu-border);
+    // Minimal/high-contrast bg
+    background-color: var(--xh-menu-bg);
+    border: var(--xh-menu-border);
 
-  // Matching box-shadow of Blueprint context menu popover
-  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);
+    // Matching box-shadow of Blueprint context menu popover
+    box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 2px 4px rgba(16, 22, 26, 0.4), 0 8px 24px rgba(16, 22, 26, 0.4);
 
-  .ag-menu-option.ag-menu-option-active {
-    background-color: var(--xh-menu-item-highlight-bg);
-  }
+    .ag-menu-option.ag-menu-option-active {
+      background-color: var(--xh-menu-item-highlight-bg);
+    }
 
-  .ag-menu-option-icon {
-    text-align: center;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
+    .ag-menu-option-icon {
+      text-align: center;
+      padding-left: 8px;
+      padding-right: 8px;
+    }
 
-  // Mute the shortcut text to keep focus on the actual option text
-  .ag-menu-option-shortcut {
-    color: var(--xh-text-color-muted);
-  }
+    // Mute the shortcut text to keep focus on the actual option text
+    .ag-menu-option-shortcut {
+      color: var(--xh-text-color-muted);
+    }
 
-  // Keep the submenu caret in the standard text color
-  .ag-menu-option-popup-pointer {
-    color: var(--xh-menu-item-text-color);
+    // Keep the submenu caret in the standard text color
+    .ag-menu-option-popup-pointer {
+      color: var(--xh-menu-item-text-color);
+    }
   }
-}
+}

package/cmp/form/field/BaseFieldModel.js

@@ -103,7 +103,7 @@ export class BaseFieldModel extends HoistModel {
         super();
         makeObservable(this);
         this.name = name;
-        this.displayName = withDefault(displayName, genDisplayName(name));
+        this.displayName = displayName ?? genDisplayName(name);
         this._origInitialValue = initialValue;
         this.value = this.initialValue = executeIfFunction(initialValue);
         this._disabled = disabled;

package/cmp/grid/Grid.js

@@ -530,12 +530,15 @@ class GridLocalModel extends HoistModel {
     }
 
     sizingModeReaction() {
-        const {model} = this;
+        const {model} = this,
+            {mode} = model.autosizeOptions;
+
         return {
             track: () => model.sizingMode,
             run: () => {
-                if (model.autosizeOptions.mode !== GridAutosizeMode.ON_SIZING_MODE_CHANGE) return;
-                model.autosizeAsync({showMask: true});
+                if (mode === GridAutosizeMode.MANAGED || mode === GridAutosizeMode.ON_SIZING_MODE_CHANGE) {
+                    model.autosizeAsync({showMask: true});
+                }
             }
         };
     }
@@ -657,6 +660,20 @@ class GridLocalModel extends HoistModel {
             wait().then(() => this.syncSelection());
         }
 
+        if (model.autosizeOptions.mode === GridAutosizeMode.MANAGED) {
+            // If sizingMode different to autosizeState, autosize all columns...
+            if (model.autosizeState.sizingMode !== model.sizingMode) {
+                model.autosizeAsync();
+            } else {
+                // ...otherwise, only autosize columns that are not manually sized
+                const columns = model.getLeafColumnIds().filter(colId => {
+                    const state = model.findColumn(model.columnState, colId);
+                    return state && !state.manuallySized;
+                });
+                model.autosizeAsync({columns});
+            }
+        }
+
         model.noteAgExpandStateChange();
 
         this._prevRs = newRs;
@@ -700,7 +717,10 @@ class GridLocalModel extends HoistModel {
 
     // Catches column resizing on call to autoSize API.
     onColumnResized = (ev) => {
-        if (isDisplayed(this.viewRef.current) && ev.finished && ev.source === 'autosizeColumns') {
+        if (!isDisplayed(this.viewRef.current) || !ev.finished) return;
+        if (ev.source === 'uiColumnDragged') {
+            this.model.noteColumnsManuallySized(ev.column.colId);
+        } else if (ev.source === 'autosizeColumns') {
             this.model.noteAgColumnStateChanged(ev.columnApi.getColumnState());
         }
         ev.api.resetRowHeights();
@@ -754,10 +774,21 @@ class GridLocalModel extends HoistModel {
         this.model.agGridModel.agApi.setFilterModel(filterState);
     }
 
-    // Underlying value for treeColumns is actually the record ID due to getDataPath() impl.
-    // Special handling here, similar to that in Column class, to extract the desired value.
-    processCellForClipboard({value, node, column}) {
-        return column.isTreeColumn ? node.data[column.field] : value;
+    processCellForClipboard = ({value, node, column}) => {
+        const {model} = this,
+            recId = node.id,
+            colId = column.colId,
+            record = isNil(recId) ? null : model.store.getById(recId, true),
+            xhColumn = isNil(colId) ? null : model.getColumn(colId);
+
+        if (!record || !xhColumn) return value;
+
+        return XH.gridExportService.getExportableValueForCell({
+            gridModel: model,
+            record,
+            column: xhColumn,
+            node
+        });
     }
 
     navigateToNextCell = (agParams) => {

package/cmp/grid/GridAutosizeMode.js

@@ -21,16 +21,16 @@ export const GridAutosizeMode = Object.freeze({
     ON_DEMAND: 'onDemand',
 
     /**
-     * In addition to the affordances provided by ON_DEMAND, Grid will autosize columns when
-     * the GridModel's sizingMode changes.
+     * Grid will autosize columns when the GridModel's sizingMode changes.
+     * Also offers the affordances provided by ON_DEMAND.
      */
-    ON_SIZING_MODE_CHANGE: 'onSizingModeChange'
+    ON_SIZING_MODE_CHANGE: 'onSizingModeChange',
 
-    // COMING SOON
-    // /**
-    //  *  Grid will autosize columns when data is *first* loaded into a grid.   Persisted grids
-    //  * will only resize again if GridModel's sizingMode subsequently changes.
-    //  */
-    // ON_FIRST_LOAD: 'onFirstLoad'
+    /**
+     * Grid will autosize columns when the GridModel's sizingMode changes or data is loaded,
+     * unless the user has manually modified their column widths.
+     * Also offers the affordances provided by ON_DEMAND.
+     */
+    MANAGED: 'managed'
 
 });

package/cmp/grid/GridModel.js

@@ -71,6 +71,8 @@ export class GridModel extends HoistModel {
             'OK to proceed?'
         );
 
+    static DEFAULT_AUTOSIZE_MODE = GridAutosizeMode.ON_SIZING_MODE_CHANGE;
+
     //------------------------
     // Immutable public properties
     //------------------------
@@ -129,6 +131,8 @@ export class GridModel extends HoistModel {
     @observable.ref columnState = [];
     /** @member {Object} */
     @observable.ref expandState = {};
+    /** @member {AutosizeState} */
+    @observable.ref autosizeState = {};
     /** @member {GridSorter[]} */
     @observable.ref sortBy = [];
     /** @member {string[]} */
@@ -367,7 +371,7 @@ export class GridModel extends HoistModel {
         this.autosizeOptions = defaults(
             {...autosizeOptions},
             {
-                mode: GridAutosizeMode.ON_SIZING_MODE_CHANGE,
+                mode: GridModel.DEFAULT_AUTOSIZE_MODE,
                 includeCollapsedChildren: false,
                 showMask: false,
                 // Larger buffer on mobile (perhaps counterintuitively) to minimize clipping due to
@@ -768,7 +772,10 @@ export class GridModel extends HoistModel {
 
         this.columns = columns;
         this.columnState = this.getLeafColumns()
-            .map(({colId, width, hidden, pinned}) => ({colId, width, hidden, pinned}));
+            .map(it => {
+                const {colId, width, hidden, pinned} = it;
+                return {colId, width, hidden, pinned};
+            });
     }
 
     /** @param {ColumnState[]} colState */
@@ -824,6 +831,24 @@ export class GridModel extends HoistModel {
         }
     }
 
+    @action
+    setAutosizeState(autosizeState) {
+        if (!equal(this.autosizeState, autosizeState)) {
+            this.autosizeState = deepFreeze(autosizeState);
+        }
+    }
+
+    noteColumnsManuallySized(colIds) {
+        const colStateChanges = castArray(colIds).map(colId => ({colId, manuallySized: true}));
+        this.applyColumnStateChanges(colStateChanges);
+    }
+
+    noteColumnsAutosized(colIds) {
+        const colStateChanges = castArray(colIds).map(colId => ({colId, manuallySized: false}));
+        this.applyColumnStateChanges(colStateChanges);
+        this.setAutosizeState({sizingMode: this.sizingMode});
+    }
+
     /**
      * This method will update the current column definition if it has changed.
      * Throws an exception if any of the columns provided in colStateChanges are not
@@ -852,6 +877,7 @@ export class GridModel extends HoistModel {
             if (!isNil(change.width)) col.width = change.width;
             if (!isNil(change.hidden)) col.hidden = change.hidden;
             if (!isUndefined(change.pinned)) col.pinned = change.pinned;
+            if (!isNil(change.manuallySized)) col.manuallySized = change.manuallySized;
         });
 
         // 2) If the changes provided is a full list of leaf columns, synchronize the sort order
@@ -1038,7 +1064,6 @@ export class GridModel extends HoistModel {
             .linkTo(this.autosizeTask);
     }
 
-
     /**
      * Begin an inline editing session.
      * @param {RecordOrId} [recOrId] - Record/ID to edit. If unspecified, the first selected Record
@@ -1178,6 +1203,7 @@ export class GridModel extends HoistModel {
 
         try {
             await XH.gridAutosizeService.autosizeAsync(this, colIds, options);
+            this.noteColumnsAutosized(colIds);
         } finally {
             if (showMask) {
                 await wait();
@@ -1307,10 +1333,10 @@ export class GridModel extends HoistModel {
     // conflict with any code-level updates to their widths.
     removeTransientWidths(columnState) {
         const gridCols = this.getLeafColumns();
-
         return columnState.map(state => {
             const col = this.findColumn(gridCols, state.colId);
-            return col.resizable ? state : omit(state, 'width');
+            if (!col.resizable) state = omit(state, 'width');
+            return state;
         });
     }
 
@@ -1506,6 +1532,12 @@ export class GridModel extends HoistModel {
  * @property {number} [width] - new width to set for the column
  * @property {boolean} [hidden] - visibility of the column
  * @property {string} [pinned] - 'left'|'right' if pinned, null if not
+ * @property {boolean} [manuallySized] - has this column been resized manually?
+ */
+
+/**
+ * @typedef {Object} AutosizeState
+ * @property {SizingMode} sizingMode - sizing mode used last time the columns were autosized.
  */
 
 /**

package/cmp/grid/impl/GridPersistenceModel.js

@@ -89,27 +89,28 @@ export class GridPersistenceModel extends HoistModel {
     columnReaction() {
         const {gridModel} = this;
         return {
-            track: () => gridModel.columnState,
-            run: (columnState) => {
-                this.patchState({columns: gridModel.removeTransientWidths(columnState)});
+            track: () => [gridModel.columnState, gridModel.autosizeState],
+            run: ([columnState, autosizeState]) => {
+                this.patchState({
+                    columns: gridModel.removeTransientWidths(columnState),
+                    autosize: autosizeState
+                });
             }
         };
     }
 
     updateGridColumns() {
-        const {gridModel, state} = this;
-        if (!state.columns) return;
-
-        gridModel.setColumnState(state.columns);
+        const {columns, autosize} = this.state;
+        if (!isUndefined(columns)) this.gridModel.setColumnState(columns);
+        if (!isUndefined(autosize)) this.gridModel.setAutosizeState(autosize);
     }
 
     //--------------------------
     // Sort
     //--------------------------
     sortReaction() {
-        const {gridModel} = this;
         return {
-            track: () => gridModel.sortBy,
+            track: () => this.gridModel.sortBy,
             run: (sortBy) => {
                 this.patchState({sortBy: sortBy.map(it => it.toString())});
             }

package/cmp/grid/index.js

@@ -9,10 +9,10 @@ export * from './columns';
 
 export * from './enums/TreeStyle';
 
+export * from './GridAutosizeMode';
 export * from './helpers/GridCountLabel';
 
 export * from './renderers/MultiFieldRenderer';
 
-export * from './GridAutosizeMode';
 export * from './Grid';
 export * from './GridModel';

package/core/XH.js

@@ -828,12 +828,12 @@ class XHClass extends HoistBase {
         return await this.fetchService
             .fetchJson({
                 url: 'xh/authStatus',
-                timeout: 3 * MINUTES     // Accomodate delay for user at a credentials prompt
+                timeout: 3 * MINUTES     // Accommodate delay for user at a credentials prompt
             })
             .then(r => r.authenticated)
             .catch(e => {
                 // 401s normal / expected for non-SSO apps when user not yet logged in.
-                if (e.httpStatus == 401) return false;
+                if (e.httpStatus === 401) return false;
                 // Other exceptions indicate e.g. connectivity issue, server down - raise to user.
                 throw e;
             });

package/desktop/appcontainer/AppContainer.js

@@ -150,7 +150,14 @@ const bannerList = hoistCmp.factory({
 
 function globalHotKeys(model) {
     const {impersonationBarModel, optionsDialogModel} = model,
-        ret = [];
+        ret = [
+            {
+                global: true,
+                combo: 'shift + r',
+                label: 'Refresh application data',
+                onKeyDown: () => XH.refreshAppAsync()
+            }
+        ];
 
     if (XH.identityService.canAuthUserImpersonate) {
         ret.push({

package/desktop/appcontainer/ExceptionDialog.js

@@ -96,5 +96,5 @@ export const dismissButton = hoistCmp.factory(
 );
 
 function isSessionExpired(e) {
-    return e && e.httpStatus === 401;
+    return e?.httpStatus === 401;
 }

package/desktop/appcontainer/IdlePanel.scss

@@ -10,8 +10,9 @@
   border: var(--xh-border-solid);
 
   img {
+    display: block;
+    margin: 0 auto var(--xh-pad-px);
     border-bottom: var(--xh-border-solid);
-    margin-bottom: var(--xh-pad-px);
   }
 
   p {

package/desktop/cmp/contextmenu/StoreContextMenu.js

@@ -155,14 +155,13 @@ export class StoreContextMenu {
                     recordsRequired: true,
                     actionFn: ({record, column}) => {
                         if (record && column) {
-                            const value = column.getValueFn({
-                                record,
-                                column,
-                                field: column.field,
-                                store: record.store,
-                                gridModel
-                            });
-
+                            const node = gridModel.agApi?.getRowNode(record.id),
+                                value = XH.gridExportService.getExportableValueForCell({
+                                    gridModel,
+                                    record,
+                                    column,
+                                    node
+                                });
                             copy(value);
                         }
                     }

package/desktop/cmp/dash/DashContainer.scss

@@ -10,3 +10,12 @@
     }
   }
 }
+
+.xh-dash-container-menu-btn {
+  margin: 2px 0;
+  padding: 0 !important;
+  height: 22px;
+  width: 22px;
+  min-height: 22px;
+  min-width: 22px;
+}

package/desktop/cmp/dash/DashContainerModel.js

@@ -4,6 +4,7 @@
  *
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
+import ReactDOM from 'react-dom';
 import {HoistModel, managed, RefreshMode, RenderMode, XH, PersistenceProvider, TaskObserver} from '@xh/hoist/core';
 import {convertIconToHtml, deserializeIcon} from '@xh/hoist/icon';
 import {ContextMenu} from '@xh/hoist/kit/blueprint';
@@ -15,6 +16,7 @@ import {createObservableRef} from '@xh/hoist/utils/react';
 import {cloneDeep, defaultsDeep, find, isFinite, reject} from 'lodash';
 import {DashViewModel} from './DashViewModel';
 import {DashViewSpec} from './DashViewSpec';
+import {dashContainerMenuButton} from './impl/DashContainerMenuButton';
 import {dashContainerContextMenu} from './impl/DashContainerContextMenu';
 import {convertGLToState, convertStateToGL, getViewModelId} from './impl/DashContainerUtils';
 import {dashView} from './impl/DashView';
@@ -96,6 +98,8 @@ export class DashContainerModel extends HoistModel {
     @bindable contentLocked;
     /** @member {boolean} */
     @bindable renameLocked;
+    /** @member {boolean} */
+    @bindable showMenuButton;
 
     //------------------------
     // Immutable public properties
@@ -131,6 +135,8 @@ export class DashContainerModel extends HoistModel {
      * @param {boolean} [c.layoutLocked] - prevent re-arranging views by dragging and dropping.
      * @param {boolean} [c.contentLocked] - prevent adding and removing views.
      * @param {boolean} [c.renameLocked] - prevent renaming views.
+     * @param {boolean} [c.showMenuButton] - true to include a button in each stack header showing
+     *      the dash context menu.
      * @param {Object} [c.goldenLayoutSettings] - custom settings to be passed to the GoldenLayout instance.
      *      @see http://golden-layout.com/docs/Config.html
      * @param {PersistOptions} [c.persistWith] - options governing persistence
@@ -149,6 +155,7 @@ export class DashContainerModel extends HoistModel {
         layoutLocked = false,
         contentLocked = false,
         renameLocked = false,
+        showMenuButton = false,
         goldenLayoutSettings,
         persistWith = null,
         emptyText = 'No views have been added to the container.',
@@ -169,6 +176,7 @@ export class DashContainerModel extends HoistModel {
         this.layoutLocked = layoutLocked;
         this.contentLocked = contentLocked;
         this.renameLocked = renameLocked;
+        this.showMenuButton = showMenuButton;
         this.goldenLayoutSettings = goldenLayoutSettings;
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
@@ -380,6 +388,10 @@ export class DashContainerModel extends HoistModel {
         // Listen to active item change to support RenderMode
         stack.on('activeContentItemChanged', () => this.onStackActiveItemChange(stack));
 
+        // Add menu button to stack header
+        const containerEl = stack.header.controlsContainer[0];
+        ReactDOM.render(dashContainerMenuButton({dashContainerModel: this, stack}), containerEl);
+
         // Add context menu listener for adding components
         const $el = stack.header.element;
         $el.off('contextmenu').contextmenu(e => {

package/desktop/cmp/dash/impl/DashContainerContextMenu.js

@@ -19,7 +19,7 @@ import {isEmpty} from 'lodash';
  * @private
  */
 export const dashContainerContextMenu = hoistCmp.factory({
-    model: null, observable: null,
+    model: null, observer: null,
     render(props) {
         const menuItems = createMenuItems(props);
         return contextMenu({menuItems});

package/desktop/cmp/dash/impl/DashContainerMenuButton.js

@@ -0,0 +1,34 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2021 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {popover, Position} from '@xh/hoist/kit/blueprint';
+import {dashContainerContextMenu} from './DashContainerContextMenu';
+
+/**
+ * Button and popover for displaying the context menu. Apps can control whether this button is
+ * displayed via DashContainerModel's `showMenuButton` config.
+ *
+ * @see DashContainerModel
+ * @private
+ */
+export const dashContainerMenuButton = hoistCmp.factory({
+    model: null,
+    render({stack, dashContainerModel}) {
+        if (dashContainerModel.contentLocked || !dashContainerModel.showMenuButton) return null;
+
+        return popover({
+            position: Position.BOTTOM,
+            target: button({
+                icon: Icon.ellipsisVertical(),
+                className: 'xh-dash-container-menu-btn'
+            }),
+            content: dashContainerContextMenu({stack, dashContainerModel})
+        });
+    }
+});

package/desktop/cmp/grid/editors/SelectEditor.js

@@ -23,6 +23,11 @@ export const [SelectEditor, selectEditor] = hoistCmp.withFactory({
                 hideDropdownIndicator: true,
                 hideSelectedOptionCheck: true,
                 selectOnFocus: false,
+                onCommit: () => {
+                    // When not full-row editing we end editing after commit to avoid extra clicks
+                    const {gridModel} = props;
+                    if (!gridModel.fullRowEditing) gridModel.endEditAsync();
+                },
                 rsOptions: {
                     styles: {
                         menu: styles => ({

package/desktop/cmp/input/Select.scss

@@ -182,6 +182,7 @@
     &__value-container--is-multi {
       height: 28px;
       overflow-y: auto !important;
+      line-height: 1.2; // Ensure the line-height does not cause the scrollbar to appear
     }
   }
 }

package/desktop/cmp/panel/impl/dragger/DraggerModel.js

@@ -59,6 +59,8 @@ export class DraggerModel extends HoistModel {
             'Resizable panel has no sibling panel against which to resize.'
         );
 
+        if (XH.isDesktop) this.setIframePointerEvents('none');
+
         e.stopPropagation();
 
         const {clientX, clientY} = this.parseEventPositions(e);
@@ -113,6 +115,8 @@ export class DraggerModel extends HoistModel {
     };
 
     onDragEnd = () => {
+        if (XH.isDesktop) this.setIframePointerEvents('auto');
+
         const {panelModel} = this;
         if (!panelModel.isResizing) return;
 
@@ -216,4 +220,14 @@ export class DraggerModel extends HoistModel {
     isValidTouchEvent(e) {
         return e.touches && e.touches.length > 0;
     }
+
+    /**
+     * @param {('none'|'auto')} v - Workaround to allow dragging over iframe, which is its own
+     *  separate document and cannot listen for events from main document.
+     */
+    setIframePointerEvents(v) {
+        for (const el of document.getElementsByTagName('iframe')) {
+            el.style['pointer-events'] = v;
+        }
+    }
 }

package/mobile/appcontainer/ExceptionDialog.js

@@ -79,6 +79,6 @@ export const dismissButton = hoistCmp.factory(
 );
 
 function sessionExpired(e) {
-    return e && e.httpStatus === 401;
+    return e?.httpStatus === 401;
 }
 

package/mobile/cmp/header/AppBar.js

@@ -66,9 +66,8 @@ export const [AppBar, appBar] = hoistCmp.withFactory({
                     icon: icon,
                     omit: !icon,
                     onClick: () => {
-                        if (XH.routerModel.hasRoute('default')) {
-                            XH.navigate('default');
-                        }
+                        // Navigate to root-level route
+                        XH.navigate(XH.appModel.getRoutes()[0].name);
                     }
                 }),
                 div({

package/package.json

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

package/svc/FetchService.js

@@ -4,14 +4,14 @@
  *
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
-import {HoistService, XH} from '@xh/hoist/core';
+import {HoistService, XH, AppState} from '@xh/hoist/core';
 import {Exception} from '@xh/hoist/exception';
-import {isLocalDate} from '@xh/hoist/utils/datetime';
+import {isLocalDate, SECONDS, ONE_MINUTE, olderThan} from '@xh/hoist/utils/datetime';
 import {throwIf} from '@xh/hoist/utils/js';
 import {StatusCodes} from 'http-status-codes';
 import {isDate, isFunction, isNil, omitBy} from 'lodash';
 import {stringify} from 'qs';
-import {SECONDS} from '@xh/hoist/utils/datetime';
+import {never} from '@xh/hoist/promise';
 
 /**
  * Service for making managed HTTP requests, both to the app's own Hoist server and to remote APIs.
@@ -27,6 +27,11 @@ import {SECONDS} from '@xh/hoist/utils/datetime';
  *
  * Note that the convenience methods `fetchJson`, `postJson`, `putJson` all accept the same options
  * as the main entry point `fetch`, as they delegate to fetch after setting additional defaults.
+ *
+ * Note: For non-SSO apps, FetchService will automatically trigger a reload of the app if a
+ * 401 is encountered from a local (relative) request.  This default behavior is designed to allow
+ * more seamless re-establishment of timed out authentication sessions, but can be turned off
+ * via config if needed.
  */
 export class FetchService extends HoistService {
 
@@ -164,7 +169,7 @@ export class FetchService extends HoistService {
             }
 
             if (e.isHoistException) throw e;
-            
+
             // Just two other cases where we expect this to throw -- Typically we get a failed response)
             throw (e.name === 'AbortError') ? Exception.fetchAborted(opts, e) : Exception.serverUnavailable(opts, e);
         } finally {
@@ -185,8 +190,8 @@ export class FetchService extends HoistService {
         if (!method) {
             method = (params ? 'POST' : 'GET');
         }
-
-        if (!url.startsWith('/') && !url.includes('//')) {
+        const isRelativeUrl = !url.startsWith('/') && !url.includes('//');
+        if (isRelativeUrl) {
             url = XH.baseUrl + url;
         }
 
@@ -232,12 +237,31 @@ export class FetchService extends HoistService {
 
         if (!ret.ok) {
             ret.responseText = await this.safeResponseTextAsync(ret);
-            throw Exception.fetchError(opts, ret);
+            const e = Exception.fetchError(opts, ret);
+            if (!XH.isSSO && isRelativeUrl && e.httpStatus === 401) {
+                await this.maybeReloadForAuthAsync();
+            }
+            throw e;
         }
 
         return ret;
     }
 
+    async maybeReloadForAuthAsync() {
+        const {appState, configService, localStorageService} = XH;
+
+        // Don't interfere with initialization, avoid tight loops, and provide kill switch
+        if (
+            appState === AppState.RUNNING &&
+            configService.get('xhReloadOnFailedAuth', true) &&
+            olderThan(localStorageService.get('xhLastFailedAuthReload', null), ONE_MINUTE)
+        ) {
+            localStorageService.set('xhLastFailedAuthReload', Date.now());
+            XH.reloadApp();
+            await never();
+        }
+    }
+
     async sendJsonInternalAsync(opts) {
         return this.fetchJson({
             ...opts,

package/svc/GridExportService.js

@@ -12,7 +12,18 @@ import {SECONDS} from '@xh/hoist/utils/datetime';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import download from 'downloadjs';
 import {StatusCodes} from 'http-status-codes';
-import {castArray, isArray, isFunction, isNil, isString, sortBy, uniq, compact, findIndex} from 'lodash';
+import {
+    castArray,
+    isArray,
+    isEmpty,
+    isFunction,
+    isNil,
+    isString,
+    sortBy,
+    uniq,
+    compact,
+    findIndex
+} from 'lodash';
 import {span, a} from '@xh/hoist/cmp/layout';
 import {wait} from '@xh/hoist/promise';
 
@@ -131,6 +142,61 @@ export class GridExportService extends HoistService {
         }
     }
 
+    /**
+     * Get the exportable value for a given cell.
+     *
+     * This method is used internally by this service, but also made available
+     * publicly for use by grid clipboard functionality.
+     *
+     * @param {Object} c
+     * @param {GridModel} c.gridModel
+     * @param {Record} c.record
+     * @param {Column} c.column
+     * @param {Object} [c.node] - rendered ag-Grid row, if available.  Necessary for
+     *            exporting agGrid aggregates.
+     * @param {boolean} [c.forServer] - for posting to server, default false.
+     * @return {String} - value suitable for export to excel, csv, or clipboard.
+     */
+    getExportableValueForCell({gridModel, record, column, node, forServer = false}) {
+        const {field, exportValue, getValueFn} = column,
+            aggData = node && gridModel.treeMode && !isEmpty(record.children) ? node.aggData : null;
+
+        // 0) Main processing
+        let value = getValueFn({record, field, column, gridModel});
+        // Modify value using exportValue
+        if (isString(exportValue) && record.data[exportValue] !== null) {
+            // If exportValue points to a different field
+            value = record.data[exportValue];
+        } else if (isFunction(exportValue)) {
+            // If export value is a function that transforms the value
+            value = exportValue(value, {record, column, gridModel});
+        } else if (aggData && !isNil(aggData[field])) {
+            // If we found aggregate data calculated by agGrid
+            value = aggData[field];
+        }
+
+        if (isNil(value)) return null;
+
+        // 1) Support per-cell exportFormat
+        let {exportFormat} = column,
+            cellHasExportFormat = isFunction(exportFormat);
+
+        if (cellHasExportFormat) {
+            exportFormat = exportFormat(value, {record, column, gridModel});
+        }
+
+        // 2) Dates: Provide date data expected by server endpoint.
+        // Also, approximate formats for CSV and clipboard.
+        if (exportFormat === ExportFormat.DATE_FMT) value = fmtDate(value);
+        if (exportFormat === ExportFormat.DATETIME_FMT) value = fmtDate(value, 'YYYY-MM-DD HH:mm:ss');
+
+        value = value.toString();
+
+        return forServer && cellHasExportFormat ?
+            {value, format: exportFormat} :
+            value;
+    }
+
     //-----------------------
     // Implementation
     //-----------------------
@@ -255,48 +321,13 @@ export class GridExportService extends HoistService {
     }
 
     getRecordRow(gridModel, record, columns, depth) {
-        let aggData = null;
-        if (gridModel.treeMode && record.children.length) {
-            aggData = gridModel.agApi.getRowNode(record.id).aggData;
-        }
-        const data = columns.map(it => this.getCellData(gridModel, record, it, aggData));
+        const node = gridModel.agApi?.getRowNode(record.id),
+            data = columns.map(column => {
+                return this.getExportableValueForCell({gridModel, record, column, node, forServer: true});
+            });
         return {data, depth};
     }
 
-    getCellData(gridModel, record, column, aggData) {
-        const {field, exportValue, getValueFn} = column;
-
-        let value = getValueFn({record, field, column, gridModel});
-        // Modify value using exportValue
-        if (isString(exportValue) && record.data[exportValue] !== null) {
-            // If exportValue points to a different field
-            value = record.data[exportValue];
-        } else if (isFunction(exportValue)) {
-            // If export value is a function that transforms the value
-            value = exportValue(value, {record, column, gridModel});
-        } else if (aggData && !isNil(aggData[field])) {
-            // If we found aggregate data calculated by agGrid
-            value = aggData[field];
-        }
-
-        if (isNil(value)) return null;
-
-        // Get cell-level format if function form provided
-        let {exportFormat} = column,
-            cellHasExportFormat = isFunction(exportFormat);
-
-        if (cellHasExportFormat) {
-            exportFormat = exportFormat(value, {record, column, gridModel});
-        }
-
-        // Enforce date formats expected by server
-        if (exportFormat === ExportFormat.DATE_FMT) value = fmtDate(value);
-        if (exportFormat === ExportFormat.DATETIME_FMT) value = fmtDate(value, 'YYYY-MM-DD HH:mm:ss');
-
-        value = value.toString();
-        return cellHasExportFormat ? {value, format: exportFormat} : value;
-    }
-
     getContentType(type) {
         switch (type) {
             case 'excelTable':

package/utils/js/Decorators.js

@@ -6,7 +6,7 @@
  */
 import {debounce, isFunction} from 'lodash';
 import {throwIf, getOrCreate} from './LangUtils';
-import {withDebug} from './WithDebug';
+import {withDebug} from './LogUtils';
 
 /**
  * Decorates a class method so that it is debounced by the specified duration.
@@ -30,7 +30,7 @@ export function debounced(duration) {
 }
 
 /**
- * Modify a method or getter so that it will compute once lazily, and then cache the results.
+ * Modify a method or getter so that it will compute once lazily and then cache the results.
  * Not appropriate for methods that take arguments. Typically useful on immutable objects.
  */
 export function computeOnce(target, key, descriptor) {
@@ -51,8 +51,8 @@ export function computeOnce(target, key, descriptor) {
 }
 
 /**
- * Modify a method so that it execution is tracked and timed with a debug message
- * @see {withDebug}
+ * Modify a method so that its execution is tracked and timed with a debug message.
+ * @see withDebug
  */
 export function logWithDebug(target, key, descriptor) {
     const {value} = descriptor;

package/utils/js/LogUtils.js

@@ -0,0 +1,119 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2021 Extremely Heavy Industries Inc.
+ */
+import {castArray, isString} from 'lodash';
+import {apiDeprecated} from './LangUtils';
+
+/**
+ * Track a function execution with console.log.
+ *
+ * This method will log the provided message(s) with timing information in a single message *after*
+ * the tracked function returns.
+ *
+ * If the function passed to this util returns a Promise, it will wait until the Promise resolves
+ * or completes to finish its logging. The actual object returned by the tracked function will
+ * always be returned directly to the caller.
+ *
+ * @param {(string[]|string)} msgs
+ * @param {function} fn
+ * @param {(Object|string)} [source] - class, function or string to label the source of the message
+ */
+export function withInfo(msgs, fn, source) {
+    return loggedDo(msgs, fn, source, 'info');
+}
+
+/**
+ * Track a function execution with console.debug.
+ * @see withInfo
+ *
+ * @param {(string[]|string)} msgs
+ * @param {function} fn
+ * @param {(Object|string)} [source] - class, function or string to label the source of the message
+ */
+export function withDebug(msgs, fn, source) {
+    return loggedDo(msgs, fn, source, 'debug');
+}
+
+/**
+ * Log a message with console.log.
+ *
+ * @param {(string[]|string)} msgs
+ * @param {(Object|string)} [source] - class, function or string to label the source of the message
+ */
+export function logInfo(msgs, source) {
+    return loggedDo(msgs, null, source, 'info');
+}
+
+/**
+ * Log a message with console.debug.
+ *
+ * @param {(string[]|string)} msgs
+ * @param {(Object|string)} [source] - class, function or string to label the source of the message
+ */
+export function logDebug(msgs, source) {
+    return loggedDo(msgs, null, source, 'debug');
+}
+
+/** @deprecated */
+export function withShortDebug(msgs, fn, source) {
+    apiDeprecated('withShortDebug', {msg: 'Use withDebug() instead', v: 'v45'});
+    return withDebug(msgs, fn, source);
+}
+
+
+//----------------------------------
+// Implementation
+//----------------------------------
+function loggedDo(msgs, fn, source, level) {
+    source = parseSource(source);
+    msgs = castArray(msgs);
+    const msg = msgs.join(' | ');
+
+    // Support simple message only.
+    if (!fn) {
+        writeLog(msg, source, level);
+        return;
+    }
+
+    // Otherwise, wrap the call to the provided fn.
+    let start, ret;
+    const logCompletion = () => {
+            const elapsed = Date.now() - start;
+            writeLog(`${msg} | ${elapsed}ms`, source, level);
+        },
+        logException =  (e) => {
+            const elapsed = Date.now() - start;
+            writeLog(`${msg} | failed - ${e.message ?? e.name ?? 'Unknown error'} | ${elapsed}ms`, source, level);
+        };
+
+    start = Date.now();
+    try {
+        ret = fn();
+    } catch (e) {
+        logException(e);
+        throw e;
+    }
+
+    if (ret instanceof Promise) {
+        ret.then(logCompletion, logException);
+    } else {
+        logCompletion();
+    }
+
+    return ret;
+}
+
+function parseSource(source) {
+    if (isString(source)) return source;
+    if (source?.displayName) return source.displayName;
+    if (source?.constructor) return source.constructor.name;
+    return '';
+}
+
+function writeLog(msg, source, level) {
+    if (source) msg = `[${source}] ${msg}`;
+    level === 'info' ? console.log(msg) : console.debug(msg);
+}

package/utils/js/index.js

@@ -7,7 +7,7 @@
 export * from './HtmlUtils';
 export * from './LangUtils';
 export * from './Decorators';
-export * from './WithDebug';
+export * from './LogUtils';
 export * from './DomUtils';
 export * from './BrowserUtils';
 export * from './VersionUtils';

package/utils/js/WithDebug.js

@@ -1,104 +0,0 @@
-/*
- * This file belongs to Hoist, an application development toolkit
- * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
- *
- * Copyright © 2021 Extremely Heavy Industries Inc.
- */
-import {castArray, isString} from 'lodash';
-import {apiDeprecated} from './LangUtils';
-
-/**
- * Track a function execution, logging the provided message(s) on debug with timing information in
- * a single message after the tracked function returns.
- *
- * If the function passed to this util returns a Promise, it will wait until the Promise resolves
- * or completes to finish its logging. The actual object returned by the tracked function will
- * always be returned directly to the caller.
- *
- * @param {(string[]|string)} msgs
- * @param {function} fn
- * @param {(Object|string)} [source] - class, function or string to label the source of the message
- */
-export function withDebug(msgs, fn, source) {
-    return loggedDo(msgs, fn, source);
-}
-
-
-/**
- * Track a function execution, logging the provided message(s) on debug with timing information in
- * a single message after the tracked function returns.
- *
- * @deprecated use withDebug instead.
- */
-export function withShortDebug(msgs, fn, source) {
-    apiDeprecated('withShortDebug', {msg: 'Use withDebug() instead', v: 'v44'});
-    return withDebug(msgs, fn, source);
-}
-
-/**
- * Log a message for debugging with standardized formatting.
- *
- * @param {(string[]|string)} msgs
- * @param {(Object|string)} [source] - class, function or string to label the source of the message
- */
-export function logDebug(msgs, source) {
-    return loggedDo(msgs, null, source);
-}
-
-//----------------------------------
-// Implementation
-//----------------------------------
-function loggedDo(msgs, fn, source) {
-
-    source = parseSource(source);
-    msgs = castArray(msgs);
-    const msg = msgs.join(' | ');
-
-    // Support simple message only
-    if (!fn) {
-        writeLog(msg, source);
-        return;
-    }
-
-    // ..otherwise a wrapped call..
-    const start = Date.now();
-    let ret;
-    try {
-        ret = fn();
-    } catch (e) {
-        logException(start, msg, source, e);
-        throw e;
-    }
-
-    if (ret instanceof Promise) {
-        ret.then(
-            () => logCompletion(start, msg, source),
-            (e) => logException(start, msg, source, e)
-        );
-    } else {
-        logCompletion(start, msg, source);
-    }
-
-    return ret;
-}
-
-function parseSource(source) {
-    if (isString(source)) return source;
-    if (source?.displayName) return source.displayName;
-    if (source?.constructor) return source.constructor.name;
-    return '';
-}
-
-function writeLog(msg, source) {
-    console.debug(source ? `[${source}] ${msg}` : msg);
-}
-
-function logCompletion(start, msg, source) {
-    const elapsed = Date.now() - start;
-    writeLog(`${msg} | ${elapsed}ms`, source);
-}
-
-function logException(start, msg, source, e)  {
-    const elapsed = Date.now() - start;
-    writeLog(`${msg} | failed - ${e.message || e.name || 'Unknown error'} | ${elapsed}ms`, source);
-}