@xh/hoist 56.2.0 → 56.3.0

package/CHANGELOG.md

@@ -1,18 +1,59 @@
 # Changelog
 
-## 57.0.0-SNAPSHOT - unreleased
+## v56.3.0 - 2023-05-08
 
-## 56.2.0 - 2023-04-28
-* Expose `margin` property on DashContainerModel.
+### 🎁 New Features
+
+* Added support for new `sortOrder` argument to `XH.showBanner()`. A default sort order is applied
+  if unspecified, ensuring banners do not unexpectedly change order when refreshed.
+
+### ⚙️ Typescript API Adjustments
+
+* Improved the recommendation for the app `declare` statement within
+  our [TypeScript migration docs](https://github.com/xh/hoist-react/blob/develop/docs/upgrade-to-typescript.md#bootstrapts--service-declarations).
+    * See this [Toolbox commit](https://github.com/xh/toolbox/commit/8df642cf) for a small,
+      recommended app-level change to improve autocompletion and usage checks within IntelliJ.
+* Added generic support to `XH.message()` and `XH.prompt()` signatures with return type
+  of `Promise<T | boolean>`.
+* Moved declaration of optional `children` prop to base `HoistProps` interface - required for TSX
+  support.
+
+### ✨ Styles
+
+* Removed `--xh-banner-height` CSS var.
+    * Desktop banners are implemented via `Toolbar`, which correctly sets a min height.
+    * Mobile banners now specify `min-height: 40px` via the `.xh-banner` class.
+    * This change allows banners containing custom components to grow to fit their contents without
+      requiring app-level CSS overrides.
+* Added new `--xh-grid-filter-popover-[height|width]-px` CSS variables to support easier custom
+  sizing for grid column header filter popovers.
+
+### ⚙️ Technical
+
+* Updated internal config defaults to support latest AG Grid v29.3.4+ with use of
+  AG `suppressBrowserResizeObserver` config. Applications are encouraged to update to the latest AG
+  Grid dependencies to take advantage of ongoing performance updates.
+
+## v56.2.0 - 2023-04-28
+
+### 🎁 New Features
+
+* Added `DashContainerModel.margin` config to customize the width of the resize splitters
+  between widgets.
 
 ### ⚙️ Technical
-* Optimize scrolling performance for `Grid` and `DataView`
 
-## 56.1.0 - 2023-04-14
-* Add support for new memory management diagnostics provided by hoist-core
- (requires hoist-core 16.1.0 for full operation).
+* Improve scrolling performance for `Grid` and `DataView` via internal configuration updates.
+
+## v56.1.0 - 2023-04-14
+
+### 🎁 New Features
+
+* Display improved memory management diagnostics within Admin console Memory Monitor.
+    * New metrics require optional-but-recommended update to `hoist-core >= v16.1.0`.
 
 ### 🐞 Bug Fixes
+
 * Fixes bug with display/reporting of exceptions during app initialization sequence.
 
 ## v56.0.0 - 2023-03-29
@@ -35,10 +76,12 @@
     * Add a dependency on `@ag-grid-community/styles` to import new dedicated styles package.
     * Imports of AG Grid CSS files within your app's `Bootstrap.ts` file will also need to be
       updated to import styles from their new location. The recommended imports are now:
+
 ```typescript
 import '@ag-grid-community/styles/ag-grid.css';
 import '@ag-grid-community/styles/ag-theme-balham.css';
 ```
+
 * New `xhActivityTrackingConfig` soft-configuration entry places new limits on the size of
   any `data` objects passed to `XH.track()` calls.
     * Any track requests with data objects exceeding this length will be persisted, but without the
@@ -72,20 +115,14 @@ import '@ag-grid-community/styles/ag-theme-balham.css';
 
 ## v55.4.0 - 2023-03-23
 
-### 🐞 Bug Fixes
-* Addresses `AgGrid` v28 regression whereby changing column visibility via state throws an
-  exception and doesn't
-  render the grid when column groups are set via the `groupId` property.
-
 ### 💥 Breaking Changes
-* Hoist now requires `AgGrid` v29.1.0 or higher - update your `AgGrid` dependency in your app's
-`package.json` file. See the [ag-Grid Changelog](https://www.ag-grid.com/changelog) for details.
-* `AgGrid` stylesheets are now imported from the new `@ag-grid-community/styles` module. Update
-  your app's `Bootstrap.ts` file to import `ag-grid.css` and `ag-theme-balham.css` from this
-  module, and include it as a dependency in your app's `package.json` file.
 
-### ⚙️ Technical
-* AgGrid `28.1.0 -> 29.1.0`
+* Requires AG Grid v29.0.0 or higher - see release notes for v56.0.0 above.
+
+### 🐞 Bug Fixes
+
+* Addresses `AgGrid` v28 regression whereby changing column visibility via state breaks grid
+  rendering when column groups are set via the `groupId` property.
 
 ## v55.3.2 - 2023-03-22
 
@@ -1026,7 +1063,7 @@ to use TypeScript for its own app-level code.
   with the select library component and touch devices.
 * Ensure `Column.autosizeBufferPx` is respected if provided.
 
-### ✨ Style
+### ✨ Styles
 
 * New `--xh-menu-item` CSS vars added, with tweaks to default desktop menu styling.
 * Highlight background color added to mobile menu items while pressed.
@@ -1150,7 +1187,7 @@ to use TypeScript for its own app-level code.
 * Triggering inline editing of text or select editor cells by typing characters will no longer lose
   the first character pressed.
 
-### ✨ Style
+### ✨ Styles
 
 * New `TreeStyle.COLORS` and `TreeStyle.COLORS_AND_BORDERS` tree grid styles have been added. Use
   the `--xh-grid-tree-group-color-level-*` CSS vars to customize colors as needed.
@@ -1192,7 +1229,7 @@ to use TypeScript for its own app-level code.
   `agOptions`.
 * Fixes an issue on iOS where `NumberInput` would incorrectly bring up a text keyboard.
 
-### ✨ Style
+### ✨ Styles
 
 * Reduced default Grid header and group row heights to minimize their use of vertical space,
   especially at larger sizing modes. As before, apps can override via the `AgGrid.HEADER_HEIGHTS`
@@ -1217,7 +1254,7 @@ to use TypeScript for its own app-level code.
 * The in-app changelog will no longer prompt the user with the "What's New" button if category-based
   filtering results in a version without any release notes.
 
-### ✨ Style
+### ✨ Styles
 
 * New CSS vars added to support easier customization of desktop Tab font/size/color. Tabs now
   respect standard `--xh-font-size` by default.
@@ -1239,7 +1276,7 @@ to use TypeScript for its own app-level code.
 * Mobile `Select` input now supports async `queryFn` prop for parity with desktop.
 * `TreeMapModel` now supports new `maxLabels` config for improved performance.
 
-### ✨ Style
+### ✨ Styles
 
 * Hoist's default font is now [Inter](https://rsms.me/inter/), shipped and bundled via the
   `inter-ui` npm package. Inter is a modern, open-source font that leverages optical sizing to
@@ -1300,7 +1337,7 @@ to use TypeScript for its own app-level code.
 
 * Fixed an issue preventing `FormField` labels from rendering if `fieldDefaults` was undefined.
 
-### ✨ Style
+### ✨ Styles
 
 * New `Badge.compact` prop sets size to half that of parent element when true (default false). The
   `position` prop has been removed in favor of customizing placement of the component.
@@ -1354,7 +1391,7 @@ to use TypeScript for its own app-level code.
       and
       `selectedIds`, respectively, in `StoreSelectionModel`
 
-### ✨ Style
+### ✨ Styles
 
 * Higher contrast on grid context menus for improved legibility.
 
@@ -1422,7 +1459,7 @@ to use TypeScript for its own app-level code.
   custom handling in a raw `AgGrid` component, see the example here:
   https://www.ag-grid.com/javascript-grid/row-selection/#example-selection-with-keyboard-arrow-keys
 
-### ✨ Style
+### ✨ Styles
 
 * The red and green color values applied in dark mode have been lightened for improved legibility.
 * The default `colorSpec` config for number formatters has changed to use new dedicated CSS classes
@@ -1478,7 +1515,7 @@ to use TypeScript for its own app-level code.
 * `withShortDebug` has been deprecated. Use `withDebug` instead, which has the identical behavior.
   This API simplification mirrors a recent change to `hoist-core`.
 
-### ✨ Style
+### ✨ Styles
 
 * If the first child of a `Placeholder` component is a Hoist icon, it will not automatically be
   styled to 4x size with reduced opacity. (See new Toolbox example under the "Other" tab.)
@@ -1647,7 +1684,7 @@ your dev-utils dependency for your project to build.
 * Improvements to exception serialization, especially for any raw javascript `Error` thrown by
   client-side code.
 
-### ✨ Style
+### ✨ Styles
 
 * Buttons nested inline within desktop input components (e.g. clear buttons) tweaked to avoid
   odd-looking background highlight on hover.
@@ -2000,7 +2037,7 @@ decorators, in favor of a simpler inheritance-based approach to defining models
 * Fix issue where grid row striping inadvertently disabled by default for non-tree grids.
 * Fix issue where grid empty text cleared on autosize.
 
-### ✨ Style
+### ✨ Styles
 
 * Default `Chart` themes reworked in both light and dark modes to better match overall Hoist theme.
 
@@ -2309,7 +2346,7 @@ below regarding related updates to `GridModel.columns` config processing.
     * `StoreFilterField.filterOptions` has been removed. Set `filterIncludesChildren` directly on
       the store instead.
 
-### ✨ Style
+### ✨ Styles
 
 * CSS variables for "intents" - most commonly used on buttons - have been reworked to use HSL color
   values and support several standard variations of lightness and transparency.
@@ -3658,7 +3695,7 @@ leverage the context for model support discussed above.
 * When checking for a possible expired session within `XH.handleException()`, prompt for app login
   only for Ajax requests made to relative URLs (not e.g. remote APIs accessed via CORS). #1189
 
-### ✨ Style
+### ✨ Styles
 
 * Panel splitter collapse button more visible in dark theme. CSS vars to customize further fixed.
 * The mobile app menu button has been moved to the right side of the top appBar, consistent with its
@@ -3915,7 +3952,7 @@ leverage the context for model support discussed above.
 * FetchService's fetch methods no longer support `acceptJson` parameter. Instead, pass an {"Accept":
   "application/json"} header using the `headers` parameter.
 
-### ✨ Style
+### ✨ Styles
 
 * Black point + grid colors adjusted in dark theme to better blend with overall blue-gray tint.
 * Mobile styles have been adjusted to increase the default font size and grid row height, in

package/admin/tabs/server/memory/MemoryMonitorModel.ts

@@ -87,7 +87,8 @@ export class MemoryMonitorModel extends HoistModel {
                         floor: 0,
                         top: '30%',
                         height: '70%',
-                        title: {text: 'Heap (mb)'}
+                        title: {text: 'Heap (mb)'},
+                        offset: 0
                     }
                 ],
                 tooltip: {outside: true, shared: true}
@@ -185,7 +186,7 @@ export class MemoryMonitorModel extends HoistModel {
     async dumpHeapAsync() {
         try {
             const appEnv = XH.getEnv('appEnvironment').toLowerCase(),
-                filename = await XH.prompt({
+                filename = await XH.prompt<string>({
                     title: 'Dump Heap',
                     icon: Icon.fileArchive(),
                     message: `Specify a filename for the heap dump (to be saved in ${this.heapDumpDir})`,

package/admin/tabs/server/websocket/WebSocketModel.ts

@@ -93,7 +93,7 @@ export class WebSocketModel extends HoistModel {
         const {selectedRecords} = this.gridModel;
         if (isEmpty(selectedRecords)) return;
 
-        const message = await XH.prompt({
+        const message = await XH.prompt<string>({
             title: 'Force suspend',
             icon: Icon.stopCircle(),
             confirmProps: {text: 'Force Suspend', icon: Icon.stopCircle(), intent: 'danger'},

package/appcontainer/AppContainerModel.ts

@@ -19,6 +19,7 @@ import {SizingModeModel} from './SizingModeModel';
 import {ViewportSizeModel} from './ViewportSizeModel';
 import {ThemeModel} from './ThemeModel';
 import {ToastSourceModel} from './ToastSourceModel';
+import {BannerModel} from './BannerModel';
 
 /**
  * Root object for Framework GUI State.
@@ -87,10 +88,11 @@ export class AppContainerModel extends HoistModel {
             buttonText = mobile ? version : `Update to ${version}`;
 
         XH.showBanner({
-            category: 'app-update',
+            category: 'xhAppUpdate',
             message,
             icon: Icon.rocket({size: 'lg'}),
             intent: 'warning',
+            sortOrder: BannerModel.BANNER_SORTS.APP_UPDATE,
             enableClose: false,
             actionButtonProps: {
                 icon: Icon.refresh(),

package/appcontainer/BannerModel.ts

@@ -18,36 +18,46 @@ export class BannerModel extends HoistModel {
     icon;
     message;
     intent;
+    sortOrder;
     className;
     enableClose;
     onClose;
     onClick;
     actionButtonProps;
-    props;
 
-    constructor({
-        category = 'default',
-        icon,
-        message,
-        intent = 'primary',
-        className,
-        enableClose = true,
-        onClose,
-        onClick,
-        actionButtonProps,
-        ...props
-    }: BannerSpec) {
+    /**
+     * Sort order for Hoist-provided banners.
+     */
+    static BANNER_SORTS = {
+        APP_UPDATE: -2,
+        ADMIN_ALERT: -1
+    };
+
+    constructor(spec: BannerSpec) {
         super();
 
+        const {
+            category = 'default',
+            icon,
+            message,
+            intent = 'primary',
+            sortOrder,
+            className,
+            enableClose = true,
+            onClose,
+            onClick,
+            actionButtonProps
+        } = spec;
+
         this.category = category;
         this.icon = icon;
         this.message = message;
         this.intent = intent;
+        this.sortOrder = sortOrder;
         this.className = className;
         this.enableClose = enableClose;
         this.onClose = onClose;
         this.onClick = onClick;
         this.actionButtonProps = actionButtonProps;
-        this.props = props;
     }
 }

package/appcontainer/BannerSourceModel.ts

@@ -6,7 +6,7 @@
  */
 import {XH, HoistModel, managed, BannerSpec} from '@xh/hoist/core';
 import {action, observable, makeObservable} from '@xh/hoist/mobx';
-import {find, reject} from 'lodash';
+import {find, reject, sortBy, without, last} from 'lodash';
 
 import {BannerModel} from './BannerModel';
 
@@ -22,17 +22,29 @@ export class BannerSourceModel extends HoistModel {
     @observable.ref
     bannerModels: BannerModel[] = [];
 
-    MAX_BANNERS = 4;
-
     constructor() {
         super();
         makeObservable(this);
     }
 
     @action
-    show(config: BannerSpec): BannerModel {
-        const ret = new BannerModel(config);
-        this.addModel(ret);
+    show(spec: BannerSpec): BannerModel {
+        let {bannerModels} = this,
+            ret = new BannerModel(spec);
+
+        // Removes banner from new banner's category if it exists.
+        const existing = find(bannerModels, {category: ret.category});
+        if (existing) {
+            bannerModels = without(bannerModels, existing);
+            XH.safeDestroy(existing);
+        }
+
+        // Place in requested pos, existing pos, or last
+        const maxSortOrder = last(bannerModels)?.sortOrder ?? 0;
+        ret.sortOrder = spec.sortOrder ?? existing?.sortOrder ?? maxSortOrder + 1;
+        bannerModels = sortBy([...bannerModels, ret], 'sortOrder');
+
+        this.bannerModels = bannerModels;
         return ret;
     }
 
@@ -43,24 +55,7 @@ export class BannerSourceModel extends HoistModel {
         this.bannerModels = reject(this.bannerModels, {category});
     }
 
-    //-----------------------------------
-    // Implementation
-    //------------------------------------
-    @action
-    addModel(model: BannerModel) {
-        // Remove existing banner for category
-        this.hide(model.category);
-
-        // Add new banner, removing old banners if limit exceeded
-        const models = [...this.bannerModels, model];
-        while (models.length > this.MAX_BANNERS) {
-            const bannerModel = models.shift();
-            XH.safeDestroy(bannerModel);
-        }
-        this.bannerModels = models;
-    }
-
-    getBanner(category: string): BannerModel {
+    private getBanner(category: string): BannerModel {
         return find(this.bannerModels, {category});
     }
 }

package/cmp/ag-grid/AgGrid.ts

@@ -84,6 +84,7 @@ export const [AgGrid, agGrid] = hoistCmp.withFactory<AgGridProps>({
             item: createElement(AgGridReact, {
                 // Default some ag-grid props, but allow overriding.
                 getRowHeight: impl.getRowHeight,
+                suppressBrowserResizeObserver: true,
                 // Pass others on directly.
                 ...agGridProps,
 

package/core/HoistComponent.ts

@@ -43,8 +43,10 @@ import {
 } from 'react';
 
 /**
- * Configuration for creating a Component.  May be specified either as a render function,
- * or an object containing a render function and associated metadata.
+ * Type representing props passed to a HoistComponent's render function.
+ *
+ * This type removes from its base type several props that are used by HoistComponent itself and
+ * not provided to the render function.
  */
 export type RenderPropsOf<P extends HoistProps> = P & {
     /** Pre-processed by HoistComponent internals into a mounted model.  Never passed to render. */
@@ -52,15 +54,12 @@ export type RenderPropsOf<P extends HoistProps> = P & {
 
     /** Pre-processed by HoistComponent internals and attached to model.  Never passed to render. */
     modelRef: never;
-
-    /**
-     *  React Children. Populated on props by React internally, before rendering.  Applications
-     *  will typically provide children to a component via JSX or the `item(s)` property passed to
-     *  an element factory.
-     */
-    children?: ReactNode;
 };
 
+/**
+ * Configuration for creating a Component.  May be specified either as a render function,
+ * or an object containing a render function and associated metadata.
+ */
 export type ComponentConfig<P extends HoistProps> =
     | ((props: RenderPropsOf<P>, ref?: ForwardedRef<any>) => ReactNode)
     | {

package/core/HoistProps.ts

@@ -5,7 +5,7 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 import {HoistModel} from '@xh/hoist/core/model';
-import {CSSProperties, HTMLAttributes, Ref} from 'react';
+import {CSSProperties, HTMLAttributes, ReactNode, Ref} from 'react';
 
 /**
  * Props interface for Hoist Components.
@@ -39,6 +39,9 @@ export interface HoistProps<M extends HoistModel = HoistModel> {
      * any base class name provided by the component definition itself.
      */
     className?: string;
+
+    /** React children. */
+    children?: ReactNode;
 }
 
 /**

package/core/XH.ts

@@ -453,7 +453,7 @@ export class XHApi {
      * @returns true if user confirms, false if user cancels. If an input is provided, the
      * Promise will resolve to the input value if user confirms.
      */
-    message(config: MessageSpec): Promise<any> {
+    message<T = unknown>(config: MessageSpec): Promise<T | boolean> {
         return this.acm.messageSourceModel.message(config);
     }
 
@@ -484,7 +484,7 @@ export class XHApi {
      *
      * @returns value of input if user confirms, false if user cancels.
      */
-    prompt(config: MessageSpec): Promise<any> {
+    prompt<T = unknown>(config: MessageSpec): Promise<T | false> {
         return this.acm.messageSourceModel.prompt(config);
     }
 
@@ -524,9 +524,9 @@ export class XHApi {
      * Show a Banner across the top of the viewport. Banners are unique by their
      * category prop - showing a new banner with an existing category will replace it.
      */
-    showBanner(config: BannerSpec | string): BannerModel {
-        if (isString(config)) config = {message: config};
-        return this.acm.bannerSourceModel.show(config);
+    showBanner(spec: BannerSpec | string): BannerModel {
+        if (isString(spec)) spec = {message: spec};
+        return this.acm.bannerSourceModel.show(spec);
     }
 
     /**

package/core/types/Interfaces.ts

@@ -134,7 +134,6 @@ export interface MessageSpec {
 
 /**
  * Configuration object for an app-wide banner.
- * Additional properties passed to this object will be passed directly to the banner component.
  */
 export interface BannerSpec {
     message?: ReactNode;
@@ -142,7 +141,17 @@ export interface BannerSpec {
     intent?: Intent;
     className?: string;
 
-    /** The category for the banner. Defaults to 'default'.*/
+    /**
+     * Determines order in which banner will be displayed.
+     * If not provided, banner will be placed below any existing banners.
+     * @see BannerModel.BANNER_SORTS
+     */
+    sortOrder?: number;
+
+    /**
+     * Showing a banner with a given category will hide any
+     * preexisting banner with the same category.
+     */
     category?: string;
 
     /**

package/desktop/appcontainer/Banner.scss

@@ -5,8 +5,6 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 body.xh-app .xh-banner {
-  height: var(--xh-banner-height-px);
-
   &__click_target {
     &--clickable {
       cursor: pointer;

package/desktop/appcontainer/Banner.ts

@@ -25,7 +25,7 @@ export const banner = hoistCmp.factory({
     model: uses(BannerModel),
 
     render({model}) {
-        const {icon, message, intent, onClick, className, props} = model;
+        const {icon, message, intent, onClick, className} = model;
 
         return toolbar({
             className: classNames(
@@ -50,8 +50,7 @@ export const banner = hoistCmp.factory({
                 }),
                 actionButton(),
                 dismissButton()
-            ],
-            ...props
+            ]
         });
     }
 });

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

@@ -299,7 +299,7 @@ export class DashCanvasModel extends DashModel<
 
         if (!allowRename) return;
 
-        XH.prompt({
+        XH.prompt<string>({
             message: `Rename '${view.title}' to`,
             title: 'Rename...',
             icon: Icon.edit(),

package/desktop/cmp/grid/impl/filter/ColumnHeaderFilter.scss

@@ -6,8 +6,8 @@
  */
 .xh-app {
   .xh-column-header-filter {
-    width: 240px;
-    height: 350px;
+    height: var(--xh-grid-filter-popover-height-px);
+    width: var(--xh-grid-filter-popover-width-px);
 
     &__icon {
       flex: none !important;

package/docs/upgrade-to-typescript.md

@@ -98,7 +98,9 @@ rename with a `.ts` extension to ensure you have at least one TS file in your bu
 In that same file, add a declaration statement to let TS know about any of your application
 services (`HoistService` instances) that you are initializing. Those are installed on and referenced
 from the `XH` object; for TS to consider references to those services valid, it needs to know that
-the type of the `XH` singleton (`XHApi`) has a property for each of your services.
+the type of the `XH` singleton (`XHApi`) has a property for each of your services. For users of
+IntelliJ, an ignored re-declaration of the XH singleton with this interface helps the IDE properly
+notice uses of these services.
 
 In Toolbox, we have the following within `Bootstrap.ts` to declare five TB-specific services (your
 services will vary of course) and a custom property installed on `HoistUser`, the type returned
@@ -106,6 +108,7 @@ by `XH.getUser()`:
 
 ```typescript
 declare module '@xh/hoist/core' {
+    // Merge interface with XHApi class to include injected services.
     export interface XHApi {
         contactService: ContactService;
         gitHubService: GitHubService;
@@ -113,6 +116,8 @@ declare module '@xh/hoist/core' {
         portfolioService: PortfolioService;
         taskService: TaskService;
     }
+    // @ts-ignore - Help IntelliJ recognize uses of injected service methods from the `XH` singleton.
+    export const XH: XHApi;
 
     export interface HoistUser {
         profilePicUrl: string;

package/mobile/appcontainer/Banner.scss

@@ -8,7 +8,7 @@ body.xh-app .xh-banner {
   padding: var(--xh-pad-half-px) var(--xh-pad-half-px) var(--xh-pad-half-px) var(--xh-pad-px);
   display: flex;
   align-items: center;
-  height: var(--xh-banner-height-px);
+  min-height: 40px;
 
   &__click_target > .xh-icon {
     margin-right: var(--xh-pad-px);

package/mobile/appcontainer/Banner.ts

@@ -23,7 +23,7 @@ export const banner = hoistCmp.factory({
     displayName: 'Banner',
     model: uses(BannerModel),
     render({model}) {
-        const {icon, message, intent, onClick, className, props} = model;
+        const {icon, message, intent, onClick, className} = model;
 
         return div({
             className: classNames(
@@ -48,8 +48,7 @@ export const banner = hoistCmp.factory({
                 }),
                 actionButton(),
                 dismissButton()
-            ],
-            ...props
+            ]
         });
     }
 });

package/mobile/appcontainer/ExceptionDialogDetails.ts

@@ -51,7 +51,7 @@ export const exceptionDialogDetails = hoistCmp.factory({
                     icon: Icon.envelope(),
                     text: 'Send Message',
                     onClick: () => {
-                        XH.prompt({
+                        XH.prompt<string>({
                             title: 'Send Message',
                             message: null,
                             input: {
@@ -63,8 +63,8 @@ export const exceptionDialogDetails = hoistCmp.factory({
                             },
                             confirmProps: {icon: Icon.envelope(), text: 'Send'}
                         }).then(userMessage => {
-                            model.userMessage = userMessage;
-                            if (model.userMessage) {
+                            if (userMessage) {
+                                model.userMessage = userMessage;
                                 model.sendReportAsync();
                             }
                         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "56.2.0",
+  "version": "56.3.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -45,7 +45,7 @@
     "classnames": "~2.3.2",
     "clipboard-copy": "~4.0.1",
     "codemirror": "~5.65.0",
-    "core-js": "^3.29.1",
+    "core-js": "^3.0",
     "debounce-promise": "~3.1.0",
     "dompurify": "~3.0.1",
     "downloadjs": "~1.4.7",
@@ -90,15 +90,15 @@
     "@xh/hoist-dev-utils": "^6.1.2",
     "eslint-config-prettier": "8.x",
     "eslint-plugin-tsdoc": "^0.2.17",
-    "husky": "^8.0.2",
-    "lint-staged": "^13.0.3",
-    "postcss": "^8.4.19",
-    "prettier": "^2.8.4",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "stylelint": "^15.3.0",
+    "stylelint": "^15.6.1",
     "stylelint-config-standard-scss": "^7.0.1",
-    "type-fest": "^3.6.1",
+    "type-fest": "^3.10.0",
     "typescript": "~4.9.5"
   },
   "resolutions": {

package/styles/vars.scss

@@ -502,6 +502,10 @@ body {
   --xh-grid-multifield-line-height: var(--grid-multifield-line-height, 14);
   --xh-grid-multifield-line-height-px: calc(var(--xh-grid-multifield-line-height) * 1px);
 
+  // Grid column-header-based filter popover (desktop only)
+  --xh-grid-filter-popover-height-px: var(--grid-filter-popover-height-px, 350px);
+  --xh-grid-filter-popover-width-px: var(--grid-filter-popover-width-px, 240px);
+
   // Dark Grid
   &.xh-dark {
     --xh-grid-bg-hover: var(--grid-bg-hover, hsl(200, 50%, 22%));
@@ -664,13 +668,6 @@ body {
   }
 
 
-  //------------------------
-  // Banners
-  //------------------------
-  --xh-banner-height: var(--banner-height, 40);
-  --xh-banner-height-px: calc(var(--xh-banner-height) * 1px);
-
-
   //------------------------
   // Tabs
   //------------------------

package/svc/AlertBannerService.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
+import {BannerModel} from '@xh/hoist/appcontainer/BannerModel';
 import {div, p} from '@xh/hoist/cmp/layout';
 import {BannerSpec, HoistService, Intent, managed, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
@@ -96,6 +97,7 @@ export class AlertBannerService extends HoistService {
             intent,
             icon,
             enableClose,
+            sortOrder: BannerModel.BANNER_SORTS.ADMIN_ALERT,
             actionButtonProps,
             onClick
         };