@xh/hoist 55.2.0 → 55.3.0

package/CHANGELOG.md

@@ -1,55 +1,74 @@
 # Changelog
 
+## v55.3.0 - 2023-03-03
+
+### 🐞 Bug Fixes
+* Grid column filters scroll their internal grid horizontally to avoid clipping longer values.
+* Minor improvements to the same grid filter dialog's alignment and labelling.
+
+### ⚙️ Technical
+* Use native `structuredClone` instead of lodash `deepClone` throughout toolkit.
+
+## v55.2.1 - 2023-02-24
+
+### 🐞 Bug Fixes
+
+* Fixed issue where a resizable `Panel` splitter could be rendered incorrectly while dragging.
+
 ## v55.2.0 - 2023-02-10
 
 ### 🎁 New Features
+
 * `DashCanvas` enhancements:
     * Views now support minimum and maximum dimensions.
-    * Views now expose an `allowDuplicate` flag for controlling the `Duplicate` menu item visibility.
+    * Views now expose an `allowDuplicate` flag for controlling the `Duplicate` menu item
+      visibility.
 
 ### 🐞 Bug Fixes
-* Fixed a bug with Cube views having dimensions containing non-string or `null` values.  Rows grouped
-by these dimensions would report values for the dimension which were incorrectly stringified (e.g.
-`null` vs. `'null'` or `'5'` vs. `5`).  This has been fixed.  Note that the stringified value is
-still reported for the rows' `cubeLabel` value, and will be used for the purposes of grouping.
+
+* Fixed a bug with Cube views having dimensions containing non-string or `null` values. Rows grouped
+  by these dimensions would report values for the dimension which were incorrectly stringified (e.g.
+  `'null'` vs. `null` or `'5'` vs. `5`). This has been fixed. Note that the stringified value is
+  still reported for the rows' `cubeLabel` value, and will be used for the purposes of grouping.
 
 ### ⚙️ Typescript API Adjustments
 
 * Improved signatures of `RestStore` APIs.
 
-
 ## v55.1.0 - 2023-02-09
 
-Version 55 is the first major update of the toolkit after our transition to typescript.  In addition
-to a host of runtime fixes and features, it also contains a good number of important typescript
-typing adjustments, which are listed below.  In also includes a helpful
+Version 55 is the first major update of the toolkit after our transition to Typescript. In addition
+to a host of runtime fixes and features, it also contains a good number of important Typescript
+typing adjustments, which are listed below. It also includes a helpful
 [Typescript upgrade guide](https://github.com/xh/hoist-react/blob/develop/docs/upgrade-to-typescript.md).
 
 ### 🎁 New Features
 
 * Grid exports can now be tracked in the admin activity tab by setting `exportOptions.track` to
   true (defaults to false).
-* Miscellaneous performance improvements to the cube package
-* The implementation of the `Cube.omitFn` feature has been enhanced.  This function will now be
-  called on *all* non-leaf nodes, not just single child nodes.  This allows for more flexible
+* Miscellaneous performance improvements to the cube package.
+* The implementation of the `Cube.omitFn` feature has been enhanced. This function will now be
+  called on *all* non-leaf nodes, not just single child nodes. This allows for more flexible
   editing of the shape of the resulting hierarchical data emitted by cube views.
 
 ### 🐞 Bug Fixes
+
 * Fixed: grid cell editors would drop a single character edit.
 * Fixed: grid date input editor's popup did not position correctly in a grid with pinned columns.
 * Fixed issue with `DashContainer` flashing its "empty" text briefly before loading.
 * Several Hoist TypeScript types, interfaces, and signatures have been improved or corrected (typing
   changes only).
 * Fix bug where a `className` provided to a `Panel` with `modalSupport` would be dropped when in a
-  modal state. Note this necessitated an additional layer in the `Panel` DOM hierarchy.  Highly
+  modal state. Note this necessitated an additional layer in the `Panel` DOM hierarchy. Highly
   specific CSS selectors may be affected.
 * Fix bug where `TileFrame` would not pass through the keys of its children.
 
 ### 💥 Breaking Changes
-* The semantics of `Cube.omitFn` have changed such that it will now be called on all aggregate nodes,
-  not just nodes with a single child. Applications may need to adjust any implementation of this
-  function accordingly.
-*  `hoistCmp.containerFactory` and `hoistCmp.withContainerFactory` are removed in favor of
+
+* The semantics of `Cube.omitFn` have changed such that it will now be called on all aggregate
+  nodes, not just nodes with a single child. Applications may need to adjust any implementation of
+  this function accordingly.
+* `hoistCmp.containerFactory` and `hoistCmp.withContainerFactory` are removed in favor of
   the basic `hoistCmp.factory` and `hoistCmp.withFactory` respectively. See typescript
   API adjustments below.
 
@@ -57,22 +76,19 @@ typing adjustments, which are listed below.  In also includes a helpful
 
 The following Typescript API were adjusted in v55.
 
-* Removed the distinction between `StandardElementFactory` and `ContainerElementFactory`.  This
+* Removed the distinction between `StandardElementFactory` and `ContainerElementFactory`. This
   distinction was deemed to be unnecessary, and overcomplicated the understanding of Hoist.
-  Applications should simply continue to use `ElementFactory` instead.  `hoistCmp.containerFactory` and
-  `hoistCmp.withContainerFactory` are also removed in favor of the basic `hoistCmp.factory` and
+  Applications should simply continue to use `ElementFactory` instead. `hoistCmp.containerFactory`
+  and `hoistCmp.withContainerFactory` are also removed in favor of the basic `hoistCmp.factory` and
   `hoistCmp.withFactory` respectively.
-
 * `HoistProps.modelConfig` now references the type declaration of `HoistModel.config`. See
   `PanelModel` and `TabContainerModel` for examples.
-
 * The new `SelectOption` type has been made multi-platform and moved to `@xh/hoist/core`.
 
 **Note** that we do not intend to make such extensive Typescript changes going forward post-v55.0.
 These changes were deemed critical and worth adjusting in our first typescript update, and before
 typescript has been widely adopted in production Hoist apps.
 
-
 ### ⚙️ Technical
 
 * Hoist's `Icon` enumeration has been re-organized slightly to better separate icons that describe

package/admin/differ/DifferModel.ts

@@ -13,7 +13,7 @@ import {Icon} from '@xh/hoist/icon';
 import {bindable, makeObservable, observable, action} from '@xh/hoist/mobx';
 import {pluralize} from '@xh/hoist/utils/js';
 import {hbox} from '@xh/hoist/cmp/layout';
-import {cloneDeep, isEqual, isString, isNil, omit, remove, trimEnd} from 'lodash';
+import {isEqual, isString, isNil, omit, remove, trimEnd} from 'lodash';
 import {hspacer} from '../../cmp/layout';
 
 import {DifferDetailModel} from './DifferDetailModel';
@@ -151,7 +151,7 @@ export class DifferModel extends HoistModel {
             const resp = await Promise.all([
                 XH.fetchJson({url: `${url}/${entityName}s`, loadSpec}),
                 this.clipboardContent ?
-                    Promise.resolve(cloneDeep(this.clipboardContent)) :
+                    Promise.resolve(structuredClone(this.clipboardContent)) :
                     XH.fetchJson({url: `${remoteBaseUrl}${url}/${entityName}s`, loadSpec})
             ]);
             this.processResponse(resp);
@@ -250,8 +250,8 @@ export class DifferModel extends HoistModel {
 
     rawRecordsAreEqual(local, remote) {
         // cloning to avoid disturbing the source data.
-        local = cloneDeep(local);
-        remote = cloneDeep(remote);
+        local = structuredClone(local);
+        remote = structuredClone(remote);
 
         // For JSON records, parse JSON to do an accurate value compare,
         if (local?.valueType === 'json' && remote?.valueType === 'json') {

package/cmp/ag-grid/AgGrid.scss

@@ -306,14 +306,6 @@
     .ag-cell {
       padding-left: var(--xh-grid-tiny-cell-lr-pad-px);
       padding-right: var(--xh-grid-tiny-cell-lr-pad-px);
-
-      .xh-check-box {
-        padding-top: 1px;
-
-        .bp4-control-indicator {
-          font-size: calc(var(--xh-grid-tiny-font-size-px) + 2px);
-        }
-      }
     }
 
     .ag-header-cell,
@@ -377,6 +369,11 @@
       color: var(--xh-grid-empty-text-color);
     }
   }
+
+  // Set Blueprint controls - specifically checkboxes - to match grid size.
+  .bp4-control .bp4-control-indicator {
+    font-size: 1em;
+  }
 }
 
 //------------------------

package/cmp/ag-grid/AgGridModel.ts

@@ -9,7 +9,6 @@ import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/
 import {throwIf} from '@xh/hoist/utils/js';
 import {
     castArray,
-    cloneDeep,
     concat,
     find,
     has,
@@ -306,7 +305,7 @@ export class AgGridModel extends HoistModel {
     setSortState(sortState: AgGridColumnSortState[]) {
         this.throwIfNotReady();
 
-        const sortedColumnState = cloneDeep(sortState),
+        const sortedColumnState = structuredClone(sortState),
             [primaryColumnState, secondaryColumnState] = partition(sortedColumnState, it => !isArray(it.colId)),
             {agColumnApi: colApi, agApi} = this,
             isPivot = colApi.isPivotMode(),
@@ -390,7 +389,7 @@ export class AgGridModel extends HoistModel {
         const {agColumnApi} = this,
             validColIds = [
                 AgGridModel.AUTO_GROUP_COL_ID,
-                ...agColumnApi.getAllColumns().map(it => it.colId)
+                ...agColumnApi.getColumns().map(it => it.colId)
             ];
 
         let {isPivot, columns} = colState;

package/cmp/chart/Chart.ts

@@ -355,7 +355,7 @@ class ChartLocalModel extends HoistModel {
     }
 
     getThemeConfig() {
-        return XH.darkTheme ? cloneDeep(DarkTheme) : cloneDeep(LightTheme);
+        return XH.darkTheme ? structuredClone(DarkTheme) : structuredClone(LightTheme);
     }
 
     getModelConfig() {

package/cmp/chart/ChartModel.ts

@@ -6,7 +6,7 @@
  */
 import {HoistModel, PlainObject, Some} from '@xh/hoist/core';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, cloneDeep, merge} from 'lodash';
+import {castArray, merge} from 'lodash';
 
 interface ChartConfig {
 
@@ -84,7 +84,7 @@ export class ChartModel extends HoistModel {
      */
     @action
     updateHighchartsConfig(update: any) {
-        this.highchartsConfig = merge(cloneDeep(this.highchartsConfig), update);
+        this.highchartsConfig = merge(structuredClone(this.highchartsConfig), update);
     }
 
     /** @param series - one or more data series to be charted. */

package/cmp/filter/FilterChooserModel.ts

@@ -29,7 +29,6 @@ import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import {ReactNode} from 'react';
 import {
-    cloneDeep,
     compact,
     flatMap,
     flatten,
@@ -374,7 +373,7 @@ export class FilterChooserModel extends HoistModel {
             // it's internal `value`. Force synchronise its `value` to our bound `selectValue`
             // to get it back inline. Note we're intentionally not using `setSelectValue()`,
             // which returns early if the actual filter value hasn't changed.
-            this.selectValue = cloneDeep(this.selectValue);
+            this.selectValue = structuredClone(this.selectValue);
         });
     }
 

package/cmp/grid/GridModel.ts

@@ -60,7 +60,6 @@ import equal from 'fast-deep-equal';
 import {
     castArray,
     clone,
-    cloneDeep,
     compact,
     defaults,
     defaultsDeep,
@@ -1061,7 +1060,7 @@ export class GridModel extends HoistModel {
     applyColumnStateChanges(colStateChanges: Partial<ColumnState>[]) {
         if (isEmpty(colStateChanges)) return;
 
-        let columnState = cloneDeep(this.columnState);
+        let columnState = structuredClone(this.columnState);
 
         throwIf(colStateChanges.some(({colId}) => !find(columnState, {colId})),
             'Invalid columns detected in column changes!');

package/cmp/grid/filter/GridFilterFieldSpec.ts

@@ -7,27 +7,27 @@
 import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {HoistInputProps} from '@xh/hoist/cmp/input';
 import {PlainObject} from '@xh/hoist/core';
+import {FieldFilterOperator, parseFilter, View} from '@xh/hoist/data';
 import {
     BaseFilterFieldSpec,
     BaseFilterFieldSpecConfig
 } from '@xh/hoist/data/filter/BaseFilterFieldSpec';
-import {FieldFilterOperator, parseFilter, View} from '@xh/hoist/data';
 import {castArray, compact, flatten, isDate, isEmpty, uniqBy} from 'lodash';
 import {GridFilterModel} from './GridFilterModel';
 
-
 export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
-    /** GridFilterModel instance which owns this fieldSpec. */
+    /** GridFilterModel instance owning this fieldSpec. */
     filterModel?: GridFilterModel;
+
     /**
-     * function returning a formatted string for each value in this values filter display.
+     * Function returning a formatted string for each value in this values filter display.
      * If not provided, the Column's renderer will be used.
      */
     renderer?: ColumnRenderer;
 
     /**
-     * Props to pass through to the HoistInput components used on the custom filter tab. Note
-     * that the HoistInput component used is decided by fieldType.
+     * Props to pass through to the HoistInput components used on the custom filter tab.
+     * Note that the HoistInput component used is decided by fieldType.
      */
     inputProps?: HoistInputProps;
 
@@ -36,8 +36,8 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
 }
 
 /**
- * Apps should NOT instantiate this class directly. Provide a config for this object
- * to the GridModel's `filterModel` property instead.
+ * Apps should NOT instantiate this class directly.
+ * Instead, provide a config for this object to the GridModel's `filterModel` config.
  */
 export class GridFilterFieldSpec extends BaseFilterFieldSpec {
 
@@ -53,7 +53,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         inputProps,
         defaultOp,
         ...rest
-    }:GridFilterFieldSpecConfig) {
+    }: GridFilterFieldSpecConfig) {
         super(rest);
 
         this.filterModel = filterModel;
@@ -106,9 +106,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         this.valueCount = allValues.length;
     }
 
-    /**
-     * Recursively modify a Filter|CompoundFilter to remove all FieldFilters that reference this column
-     */
+    // Recursively modify a Filter|CompoundFilter to remove all FieldFilters referencing this column
     cleanFilter(filter) {
         if (!filter) return filter;
 

package/cmp/grid/filter/GridFilterModel.ts

@@ -5,15 +5,22 @@
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
 
-import {GridFilterModelConfig} from '@xh/hoist/cmp/grid';
+import {GridFilterFieldSpec, GridFilterModelConfig} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
-import {action, bindable, observable, makeObservable} from '@xh/hoist/mobx';
-import {CompoundFilter, FieldFilter, Filter,
-    FilterLike, flattenFilter, Store, View, withFilterByField, withFilterByTypes} from '@xh/hoist/data';
+import {
+    CompoundFilter,
+    FieldFilter,
+    Filter,
+    FilterLike,
+    flattenFilter,
+    Store,
+    View,
+    withFilterByField,
+    withFilterByTypes
+} from '@xh/hoist/data';
+import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
-import {find, isString, isNil, castArray, uniq, every, compact} from 'lodash';
-
-import {GridFilterFieldSpec} from './GridFilterFieldSpec';
+import {castArray, compact, every, find, isNil, isString, uniq} from 'lodash';
 import {GridModel} from '../GridModel';
 
 
@@ -174,4 +181,4 @@ export class GridFilterModel extends HoistModel {
         const results = compact(filter.filters.map(it => this.getOuterCompoundFilter(it, field)));
         return results.length === 1 ? results[0] : null;
     }
-}
+}

package/cmp/grouping/GroupingChooserModel.ts

@@ -10,7 +10,7 @@ import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
 import {genDisplayName} from '@xh/hoist/data';
 import {throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {cloneDeep, difference, isFunction, isArray, isEmpty, isEqual, isString, keys, sortBy} from 'lodash';
+import {difference, isFunction, isArray, isEmpty, isEqual, isString, keys, sortBy} from 'lodash';
 
 export interface GroupingChooserConfig {
     /**
@@ -128,7 +128,7 @@ export class GroupingChooserModel extends HoistModel {
                 this.persistValue = persistWith.persistValue ?? true;
                 this.persistFavorites = persistWith.persistFavorites ?? true;
 
-                const state = cloneDeep(this.provider.read());
+                const state = structuredClone(this.provider.read());
                 if (this.persistValue && state?.value && this.validateValue(state?.value)) {
                     value = state.value;
                 }

package/cmp/tab/TabModel.ts

@@ -90,7 +90,7 @@ export class TabModel extends HoistModel {
     @bindable.ref icon: ReactElement;
     @bindable.ref tooltip: ReactNode;
     @observable disabled: boolean;
-    excludeFromSwitcher: boolean;
+    @bindable excludeFromSwitcher: boolean;
     showRemoveAction: boolean;
     content: Content;
 

package/core/HoistBase.ts

@@ -8,7 +8,6 @@ import {XH, PersistenceProvider, PersistOptions, DebounceSpec} from './';
 import {throwIf, getOrCreate} from '@xh/hoist/utils/js';
 import {
     debounce as lodashDebounce,
-    cloneDeep,
     isFunction,
     isNil,
     isNumber,
@@ -220,7 +219,7 @@ export abstract class HoistBase {
                 provider = this.markManaged(PersistenceProvider.create(persistWith)),
                 providerState = provider.read();
             if (!isUndefined(providerState)) {
-                runInAction(() => this[property] = cloneDeep(providerState));
+                runInAction(() => this[property] = structuredClone(providerState));
             }
             this.addReaction({
                 track: () => this[property],

package/core/HoistBaseDecorators.ts

@@ -6,7 +6,7 @@
 */
 import {PersistenceProvider, PersistOptions, HoistBaseClass} from './';
 
-import {cloneDeep, isUndefined} from 'lodash';
+import {isUndefined} from 'lodash';
 import {wait} from '../promise';
 import {throwIf} from '../utils/js';
 
@@ -75,7 +75,7 @@ function createPersistDescriptor(target: HoistBaseClass, property: string, descr
         try {
             const persistWith = {path: property, ...this.persistWith, ...options},
                 provider = this.markManaged(PersistenceProvider.create(persistWith));
-            providerState = cloneDeep(provider.read());
+            providerState = structuredClone(provider.read());
             wait().then(() => {
                 this.addReaction({
                     track: () => this[property],

package/core/HoistService.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2022 Extremely Heavy Industries Inc.
  */
-import {HoistBase, managed, LoadSupport, LoadSpec, Loadable} from './';
+import {HoistBase, managed, LoadSupport, LoadSpec, Loadable, PlainObject} from './';
 
 /**
  * Core superclass for Services in Hoist. Services are special classes used in both Hoist and
@@ -64,12 +64,12 @@ export class HoistService extends HoistBase implements Loadable {
     @managed
     loadSupport: LoadSupport;
 
-    get loadModel()                         {return this.loadSupport?.loadModel}
-    get lastLoadRequested()                 {return this.loadSupport?.lastLoadRequested}
-    get lastLoadCompleted()                 {return this.loadSupport?.lastLoadCompleted}
-    get lastLoadException()                 {return this.loadSupport?.lastLoadException}
-    async refreshAsync(meta?: object)       {return this.loadSupport?.refreshAsync(meta)}
-    async autoRefreshAsync(meta?: object)   {return this.loadSupport?.autoRefreshAsync(meta)}
+    get loadModel()                             {return this.loadSupport?.loadModel}
+    get lastLoadRequested()                     {return this.loadSupport?.lastLoadRequested}
+    get lastLoadCompleted()                     {return this.loadSupport?.lastLoadCompleted}
+    get lastLoadException()                     {return this.loadSupport?.lastLoadException}
+    async refreshAsync(meta?: PlainObject)      {return this.loadSupport?.refreshAsync(meta)}
+    async autoRefreshAsync(meta?: PlainObject)  {return this.loadSupport?.autoRefreshAsync(meta)}
     async doLoadAsync(loadSpec: LoadSpec) {}
     async loadAsync(loadSpec?: LoadSpec|Partial<LoadSpec>) {
         return this.loadSupport?.loadAsync(loadSpec);

package/core/exception/ExceptionHandler.ts

@@ -37,10 +37,9 @@ export interface ExceptionHandlerOptions {
     showAlert?: boolean;
 
     /**
-     * If `showAlert`, which type of alert to display.
-     * Valid options are 'dialog'|'toast'. Defaults to ExceptionHandler.ALERT_TYPE.
+     * If `showAlert`, which type of alert to display. Defaults to ExceptionHandler.ALERT_TYPE.
      */
-    alertType?: string;
+    alertType?: 'dialog'|'toast';
 
     /**
      * Force user to fully refresh the app in order to dismiss - default false, excepting
@@ -80,9 +79,8 @@ export class ExceptionHandler {
 
     /**
      * Default type of alert to use to display exceptions with `showAlert`.
-     * Valid options are 'dialog'|'toast'.
      */
-    static ALERT_TYPE: string = 'dialog';
+    static ALERT_TYPE: 'dialog'|'toast' = 'dialog';
 
     /**
      * Default props provided to toast, when alert type is 'toast'

package/core/load/LoadSpec.ts

@@ -6,6 +6,7 @@
  */
 
 import {LoadSupport} from './';
+import {PlainObject} from '../types/Types';
 
 /**
  * Object describing a load/refresh request in Hoist.
@@ -46,7 +47,7 @@ export class LoadSpec {
     owner: LoadSupport;
 
     /** Application specific information about the load request */
-    meta: object;
+    meta: PlainObject;
 
     /** True if a more recent request to load this object's owner has *started*. */
     get isStale(): boolean {

package/core/model/HoistModel.ts

@@ -6,7 +6,7 @@
  */
 import {forOwn, has, isFunction} from 'lodash';
 import {warnIf} from '@xh/hoist/utils/js';
-import {DefaultHoistProps, HoistBase, managed} from '../';
+import {DefaultHoistProps, HoistBase, managed, PlainObject} from '../';
 import {ModelSelector} from './';
 import {LoadSupport, LoadSpec, Loadable} from '../load';
 import {observable, action, makeObservable} from '@xh/hoist/mobx';
@@ -94,12 +94,12 @@ export abstract class HoistModel extends HoistBase implements Loadable {
     @managed
     loadSupport: LoadSupport;
 
-    get loadModel()                         {return this.loadSupport?.loadModel}
-    get lastLoadRequested()                 {return this.loadSupport?.lastLoadRequested}
-    get lastLoadCompleted()                 {return this.loadSupport?.lastLoadCompleted}
-    get lastLoadException()                 {return this.loadSupport?.lastLoadException}
-    async refreshAsync(meta?: object)       {return this.loadSupport?.refreshAsync(meta)}
-    async autoRefreshAsync(meta?: object)   {return this.loadSupport?.autoRefreshAsync(meta)}
+    get loadModel()                             {return this.loadSupport?.loadModel}
+    get lastLoadRequested()                     {return this.loadSupport?.lastLoadRequested}
+    get lastLoadCompleted()                     {return this.loadSupport?.lastLoadCompleted}
+    get lastLoadException()                     {return this.loadSupport?.lastLoadException}
+    async refreshAsync(meta?: PlainObject)      {return this.loadSupport?.refreshAsync(meta)}
+    async autoRefreshAsync(meta?: PlainObject)  {return this.loadSupport?.autoRefreshAsync(meta)}
     async doLoadAsync(loadSpec: LoadSpec) {}
     async loadAsync(loadSpec?: LoadSpec|Partial<LoadSpec>) {
         return this.loadSupport?.loadAsync(loadSpec);

package/core/persist/PersistenceProvider.ts

@@ -9,7 +9,6 @@ import {DebounceSpec, XH} from '../';
 import {LocalStorageProvider, PrefProvider, DashViewProvider, CustomProvider, PersistOptions} from './';
 import {
     isUndefined,
-    cloneDeep,
     get,
     set,
     unset,
@@ -96,7 +95,7 @@ export class PersistenceProvider {
      * Clear any state saved by this object at a path
      */
     clear(path: string = this.path) {
-        const obj = cloneDeep(this.readRaw());
+        const obj = structuredClone(this.readRaw());
         unset(obj, this.path);
         this.writeRaw(obj);
     }
@@ -112,7 +111,7 @@ export class PersistenceProvider {
     // Implementation
     //----------------
     protected writeInternal(data: object) {
-        const obj = cloneDeep(this.readRaw());
+        const obj = structuredClone(this.readRaw());
         set(obj, this.path, data);
         this.writeRaw(obj);
     }

package/data/cube/View.ts

@@ -10,6 +10,7 @@ import {
     Cube,
     CubeField,
     Filter,
+    FilterLike,
     Query,
     QueryConfig,
     Store,
@@ -17,15 +18,14 @@ import {
     StoreRecordId
 } from '@xh/hoist/data';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {throwIf, logWithDebug} from '@xh/hoist/utils/js';
 import {shallowEqualArrays} from '@xh/hoist/utils/impl';
-import {castArray, forEach, groupBy, isEmpty, isNil, map, find} from 'lodash';
+import {logWithDebug, throwIf} from '@xh/hoist/utils/js';
+import {castArray, find, forEach, groupBy, isEmpty, isNil, map} from 'lodash';
 import {AggregationContext} from './aggregate/AggregationContext';
-
 import {AggregateRow} from './row/AggregateRow';
+import {BaseRow} from './row/BaseRow';
 import {BucketRow} from './row/BucketRow';
 import {LeafRow} from './row/LeafRow';
-import {BaseRow} from './row/BaseRow';
 
 export interface ViewConfig {
     /** Query to be used to construct this view. */
@@ -177,7 +177,7 @@ export class View extends HoistBase {
     }
 
     /** Update the filter on the current Query.*/
-    setFilter(filter: Filter) {
+    setFilter(filter: FilterLike) {
         this.updateQuery({filter});
     }
 

package/desktop/cmp/dash/container/DashContainerModel.ts

@@ -22,7 +22,6 @@ import {debounced, ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {
-    cloneDeep,
     defaultsDeep,
     find,
     isFinite,
@@ -540,7 +539,7 @@ export class DashContainerModel extends DashModel<DashContainerViewSpec, DashVie
     private createGoldenLayout(containerEl: HTMLElement, state: any): GoldenLayout {
         const {viewSpecs} = this,
             ret = new GoldenLayout({
-                content: convertStateToGL(cloneDeep(state), this),
+                content: convertStateToGL(structuredClone(state), this),
                 settings: {
                     // Remove icons by default
                     showPopoutIcon: false,

package/desktop/cmp/grid/impl/filter/ColumnHeaderFilter.ts

@@ -70,24 +70,27 @@ const content = hoistCmp.factory({
 const bbar = hoistCmp.factory<ColumnHeaderFilterModel>({
     render({model}) {
         const {commitOnChange} = model;
-        return toolbar(
-            filler(),
-            button({
-                icon: Icon.delete(),
-                text: 'Clear Filter',
-                intent: 'danger',
-                disabled: !model.hasFilter,
-                onClick: () => model.clear()
-            }),
-            button({
-                omit: commitOnChange,
-                icon: Icon.check(),
-                text: 'Apply Filter',
-                intent: 'success',
-                disabled: !model.hasFilter && !model.hasPendingFilter,
-                onClick: () => model.commit()
-            })
-        );
+        return toolbar({
+            compact: true,
+            items: [
+                filler(),
+                button({
+                    icon: Icon.delete(),
+                    text: 'Clear Filter',
+                    intent: 'danger',
+                    disabled: !model.hasFilter,
+                    onClick: () => model.clear()
+                }),
+                button({
+                    omit: commitOnChange,
+                    icon: Icon.check(),
+                    text: 'Apply Filter',
+                    intent: 'success',
+                    disabled: !model.hasFilter && !model.hasPendingFilter,
+                    onClick: () => model.commit()
+                })
+            ]
+        });
     }
 });
 

package/desktop/cmp/grid/impl/filter/values/ValuesTab.scss

@@ -24,4 +24,23 @@
       margin-top: var(--xh-pad-px);
     }
   }
-}
+
+  // Fix up alignment on first checkbox column.
+  .ag-header-cell.xh-column-header-align-center {
+    padding: 0 !important;
+  }
+
+  .ag-pinned-left-header,
+  .ag-cell.ag-cell-last-left-pinned {
+    .bp4-control.bp4-inline {
+      margin-right: -8px;
+
+      input {
+        margin: 0;
+      }
+    }
+
+    // Less obvious pinning for the checkbox column.
+    border-right: none !important;
+  }
+}

package/desktop/cmp/grid/impl/filter/values/ValuesTabModel.ts

@@ -105,6 +105,12 @@ export class ValuesTabModel extends HoistModel {
             without(this.pendingValues, ...values);
     }
 
+    toggleAllRecsChecked() {
+        const setAllToChecked = !this.allVisibleRecsChecked,
+            values = this.gridModel.store.records.map(it => it.get('value'));
+        this.setRecsChecked(setAllToChecked, values);
+    }
+
     //-------------------
     // Implementation
     //-------------------
@@ -175,13 +181,13 @@ export class ValuesTabModel extends HoistModel {
 
     private createGridModel() {
         const {BLANK_PLACEHOLDER} = GridFilterModel,
-            {align, headerAlign, displayName} = this.headerFilterModel.column,
-            {fieldType} = this.headerFilterModel,
-            renderer = this.fieldSpec.renderer ?? (fieldType !== 'tags' ? this.headerFilterModel.column.renderer : null);
+            {headerFilterModel, fieldSpec} = this,
+            {fieldType} = headerFilterModel,
+            renderer = fieldSpec.renderer ?? (fieldType !== 'tags' ? this.headerFilterModel.column.renderer : null);
 
         return new GridModel({
             store: {
-                idSpec: (raw) => this.fieldSpec.getUniqueValue(raw.value).toString(),
+                idSpec: (raw) => fieldSpec.getUniqueValue(raw.value).toString(),
                 fields: [
                     {name: 'value', type: 'auto'},
                     {name: 'isChecked', type: 'bool'}
@@ -190,7 +196,10 @@ export class ValuesTabModel extends HoistModel {
             selModel: 'disabled',
             emptyText: 'No records found...',
             contextMenu: null,
-            autosizeOptions: {mode: 'disabled'},
+            // Autosize enabled to ensure that long values don't get clipped and user can scroll
+            // right if necessary to view full string. For longer strings that differ only in their
+            // endings this is important - e.g. instrument or contract names ending in a date.
+            autosizeOptions: {mode: 'managed'},
             sizingMode: 'compact',
             stripeRows: false,
             sortBy: 'value',
@@ -202,16 +211,18 @@ export class ValuesTabModel extends HoistModel {
                 {
                     field: 'isChecked',
                     headerName: ({gridModel}) => {
-                        const {store} = gridModel,
-                            values = store.records.map(it => it.get('value'));
                         return checkbox({
-                            disabled: store.empty,
+                            disabled: gridModel.store.empty,
                             displayUnsetState: true,
                             value: this.allVisibleRecsChecked,
-                            onChange: () => this.setRecsChecked(!this.allVisibleRecsChecked, values)
+                            onChange: () => this.toggleAllRecsChecked()
                         });
                     },
-                    width: 30,
+                    width: 28,
+                    autosizable: false,
+                    pinned: true,
+                    align: 'center',
+                    headerAlign: 'center',
                     rendererIsComplex: true,
                     renderer: (v, {record}) => {
                         return checkbox({
@@ -223,10 +234,8 @@ export class ValuesTabModel extends HoistModel {
                 },
                 {
                     field: 'value',
-                    flex: 1,
-                    displayName,
-                    align,
-                    headerAlign,
+                    displayName: '(Select All)',
+                    align: 'left',
                     comparator: (v1, v2, sortDir, abs, {defaultComparator}) => {
                         const mul = sortDir === 'desc' ? -1 : 1;
                         if (v1 === BLANK_PLACEHOLDER) return 1 * mul;

package/desktop/cmp/leftrightchooser/LeftRightChooser.ts

@@ -8,7 +8,6 @@ import {grid, GridProps} from '@xh/hoist/cmp/grid';
 import {hframe, vbox} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, uses} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import {cloneDeep} from 'lodash';
 import {chooserToolbar} from './impl/ChooserToolbar';
 import {description} from './impl/Description';
 import './LeftRightChooser.scss';
@@ -37,8 +36,8 @@ export const [LeftRightChooser, leftRightChooser] = hoistCmp.withFactory<LeftRig
                     }
                 }
             },
-            leftGridOptions = cloneDeep(gridOptions),
-            rightGridOptions = cloneDeep(gridOptions);
+            leftGridOptions = structuredClone(gridOptions),
+            rightGridOptions = structuredClone(gridOptions);
 
         if (!leftGroupingExpanded) leftGridOptions.agOptions.groupDefaultExpanded = 0;
         if (!rightGroupingExpanded) rightGridOptions.agOptions.groupDefaultExpanded = 0;

package/desktop/cmp/panel/PanelModel.ts

@@ -159,6 +159,7 @@ export class PanelModel extends HoistModel {
     // Implementation
     //-----------------
     _resizeRef;
+    splitterRef = createRef<HTMLDivElement>();
 
     constructor({
         collapsible = true,

package/desktop/cmp/panel/impl/Splitter.ts

@@ -30,7 +30,8 @@ export const splitter = hoistCmp.factory({
                     icon: Icon[chevron](),
                     onClick: () => panelModel.toggleCollapsed(),
                     omit: !showSplitterCollapseButton || !collapsible
-                })
+                }),
+                ref: panelModel.splitterRef
             };
 
         return cmp(cfg);

package/desktop/cmp/panel/impl/dragger/DraggerModel.ts

@@ -155,8 +155,8 @@ export class DraggerModel extends HoistModel {
 
     private getDraggableSplitter() {
         // clone .xh-resizable-splitter to get its styling
-        const splitter = this.panelEl.querySelector('.xh-resizable-splitter'),
-            ret = splitter.cloneNode();
+        const splitter = this.panelModel.splitterRef.current,
+            ret = splitter.cloneNode() as HTMLDivElement;
 
         ret.style.position = 'absolute';
         ret.style.display = 'none'; // display = none needed to prevent flash

package/desktop/cmp/treemap/TreeMapModel.ts

@@ -13,7 +13,7 @@ import {numberRenderer} from '@xh/hoist/format';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {ReactNode} from 'react';
-import {cloneDeep, get, isEmpty, isFinite, max, set, sortBy, sumBy, unset} from 'lodash';
+import {get, isEmpty, isFinite, max, set, sortBy, sumBy, unset} from 'lodash';
 
 /**
  * Core Model for a TreeMap.
@@ -442,7 +442,7 @@ export class TreeMapModel extends HoistModel {
 
     toggleNodeExpanded(treePath) {
         const {gridModel} = this,
-            expandState = cloneDeep(gridModel.expandState);
+            expandState = structuredClone(gridModel.expandState);
 
         if (get(expandState, treePath)) {
             unset(expandState, treePath);

package/package.json

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

package/svc/PrefService.ts

@@ -7,7 +7,7 @@
 import {HoistService, XH} from '@xh/hoist/core';
 import {SECONDS} from '@xh/hoist/utils/datetime';
 import {deepFreeze, throwIf} from '@xh/hoist/utils/js';
-import {cloneDeep, debounce, forEach, isEmpty, isEqual, isNil, pickBy} from 'lodash';
+import {debounce, forEach, isEmpty, isEqual, isNil, pickBy} from 'lodash';
 
 /**
  * Service to read and set user-specific preference values.
@@ -92,7 +92,7 @@ export class PrefService extends HoistService {
         if (isEqual(oldValue, value)) return;
 
         // Change local value to sanitized copy and fire.
-        value = deepFreeze(cloneDeep(value));
+        value = deepFreeze(structuredClone(value));
         this._data[key].value = value;
 
         // Schedule serialization to storage
@@ -198,7 +198,7 @@ export class PrefService extends HoistService {
         for (let key in data) {
             if (data[key].local) {
                 data[key].value = !isNil(localPrefs[key]) ?
-                    deepFreeze(cloneDeep(localPrefs[key])) :
+                    deepFreeze(structuredClone(localPrefs[key])) :
                     data[key].defaultValue;
             }
         }