@xh/hoist 49.0.0 → 49.1.0

package/CHANGELOG.md

@@ -1,8 +1,23 @@
 # Changelog
 
+## v49.1.0 - 2022-06-03
+
+### 🎁 New Features
+
+* A `DashCanvasViewModel` now supports `headerItems` and `extraMenuItems`
+* `Store` now supports a `tags` field type
+* `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
+
+[Commit Log](https://github.com/xh/hoist-react/compare/v49.0.0...v49.1.0)
+
 ## v49.0.0 - 2022-05-24
 
-### 🐞 New Features
+### 🎁 New Features
 
 * Improved desktop `NumberInput`:
     * Re-implemented `min` and `max` props to properly constrain the value entered and fix several
@@ -30,7 +45,7 @@
 * Model classes passed to `HoistComponents` or configured in their factory must now
   extend `HoistModel`. This has long been a core assumption, but was not previously enforced.
 * Nested model instances stored at properties with a `_` prefix are now considered private and will
-  not be auto-wired or returned by model lookups. This should affect most apps, but will require
+  not be auto-wired or returned by model lookups. This should not affect most apps, but will require
   minor changes for apps that were binding components to non-standard or "private" models.
 * Hoist will now throw if `Store.summaryRecord` does not have a unique ID.
 

package/appcontainer/ThemeModel.js

@@ -32,11 +32,10 @@ export class ThemeModel extends HoistModel {
         classList.toggle('xh-dark', value);
         classList.toggle('bp3-dark', value);
         this.darkTheme = value;
-
     }
 
     @action
-    setTheme(value) {
+    setTheme(value, persist) {
         switch (value) {
             case 'system':
                 this.setDarkTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
@@ -50,7 +49,9 @@ export class ThemeModel extends HoistModel {
             default:
                 throw XH.exception("Unrecognized value for theme pref.  Must be either 'system', 'dark', or 'light'.");
         }
-        XH.setPref('xhTheme', value);
+        if (persist) {
+            XH.setPref('xhTheme', value);
+        }
     }
 
     init() {

package/cmp/filter/FilterChooserFieldSpec.js

@@ -87,12 +87,11 @@ export class FilterChooserFieldSpec extends BaseFilterFieldSpec {
 
     parseValue(value, op) {
         try {
-            const {fieldType} = this;
-
             if (isFunction(this.valueParser)) {
                 return this.valueParser(value, op);
             }
 
+            const fieldType = this.fieldType === FieldType.TAGS ? FieldType.STRING : this.fieldType;
             return parseFieldValue(value, fieldType, undefined);
         } catch (e) {
             return undefined;
@@ -119,7 +118,13 @@ export class FilterChooserFieldSpec extends BaseFilterFieldSpec {
         const sourceStore = source.isView ? source.cube.store : source;
         sourceStore.allRecords.forEach(rec => {
             const val = rec.get(field);
-            if (!isNil(val)) values.add(val);
+            if (!isNil(val)) {
+                if (sourceStore.getField(field).type === FieldType.TAGS) {
+                    val.forEach(it => values.add(it));
+                } else {
+                    values.add(val);
+                }
+            }
         });
 
         this.values = Array.from(values);

package/cmp/filter/impl/Option.js

@@ -7,6 +7,7 @@
 
 import {parseFieldValue} from '@xh/hoist/data';
 import {isNil} from 'lodash';
+import {FieldType} from '../../../data';
 
 // ---------------------------------------------------------
 // Generate Options for FilterChooserModel query responses.
@@ -56,6 +57,7 @@ export function fieldFilterOption({filter, fieldSpec, isExact = false}) {
         displayValue = (filter.op === '!=' ? 'not blank' : 'blank');
     } else {
         displayOp = filter.op;
+        fieldType = fieldType === FieldType.TAGS ? FieldType.STRING : fieldType;
         displayValue = fieldSpec.renderValue(parseFieldValue(filter.value, fieldType, null));
     }
 

package/cmp/grid/columns/Core.js

@@ -6,6 +6,7 @@
  */
 import {numberRenderer} from '@xh/hoist/format';
 import {Icon} from '@xh/hoist/icon';
+import {tagsRenderer} from '../renderers/TagsRenderer';
 
 /** Column config to render truthy values with a standardized green check icon. */
 export const boolCheck = {
@@ -28,6 +29,10 @@ export const fileExt = {
     renderer: (v) => v ? Icon.fileIcon({filename: v, title: v}) : null
 };
 
+export const tags = {
+    renderer: tagsRenderer
+};
+
 // Deprecated aliases with `Col` suffix
 export const boolCheckCol = boolCheck;
 export const numberCol = number;

package/cmp/grid/filter/GridFilterFieldSpec.js

@@ -6,7 +6,7 @@
  */
 import {BaseFilterFieldSpec} from '@xh/hoist/data/filter/BaseFilterFieldSpec';
 import {parseFilter} from '@xh/hoist/data';
-import {castArray, compact, isDate, isEmpty, uniqBy} from 'lodash';
+import {castArray, compact, flatten, isDate, isEmpty, uniqBy} from 'lodash';
 
 /**
  * Apps should NOT instantiate this class directly. Instead {@see GridFilterModel.fieldSpecs}
@@ -81,7 +81,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
 
         // Combine unique values from record sets and column filters.
         const allValues = uniqBy([
-            ...allRecords.map(rec => this.valueFromRecord(rec)),
+            ...flatten(allRecords.map(rec => this.valueFromRecord(rec))),
             ...filterValues
         ], this.getUniqueValue);
         let values;

package/cmp/grid/index.js

@@ -13,6 +13,7 @@ export * from './GridAutosizeMode';
 export * from './helpers/GridCountLabel';
 
 export * from './renderers/MultiFieldRenderer';
+export * from './renderers/TagsRenderer';
 
 export * from './Grid';
 export * from './GridModel';

package/cmp/grid/renderers/TagsRenderer.js

@@ -0,0 +1,12 @@
+import {isEmpty} from 'lodash';
+import {div, hbox} from '@xh/hoist/cmp/layout';
+import './TagsRenderer.scss';
+
+export function tagsRenderer(v) {
+    if (isEmpty(v)) return null;
+
+    return hbox({
+        className: 'xh-tags-renderer',
+        items: v.map(tag => div({className: 'xh-tags-renderer__tag', item: tag}))
+    });
+}

package/cmp/grid/renderers/TagsRenderer.scss

@@ -0,0 +1,31 @@
+.xh-tags-renderer {
+  &__tag {
+    --tag-bg: var(--xh-intent-neutral);
+
+    .xh-dark & {
+      --tag-bg: var(--xh-intent-neutral-darkest);
+    }
+
+    position: relative;
+    border-radius: 1.5px;
+    font-size: 85%;
+    padding: 3px 6px 3px 3px;
+    margin: 2px 2px 2px 12px;
+    width: fit-content;
+    background-color: var(--tag-bg);
+    height: 20px;
+    line-height: 15px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 0;
+      width: 0;
+      height: 0;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-right: 10px solid var(--tag-bg);
+    }
+  }
+}

package/core/XH.js

@@ -343,9 +343,10 @@ class XHClass extends HoistBase {
     /**
      * Sets the theme directly (useful for custom app option controls).
      * @param {string} value - 'light', 'dark', or 'system'
+     * @param {boolean} persist - true (default) to persist with preference
      */
-    setTheme(value) {
-        return this.acm.themeModel.setTheme(value);
+    setTheme(value, persist = true) {
+        return this.acm.themeModel.setTheme(value, persist);
     }
 
     /** Is the app currently rendering in dark theme? */

package/data/Field.js

@@ -10,7 +10,7 @@ import {isLocalDate, LocalDate} from '@xh/hoist/utils/datetime';
 import {withDefault} from '@xh/hoist/utils/js';
 import {Rule} from '@xh/hoist/data';
 import equal from 'fast-deep-equal';
-import {isDate, isString, toNumber, isFinite, startCase, isFunction} from 'lodash';
+import {isDate, isString, toNumber, isFinite, startCase, isFunction, castArray} from 'lodash';
 import DOMPurify from 'dompurify';
 
 /**
@@ -84,13 +84,23 @@ export function parseFieldValue(val, type, defaultValue = null, disableXssProtec
     if (val === undefined || val === null) val = defaultValue;
     if (val === null) return val;
 
-    if (!disableXssProtection && isString(val)) val = DOMPurify.sanitize(val);
+    const sanitizeValue = (v) => {
+        if (disableXssProtection || !isString(v)) return v;
+        return DOMPurify.sanitize(v);
+    };
 
     const FT = FieldType;
     switch (type) {
+        case FT.TAGS:
+            val = castArray(val);
+            val = val.map(v => {
+                v = sanitizeValue(v);
+                return v.toString();
+            });
+            return val;
         case FT.AUTO:
         case FT.JSON:
-            return val;
+            return sanitizeValue(val);
         case FT.INT:
             val = toNumber(val);
             return isFinite(val) ? Math.trunc(val) : null;
@@ -100,6 +110,7 @@ export function parseFieldValue(val, type, defaultValue = null, disableXssProtec
             return !!val;
         case FT.PWD:
         case FT.STRING:
+            val = sanitizeValue(val);
             return val.toString();
         case FT.DATE:
             return isDate(val) ? val : new Date(val);
@@ -112,6 +123,7 @@ export function parseFieldValue(val, type, defaultValue = null, disableXssProtec
 
 /** @enum {string} - data types for Fields used within Hoist Store Records and Cubes. */
 export const FieldType = Object.freeze({
+    TAGS: 'tags',
     AUTO: 'auto',
     BOOL: 'bool',
     DATE: 'date',

package/data/filter/BaseFilterFieldSpec.js

@@ -93,7 +93,7 @@ export class BaseFilterFieldSpec extends HoistBase {
     }
 
     /**
-     * @return {string} - 'range' or 'value' - determines operations supported by this field.
+     * @return {string} - 'range', 'value', or 'collection' - determines operations supported by this field.
      *      Type 'range' indicates the field should use mathematical / logical operations
      *      ('>', '>=', '<', '<=', '=', '!='). Type 'value' indicates the field should use equality
      *      operators ('=', '!=', 'like', 'not like', 'begins', 'ends') against a suggested
@@ -107,6 +107,8 @@ export class BaseFilterFieldSpec extends HoistBase {
             case FT.DATE:
             case FT.LOCAL_DATE:
                 return 'range';
+            case FT.TAGS:
+                return 'collection';
             default:
                 return 'value';
         }
@@ -114,6 +116,7 @@ export class BaseFilterFieldSpec extends HoistBase {
 
     get isRangeType() { return this.filterType === 'range' }
     get isValueType() { return this.filterType === 'value' }
+    get isCollectionType() { return this.filterType === 'collection' }
 
     get isDateBasedFieldType() {
         const {fieldType} = this;
@@ -151,7 +154,7 @@ export class BaseFilterFieldSpec extends HoistBase {
         return this.values &&
             this.enableValues &&
             this.supportsOperator(op) &&
-            (op === '=' || op === '!=');
+            (op === '=' || op === '!=' || op === 'includes' || op === 'excludes');
     }
 
     //------------------------
@@ -169,6 +172,7 @@ export class BaseFilterFieldSpec extends HoistBase {
 
     getDefaultOperators() {
         if (this.isBoolFieldType) return ['='];
+        if (this.isCollectionType) return ['includes', 'excludes'];
         return this.isValueType ?
             ['=', '!=', 'like', 'not like', 'begins', 'ends'] :
             ['>', '>=', '<', '<=', '=', '!='];

package/data/filter/FieldFilter.js

@@ -9,6 +9,7 @@ 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 {FieldType} from '../Field';
 
 import {Filter} from './Filter';
 
@@ -32,8 +33,8 @@ export class FieldFilter extends Filter {
     /** @member {*} */
     value;
 
-    static OPERATORS = ['=', '!=', '>', '>=', '<', '<=', 'like', 'not like', 'begins', 'ends'];
-    static ARRAY_OPERATORS = ['=', '!=', 'like', 'not like', 'begins', 'ends'];
+    static OPERATORS = ['=', '!=', '>', '>=', '<', '<=', 'like', 'not like', 'begins', 'ends', 'includes', 'excludes'];
+    static ARRAY_OPERATORS = ['=', '!=', 'like', 'not like', 'begins', 'ends', 'includes', 'excludes'];
 
     /**
      * Constructor - not typically called by apps - create from config via `parseFilter()` instead.
@@ -82,7 +83,7 @@ export class FieldFilter extends Filter {
             const storeField = store.getField(field);
             if (!storeField) return () => true; // Ignore (do not filter out) if field not in store
 
-            const fieldType = storeField.type;
+            const fieldType = storeField.type === FieldType.TAGS ? FieldType.STRING : storeField.type;
             value = isArray(value) ?
                 value.map(v => parseFieldValue(v, fieldType)) :
                 parseFieldValue(value, fieldType);
@@ -97,7 +98,7 @@ export class FieldFilter extends Filter {
         switch (op) {
             case '=':
                 return r => {
-                    if (doNotFilter(r)) return true; 
+                    if (doNotFilter(r)) return true;
                     let v = getVal(r);
                     if (isNil(v) || v === '') v = null;
                     return value.includes(v);
@@ -143,19 +144,31 @@ export class FieldFilter extends Filter {
                 regExps = value.map(v => new RegExp(escapeRegExp(v), 'i'));
                 return r => {
                     if (doNotFilter(r)) return true;
-                    regExps.every(re => !re.test(getVal(r)));
+                    return regExps.every(re => !re.test(getVal(r)));
                 };
             case 'begins':
                 regExps = value.map(v => new RegExp('^' + escapeRegExp(v), 'i'));
                 return r => {
                     if (doNotFilter(r)) return true;
-                    regExps.some(re => re.test(getVal(r)));
+                    return regExps.some(re => re.test(getVal(r)));
                 };
             case 'ends':
                 regExps = value.map(v => new RegExp(escapeRegExp(v) + '$', 'i'));
                 return r => {
                     if (doNotFilter(r)) return true;
-                    regExps.some(re => re.test(getVal(r)));
+                    return regExps.some(re => re.test(getVal(r)));
+                };
+            case 'includes':
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    const v = getVal(r);
+                    return !isNil(v) && v.some(it => value.includes(it));
+                };
+            case 'excludes':
+                return r => {
+                    if (doNotFilter(r)) return true;
+                    const v = getVal(r);
+                    return isNil(v) || !v.some(it => value.includes(it));
                 };
             default:
                 throw XH.exception(`Unknown operator: ${op}`);

package/desktop/cmp/dash/DashViewModel.js

@@ -7,6 +7,7 @@
 import {HoistModel, managed, ManagedRefreshContextModel} from '@xh/hoist/core';
 import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {throwIf} from '@xh/hoist/utils/js';
+import {action, observable} from 'mobx';
 
 /**
  * Model for a content item within a DashContainer. Supports state management,
@@ -30,6 +31,7 @@ export class DashViewModel extends HoistModel {
     @bindable title;
     @bindable.ref viewState;
     @bindable isActive;
+    @observable.ref extraMenuItems = [];
 
     @managed refreshContextModel;
 
@@ -79,4 +81,12 @@ export class DashViewModel extends HoistModel {
         this.setViewState({...this.viewState, [key]: value});
     }
 
+    /**
+     * Specify array with which to create additional panel menu items
+     * @param {Object[]} items
+     */
+    @action
+    setExtraMenuItems(items) {
+        this.extraMenuItems = items;
+    }
 }

package/desktop/cmp/dash/canvas/DashCanvas.js

@@ -53,6 +53,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory({
                     autoSize: true,
                     isBounded: true,
                     draggableHandle: '.xh-panel > .xh-panel__content > .xh-panel-header',
+                    draggableCancel: '.xh-button',
                     // Resizing always pins to the nw corner, so dragging from anywhere other than se sides/corner is unintuitive
                     resizeHandles: ['s', 'e', 'se'],
                     onLayoutChange: (layout) => model.setLayout(layout),

package/desktop/cmp/dash/canvas/DashCanvas.scss

@@ -1,7 +1,8 @@
 .xh-dash-canvas {
   width: 100%;
   height: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 
   &--empty-overlay {
     display: flex !important;

package/desktop/cmp/dash/canvas/DashCanvasModel.js

@@ -4,9 +4,9 @@ import {DashCanvasViewModel, DashCanvasViewSpec} from '@xh/hoist/desktop/cmp/das
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {ensureUniqueBy} from '@xh/hoist/utils/js';
+import {createObservableRef} from '@xh/hoist/utils/react';
 import {defaultsDeep, isEqual, find, without, times} from 'lodash';
 import {computed} from 'mobx';
-import {createRef} from 'react';
 import {throwIf} from '../../../../utils/js';
 
 /**
@@ -75,7 +75,9 @@ export class DashCanvasModel extends HoistModel {
     // Implementation properties
     //------------------------
     /** @member {RefObject<DOMElement>} */
-    ref = createRef();
+    ref = createObservableRef();
+    /** @member {boolean} scrollbarVisible */
+    scrollbarVisible;
 
     /**
      * ---------- !! NOTE: THIS COMPONENT IS CURRENTLY IN BETA !! ----------
@@ -168,6 +170,14 @@ export class DashCanvasModel extends HoistModel {
             track: () => [this.viewState, this.layout],
             run: () => this.publishState()
         });
+
+        this.addReaction({
+            when: () => this.ref.current,
+            run: () => {
+                const {current: node} = this.ref;
+                this.scrollbarVisible = node.offsetWidth > node.clientWidth;
+            }
+        });
     }
 
     /** @returns {boolean} */
@@ -338,6 +348,14 @@ export class DashCanvasModel extends HoistModel {
         layout = layout.map(({i, x, y, w, h}) => ({i, x, y, w, h}));
         if (!isEqual(this.layout, layout)) {
             this.layout = layout;
+
+            // Check if scrollbar visibility has changed, and force resize event if so
+            const {current: node} = this.ref,
+                scrollbarVisible = node.offsetWidth > node.clientWidth;
+            if (scrollbarVisible !== this.scrollbarVisible) {
+                window.dispatchEvent(new Event('resize'));
+                this.scrollbarVisible = scrollbarVisible;
+            }
         }
     }
 

package/desktop/cmp/dash/canvas/DashCanvasViewModel.js

@@ -6,7 +6,7 @@
  */
 import {DashViewModel} from '@xh/hoist/desktop/cmp/dash/DashViewModel';
 import {createObservableRef} from '@xh/hoist/utils/react';
-import {makeObservable, observable} from 'mobx';
+import {action, makeObservable, observable} from 'mobx';
 
 /**
  * Model for a content item within a DashCanvas. Extends {@see DashViewModel}
@@ -23,6 +23,8 @@ export class DashCanvasViewModel extends DashViewModel {
     @observable hidePanelHeader;
     /** @member {boolean} */
     @observable hideMenuButton;
+    /** @member {Array} */
+    @observable.ref headerItems = [];
 
     constructor(cfg) {
         super(cfg);
@@ -44,4 +46,13 @@ export class DashCanvasViewModel extends DashViewModel {
             run: () => ref.current.scrollIntoView({behavior: 'smooth', block: 'nearest'})
         });
     }
+
+    /**
+     * Specify array of items to be added to the right-side of the panel header
+     * @param {ReactNode[]} items
+     */
+    @action
+    setHeaderItems(items) {
+        this.headerItems = items;
+    }
 }

package/desktop/cmp/dash/canvas/DashCanvasViewSpec.js

@@ -27,10 +27,10 @@ export class DashCanvasViewSpec extends DashViewSpec {
     hideMenuButton;
 
     /**
-     * @param {number} height - initial height of view when added to canvas (default 5)
-     * @param {number} width - initial width of view when added to canvas (default 5)
-     * @param {boolean} hidePanelHeader - true to hide the panel header (default false)
-     * @param {boolean} hideMenuButton - true to hide the panel header menu button (default false)
+     * @param {number} [height] - initial height of view when added to canvas (default 5)
+     * @param {number} [width] - initial width of view when added to canvas (default 5)
+     * @param {boolean} [hidePanelHeader] - true to hide the panel header (default false)
+     * @param {boolean} [hideMenuButton] - true to hide the panel header menu button (default false)
      */
     constructor({
         height = 5,

package/desktop/cmp/dash/canvas/impl/DashCanvasView.js

@@ -29,13 +29,13 @@ export const dashCanvasView = hoistCmp.factory({
     className: 'xh-dash-tab',
     model: uses(DashCanvasViewModel, {publishMode: ModelPublishMode.LIMITED}),
     render({model, className}) {
-        const {viewSpec, ref, hidePanelHeader} = model,
+        const {viewSpec, ref, hidePanelHeader, headerItems} = model,
             headerProps = hidePanelHeader ? {} : {
                 compactHeader: true,
                 title: model.title,
                 icon: model.icon,
                 headerItems: [
-                    // TODO - Investigate why {model} must be passed explicitly here
+                    ...headerItems,
                     headerMenu({model})
                 ]
             };
@@ -53,7 +53,7 @@ const headerMenu = hoistCmp.factory(
         if (model.hideMenuButton) return null;
 
         const {viewState, viewSpec, id, containerModel, positionParams, title} = model,
-            {extraMenuItems, contentLocked, renameLocked} = containerModel,
+            {contentLocked, renameLocked} = containerModel,
 
             addMenuItems = createViewMenuItems({
                 dashCanvasModel: containerModel,
@@ -104,7 +104,9 @@ const headerMenu = hoistCmp.factory(
                             }).ensureVisible()
                     },
                     '-',
-                    ...(extraMenuItems ?? [])
+                    ...(model.extraMenuItems ?? []),
+                    '-',
+                    ...(containerModel.extraMenuItems ?? [])
                 ]
             });
 

package/desktop/cmp/dash/container/impl/DashContainerContextMenu.js

@@ -31,7 +31,7 @@ export const dashContainerContextMenu = hoistCmp.factory({
 //---------------------------
 function createMenuItems(props) {
     const {dashContainerModel, viewModel} = props,
-        {extraMenuItems, renameLocked} = dashContainerModel,
+        {renameLocked} = dashContainerModel,
         ret = [];
 
     // Add context sensitive items if clicked on a tab
@@ -69,10 +69,14 @@ function createMenuItems(props) {
         items: addMenuItems
     });
 
+    if (viewModel?.extraMenuItems) {
+        ret.push('-');
+        viewModel.extraMenuItems.forEach(it => ret.push(it));
+    }
 
-    if (extraMenuItems) {
+    if (dashContainerModel.extraMenuItems) {
         ret.push('-');
-        extraMenuItems.forEach(it => ret.push(it));
+        dashContainerModel.extraMenuItems.forEach(it => ret.push(it));
     }
 
     return ret;

package/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel.js

@@ -36,6 +36,14 @@ export class ColumnHeaderFilterModel extends HoistModel {
         return this.fieldSpec.field;
     }
 
+    get store() {
+        return this.gridFilterModel.gridModel.store;
+    }
+
+    get fieldType() {
+        return this.store.getField(this.field).type;
+    }
+
     get currentGridFilter() {
         return this.gridFilterModel.filter;
     }
@@ -64,7 +72,7 @@ export class ColumnHeaderFilterModel extends HoistModel {
         const {columnCompoundFilter, columnFilters} = this;
         if (columnCompoundFilter) return true;
         if (isEmpty(columnFilters)) return false;
-        return columnFilters.some(it => !['=', '!='].includes(it.op));
+        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
     }
 
     get commitOnChange() {

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

@@ -8,7 +8,8 @@ import {HoistModel, managed, SizingMode} from '@xh/hoist/core';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {GridAutosizeMode, GridModel} from '@xh/hoist/cmp/grid';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
-import {castArray, difference, isEmpty, partition, without} from 'lodash';
+import {castArray, difference, isEmpty, partition, uniq, without} from 'lodash';
+import {FieldType} from '@xh/hoist/data';
 
 export class ValuesTabModel extends HoistModel {
     /** @member {ColumnHeaderFilterModel} */
@@ -104,7 +105,7 @@ export class ValuesTabModel extends HoistModel {
     setRecsChecked(isChecked, values) {
         values = castArray(values);
         this.pendingValues = isChecked ?
-            [...this.pendingValues, ...values] :
+            uniq([...this.pendingValues, ...values]) :
             without(this.pendingValues, ...values);
     }
 
@@ -120,9 +121,16 @@ export class ValuesTabModel extends HoistModel {
             return null;
         }
 
-        const weight = valueCount <= 10 ? 2.5 : 1, // Prefer '=' for short lists
-            op = included.length > (excluded.length * weight) ? '!=' : '=',
+        const {fieldType} = this.headerFilterModel;
+        let arr, op;
+        if (fieldType === FieldType.TAGS) {
+            arr = included;
+            op = 'includes';
+        } else {
+            const weight = valueCount <= 10 ? 2.5 : 1; // Prefer '=' for short lists
+            op = included.length > (excluded.length * weight) ? '!=' : '=';
             arr = op === '=' ? included : excluded;
+        }
 
         if (isEmpty(arr)) return null;
 
@@ -132,14 +140,16 @@ export class ValuesTabModel extends HoistModel {
 
     @action
     doSyncWithFilter() {
-        const {values, columnFilters, gridFilterModel} = this;
+        const {values, columnFilters, gridFilterModel} = this,
+            {fieldType} = this.headerFilterModel;
+
         if (isEmpty(columnFilters)) {
-            this.pendingValues = values;
+            this.pendingValues = fieldType === FieldType.TAGS ? [] : values;
             return;
         }
 
         // We are only interested '!=' filters if we have no '=' filters.
-        const [equalsFilters, notEqualsFilters] = partition(columnFilters, f => f.op === '='),
+        const [equalsFilters, notEqualsFilters] = partition(columnFilters, f => f.op === '=' || f.op === 'includes'),
             useNotEquals = isEmpty(equalsFilters),
             arr = useNotEquals ? notEqualsFilters : equalsFilters,
             filterValues = [];
@@ -170,7 +180,8 @@ export class ValuesTabModel extends HoistModel {
     createGridModel() {
         const {BLANK_STR} = this.gridFilterModel,
             {align, headerAlign, displayName} = this.headerFilterModel.column,
-            renderer = this.fieldSpec.renderer ?? this.headerFilterModel.column.renderer;
+            {fieldType} = this.headerFilterModel,
+            renderer = this.fieldSpec.renderer ?? (fieldType !== FieldType.TAGS ? this.headerFilterModel.column.renderer : null);
 
         return new GridModel({
             store: {

package/package.json

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