@xh/hoist 47.0.1 → 47.1.2

package/CHANGELOG.md

@@ -1,13 +1,46 @@
 # Changelog
 
-## v47.0.1 - 2022-03-06
+## v47.1.2 - 2022-04-01
 
-[Commit Log](https://github.com/xh/hoist-react/compare/v47.0.0...v47.0.1)
+### 🐞 Bug Fixes
+
+* `FieldFilter`'s check of `committedData` is now null safe.  A record with no `committedData` will not be filtered out.
+
+
+## v47.1.1 - 2022-03-26
+
+### 🎁 New Features
+
+* New "sync with system" theme option - sets the Hoist theme to light/dark based on the user's OS.
+* Added `cancelAlign` config to `XH.message()` and variants. Customize to "left" to render
+  Cancel and Confirm actions separated by a filler.
+* Added `GridModel.restoreDefaultsFn`, an optional function called after `restoreDefaultsAsync`.
+  Allows apps to run additional, app-specific logic after a grid has been reset (e.g. resetting
+  other, related preferences or state not managed by `GridModel` directly).
+* Added `AppSpec.lockoutPanel`, allowing apps to specify a custom component.
+
+### 🐞 Bug Fixes
+
+* Fixed column auto-sizing when `headerName` is/returns an element.
+* Fixed bug where subforms were not properly registering as dirty.
+* Fixed an issue where `Select` inputs would commit `null` whilst clearing the text input.
+* Fixed `Clock` component bug introduced in v47 (configured timezone was not respected).
+
+### 📚 Libraries
+
+* @blueprintjs/core `3.53 -> 3.54`
+* @blueprintjs/datetime `3.23 -> 3.24`
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v47.0.1...v47.1.1)
+
+## v47.0.1 - 2022-03-06
 
 ### 🐞 Bug Fixes
 
 * Fix to mobile `ColChooser` error re. internal model handling.
 
+[Commit Log](https://github.com/xh/hoist-react/compare/v47.0.0...v47.0.1)
+
 ## v47.0.0 - 2022-03-04
 
 ### 🎁 New Features

package/admin/tabs/general/about/AboutPanel.scss

@@ -20,27 +20,29 @@
   }
 
   table {
-    margin: var(--xh-pad-px);
-    border-spacing: 0;
-    border-collapse: collapse;
-    min-width: 500px;
     background-color: var(--xh-bg);
-  }
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: var(--xh-pad-px);
 
-  tr {
-    border: var(--xh-border-solid);
-  }
+    tr {
+      border: var(--xh-border-solid);
+    }
 
-  th {
-    padding: var(--xh-pad-half-px);
-    background-color: var(--xh-bg-alt);
-    width: 180px;
-    text-align: right;
-    vertical-align: top;
-  }
+    th {
+      background-color: var(--xh-bg-alt);
+      padding: var(--xh-pad-half-px);
+      text-align: right;
+      vertical-align: top;
+      width: 180px;
+    }
 
-  td {
-    padding: var(--xh-pad-half-px);
+    td {
+      max-width: 600px;
+      min-width: 600px;
+      padding: var(--xh-pad-half-px);
+      word-wrap: break-word;
+    }
   }
 
   &__blurb {

package/appcontainer/MessageModel.js

@@ -23,6 +23,7 @@ export class MessageModel extends HoistModel {
     input;
     confirmProps;
     cancelProps;
+    cancelAlign;
     onConfirm;
     onCancel;
     messageKey;
@@ -41,6 +42,7 @@ export class MessageModel extends HoistModel {
         input,
         confirmProps = {},
         cancelProps = {},
+        cancelAlign = 'right',
         onConfirm,
         onCancel,
 
@@ -73,6 +75,7 @@ export class MessageModel extends HoistModel {
 
         this.confirmProps = this.parseButtonProps(confirmProps, () => this.doConfirmAsync(), confirmText, confirmIntent);
         this.cancelProps = this.parseButtonProps(cancelProps, () => this.doCancel(), cancelText, cancelIntent);
+        this.cancelAlign = cancelAlign;
 
         this.onConfirm = onConfirm;
         this.onCancel = onCancel;
@@ -135,7 +138,7 @@ export class MessageModel extends HoistModel {
 
 /**
  * @typedef {Object} MessageInput
- * @property {Element} [item] - the react element to render; should be a HoistInput, defaults to a
+ * @property {Element} [item] - the React element to render; should be a HoistInput, defaults to a
  *      platform appropriate TextInput.
  * @property {Rule[]} [rules] - validation constraints to apply.
  * @property {*} [initialValue] - initial value for the input.

package/appcontainer/ThemeModel.js

@@ -13,8 +13,8 @@ import {action, observable, makeObservable} from '@xh/hoist/mobx';
  *  @private
  */
 export class ThemeModel extends HoistModel {
-
-    @observable darkTheme = false;
+    /** @member {boolean} */
+    @observable darkTheme;
 
     constructor() {
         super();
@@ -23,7 +23,7 @@ export class ThemeModel extends HoistModel {
 
     @action
     toggleTheme() {
-        this.setDarkTheme(!this.darkTheme);
+        this.setTheme(this.darkTheme ? 'light' : 'dark');
     }
 
     @action
@@ -32,10 +32,33 @@ export class ThemeModel extends HoistModel {
         classList.toggle('xh-dark', value);
         classList.toggle('bp3-dark', value);
         this.darkTheme = value;
-        XH.setPref('xhTheme', value ? 'dark' : 'light');
+
+    }
+
+    @action
+    setTheme(value) {
+        switch (value) {
+            case 'system':
+                this.setDarkTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
+                break;
+            case 'dark':
+                this.setDarkTheme(true);
+                break;
+            case 'light':
+                this.setDarkTheme(false);
+                break;
+            default:
+                throw XH.exception("Unrecognized value for theme pref.  Must be either 'system', 'dark', or 'light'.");
+        }
+        XH.setPref('xhTheme', value);
     }
 
     init() {
-        this.setDarkTheme(XH.getPref('xhTheme') === 'dark');
+        this.setTheme(XH.getPref('xhTheme'));
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+            if (XH.getPref('xhTheme') === 'system') {
+                this.setDarkTheme(event.matches);
+            }
+        });
     }
 }

package/cmp/clock/Clock.js

@@ -86,7 +86,7 @@ class LocalModel extends HoistModel {
     }
 
     async loadTimezoneOffsetAsync() {
-        const {timezone} = this;
+        const {timezone} = this.componentProps;
 
         try {
             if (!timezone) {
@@ -95,10 +95,11 @@ class LocalModel extends HoistModel {
                 return;
             }
 
-            this.offset = await XH.fetchJson({
+            const offsetResp = await XH.fetchJson({
                 url: 'xh/getTimeZoneOffset',
                 params: {timeZoneId: timezone}
             });
+            this.offset = offsetResp.offset;
             this.offsetException = null;
         } catch (e) {
             XH.handleException(e, {showAlert: false, logOnServer: false});

package/cmp/form/field/SubformsFieldModel.js

@@ -8,7 +8,7 @@ import {managed, XH} from '@xh/hoist/core';
 import {ValidationState} from '@xh/hoist/data';
 import {action, computed, makeObservable, override} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
-import {clone, defaults, flatMap, isArray, partition, without} from 'lodash';
+import {clone, defaults, isEqual, flatMap, isArray, partition, without} from 'lodash';
 import {executeIfFunction, withDefault} from '../../../utils/js';
 import {FormModel} from '../FormModel';
 import {BaseFieldModel} from './BaseFieldModel';
@@ -121,7 +121,12 @@ export class SubformsFieldModel extends BaseFieldModel {
 
     @computed
     get isDirty() {
-        return this.value.some(s => s.isDirty) || super.isDirty;
+        // Catch changed values within subforms, as well as adds/deletes/sorts
+        const {value, initialValue} = this;
+        return (
+            value.some(s => s.isDirty) ||
+            !isEqual(initialValue.map(s => s.getData()), value.map(s => s.getData()))
+        );
     }
 
     @override

package/cmp/grid/GridModel.js

@@ -111,6 +111,8 @@ export class GridModel extends HoistModel {
     useVirtualColumns;
     /** @member {GridAutosizeOptions} */
     autosizeOptions;
+    /** @member {function} */
+    restoreDefaultsFn;
     /** @member {ReactNode} */
     restoreDefaultsWarning;
     /** @member {boolean} */
@@ -218,6 +220,9 @@ export class GridModel extends HoistModel {
      *      GridFilterModel, or boolean `true` to enable default. Desktop only.
      * @param {(ColChooserModelConfig|boolean)} [c.colChooserModel] - config with which to create a
      *      ColChooserModel, or boolean `true` to enable default.
+     * @param {function} [c.restoreDefaultsFn] - Async function to be called when the user triggers
+     *      GridModel.restoreDefaultsAsync(). This function will be called after the built-in
+     *      defaults have been restored, and can be used to restore application specific defaults.
      * @param {?ReactNode} [c.restoreDefaultsWarning] - Confirmation warning to be presented to
      *      user before restoring default grid state. Set to null to skip user confirmation.
      * @param {GridModelPersistOptions} [c.persistWith] - options governing persistence.
@@ -359,6 +364,7 @@ export class GridModel extends HoistModel {
         contextMenu,
         useVirtualColumns = false,
         autosizeOptions = {},
+        restoreDefaultsFn,
         restoreDefaultsWarning = GridModel.DEFAULT_RESTORE_DEFAULTS_WARNING,
         fullRowEditing = false,
         clicksToEdit = 2,
@@ -398,6 +404,7 @@ export class GridModel extends HoistModel {
                 fillMode: 'none'
             }
         );
+        this.restoreDefaultsFn = restoreDefaultsFn;
         this.restoreDefaultsWarning = restoreDefaultsWarning;
         this.fullRowEditing = fullRowEditing;
         this.clicksToExpand = clicksToExpand;
@@ -486,6 +493,10 @@ export class GridModel extends HoistModel {
             await this.autosizeAsync();
         }
 
+        if (this.restoreDefaultsFn) {
+            await this.restoreDefaultsFn();
+        }
+
         return true;
     }
 

package/cmp/grid/impl/ColumnWidthCalculator.js

@@ -5,8 +5,11 @@
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
 
+import {XH} from '@xh/hoist/core';
 import {stripTags} from '@xh/hoist/utils/js';
-import {forOwn, groupBy, isEmpty, isFunction, isNil, map, max, min,  sortBy} from 'lodash';
+import {forOwn, groupBy, isEmpty, isArray, isFunction, isNil, isString, map, max, min, sortBy} from 'lodash';
+import {isValidElement} from 'react';
+import {renderToStaticMarkup} from 'react-dom/server';
 
 /**
  * Calculates the column width required to display column.  Used by GridAutoSizeService.
@@ -151,33 +154,48 @@ export class ColumnWidthCalculator {
     // Autosize header cell
     //------------------
     getHeaderWidth(gridModel, column, includeHeaderIcons, bufferPx) {
-        const {colId, headerName, agOptions, sortable, filterable} = column,
+        const {colId, agOptions, sortable, filterable} = column,
             {sizingMode} = gridModel,
-            headerHtml = isFunction(headerName) ? headerName({column, gridModel}) : headerName,
+            headerHtml = this.getHeaderHtml(gridModel, column),
+            headerClass = this.getHeaderClass(gridModel, column),
             showSort = sortable && (includeHeaderIcons || gridModel.sortBy.find(sorter => sorter.colId === colId)),
             showMenu = (agOptions?.suppressMenu === false || filterable) && includeHeaderIcons;
 
         // Render to a hidden header cell to calculate the max displayed width
         const headerEl = this.getHeaderEl();
-        this.setHeaderClassNames(sizingMode, showSort, showMenu);
+        this.setHeaderClassNames(sizingMode, showSort, showMenu, headerClass);
         headerEl.firstChild.innerHTML = headerHtml;
         return Math.ceil(headerEl.clientWidth) + bufferPx;
     }
 
+    getHeaderHtml(gridModel, column) {
+        const {headerName} = column,
+            headerValue = isFunction(headerName) ? headerName({column, gridModel}) : headerName;
+
+        if (isString(headerValue)) {
+            return headerValue;
+        } else if (isValidElement(headerValue)) {
+            return renderToStaticMarkup(headerValue);
+        }
+
+        throw XH.exception('Unable to get column header html because value is not a string or valid react element');
+    }
+
     resetHeaderClassNames() {
         const headerEl = this.getHeaderEl();
         headerEl.classList.remove(...headerEl.classList);
         headerEl.classList.add('xh-grid-autosize-header');
     }
 
-    setHeaderClassNames(sizingMode, showSort, showMenu) {
+    setHeaderClassNames(sizingMode, showSort, showMenu, headerClass) {
         this.resetHeaderClassNames();
         this.getHeaderEl().classList.add(
             'xh-grid-autosize-header--active',
-            `xh-grid-autosize-header--${sizingMode}`,
-            showSort ? 'xh-grid-autosize-header--sort' : null,
-            showMenu ? 'xh-grid-autosize-header--menu' : null
+            `xh-grid-autosize-header--${sizingMode}`
         );
+        if (showSort) this.getHeaderEl().classList.add('xh-grid-autosize-header--sort');
+        if (showMenu) this.getHeaderEl().classList.add('xh-grid-autosize-header--menu');
+        if (!isEmpty(headerClass)) this.getHeaderEl().classList.add(...headerClass.split(' '));
     }
 
     getHeaderEl() {
@@ -200,6 +218,24 @@ export class ColumnWidthCalculator {
         return this._headerEl;
     }
 
+    getHeaderClass(gridModel, column) {
+        let {headerClass} = column;
+        if (isNil(headerClass)) return '';
+
+        if (isFunction(headerClass)) {
+            headerClass = headerClass({column, gridModel});
+        }
+
+        const ret = [];
+        if (isString(headerClass)) {
+            ret.push(headerClass);
+        } else if (isArray(headerClass)) {
+            ret.push(...headerClass);
+        }
+
+        return ret.join(' ');
+    }
+
     //------------------
     // Autosize cell
     //------------------

package/core/AppSpec.js

@@ -40,11 +40,14 @@ export class AppSpec {
      * @param {boolean} [c.trackAppLoad] - true (default) to write a track log statement after the
      *      app has loaded and fully initialized, including elapsed time of asset loading and init.
      * @param {boolean} [c.webSocketsEnabled] - true to enable Hoist websocket connectivity,
-     *      establish a connection and initiate a heartbeat..
+     *      establish a connection and initiate a heartbeat.
      * @param {(Class|function)} [c.idlePanel] - optional custom Component to display when App has
-     *      been suspended.  The component will receive a single prop -- onReactivate -- a callback
+     *      been suspended. The component will receive a single prop -- onReactivate -- a callback
      *      called when the user has acknowledged the suspension and wishes to reload the app and
-     *      continue working.  Specify as a React Component or an element factory.
+     *      continue working. Specify as a React Component or an element factory.
+     * @param {(Class|function)} [c.lockoutPanel] - optional custom Component to display when the
+     *      user is denied access to app. Intended for apps that implement custom auth flows.
+     *      See also `lockoutMessage` for a more lightweight customization option.
      * @param {?string} [c.loginMessage] - optional message to show on login form (for non-SSO apps).
      * @param {?string} [c.lockoutMessage] - optional message to show users when denied access to app.
      * @param {boolean} [c.showBrowserContextMenu] - true to show the built-in browser context menu
@@ -67,6 +70,7 @@ export class AppSpec {
         trackAppLoad = true,
         webSocketsEnabled = false,
         idlePanel = null,
+        lockoutPanel = null,
         loginMessage = null,
         lockoutMessage = null,
         showBrowserContextMenu = false,
@@ -96,10 +100,11 @@ export class AppSpec {
         this.isMobileApp = isMobileApp;
         this.isSSO = isSSO;
         this.checkAccess = checkAccess;
-        this.trackAppLoad = trackAppLoad;
 
+        this.trackAppLoad = trackAppLoad;
         this.webSocketsEnabled = webSocketsEnabled;
         this.idlePanel = idlePanel;
+        this.lockoutPanel = lockoutPanel;
         this.loginMessage = loginMessage;
         this.lockoutMessage = lockoutMessage;
         this.showBrowserContextMenu = showBrowserContextMenu;

package/core/XH.js

@@ -29,7 +29,13 @@ import {
 } from '@xh/hoist/svc';
 import {Timer} from '@xh/hoist/utils/async';
 import {MINUTES} from '@xh/hoist/utils/datetime';
-import {checkMinVersion, getClientDeviceInfo, throwIf, withDebug} from '@xh/hoist/utils/js';
+import {
+    apiDeprecated,
+    checkMinVersion,
+    getClientDeviceInfo,
+    throwIf,
+    withDebug
+} from '@xh/hoist/utils/js';
 import {camelCase, compact, flatten, isBoolean, isString, uniqueId} from 'lodash';
 import ReactDOM from 'react-dom';
 import parser from 'ua-parser-js';
@@ -324,9 +330,22 @@ class XHClass extends HoistBase {
         return this.acm.themeModel.toggleTheme();
     }
 
-    /** Enable/disable the dark theme directly (useful for custom app option controls). */
+    /**
+     * Enable/disable the dark theme directly (useful for custom app option controls).
+     * @param {boolean} value
+     * @deprecated
+     */
     setDarkTheme(value) {
-        return this.acm.themeModel.setDarkTheme(value);
+        apiDeprecated('setDarkTheme', {v: '50', msg: 'Use setTheme instead.'});
+        this.setTheme(value ? 'dark' : 'light');
+    }
+
+    /**
+     * Sets the theme directly (useful for custom app option controls).
+     * @param {string} value - 'light', 'dark', or 'system'
+     */
+    setTheme(value) {
+        return this.acm.themeModel.setTheme(value);
     }
 
     /** Is the app currently rendering in dark theme? */
@@ -974,6 +993,8 @@ window['XH'] = XH;
  * @property {Object} [cancelProps] - props for secondary cancel button.
  *      Must provide either text or icon for button to be displayed, or use a preconfigured
  *      helper such as `XH.alert()` or `XH.confirm()` for default buttons.
+ * @property {string} [cancelAlign] - specify 'left' to place the Cancel button (if shown) on the
+ *      left edge of the dialog toolbar, with a filler between it and Confirm.
  * @property {function} [onConfirm] - Callback to execute when confirm is clicked.
  * @property {function} [onCancel] - Callback to execute when cancel is clicked.
  */

package/data/filter/FieldFilter.js

@@ -80,14 +80,15 @@ export class FieldFilter extends Filter {
 
         if (store) {
             const storeField = store.getField(field);
-            if (!storeField) return () => true; // Ignore if field not in store
+            if (!storeField) return () => true; // Ignore (do not filter out) if field not in store
 
             const fieldType = storeField.type;
             value = isArray(value) ?
                 value.map(v => parseFieldValue(v, fieldType)) :
                 parseFieldValue(value, fieldType);
         }
-        const getVal = store ? r => r.committedData[field] : r => r[field];
+        const getVal = store ? r => r.committedData[field] : r => r[field],
+            doNotFilter = r => store && isNil(r.committedData); // Ignore (do not filter out) record if part of a store and it has no committed data
 
         if (FieldFilter.ARRAY_OPERATORS.includes(op)) {
             value = castArray(value);
@@ -96,48 +97,66 @@ export class FieldFilter extends Filter {
         switch (op) {
             case '=':
                 return r => {
+                    if (doNotFilter(r)) return true; 
                     let v = getVal(r);
                     if (isNil(v) || v === '') v = null;
                     return value.includes(v);
                 };
             case '!=':
                 return r => {
+                    if (doNotFilter(r)) return true;
                     let v = getVal(r);
                     if (isNil(v) || v === '') v = null;
                     return !value.includes(v);
                 };
             case '>':
                 return r => {
+                    if (doNotFilter(r)) return true;
                     const v = getVal(r);
                     return !isNil(v) && v > value;
                 };
             case '>=':
                 return r => {
+                    if (doNotFilter(r)) return true;
                     const v = getVal(r);
                     return !isNil(v) && v >= value;
                 };
             case '<':
                 return r => {
+                    if (doNotFilter(r)) return true;
                     const v = getVal(r);
                     return !isNil(v) && v < value;
                 };
             case '<=':
                 return r => {
+                    if (doNotFilter(r)) return true;
                     const v = getVal(r);
                     return !isNil(v) && v <= value;
                 };
             case 'like':
                 regExps = value.map(v => new RegExp(escapeRegExp(v), 'i'));
-                return r => regExps.some(re => re.test(getVal(r)));
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    return regExps.some(re => re.test(getVal(r)));
+                };
             case 'not like':
                 regExps = value.map(v => new RegExp(escapeRegExp(v), 'i'));
-                return r => regExps.every(re => !re.test(getVal(r)));
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    regExps.every(re => !re.test(getVal(r)));
+                };
             case 'begins':
                 regExps = value.map(v => new RegExp('^' + escapeRegExp(v), 'i'));
-                return r => regExps.some(re => re.test(getVal(r)));
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    regExps.some(re => re.test(getVal(r)));
+                };
             case 'ends':
                 regExps = value.map(v => new RegExp(escapeRegExp(v) + '$', 'i'));
-                return r => regExps.some(re => re.test(getVal(r)));
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    regExps.some(re => re.test(getVal(r)));
+                };
             default:
                 throw XH.exception(`Unknown operator: ${op}`);
         }

package/desktop/appcontainer/AppContainer.js

@@ -96,7 +96,7 @@ function viewForState() {
         case S.LOGIN_REQUIRED:
             return loginPanel();
         case S.ACCESS_DENIED:
-            return lockoutPanel();
+            return lockoutView();
         case S.RUNNING:
             return appContainerView();
         case S.SUSPENDED:
@@ -107,6 +107,14 @@ function viewForState() {
     }
 }
 
+const lockoutView = hoistCmp.factory({
+    displayName: 'LockoutView',
+    render() {
+        const content = XH.appSpec.lockoutPanel ?? lockoutPanel;
+        return elementFromContent(content);
+    }
+});
+
 const appContainerView = hoistCmp.factory({
     displayName: 'AppContainerView',
 

package/desktop/appcontainer/ImpersonationBar.js

@@ -54,6 +54,7 @@ export const impersonationBar = hoistCmp.factory({
                     enableCreate: true,
                     placeholder: 'Select User...',
                     width: 250,
+                    menuWidth: 300,
                     onCommit: model.onCommit
                 }),
                 button({

package/desktop/appcontainer/Message.js

@@ -59,7 +59,7 @@ const inputCmp = hoistCmp.factory(
                 item: withDefault(input.item, textInput({
                     autoFocus: true,
                     selectOnFocus: true,
-                    onKeyDown: evt => {if (evt.key == 'Enter') model.doConfirmAsync();}
+                    onKeyDown: evt => {if (evt.key === 'Enter') model.doConfirmAsync();}
                 }))
             })
         });
@@ -68,13 +68,19 @@ const inputCmp = hoistCmp.factory(
 
 const bbar = hoistCmp.factory(
     ({model}) => {
-        const {confirmProps, cancelProps, formModel} = model,
-            ret = [filler()];
+        const {confirmProps, cancelProps, cancelAlign, formModel} = model,
+            ret = [];
 
         if (cancelProps) {
             ret.push(button(cancelProps));
         }
 
+        if (cancelAlign === 'left') {
+            ret.push(filler());
+        } else {
+            ret.unshift(filler());
+        }
+
         if (confirmProps) {
             // Merge in formModel.isValid here in render stage to get reactivity.
             ret.push(formModel ?

package/desktop/cmp/appOption/ThemeAppOption.js

@@ -22,14 +22,15 @@ export const themeAppOption = ({formFieldProps, inputProps} = {}) => {
             label: 'Theme',
             item: buttonGroupInput({
                 items: [
-                    button({value: false, text: 'Light', icon: Icon.sun(), width: '50%'}),
-                    button({value: true, text: 'Dark', icon: Icon.moon(), width: '50%'})
+                    button({value: 'light', text: 'Light', icon: Icon.sun(), width: '33.33%'}),
+                    button({value: 'dark', text: 'Dark', icon: Icon.moon(), width: '33.33%'}),
+                    button({value: 'system', text: 'System', icon: Icon.sync(), width: '33.33%'})
                 ],
                 ...inputProps
             }),
             ...formFieldProps
         },
-        valueGetter: () => XH.darkTheme,
-        valueSetter: (v) => XH.setDarkTheme(v)
+        prefName: 'xhTheme',
+        valueSetter: (v) => XH.setTheme(v)
     };
 };

package/desktop/cmp/input/Select.js

@@ -303,7 +303,6 @@ class Model extends HoistInputModel {
             if (action === 'input-change') {
                 this.inputValue = value;
                 this.inputValueChangedSinceSelect = true;
-                if (!value) this.noteValueChange(null);
             } else if (action === 'input-blur') {
                 this.inputValue = null;
                 this.inputValueChangedSinceSelect = false;
@@ -652,6 +651,7 @@ const cmp = hoistCmp.factory(
         if (model.manageInputValue) {
             rsProps.inputValue = model.inputValue || '';
             rsProps.onInputChange = model.onInputChange;
+            rsProps.controlShouldRenderValue = !model.hasFocus;
             rsProps.onMenuOpen = () => {
                 wait().then(()=> {
                     const selectedEl = document.getElementsByClassName('xh-select__option--is-selected')[0];

package/mobile/appcontainer/AppContainer.js

@@ -84,7 +84,7 @@ function viewForState() {
         case S.LOGIN_REQUIRED:
             return loginPanel();
         case S.ACCESS_DENIED:
-            return lockoutPanel();
+            return lockoutView();
         case S.RUNNING:
             return appContainerView();
         case S.SUSPENDED:
@@ -95,6 +95,14 @@ function viewForState() {
     }
 }
 
+const lockoutView = hoistCmp.factory({
+    displayName: 'LockoutView',
+    render() {
+        const content = XH.appSpec.lockoutPanel ?? lockoutPanel;
+        return elementFromContent(content);
+    }
+});
+
 const appContainerView = hoistCmp.factory({
     displayName: 'AppContainerView',
 

package/mobile/appcontainer/Message.js

@@ -25,8 +25,8 @@ export const message = hoistCmp.factory({
     model: uses(MessageModel),
 
     render({model}) {
-        const isOpen = model && model.isOpen,
-            {icon, title, message, formModel, cancelProps, confirmProps} = model,
+        const isOpen = model?.isOpen,
+            {icon, title, message, formModel, confirmProps, cancelProps, cancelAlign} = model,
             buttons = [];
 
         if (!isOpen) return null;
@@ -35,6 +35,14 @@ export const message = hoistCmp.factory({
             buttons.push(button({minimal: true, ...cancelProps}));
         }
 
+        if (cancelProps || confirmProps) {
+            if (cancelAlign === 'left') {
+                buttons.push(filler());
+            } else {
+                buttons.unshift(filler());
+            }
+        }
+
         if (confirmProps) {
             // Merge in formModel.isValid here in render stage to get reactivity.
             buttons.push(formModel ?
@@ -43,10 +51,6 @@ export const message = hoistCmp.factory({
             );
         }
 
-        if (buttons.length) {
-            buttons.unshift(filler());
-        }
-
         return dialog({
             isOpen,
             icon,

package/mobile/cmp/appOption/ThemeAppOption.js

@@ -22,16 +22,22 @@ export const themeAppOption = ({formFieldProps, inputProps} = {}) => {
             item: buttonGroupInput({
                 items: [
                     button({
-                        value: false,
+                        value: 'light',
                         text: 'Light',
                         icon: Icon.sun(),
-                        width: '50%'
+                        width: '33.33%'
                     }),
                     button({
-                        value: true,
+                        value: 'dark',
                         text: 'Dark',
                         icon: Icon.moon(),
-                        width: '50%'
+                        width: '33.33%'
+                    }),
+                    button({
+                        value: 'system',
+                        text: 'System',
+                        icon: Icon.sync(),
+                        width: '33.33%'
                     })
                 ],
                 width: '100%',
@@ -39,7 +45,7 @@ export const themeAppOption = ({formFieldProps, inputProps} = {}) => {
             }),
             ...formFieldProps
         },
-        valueGetter: () => XH.darkTheme,
-        valueSetter: (v) => XH.setDarkTheme(v)
+        prefName: 'xhTheme',
+        valueSetter: (v) => XH.setTheme(v)
     };
 };

package/mobile/cmp/form/FormField.js

@@ -209,7 +209,7 @@ const editableChild = hoistCmp.factory({
             model,
             bind: 'value',
             disabled: props.disabled || disabled,
-            ref: composeRefs(model._boundInputRef, child.ref)
+            ref: composeRefs(model?._boundInputRef, child.ref)
         };
 
         // If FormField is sized and item doesn't specify its own dimensions,

package/mobile/cmp/input/Select.js

@@ -288,7 +288,6 @@ class Model extends HoistInputModel {
             if (action === 'input-change') {
                 this.inputValue = value;
                 this.inputValueChangedSinceSelect = true;
-                if (!value) this.noteValueChange(null);
             } else if (action === 'input-blur') {
                 this.inputValue = null;
                 this.inputValueChangedSinceSelect = false;
@@ -615,6 +614,7 @@ const cmp = hoistCmp.factory(
         if (model.manageInputValue) {
             rsProps.inputValue = model.inputValue || '';
             rsProps.onInputChange = model.onInputChange;
+            rsProps.controlShouldRenderValue = !model.hasFocus;
         }
 
         if (model.asyncMode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "47.0.1",
+  "version": "47.1.2",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@blueprintjs/core": "~3.53.0",
-    "@blueprintjs/datetime": "~3.23.20",
+    "@blueprintjs/core": "~3.54.0",
+    "@blueprintjs/datetime": "~3.24.0",
     "@fortawesome/fontawesome-pro": "~5.15.4",
     "@fortawesome/fontawesome-svg-core": "~1.3.0",
     "@fortawesome/pro-light-svg-icons": "~5.15.4",