@xh/hoist 56.3.0 → 56.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## v56.4.0 - 2023-05-10
+
+### 🎁 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

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/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/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/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/package.json

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

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})})`;
 }