@xh/hoist 55.2.1 → 55.3.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v55.3.1 - 2023-03-14
+
+### 🐞 Bug Fixes
+* Revert `structuredClone` to lodash `deepClone` throughout toolkit.
+
+## 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

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

@@ -390,7 +390,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/core/HoistBase.ts

@@ -7,8 +7,8 @@
 import {XH, PersistenceProvider, PersistOptions, DebounceSpec} from './';
 import {throwIf, getOrCreate} from '@xh/hoist/utils/js';
 import {
-    debounce as lodashDebounce,
     cloneDeep,
+    debounce as lodashDebounce,
     isFunction,
     isNil,
     isNumber,

package/core/HoistBaseDecorators.ts

@@ -6,9 +6,10 @@
 */
 import {PersistenceProvider, PersistOptions, HoistBaseClass} from './';
 
-import {cloneDeep, isUndefined} from 'lodash';
+import {isUndefined} from 'lodash';
 import {wait} from '../promise';
 import {throwIf} from '../utils/js';
+import {cloneDeep} from 'lodash';
 
 /**
  * Decorator to make a property "managed". Managed properties are designed to hold objects that

package/core/persist/PersistenceProvider.ts

@@ -8,8 +8,8 @@
 import {DebounceSpec, XH} from '../';
 import {LocalStorageProvider, PrefProvider, DashViewProvider, CustomProvider, PersistOptions} from './';
 import {
-    isUndefined,
     cloneDeep,
+    isUndefined,
     get,
     set,
     unset,

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,11 +8,11 @@ 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';
 import {LeftRightChooserModel} from './LeftRightChooserModel';
+import {cloneDeep} from 'lodash';
 
 export interface LeftRightChooserProps extends HoistProps<LeftRightChooserModel>, BoxProps {}
 

package/package.json

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