@xh/hoist 78.0.0-SNAPSHOT.1763398903260 → 78.0.0-SNAPSHOT.1763568169798

package/CHANGELOG.md

@@ -2,11 +2,16 @@
 
 ## 78.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+*  `FieldFilter` implementation expanded to support `not begins` and `not ends` operators.
+
 ### ⚙️ Technical
 
 * `FetchService` will recognize variants on the `application/json` content-type when processing
   failed responses and decoding exceptions - e.g. `application/problem+json`.
 
+
 ## 77.1.1 - 2025-11-12
 
 ### 🎁 New Features

package/build/types/cmp/zoneGrid/impl/ZoneMapperModel.d.ts

@@ -40,6 +40,7 @@ export declare class ZoneMapperModel extends HoistModel {
         value: string;
         label: string;
     }[];
+    get headersAreHidden(): boolean;
     constructor(config: ZoneMapperConfig);
     restoreDefaultsAsync(): Promise<void>;
     open(): void;

package/build/types/data/filter/Types.d.ts

@@ -8,7 +8,7 @@ export interface CompoundFilterSpec {
     /** logical operator 'AND' (default) or 'OR'. */
     op?: CompoundFilterOperator;
 }
-export type FieldFilterOperator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'like' | 'not like' | 'begins' | 'ends' | 'includes' | 'excludes';
+export type FieldFilterOperator = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'like' | 'not like' | 'begins' | 'not begins' | 'ends' | 'not ends' | 'includes' | 'excludes';
 export interface FieldFilterSpec {
     /** Name of Field to filter or Field instance. */
     field: string | Field;

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRowModel.d.ts

@@ -23,6 +23,6 @@ export declare class CustomRowModel extends HoistModel {
     get hideInput(): boolean;
     constructor(parentModel: CustomTabModel, op?: FieldFilterOperator, value?: any);
     removeRow(): void;
-    getOperatorLabel(op: FieldFilterOperator): "includes" | "excludes" | "Equals" | "Not equals" | "Greater than" | "Greater than or equals" | "Less than" | "Less than or equals" | "Like" | "Not like" | "Begins with" | "Ends with";
+    getOperatorLabel(op: FieldFilterOperator): "includes" | "not begins" | "not ends" | "excludes" | "Equals" | "Not equals" | "Greater than" | "Greater than or equals" | "Less than" | "Less than or equals" | "Like" | "Not like" | "Begins with" | "Ends with";
 }
 export {};

package/cmp/zoneGrid/impl/ZoneMapperModel.ts

@@ -93,6 +93,10 @@ export class ZoneMapperModel extends HoistModel {
             });
     }
 
+    get headersAreHidden(): boolean {
+        return this.zoneGridModel.gridModel.hideHeaders;
+    }
+
     constructor(config: ZoneMapperConfig) {
         super();
         makeObservable(this);

package/data/filter/FieldFilter.ts

@@ -54,7 +54,9 @@ export class FieldFilter extends Filter {
         'like',
         'not like',
         'begins',
+        'not begins',
         'ends',
+        'not ends',
         'includes',
         'excludes'
     ];
@@ -64,7 +66,9 @@ export class FieldFilter extends Filter {
         'like',
         'not like',
         'begins',
+        'not begins',
         'ends',
+        'not ends',
         'includes',
         'excludes'
     ];
@@ -161,10 +165,18 @@ export class FieldFilter extends Filter {
                 regExps = value.map(v => new RegExp('^' + escapeRegExp(v), 'i'));
                 opFn = v => regExps.some(re => re.test(v));
                 break;
+            case 'not begins':
+                regExps = value.map(v => new RegExp('^' + escapeRegExp(v), 'i'));
+                opFn = v => regExps.every(re => !re.test(v));
+                break;
             case 'ends':
                 regExps = value.map(v => new RegExp(escapeRegExp(v) + '$', 'i'));
                 opFn = v => regExps.some(re => re.test(v));
                 break;
+            case 'not ends':
+                regExps = value.map(v => new RegExp(escapeRegExp(v) + '$', 'i'));
+                opFn = v => regExps.every(re => !re.test(v));
+                break;
             case 'includes':
                 opFn = v => !isNil(v) && v.some(it => value.includes(it));
                 break;

package/data/filter/Types.ts

@@ -28,7 +28,9 @@ export type FieldFilterOperator =
     | 'like'
     | 'not like'
     | 'begins'
+    | 'not begins'
     | 'ends'
+    | 'not ends'
     | 'includes'
     | 'excludes';
 export interface FieldFilterSpec {

package/desktop/cmp/zoneGrid/impl/ZoneMapper.scss

@@ -1,6 +1,6 @@
 .xh-zone-mapper {
   width: 350px;
-  height: 500px;
+  height: 550px;
 
   &__zone-picker {
     padding: var(--xh-pad-px);
@@ -25,8 +25,10 @@
       }
 
       &--selected {
-        box-shadow: var(--xh-form-field-focused-box-shadow);
-        background: var(--xh-grid-tree-group-bg);
+        box-shadow:
+          inset 0 0 0 1px var(--xh-intent-warning),
+          inset 0 1px 1px var(--xh-intent-warning);
+        background: var(--xh-intent-warning-trans1);
       }
 
       &.tl {
@@ -75,7 +77,11 @@
   }
 
   &__intro-text {
-    padding: var(--xh-pad-px);
+    padding: var(--xh-pad-px) var(--xh-pad-px) 0 var(--xh-pad-px);
     font-size: var(--xh-font-size-small-px);
+
+    .xh-icon {
+      margin-right: 2px;
+    }
   }
 }

package/desktop/cmp/zoneGrid/impl/ZoneMapper.ts

@@ -6,7 +6,7 @@
  */
 import '@xh/hoist/desktop/register';
 import {hoistCmp, HoistModel, lookup, managed, useLocalModel, uses} from '@xh/hoist/core';
-import {div, filler, hbox, hframe, span, vbox} from '@xh/hoist/cmp/layout';
+import {div, filler, hbox, hframe, p, span, vbox} from '@xh/hoist/cmp/layout';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {grid, GridModel} from '@xh/hoist/cmp/grid';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
@@ -70,12 +70,20 @@ export const [ZoneMapper, zoneMapper] = hoistCmp.withFactory<ZoneMapperModel>({
     }
 });
 
-const introText = hoistCmp.factory({
-    render() {
+const introText = hoistCmp.factory<ZoneMapperModel>({
+    render({model}) {
         return div({
             className: 'xh-zone-mapper__intro-text',
             items: [
-                'Click any of the four quadrants in the sample row below to customize the fields displayed within. Fields will be shown in the order they are selected. The first field within the top zones will always be labelled by the column headers.'
+                p(
+                    Icon.questionCircle(),
+                    'Click to highlight any of the four quadrants in the sample row below, then check the field(s) you wish to show in that zone.'
+                ),
+                p('Fields will be shown in the order they are selected.'),
+                p({
+                    omit: model.headersAreHidden,
+                    item: 'The first field within the top two zones will always be labelled by the column headers.'
+                })
             ]
         });
     }

package/package.json

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