@xh/hoist 53.0.0 → 53.1.0

package/CHANGELOG.md

@@ -1,18 +1,38 @@
 # Changelog
 
+## v53.1.0 - 2022-11-03
+
+### 🎁 New Features
+* `PanelModel` now supports `modalSupport.defaultModal` option to allow rendering a Panel in an
+initially modal state.
+
+### 🐞 Bug Fixes
+* Fixed layout issues caused by top-level DOM elements created by `ModalSupport`
+  and `ColumnWidthCalculator` (grid auto-sizing). Resolved occasional gaps between select inputs and
+  their drop-down menus.
+* Fix desktop styling bug where buttons inside a `Toast` could be rendered with a different color
+  than the rest of the toast contents.
+* Fix `GridModel` bug where `Store` would fail to recognize dot-separated field names as paths
+  when provided as part of a field spec in object form.
+
+### ⚙️ Technical
+
+* Snap info (if available) from the `navigator.connection` global within the built-in call to track
+  each application load.
+
 ## v53.0.0 - 2022-10-19
 
 ### 🎁 New Features
 
-* New application permission role: `HOIST_ADMIN_READER`.
-* All Hoist Framework Admin tabs are now readable (read only) by users who have this new role: `HOIST_ADMIN_READER`.
-* Actions (edit, delete, etc) in the Hoist Framework Admin tabs are available only to users who have the `HOIST_ADMIN` role.
-* The `HOIST_ADMIN` role inherits the new `HOIST_ADMIN_READER` role.
-* The `HOIST_ADMIN_READER` role can be assigned to users in the `roles` soft-config.
+* The Hoist Admin Console is now accessible in a read-only capacity to users assigned the
+  new `HOIST_ADMIN_READER` role.
+* The pre-existing `HOIST_ADMIN` role inherits this new role, and is still required to take any
+  actions that modify data.
 
 ### 💥 Breaking Changes
-* Upgrading to Hoist-React v53+ requires an upgrade of Hoist-Core to v14.4.0+
-  to take advantage of the new `HOIST_ADMIN_READER` role.
+
+* Requires `hoist-core >= 14.4` to support the new `HOIST_ADMIN_READER` role described above. (Core
+  upgrade _not_ required otherwise.)
 
 ## v52.0.2 - 2022-10-13
 

package/admin/differ/DifferModel.js

@@ -81,6 +81,7 @@ export class DifferModel extends HoistModel {
 
         this.url = entityName + 'DiffAdmin';
 
+        const rendererIsComplex = true;
         this.gridModel = new GridModel({
             store: {
                 idSpec: data => {
@@ -107,17 +108,19 @@ export class DifferModel extends HoistModel {
                     hidden: true
                 },
                 ...this.columnFields.map(it => {
-                    const colDef = {renderer: this.fieldRenderer, maxWidth: 200};
+                    const colDef = {renderer: this.fieldRenderer, rendererIsComplex, maxWidth: 200};
                     return isString(it) ? {field: it, ...colDef} : {...colDef, ...it};
                 }),
                 {
                     field: 'localValue',
                     flex: true,
+                    rendererIsComplex,
                     renderer: this.valueRenderer
                 },
                 {
                     field: 'remoteValue',
                     flex: true,
+                    rendererIsComplex,
                     renderer: this.valueRenderer
                 }
             ],

package/cmp/grid/GridModel.js

@@ -1445,7 +1445,7 @@ export class GridModel extends HoistModel {
         const newFields = [];
         forEach(leafColsByFieldName, (col, name) => {
             if (name !== 'id' && !storeFieldNames.includes(name)) {
-                newFields.push({name, displayName: col.displayName, ...col.fieldSpec});
+                newFields.push({displayName: col.displayName, ...col.fieldSpec, name});
             }
         });
 

package/cmp/grid/impl/ColumnWidthCalculator.js

@@ -82,7 +82,7 @@ export class ColumnWidthCalculator {
                     levelMaxes = await Promise.all(levelTasks);
                 return max(levelMaxes);
             } else {
-                return this.calcLevelWidthAsync(gridModel, records, column, options);
+                return await this.calcLevelWidthAsync(gridModel, records, column, options);
             }
         } catch (e) {
             console.warn(`Error calculating max data width for column "${column.colId}".`, e);

package/desktop/appcontainer/Toast.scss

@@ -52,6 +52,7 @@
     // High level of specificity here required to override built-in BP styles
     &.bp4-toast .bp4-button {
       background: none !important;
+      color: white !important;
 
       .bp4-icon {
         color: white !important;

package/desktop/cmp/dock/DockViewModel.js

@@ -111,7 +111,10 @@ export class DockViewModel extends HoistModel {
         this.refreshContextModel = new ManagedRefreshContextModel(this);
 
         this.modalSupportModel = new ModalSupportModel({
-            width: width ?? null, height: height ?? null, canOutsideClickClose: false
+            width: width ?? null,
+            height: height ?? null,
+            defaultModal: !docked,
+            canOutsideClickClose: false
         });
     }
 

package/desktop/cmp/dock/impl/Dock.scss

@@ -30,6 +30,14 @@
       margin-right: var(--xh-pad-px);
     }
   }
+
+  .xh-modal-support__inline {
+    // Don't flex-shrink docked dock views, allowing them to clip the container.
+    flex: none;
+    // Workaround for this class getting `width: 100%` for 1 frame while waiting for
+    // an observable ref. See ModalSupport.js.
+    width: auto !important;
+  }
 }
 
 .xh-dock-view {

package/desktop/cmp/modalsupport/ModalSupport.js

@@ -11,6 +11,7 @@ import '@xh/hoist/desktop/register';
 import {dialog} from '@xh/hoist/kit/blueprint';
 import {Children} from 'react';
 import {createPortal} from 'react-dom';
+import './ModalSupport.scss';
 import {ModalSupportModel} from './ModalSupportModel';
 
 /**

package/desktop/cmp/modalsupport/ModalSupport.scss

@@ -0,0 +1,7 @@
+.xh-modal-support {
+  // Unwind the (surprising) 500px default dialog width coming from Blueprint.
+  // If the user has configured their ModalSupportOptions with null width, this should be respected.
+  &__modal {
+    width: auto;
+  }
+}

package/desktop/cmp/modalsupport/ModalSupportModel.js

@@ -35,6 +35,7 @@ export class ModalSupportModel extends HoistModel {
         this.hostNode = this.createHostNode();
 
         this.options = opts instanceof ModalSupportOptions ? opts : new ModalSupportOptions(opts);
+        this.isModal = this.options.defaultModal;
 
         const {inlineRef, modalRef, hostNode} = this;
         this.addReaction({
@@ -54,20 +55,13 @@ export class ModalSupportModel extends HoistModel {
         const hostNode = document.createElement('div');
         hostNode.style.all = 'inherit';
         hostNode.classList.add('xh-modal-support__host');
-        document.body.appendChild(hostNode);
         return hostNode;
     }
 
-    /**
-     * Toggle the current state of `isModal`
-     */
     toggleIsModal() {
         this.setIsModal(!this.isModal);
     }
 
-    /**
-     * Destroy the `hostNode` DOM Element
-     */
     destroy() {
         this.hostNode.remove();
         super.destroy();

package/desktop/cmp/modalsupport/ModalSupportOptions.js

@@ -13,6 +13,8 @@ export class ModalSupportOptions {
     width;
     /** @member {?String|number} */
     height;
+    /** @member {boolean} */
+    defaultModal;
     /** @member boolean */
     canOutsideClickClose;
     /**
@@ -20,11 +22,18 @@ export class ModalSupportOptions {
      * @param {Object} opts
      * @param {String|number} [width] - css width
      * @param {String|number} [height] - css height
+     * @param {boolean} [defaultModal] - begin in modal mode?
      * @param {boolean} [canOutsideClickClose]
      */
-    constructor({width = '90vw', height = '90vh', canOutsideClickClose = true} = {}) {
+    constructor({
+        width = '90vw',
+        height = '90vh',
+        defaultModal = false,
+        canOutsideClickClose = true
+    } = {}) {
         this.width = width;
         this.height = height;
+        this.defaultModal = defaultModal;
         this.canOutsideClickClose = canOutsideClickClose;
     }
 }

package/package.json

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

package/utils/js/BrowserUtils.js

@@ -7,7 +7,7 @@
 import {pick} from 'lodash';
 
 /**
- * Extract information about the client browser window and screen
+ * Extract information (if available) about the client browser's window, screen, and network speed.
  */
 export function getClientDeviceInfo() {
     const data = pick(window, 'screen', 'devicePixelRatio', 'screenX', 'screenY', 'innerWidth', 'innerHeight', 'outerWidth', 'outerHeight');
@@ -18,5 +18,9 @@ export function getClientDeviceInfo() {
         }
     }
 
+    if (window.navigator.connection) {
+        data.connection = pick(window.navigator.connection, 'downlink', 'effectiveType', 'rtt');
+    }
+
     return data;
 }