@xh/hoist 49.1.0 → 49.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## v49.2.0 - 2010-06-14
+
+### 🎁 New Features
+
+* New `@enumerable` decorator for making class members `enumerable`
+* New `GridAutosizeOption` `renderedRowsOnly` supports more limited autosizing
+  for very large grids.
+
+### 🐞 Bug Fixes
+
+* Fix `FilterChooser` looping between old values if updated too rapidly.
+* Allow user to clear an unsupported `FilterChooser` value.
+* Fix bug where `Panel` would throw when `headerItems = null`
+* Fix column values filtering on `tags` fields if another filter is already present.
+* Fix bug where `SwitchInput` `labelSide` would render inappropriately if within `compact` `toolbar`
+* Fix bug where `SplitTreeMapModel.showSplitter` property wasn't being set in constructor
+
+### 📚 Libraries
+
+* mobx `6.5 -> 6.6`
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v49.1.0...v49.2.0)
+
+
 ## v49.1.0 - 2022-06-03
 
 ### 🎁 New Features
@@ -9,6 +33,7 @@
 * `FieldFilter` supports `includes` and `excludes` operators for `tags` fields
 
 ### 🐞 Bug Fixes
+
 * Fix regression with `begins`, `ends`, and `not like` filters.
 * Fix `DashCanvas` styling so drag-handles no longer cause horizontal scroll bar to appear
 * Fix bug where `DashCanvas` would not resize appropriately on scrollbar visibility change

package/LICENSE.md

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2014-2021 Extremely Heavy Industries, Inc.
+   Copyright 2014-2022 Extremely Heavy Industries, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -187,4 +187,4 @@
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

package/cmp/filter/FilterChooserModel.js

@@ -199,7 +199,7 @@ export class FilterChooserModel extends HoistModel {
      * they will be displayed as tags and can be removed, but not created using
      * the control.
      *
-     * Any other Filter is not supported and will cause the control to be cleared.
+     * Any other Filter is unsupported and will cause the control to show a placeholder error.
      */
     @action
     setValue(value) {
@@ -208,7 +208,7 @@ export class FilterChooserModel extends HoistModel {
             value = parseFilter(value);
             if (this.value?.equals(value)) return;
 
-            // 1) Ensure filter is able to be handled by the FilterChooser
+            // 1) Ensure FilterChooser can handle the requested value.
             const isValid = this.validateFilter(value),
                 displayFilters = isValid ? this.toDisplayFilters(value) : null;
 
@@ -234,20 +234,26 @@ export class FilterChooserModel extends HoistModel {
 
             this.selectOptions = !isEmpty(options) ? options : null;
 
-            // Set select value async after options, to ensure it is able to render tags correctly
-            const selectValue = sortBy(displayFilters.map(f => JSON.stringify(f)), f => {
-                const idx = this.selectValue?.indexOf(f);
-                return isFinite(idx) && idx > -1 ? idx : displayFilters.length;
-            });
-            wait().thenAction(() => this.selectValue = selectValue);
+            // 4) Do the next steps asynchronously for UI responsiveness and to ensure the component
+            // is ready to render the tags correctly (after selectOptions set above).
+            wait().thenAction(() => {
+                // No-op if we've already re-entered this method by the time this async routine runs.
+                if (this.value !== value) {
+                    return;
+                }
+
+                this.selectValue = sortBy(displayFilters.map(f => JSON.stringify(f)), f => {
+                    const idx = this.selectValue?.indexOf(f);
+                    return isFinite(idx) && idx > -1 ? idx : displayFilters.length;
+                });
 
-            // 4) Round-trip value to bound filter
-            if (bind) {
-                wait().then(() => {
+                // 5) Round-trip value to bound filter
+                if (bind) {
                     const filter = withFilterByTypes(bind.filter, value, ['FieldFilter', 'CompoundFilter']);
                     bind.setFilter(filter);
-                }).linkTo(this.filterTask);
-            }
+                }
+            }).linkTo(this.filterTask);
+
         } catch (e) {
             console.error('Failed to set value on FilterChooserModel', e);
             this.value = null;

package/cmp/grid/GridModel.js

@@ -390,6 +390,7 @@ export class GridModel extends HoistModel {
             {...autosizeOptions},
             {
                 mode: GridModel.DEFAULT_AUTOSIZE_MODE,
+                renderedRowsOnly: false,
                 includeCollapsedChildren: false,
                 showMask: false,
                 // Larger buffer on mobile (perhaps counterintuitively) to minimize clipping due to
@@ -1598,9 +1599,12 @@ export class GridModel extends HoistModel {
  *      override this value may specify `Column.autosizeBufferPx`. Default is 5.
  * @property {boolean} [showMask] - true to show mask over the grid during the autosize operation.
  *      Default is true.
+ * @property {boolean} [renderedRowsOnly] - true to limit operation to rendered rows only.
+ *      Default is false. Set to true for grids that contain many rows and columns, for which
+ *      full autosizing of all data would be too slow.
  * @property {boolean} [includeCollapsedChildren] - true to autosize all rows, even when hidden due
- *      to a collapsed ancestor row. Default is false. Note that setting this to true can
- *      have performance impacts for large tree grids with many cells.
+ *      to a collapsed ancestor row. Only has an effect when renderedRowsOnly is false. Default is false.
+ *      Note that setting this to true can have performance impacts for large tree grids with many cells.
  * @property {function|string|string[]} [columns] - columns ids to autosize, or a function for
  *      testing if the given column should be autosized. Typically used when calling
  *      autosizeAsync() manually. To generally exclude a column from autosizing, see the

package/cmp/grid/filter/GridFilterFieldSpec.js

@@ -87,7 +87,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         let values;
         if (cleanedFilter) {
             values = uniqBy([
-                ...filteredRecords.map(rec => this.valueFromRecord(rec)),
+                ...flatten(filteredRecords.map(rec => this.valueFromRecord(rec))),
                 ...filterValues
             ], this.getUniqueValue);
         } else {

package/cmp/grid/impl/ColumnWidthCalculator.js

@@ -67,6 +67,8 @@ export class ColumnWidthCalculator {
     }
 
     calcDataWidth(gridModel, records, column, options) {
+        if (isEmpty(records)) return null;
+
         try {
             const {store, treeMode} = gridModel;
             if (treeMode && column.isTreeColumn && store.allRootCount !== store.allCount) {

package/data/filter/FieldFilter.js

@@ -8,7 +8,16 @@
 import {XH} from '@xh/hoist/core';
 import {parseFieldValue} from '@xh/hoist/data';
 import {throwIf} from '@xh/hoist/utils/js';
-import {castArray, difference, escapeRegExp, isArray, isNil, isUndefined, isString} from 'lodash';
+import {
+    castArray,
+    difference,
+    escapeRegExp,
+    isArray,
+    isNil,
+    isString,
+    isUndefined,
+    uniq
+} from 'lodash';
 import {FieldType} from '../Field';
 
 import {Filter} from './Filter';
@@ -45,7 +54,7 @@ export class FieldFilter extends Filter {
      * @param {(*|[])} c.value - value(s) to use with operator in filter. When used with operators
      *      in the ARRAY_OPERATORS collection, value may be specified as an array. In these cases,
      *      the filter will implement an implicit 'OR' for '='/'like'/'begins'/'ends',
-     *      and an implicit 'AND' for '!='/'not like'.
+     *      and an implicit 'AND' for '!='/'not like'. Duplicated values are omitted.
      */
     constructor({field, op, value}) {
         super();
@@ -61,7 +70,7 @@ export class FieldFilter extends Filter {
 
         this.field = isString(field) ? field : field.name;
         this.op = op;
-        this.value = isArray(value) ? [...value] : value;
+        this.value = isArray(value) ? uniq(value) : value;
 
         Object.freeze(this);
     }

package/desktop/cmp/filter/FilterChooser.js

@@ -32,7 +32,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory({
             {autoFocus, enableClear, leftIcon, maxMenuHeight, menuPlacement, menuWidth} = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter ?
-                'Unsupported filter' : // Todo: How to message this better?
+                'Unsupported filter (click to clear)' :
                 withDefault(chooserProps.placeholder, 'Filter...');
 
         return box({
@@ -82,6 +82,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory({
                 minimal: true,
                 onInteraction: (willOpen) => {
                     if (!willOpen) model.closeFavoritesMenu();
+                    if (unsupportedFilter) model.setValue(null);
                 }
             })
         });

package/desktop/cmp/grid/find/GridFindField.scss

@@ -13,8 +13,8 @@
     border-radius: 0 3px 3px 0;
 
     .xh-button {
-      max-height: calc(var(--xh-tbar-compact-item-height-px) * 0.5);
-      min-height: calc(var(--xh-tbar-compact-item-height-px) * 0.5);
+      max-height: calc(var(--xh-tbar-compact-item-height-px) * 0.5) !important;
+      min-height: calc(var(--xh-tbar-compact-item-height-px) * 0.5) !important;
       min-width: var(--xh-tbar-compact-item-height-px);
       max-width: var(--xh-tbar-compact-item-height-px);
       margin: 0 !important;
@@ -30,4 +30,8 @@
     min-width: 30px;
     text-align: right;
   }
+}
+
+.xh-toolbar--compact .xh-grid-find-field__controls {
+  border: none;
 }

package/desktop/cmp/panel/impl/PanelHeader.js

@@ -9,6 +9,7 @@ import {hoistCmp, useContextModel} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import classNames from 'classnames';
+import {isEmpty} from 'lodash';
 import {PanelModel} from '../PanelModel';
 import './PanelHeader.scss';
 
@@ -20,9 +21,10 @@ export const panelHeader = hoistCmp.factory({
     render({className, ...props}) {
         const panelModel = useContextModel(PanelModel),
             {collapsed, vertical, side, showHeaderCollapseButton} = panelModel,
-            {title, icon, compact, headerItems = []} = props;
+            {title, icon, compact} = props,
+            headerItems = props.headerItems ?? [];
 
-        if (!title && !icon && !headerItems.length && !showHeaderCollapseButton) return null;
+        if (!title && !icon && isEmpty(headerItems) && !showHeaderCollapseButton) return null;
 
         const onDoubleClick = () => {
             if (panelModel.collapsible) panelModel.toggleCollapsed();

package/desktop/cmp/toolbar/Toolbar.scss

@@ -165,6 +165,11 @@
         }
       }
 
+      &.xh-switch-input.bp3-align-right {
+        flex-direction: row-reverse;
+        padding-right: 0;
+      }
+
       &.xh-select {
         display: flex;
         align-items: center;

package/desktop/cmp/treemap/SplitTreeMapModel.js

@@ -30,6 +30,8 @@ export class SplitTreeMapModel extends HoistModel {
     mapFilter;
     /** @member {function} */
     mapTitleFn;
+    /** @member {boolean} */
+    showSplitter;
 
     /** @member {TreeMapModel} */
     @managed primaryMapModel;
@@ -65,6 +67,7 @@ export class SplitTreeMapModel extends HoistModel {
         makeObservable(this);
         this.mapFilter = withDefault(mapFilter, this.defaultMapFilter);
         this.mapTitleFn = mapTitleFn;
+        this.showSplitter = showSplitter;
 
         throwIf(!['vertical', 'horizontal'].includes(orientation), `Orientation "${orientation}" not recognised.`);
         this.orientation = orientation;

package/kit/ag-grid/index.js

@@ -17,7 +17,7 @@ import {checkVersion} from '@xh/hoist/utils/js/VersionUtils';
 export let AgGridReact = null;
 export let agGridVersion = null;
 
-const MIN_VERSION = '27.2.0';
+const MIN_VERSION = '27.3.0';
 const MAX_VERSION = '27.*.*';
 
 /**

package/mobile/cmp/panel/impl/PanelHeader.js

@@ -6,6 +6,7 @@
  */
 import {div, filler, hbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp} from '@xh/hoist/core';
+import {isEmpty} from 'lodash';
 
 /**
  * A standardized header for a Panel component
@@ -17,7 +18,8 @@ export const panelHeader = hoistCmp.factory({
     model: false, memo: false, observer: false,
 
     render({className, title, icon, headerItems = []}) {
-        if (!title && !icon && !headerItems.length) return null;
+        headerItems = headerItems ?? [];
+        if (!title && !icon && isEmpty(headerItems)) return null;
 
         return hbox({
             className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "49.1.0",
+  "version": "49.2.0",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -52,7 +52,7 @@
     "inter-ui": "~3.19.3",
     "lodash": "~4.17.21",
     "lodash-inflection": "~1.5.0",
-    "mobx": "~6.5.0",
+    "mobx": "~6.6.0",
     "mobx-react-lite": "~3.4.0",
     "moment": "~2.29.1",
     "numbro": "~2.3.6",
@@ -81,7 +81,7 @@
     "react-dom": "~17.0.1"
   },
   "devDependencies": {
-    "@xh/hoist-dev-utils": "^5.13.0",
+    "@xh/hoist-dev-utils": "^5.14.0",
     "husky": "~4.3.8",
     "lint-staged": "~10.5.3",
     "react": "~17.0.1",

package/svc/GridAutosizeService.js

@@ -43,9 +43,11 @@ export class GridAutosizeService extends HoistService {
         colIds = sortBy(colIds, id => gridModel.columnState.findIndex(col => col.colId === id));
         runInAction(() => {
             // 3) Shrink columns down to their required widths.
-            const requiredWidths = this.calcRequiredWidths(gridModel, colIds, options);
+            const records = this.gatherRecordsToBeSized(gridModel, options),
+                requiredWidths = this.calcRequiredWidths(gridModel, colIds, records, options);
+
             gridModel.applyColumnStateChanges(requiredWidths);
-            console.debug('Column widths autosized via GridAutosizeService', requiredWidths);
+            console.debug(`Column widths autosized via GridAutosizeService (${records.length} records)`, requiredWidths);
 
             // 4) Grow columns to fill any remaining space, if enabled.
             const {fillMode} = options;
@@ -64,12 +66,12 @@ export class GridAutosizeService extends HoistService {
     /**
      * @param {GridModel} gridModel
      * @param {string[]} colIds
+     * @param {Record[]} records
      * @param {GridAutosizeOptions} options
      * @return {Object[]} - {colId, width} objects to pass to GridModel.applyColumnStateChanges()
      */
-    calcRequiredWidths(gridModel, colIds, options) {
-        const records = this.gatherRecordsToBeSized(gridModel, options),
-            ret = [];
+    calcRequiredWidths(gridModel, colIds, records, options) {
+        const ret = [];
 
         for (const colId of colIds) {
             const width = this._columnWidthCalculator.calcWidth(gridModel, records, colId, options);
@@ -86,10 +88,15 @@ export class GridAutosizeService extends HoistService {
      */
     gatherRecordsToBeSized(gridModel, options) {
         let {store, agApi, treeMode, groupBy} = gridModel,
-            {includeCollapsedChildren} = options,
+            {includeCollapsedChildren, renderedRowsOnly} = options,
             ret = [];
 
-        if (agApi && !includeCollapsedChildren && (treeMode || groupBy)) {
+        if (renderedRowsOnly) {
+            agApi?.getRenderedNodes().forEach(node => {
+                const record = store.getById(node.data?.id);
+                if (record) ret.push(record);
+            });
+        } else if (agApi && !includeCollapsedChildren && (treeMode || groupBy)) {
             // In tree/grouped grids, included expanded rows only by default.
             for (let idx = 0; idx < agApi.getDisplayedRowCount(); idx++) {
                 const node = agApi.getDisplayedRowAtIndex(idx),

package/utils/js/Decorators.js

@@ -5,7 +5,7 @@
  * Copyright © 2021 Extremely Heavy Industries Inc.
  */
 import {debounce, isFunction} from 'lodash';
-import {throwIf, getOrCreate} from './LangUtils';
+import {throwIf, getOrCreate, warnIf} from './LangUtils';
 import {withDebug} from './LogUtils';
 
 /**
@@ -64,3 +64,11 @@ export function logWithDebug(target, key, descriptor) {
         }
     };
 }
+
+/**
+ * Modify a member so that it is enumerable. Useful for getters, which default to enumerable = false
+ */
+export function enumerable(target, key, descriptor) {
+    warnIf(descriptor.enumerable, `Unnecessary use of @enumerable: ${key} is already enumerable.`);
+    return {...descriptor, enumerable: true};
+}