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

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/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/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.1763504782361",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",