@xh/hoist 80.0.0-SNAPSHOT.1768360784265 → 80.0.0-SNAPSHOT.1768517142984

package/cmp/grid/filter/GridFilterModel.ts

@@ -5,7 +5,12 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
-import {GridFilterFieldSpec, GridFilterModelConfig} from '@xh/hoist/cmp/grid';
+import {
+    GridFilterBindTarget,
+    GridFilterFieldSpec,
+    GridFilterFieldSpecConfig,
+    GridFilterModelConfig
+} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import {
     CompoundFilter,
@@ -13,8 +18,6 @@ import {
     Filter,
     FilterLike,
     flattenFilter,
-    Store,
-    View,
     withFilterByField,
     withFilterByTypes
 } from '@xh/hoist/data';
@@ -31,7 +34,7 @@ export class GridFilterModel extends HoistModel {
     override xhImpl = true;
 
     gridModel: GridModel;
-    bind: Store | View;
+    bind: GridFilterBindTarget;
     @bindable commitOnChange: boolean;
     @managed fieldSpecs: GridFilterFieldSpec[] = [];
 
@@ -66,7 +69,7 @@ export class GridFilterModel extends HoistModel {
     setColumnFilters(field: string, filter: FilterLike) {
         // If current bound filter is a CompoundFilter for a single column, wrap it
         // in an 'AND' CompoundFilter so new columns get 'ANDed' alongside it.
-        let currFilter = this.filter as any;
+        let currFilter: FilterLike = this.filter;
         if (currFilter instanceof CompoundFilter && currFilter.field) {
             currFilter = {filters: [currFilter], op: 'AND'};
         }
@@ -144,7 +147,10 @@ export class GridFilterModel extends HoistModel {
     //--------------------------------
     // Implementation
     //--------------------------------
-    private parseFieldSpecs(specs, fieldSpecDefaults) {
+    private parseFieldSpecs(
+        specs: Array<string | GridFilterFieldSpecConfig>,
+        fieldSpecDefaults: Omit<GridFilterFieldSpecConfig, 'field'>
+    ) {
         const {bind} = this;
 
         // If no specs provided, include all source fields.

package/cmp/grid/impl/Utils.ts

@@ -4,8 +4,8 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {Column, ColumnGroup, ColumnRenderer, GroupRowRenderer} from '@xh/hoist/cmp/grid';
-import {HeaderClassParams} from '@xh/hoist/kit/ag-grid';
+import {Column, ColumnOrGroup, ColumnRenderer, GroupRowRenderer} from '@xh/hoist/cmp/grid';
+import type {HeaderClassParams} from '@xh/hoist/kit/ag-grid';
 import {logWarn} from '@xh/hoist/utils/js';
 import {castArray, isFunction} from 'lodash';
 
@@ -31,9 +31,7 @@ export function managedRenderer<T extends ColumnRenderer | GroupRowRenderer>(
  *
  *   @internal
  */
-export function getAgHeaderClassFn(
-    column: Column | ColumnGroup
-): (params: HeaderClassParams) => string[] {
+export function getAgHeaderClassFn(column: ColumnOrGroup): (params: HeaderClassParams) => string[] {
     const {headerClass, headerAlign, gridModel} = column;
 
     return agParams => {

package/cmp/tab/TabContainerModel.ts

@@ -123,7 +123,7 @@ export class TabContainerModel extends HoistModel {
 
     /**
      * @param config - TabContainer configuration.
-     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     * @param depth - Depth in hierarchy of nested TabContainerModels. Not for application use.
      */
     constructor(
         {
@@ -138,7 +138,7 @@ export class TabContainerModel extends HoistModel {
             xhImpl = false,
             switcher = {mode: 'static'}
         }: TabContainerConfig,
-        depth = 0
+        depth: number = 0
     ) {
         super();
         makeObservable(this);

package/data/cube/Cube.ts

@@ -8,17 +8,17 @@
 import {HoistBase, managed, PlainObject, Some} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {forEachAsync} from '@xh/hoist/utils/async';
-import {CubeField, CubeFieldSpec} from './CubeField';
-import {ViewRowData} from './ViewRowData';
-import {Query, QueryConfig} from './Query';
-import {View} from './View';
+import {defaultsDeep, isEmpty} from 'lodash';
 import {Store, StoreRecordIdSpec, StoreTransaction} from '../Store';
 import {StoreRecord} from '../StoreRecord';
+import {BucketSpec} from './BucketSpec';
+import {CubeField, CubeFieldSpec} from './CubeField';
+import {Query, QueryConfig} from './Query';
 import {AggregateRow} from './row/AggregateRow';
-import {BucketRow} from './row/BucketRow';
 import {BaseRow} from './row/BaseRow';
-import {BucketSpec} from './BucketSpec';
-import {defaultsDeep, isEmpty} from 'lodash';
+import {BucketRow} from './row/BucketRow';
+import {View} from './View';
+import {ViewRowData} from './ViewRowData';
 
 export interface CubeConfig {
     fields: CubeField[] | CubeFieldSpec[];
@@ -160,6 +160,10 @@ export class Cube extends HoistBase {
         return this._connectedViews.size;
     }
 
+    getField(name: string): CubeField {
+        return this.store.getField(name) as CubeField;
+    }
+
     //------------------
     // Querying API
     //-----------------

package/desktop/cmp/form/FormField.scss

@@ -12,22 +12,31 @@
   margin: var(--xh-form-field-margin);
 
   &__label {
+    // Common label attrs
     color: var(--xh-form-field-label-color);
     font-size: var(--xh-form-field-label-font-size);
     font-style: var(--xh-form-field-label-font-style);
     font-weight: var(--xh-form-field-label-font-weight);
     text-transform: var(--xh-form-field-label-text-transform);
 
-    // Borders + padding (not inline)
+    // Borders + padding - editable, not inline - the default case.
     border-bottom: var(--xh-form-field-label-border-bottom);
     margin: var(--xh-form-field-label-margin);
     padding: var(--xh-form-field-label-padding);
 
-    // Borders + padding (inline)
+    // Borders + padding - readonly, not inline - commonly used to add bottom border when using
+    // forms as a kind of detail view, as readonly fields often lack other visual boundaries.
+    .xh-form-field--readonly:not(.xh-form-field--inline) & {
+      border-bottom: var(--xh-form-field-readonly-label-border-bottom);
+      margin: var(--xh-form-field-readonly-label-margin);
+      padding: var(--xh-form-field-readonly-label-padding);
+    }
+
+    // Borders + padding - inline, both editable and readonly.
     .xh-form-field--inline & {
-      border-bottom: var(--xh-form-field-label-inline-border-bottom);
-      margin: var(--xh-form-field-label-inline-margin);
-      padding: var(--xh-form-field-label-inline-padding);
+      border-bottom: var(--xh-form-field-inline-label-border-bottom);
+      margin: var(--xh-form-field-inline-label-margin);
+      padding: var(--xh-form-field-inline-label-padding);
     }
   }
 

package/package.json

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

package/styles/vars.scss

@@ -432,20 +432,27 @@ body {
   --xh-form-field-focused-border-color: var(--form-field-focused-border-color, var(--xh-focus-outline-color));
   --xh-form-field-focused-box-shadow: var(--form-field-focused-box-shadow, #{inset 0 0 0 1px var(--xh-form-field-focused-border-color), inset 0 1px 1px var(--xh-form-field-focused-border-color)});
 
-  // Label styling (shared)
+  // Label styling - common to all variants
   --xh-form-field-label-color: var(--form-field-label-color, var(--xh-text-color));
   --xh-form-field-label-font-size: var(--form-field-label-font-size, var(--xh-font-size-px));
   --xh-form-field-label-font-style: var(--form-field-label-font-style, normal);
   --xh-form-field-label-font-weight: var(--form-field-label-font-weight, normal);
   --xh-form-field-label-text-transform: var(--form-field-label-text-transform, none);
 
-  // Label borders+padding (with inline variants)
+  // Label borders + padding - editable, not inline - the default case.
   --xh-form-field-label-border-bottom: var(--form-field-label-border-bottom, none);
   --xh-form-field-label-margin: var(--form-field-label-margin, 0 0 3px 0);
   --xh-form-field-label-padding: var(--form-field-label-padding, 0);
-  --xh-form-field-label-inline-border-bottom: var(--form-field-label-inline-border-bottom, none);
-  --xh-form-field-label-inline-margin: var(--form-field-label-inline-margin, 0);
-  --xh-form-field-label-inline-padding: var(--form-field-label-inline-padding, 0);
+
+  // Label borders + padding - readonly, not inline
+  --xh-form-field-readonly-label-border-bottom: var(--form-field-readonly-label-border-bottom, var(--xh-form-field-label-border-bottom));
+  --xh-form-field-readonly-label-margin: var(--form-field-readonly-label-margin, var(--xh-form-field-label-margin));
+  --xh-form-field-readonly-label-padding: var(--form-field-readonly-label-padding, var(--xh-form-field-label-padding));
+
+  // Label borders + padding - inline, both editable and readonly
+  --xh-form-field-inline-label-border-bottom: var(--form-field-inline-label-border-bottom, var(--xh-form-field-label-border-bottom));
+  --xh-form-field-inline-label-margin: var(--form-field-inline-label-margin, 0); // Defaulted to zero for inline
+  --xh-form-field-inline-label-padding: var(--form-field-inline-label-padding, var(--xh-form-field-label-padding));
 
   // Messages (general info text + validation results)
   --xh-form-field-msg-font-size: var(--form-field-msg-font-size, var(--xh-font-size-small-px));