@xh/hoist 56.2.0 → 56.4.0

package/CHANGELOG.md

@@ -1,18 +1,79 @@
 # Changelog
 
-## 57.0.0-SNAPSHOT - unreleased
+## v56.4.0 - 2023-05-10
 
-## 56.2.0 - 2023-04-28
-* Expose `margin` property on DashContainerModel.
+### 🎁 New Features
+
+* Ensure that non-committed values are also checked when filtering a store with a FieldFilter.
+ This will maximize chances that records under edit will not disappear from user view due to
+ active filters.
+
+### 🐞 Bug Fixes
+
+* Fix bug where Grid ColumnHeaders could throw when `groupDisplayType` was set to `singleColumn`.
+
+### ⚙️ Technical
+* Adjustment to core model lookup in Hoist components to better support automated testing.
+Components no longer strictly require rendering within an `AppContainer`.
+
+### ⚙️ Typescript API Adjustments
+
+* Improved return types for `FetchService` methods and corrected `FetchOptions` interface.
+
+## v56.3.0 - 2023-05-08
+
+### 🎁 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
-* 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).
+* 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
+
+* 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 +96,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 +135,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 +1083,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 +1207,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 +1249,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 +1274,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 +1296,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 +1357,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 +1411,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 +1479,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 +1535,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 +1704,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 +2057,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 +2366,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 +3715,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 +3972,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/logViewer/LogDisplay.ts

@@ -14,6 +14,7 @@ import {numberInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
+import {fmtTimeZone} from '@xh/hoist/utils/impl';
 import {LogDisplayModel} from './LogDisplayModel';
 import './LogViewer.scss';
 
@@ -87,11 +88,11 @@ const bbar = hoistCmp.factory(() => {
 
     return toolbar({
         items: [
-            'Server time:',
+            'Server time: ',
             clock({
                 timezone: zone,
-                format: 'HH:mm [GMT]Z',
-                className: 'xh-font-family-mono xh-font-size-small'
+                format: 'HH:mm',
+                suffix: fmtTimeZone(zone, XH.getEnv('serverTimeZoneOffset'))
             })
         ],
         omit: !zone // zone env support requires hoist-core 7.1+

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/cmp/grid/Grid.ts

@@ -197,8 +197,8 @@ class GridLocalModel extends HoistModel {
                 clipboardCopy: Icon.copy({asHtml: true})
             },
             components: {
-                agColumnHeader: props => columnHeader(props),
-                agColumnGroupHeader: props => columnGroupHeader(props)
+                agColumnHeader: props => columnHeader({...props, gridModel: model}),
+                agColumnGroupHeader: props => columnGroupHeader({...props, gridModel: model})
             },
             rowSelection: selModel.mode == 'disabled' ? undefined : selModel.mode,
             suppressRowClickSelection: !selModel.isEnabled,

package/cmp/grid/columns/Column.ts

@@ -703,7 +703,7 @@ export class Column {
                 lockPinned: !gridModel.enableColumnPinning || XH.isMobileApp,
                 pinned: this.pinned,
                 lockVisible: !this.hideable || !gridModel.colChooserModel || XH.isMobileApp,
-                headerComponentParams: {gridModel, xhColumn: this},
+                headerComponentParams: {xhColumn: this},
                 suppressColumnsToolPanel: this.excludeFromChooser,
                 suppressFiltersToolPanel: this.excludeFromChooser,
                 enableCellChangeFlash: this.highlightOnChange,

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/model/Hooks.ts

@@ -67,7 +67,7 @@ export function useModelLinker(model: HoistModel, modelLookup: ModelLookup, prop
     if (isLinking) {
         model._modelLookup = modelLookup;
         each(model['_xhInjectedParentProperties'], (selector, name) => {
-            const parentModel = modelLookup.lookupModel(selector);
+            const parentModel = modelLookup?.lookupModel(selector);
             if (!parentModel) {
                 throw XH.exception(
                     `Failed to resolve @lookup for property '${name}' with selector ${formatSelector(
@@ -81,7 +81,7 @@ export function useModelLinker(model: HoistModel, modelLookup: ModelLookup, prop
 
         // Linked models with an impl parent that are not explicitly marked should be marked as impl.
         if (isUndefined(model.xhImpl)) {
-            const parentModel = modelLookup.lookupModel('*');
+            const parentModel = modelLookup?.lookupModel('*');
             if (parentModel?.xhImpl === true) {
                 model.xhImpl = true;
             }

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/data/filter/FieldFilter.ts

@@ -19,6 +19,7 @@ import {
 } from 'lodash';
 import {parseFieldValue} from '../Field';
 import {Store} from '../Store';
+import {StoreRecord} from '../StoreRecord';
 import {Filter} from './Filter';
 import {FieldFilterOperator, FieldFilterSpec, FilterTestFn} from './Types';
 
@@ -111,91 +112,76 @@ export class FieldFilter extends Filter {
                 ? value.map(v => parseFieldValue(v, fieldType))
                 : parseFieldValue(value, fieldType);
         }
-        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);
         }
 
+        let opFn: (v: any) => boolean;
         switch (op) {
             case '=':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    let v = getVal(r);
+                opFn = v => {
                     if (isNil(v) || v === '') v = null;
                     return value.includes(v);
                 };
+                break;
             case '!=':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    let v = getVal(r);
+                opFn = v => {
                     if (isNil(v) || v === '') v = null;
                     return !value.includes(v);
                 };
+                break;
             case '>':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return !isNil(v) && v > value;
-                };
+                opFn = v => !isNil(v) && v > value;
+                break;
             case '>=':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return !isNil(v) && v >= value;
-                };
+                opFn = v => !isNil(v) && v >= value;
+                break;
             case '<':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return !isNil(v) && v < value;
-                };
+                opFn = v => !isNil(v) && v < value;
+                break;
             case '<=':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return !isNil(v) && v <= value;
-                };
+                opFn = v => !isNil(v) && v <= value;
+                break;
             case 'like':
                 regExps = value.map(v => new RegExp(escapeRegExp(v), 'i'));
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    return regExps.some(re => re.test(getVal(r)));
-                };
+                opFn = v => regExps.some(re => re.test(v));
+                break;
             case 'not like':
                 regExps = value.map(v => new RegExp(escapeRegExp(v), 'i'));
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    return regExps.every(re => !re.test(getVal(r)));
-                };
+                opFn = v => regExps.every(re => !re.test(v));
+                break;
             case 'begins':
                 regExps = value.map(v => new RegExp('^' + escapeRegExp(v), 'i'));
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    return regExps.some(re => re.test(getVal(r)));
-                };
+                opFn = v => regExps.some(re => re.test(v));
+                break;
             case 'ends':
                 regExps = value.map(v => new RegExp(escapeRegExp(v) + '$', 'i'));
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    return regExps.some(re => re.test(getVal(r)));
-                };
+                opFn = v => regExps.some(re => re.test(v));
+                break;
             case 'includes':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return !isNil(v) && v.some(it => value.includes(it));
-                };
+                opFn = v => !isNil(v) && v.some(it => value.includes(it));
+                break;
             case 'excludes':
-                return r => {
-                    if (doNotFilter(r)) return true;
-                    const v = getVal(r);
-                    return isNil(v) || !v.some(it => value.includes(it));
-                };
+                opFn = v => isNil(v) || !v.some(it => value.includes(it));
+                break;
             default:
                 throw XH.exception(`Unknown operator: ${op}`);
         }
+
+        if (!store) return r => opFn(r[field]);
+
+        return (r: StoreRecord) => {
+            const val = r.get(field);
+            if (opFn(val)) return true;
+
+            // Maximize chances of matching. Always pass adds ...
+            if (r.isAdd) return true;
+
+            // ... and check any differing original value as well
+            const committedVal = r.committedData[field];
+            return committedVal !== val && opFn(committedVal);
+        };
     }
 
     override equals(other: Filter): boolean {

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.4.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
         };

package/svc/FetchService.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {HoistService, XH, Exception, PlainObject, Thunkable} from '@xh/hoist/core';
+import {HoistService, XH, Exception, PlainObject, Thunkable, FetchResponse} from '@xh/hoist/core';
 import {isLocalDate, SECONDS, ONE_MINUTE, olderThan} from '@xh/hoist/utils/datetime';
 import {throwIf} from '@xh/hoist/utils/js';
 import {StatusCodes} from 'http-status-codes';
@@ -61,10 +61,8 @@ export class FetchService extends HoistService {
      * Send a request via the underlying fetch API.
      * @returns Promise which resolves to a Fetch Response.
      */
-    fetch(opts: FetchOptions): Promise<any> {
-        return this.managedFetchAsync(opts, aborter =>
-            this.fetchInternalAsync(opts, aborter)
-        ) as any;
+    fetch(opts: FetchOptions): Promise<FetchResponse> {
+        return this.managedFetchAsync(opts, aborter => this.fetchInternalAsync(opts, aborter));
     }
 
     /**
@@ -81,7 +79,7 @@ export class FetchService extends HoistService {
                 aborter
             );
             return this.NO_JSON_RESPONSES.includes(r.status) ? null : r.json();
-        }) as any;
+        });
     }
 
     /**
@@ -142,7 +140,10 @@ export class FetchService extends HoistService {
     //-----------------------
     // Implementation
     //-----------------------
-    private async managedFetchAsync(opts: FetchOptions, fn: (ctl: AbortController) => any) {
+    private async managedFetchAsync(
+        opts: FetchOptions,
+        fn: (ctl: AbortController) => Promise<FetchResponse>
+    ): Promise<FetchResponse> {
         const {autoAborters, defaultTimeout} = this,
             {autoAbortKey, timeout = defaultTimeout} = opts,
             aborter = new AbortController();
@@ -177,7 +178,7 @@ export class FetchService extends HoistService {
         }
     }
 
-    private async fetchInternalAsync(opts, aborter): Promise<any> {
+    private async fetchInternalAsync(opts, aborter): Promise<FetchResponse> {
         const {defaultHeaders} = this;
         let {url, method, headers, body, params} = opts;
         throwIf(!url, 'No url specified in call to fetchService.');
@@ -236,7 +237,7 @@ export class FetchService extends HoistService {
             }
         }
 
-        const ret: any = await fetch(url, fetchOpts);
+        const ret = (await fetch(url, fetchOpts)) as FetchResponse;
 
         if (!ret.ok) {
             ret.responseText = await this.safeResponseTextAsync(ret);
@@ -300,8 +301,11 @@ export interface FetchOptions {
     /** URL for the request. Relative urls will be appended to XH.baseUrl. */
     url: string;
 
-    /** Data to send in the request body (for POSTs/PUTs of JSON).*/
-    body?: PlainObject;
+    /**
+     * Data to send in the request body (for POSTs/PUTs of JSON).
+     * When using `fetch`, provide a string. Otherwise, provide a PlainObject.
+     */
+    body?: PlainObject | string;
 
     /**
      * Parameters to encode and append as a query string, or send with the request body

package/utils/impl/TimeZone.ts

@@ -13,7 +13,7 @@ import {fmtNumber} from '@xh/hoist/format';
 export function fmtTimeZone(name: string, offset: number): string {
     if (!name) return '';
 
-    return name !== 'GMT'
-        ? `${name} (GMT${fmtNumber(offset / HOURS, {withPlusSign: true, asHtml: true})})`
-        : `${name}`;
+    return name === 'GMT' || name === 'UTC'
+        ? name
+        : `${name} (GMT${fmtNumber(offset / HOURS, {withPlusSign: true, asHtml: true})})`;
 }