@xh/hoist 71.0.0-SNAPSHOT.1735247152243 → 71.0.0-SNAPSHOT.1735310060928

package/build/types/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel.d.ts

@@ -1,38 +1,13 @@
 import { Column } from '@xh/hoist/cmp/grid';
-import { TabContainerModel } from '@xh/hoist/cmp/tab';
 import { HoistModel } from '@xh/hoist/core';
-import { GridFilterModel, GridFilterFieldSpec } from '@xh/hoist/cmp/grid';
-import { CustomTabModel } from './custom/CustomTabModel';
-import { ValuesTabModel } from './values/ValuesTabModel';
+import { GridFilterModel } from '@xh/hoist/cmp/grid';
 export declare class ColumnHeaderFilterModel extends HoistModel {
     xhImpl: boolean;
-    column: Column;
-    gridFilterModel: GridFilterModel;
-    fieldSpec: GridFilterFieldSpec;
+    readonly column: Column;
+    readonly filterModel: GridFilterModel;
     isOpen: boolean;
-    tabContainerModel: TabContainerModel;
-    valuesTabModel: ValuesTabModel;
-    customTabModel: CustomTabModel;
-    get field(): string;
-    get store(): import("../../../../../data").Store;
-    get fieldType(): import("../../../../../data").FieldType;
-    get currentGridFilter(): import("../../../../../data").Filter;
-    get columnFilters(): import("../../../../../data").FieldFilter[];
-    get columnCompoundFilter(): import("../../../../../data").CompoundFilter;
     get hasFilter(): boolean;
-    get hasPendingFilter(): boolean;
-    get isCustomFilter(): boolean;
-    get commitOnChange(): boolean;
-    constructor({ filterModel, column }: {
-        filterModel: any;
-        column: any;
-    });
-    commit(close?: boolean): void;
-    clear(close?: boolean): void;
-    openMenu(): void;
-    closeMenu(): void;
-    private syncWithFilter;
-    private setColumnFilters;
-    private doCommitOnChange;
-    private resetTabModels;
+    constructor(filterModel: GridFilterModel, column: Column);
+    open(): void;
+    close(): void;
 }

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilter.d.ts

@@ -0,0 +1,7 @@
+import { HeaderFilterModel } from './HeaderFilterModel';
+/**
+ * Pop-up panel to display column specific filters
+ *
+ * @internal
+ */
+export declare const headerFilter: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<HeaderFilterModel>>;

package/build/types/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.d.ts

@@ -0,0 +1,32 @@
+import { TabContainerModel } from '@xh/hoist/cmp/tab';
+import { HoistModel } from '@xh/hoist/core';
+import { GridFilterFieldSpec } from '@xh/hoist/cmp/grid';
+import { CustomTabModel } from './custom/CustomTabModel';
+import { ValuesTabModel } from './values/ValuesTabModel';
+import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
+export declare class HeaderFilterModel extends HoistModel {
+    xhImpl: boolean;
+    fieldSpec: GridFilterFieldSpec;
+    parent: ColumnHeaderFilterModel;
+    tabContainerModel: TabContainerModel;
+    valuesTabModel: ValuesTabModel;
+    customTabModel: CustomTabModel;
+    get filterModel(): import("@xh/hoist/cmp/grid").GridFilterModel;
+    get field(): string;
+    get store(): import("../../../../../../data").Store;
+    get fieldType(): import("../../../../../../data").FieldType;
+    get currentGridFilter(): import("../../../../../../data").Filter;
+    get columnFilters(): import("../../../../../../data").FieldFilter[];
+    get columnCompoundFilter(): import("../../../../../../data").CompoundFilter;
+    get hasFilter(): boolean;
+    get hasPendingFilter(): boolean;
+    get isCustomFilter(): boolean;
+    get commitOnChange(): boolean;
+    onLinked(): void;
+    commit(close?: boolean): void;
+    clear(close?: boolean): void;
+    private syncWithFilter;
+    private setColumnFilters;
+    private doCommitOnChange;
+    private resetTabModels;
+}

package/build/types/desktop/cmp/grid/impl/filter/{custom → headerfilter/custom}/CustomRowModel.d.ts

@@ -1,6 +1,6 @@
 import { HoistModel } from '@xh/hoist/core';
 import { FieldFilterOperator, FieldFilterSpec } from '@xh/hoist/data';
-import { ColumnHeaderFilterModel } from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
+import { HeaderFilterModel } from '../HeaderFilterModel';
 import { CustomTabModel } from './CustomTabModel';
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
 /**
@@ -9,12 +9,12 @@ type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
 export declare class CustomRowModel extends HoistModel {
     xhImpl: boolean;
     parentModel: CustomTabModel;
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
     op: OperatorOptionValue;
     inputVal: any;
     /** FieldFilter config output of this row. */
     get value(): FieldFilterSpec;
-    get fieldSpec(): import("../../../../../../cmp/grid").GridFilterFieldSpec;
+    get fieldSpec(): import("../../../../../../../cmp/grid").GridFilterFieldSpec;
     get options(): {
         label: string;
         value: OperatorOptionValue;

package/build/types/desktop/cmp/grid/impl/filter/{custom → headerfilter/custom}/CustomTabModel.d.ts

@@ -1,18 +1,18 @@
 import { HoistModel } from '@xh/hoist/core';
 import { CompoundFilterOperator, FilterLike } from '@xh/hoist/data';
-import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
+import { HeaderFilterModel } from '../HeaderFilterModel';
 import { CustomRowModel } from './CustomRowModel';
 export declare class CustomTabModel extends HoistModel {
     xhImpl: boolean;
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
     op: CompoundFilterOperator;
     rowModels: CustomRowModel[];
     /** Filter config output by this model. */
     get filter(): FilterLike;
-    get fieldSpec(): import("../../../../../../cmp/grid").GridFilterFieldSpec;
+    get fieldSpec(): import("../../../../../../../cmp/grid").GridFilterFieldSpec;
     get currentGridFilter(): import("@xh/hoist/data").Filter;
     get columnFilters(): import("@xh/hoist/data").FieldFilter[];
-    constructor(headerFilterModel: ColumnHeaderFilterModel);
+    constructor(headerFilterModel: HeaderFilterModel);
     syncWithFilter(): void;
     reset(): void;
     addEmptyRow(): void;

package/build/types/desktop/cmp/grid/impl/filter/{values → headerfilter/values}/ValuesTabModel.d.ts

@@ -1,10 +1,10 @@
 import { GridFilterModel, GridModel } from '@xh/hoist/cmp/grid';
 import { HoistModel } from '@xh/hoist/core';
 import { FieldFilterSpec } from '@xh/hoist/data';
-import { ColumnHeaderFilterModel } from '../ColumnHeaderFilterModel';
+import { HeaderFilterModel } from '../HeaderFilterModel';
 export declare class ValuesTabModel extends HoistModel {
     xhImpl: boolean;
-    headerFilterModel: ColumnHeaderFilterModel;
+    headerFilterModel: HeaderFilterModel;
     /** Checkbox grid to display enumerated set of values */
     gridModel: GridModel;
     /** List of currently checked values in the list*/
@@ -21,7 +21,7 @@ export declare class ValuesTabModel extends HoistModel {
     get values(): any[];
     get valueCount(): number;
     get hasHiddenValues(): boolean;
-    constructor(headerFilterModel: ColumnHeaderFilterModel);
+    constructor(headerFilterModel: HeaderFilterModel);
     syncWithFilter(): void;
     reset(): void;
     setRecsChecked(isChecked: boolean, values: any[]): void;

package/cmp/grid/impl/ColumnHeader.ts

@@ -199,10 +199,7 @@ class ColumnHeaderModel extends HoistModel {
         this.availableSorts = this.parseAvailableSorts();
 
         if (!XH.isMobileApp && xhColumn?.filterable && filterModel?.getFieldSpec(xhColumn.field)) {
-            this.columnHeaderFilterModel = new ColumnHeaderFilterModel({
-                filterModel,
-                column: xhColumn
-            });
+            this.columnHeaderFilterModel = new ColumnHeaderFilterModel(filterModel, xhColumn);
             this.enableFilter = true;
         } else {
             this.isAgFiltered = agColumn.isFilterActive();

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

@@ -5,18 +5,14 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 
-import {div, filler} from '@xh/hoist/cmp/layout';
-import {tabContainer} from '@xh/hoist/cmp/tab';
+import {div, span} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
-import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
-import {panel} from '@xh/hoist/desktop/cmp/panel';
-import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
 import {popover} from '@xh/hoist/kit/blueprint';
-import {stopPropagation} from '@xh/hoist/utils/js';
 import './ColumnHeaderFilter.scss';
 import classNames from 'classnames';
 import {ColumnHeaderFilterModel} from './ColumnHeaderFilterModel';
+import {headerFilter} from './headerfilter/HeaderFilter';
 
 /**
  * Component to manage column filters from header. Will appear as a "filter" icon if filters are
@@ -41,83 +37,18 @@ export const columnHeaderFilter = hoistCmp.factory({
             hasBackdrop: true,
             interactionKind: 'click',
             onInteraction: open => {
-                if (!open) model.closeMenu();
+                if (!open) model.close();
             },
             item: div({
                 item: hasFilter ? Icon.filter() : Icon.columnMenu(),
                 onClick: e => {
                     e.stopPropagation();
-                    model.openMenu();
+                    model.open();
                 }
             }),
             targetTagName: 'div',
-            content: content()
+            // Force unmount on close
+            content: isOpen ? headerFilter() : span()
         });
     }
 });
-
-const content = hoistCmp.factory({
-    render() {
-        return panel({
-            title: `Filter`,
-            className: 'xh-column-header-filter',
-            compactHeader: true,
-            onClick: stopPropagation,
-            onDoubleClick: stopPropagation,
-            headerItems: [switcher()],
-            item: tabContainer(),
-            bbar: bbar()
-        });
-    }
-});
-
-const bbar = hoistCmp.factory<ColumnHeaderFilterModel>({
-    render({model}) {
-        const {commitOnChange} = model;
-        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()
-                })
-            ]
-        });
-    }
-});
-
-const switcher = hoistCmp.factory<ColumnHeaderFilterModel>(({model}) => {
-    const {fieldType, enableValues} = model.fieldSpec,
-        {tabs} = model.tabContainerModel;
-
-    return buttonGroup({
-        omit: !enableValues || fieldType === 'bool',
-        className: 'xh-column-header-filter__tab-switcher',
-        items: tabs.map(it => switcherButton({...it}))
-    });
-});
-
-const switcherButton = hoistCmp.factory<ColumnHeaderFilterModel>(({model, id, title}) => {
-    const {tabContainerModel} = model,
-        {activeTabId} = tabContainerModel;
-
-    return button({
-        className: 'xh-column-header-filter__tab-switcher__button',
-        text: title,
-        active: activeTabId === id,
-        outlined: true,
-        onClick: () => tabContainerModel.activateTab(id)
-    });
-});

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

@@ -6,186 +6,38 @@
  */
 
 import {Column} from '@xh/hoist/cmp/grid';
-import {TabContainerModel} from '@xh/hoist/cmp/tab';
-import {HoistModel, managed} from '@xh/hoist/core';
-import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {wait} from '@xh/hoist/promise';
+import {HoistModel} from '@xh/hoist/core';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {isEmpty} from 'lodash';
-import {GridFilterModel, GridFilterFieldSpec} from '@xh/hoist/cmp/grid';
-import {customTab} from './custom/CustomTab';
-import {CustomTabModel} from './custom/CustomTabModel';
-import {valuesTab} from './values/ValuesTab';
-import {ValuesTabModel} from './values/ValuesTabModel';
+import {GridFilterModel} from '@xh/hoist/cmp/grid';
 
 export class ColumnHeaderFilterModel extends HoistModel {
     override xhImpl = true;
 
-    column: Column;
-    gridFilterModel: GridFilterModel;
-    fieldSpec: GridFilterFieldSpec;
+    readonly column: Column;
+    readonly filterModel: GridFilterModel;
 
-    @observable isOpen = false;
-
-    @managed tabContainerModel: TabContainerModel;
-    @managed valuesTabModel: ValuesTabModel;
-    @managed customTabModel: CustomTabModel;
-
-    get field() {
-        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;
-    }
-
-    get columnFilters() {
-        return this.gridFilterModel.getColumnFilters(this.field);
-    }
-
-    get columnCompoundFilter() {
-        return this.gridFilterModel.getColumnCompoundFilter(this.field);
-    }
+    @observable isOpen: boolean = false;
 
     get hasFilter() {
-        return !isEmpty(this.columnFilters);
-    }
-
-    get hasPendingFilter() {
-        const {activeTabId} = this.tabContainerModel;
-        return activeTabId === 'valuesFilter'
-            ? !!this.valuesTabModel.filter
-            : !!this.customTabModel.filter;
-    }
-
-    @computed
-    get isCustomFilter() {
-        const {columnCompoundFilter, columnFilters} = this;
-        if (columnCompoundFilter) return true;
-        if (isEmpty(columnFilters)) return false;
-        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
-    }
-
-    get commitOnChange() {
-        return this.gridFilterModel.commitOnChange;
+        const filters = this.filterModel.getColumnFilters(this.column.field);
+        return !isEmpty(filters);
     }
 
-    constructor({filterModel, column}) {
+    constructor(filterModel: GridFilterModel, column: Column) {
         super();
         makeObservable(this);
-
-        this.gridFilterModel = filterModel;
+        this.filterModel = filterModel;
         this.column = column;
-        this.fieldSpec = filterModel.getFieldSpec(column.field);
-
-        const {enableValues} = this.fieldSpec;
-        this.valuesTabModel = enableValues ? new ValuesTabModel(this) : null;
-        this.customTabModel = new CustomTabModel(this);
-        this.tabContainerModel = new TabContainerModel({
-            switcher: false,
-            tabs: [
-                {
-                    id: 'valuesFilter',
-                    title: 'Values',
-                    content: valuesTab,
-                    omit: !enableValues
-                },
-                {
-                    id: 'customFilter',
-                    title: 'Custom',
-                    content: customTab
-                }
-            ],
-            xhImpl: true
-        });
-
-        this.addReaction({
-            track: () => this.valuesTabModel?.filter,
-            run: () => this.doCommitOnChange('valuesFilter'),
-            debounce: 100
-        });
-
-        this.addReaction({
-            track: () => this.customTabModel.filter,
-            run: () => this.doCommitOnChange('customFilter'),
-            debounce: 100
-        });
-    }
-
-    @action
-    commit(close = true) {
-        const {tabContainerModel, customTabModel, valuesTabModel} = this,
-            {activeTabId} = tabContainerModel,
-            valuesIsActive = activeTabId === 'valuesFilter',
-            activeTabModel = valuesIsActive ? valuesTabModel : customTabModel,
-            otherTabModel = valuesIsActive ? customTabModel : valuesTabModel;
-
-        this.setColumnFilters(activeTabModel.filter);
-        if (close) {
-            this.closeMenu();
-        } else {
-            // We must wait before resetting as GridFilterModel.setFilter() is async
-            wait().then(() => otherTabModel?.reset());
-        }
     }
 
     @action
-    clear(close = true) {
-        this.setColumnFilters(null);
-        if (close) {
-            this.closeMenu();
-        } else {
-            // We must wait before resetting as GridFilterModel.setFilter() is async
-            wait().then(() => this.resetTabModels());
-        }
-    }
-
-    @action
-    openMenu() {
+    open() {
         this.isOpen = true;
-        this.syncWithFilter();
     }
 
     @action
-    closeMenu() {
+    close() {
         this.isOpen = false;
     }
-
-    //-------------------
-    // Implementation
-    //-------------------
-    @action
-    private syncWithFilter() {
-        const {isCustomFilter, valuesTabModel, customTabModel, tabContainerModel} = this,
-            useCustomTab = isCustomFilter || !valuesTabModel,
-            toTab = useCustomTab ? customTabModel : valuesTabModel,
-            toTabId = useCustomTab ? 'customFilter' : 'valuesFilter';
-
-        this.resetTabModels();
-        toTab.syncWithFilter();
-
-        tabContainerModel.activateTab(toTabId);
-    }
-
-    private setColumnFilters(filters) {
-        this.gridFilterModel.setColumnFilters(this.field, filters);
-    }
-
-    private doCommitOnChange(tab) {
-        if (!this.commitOnChange) return;
-        if (this.tabContainerModel.activeTabId !== tab) return;
-        this.commit(false);
-    }
-
-    private resetTabModels() {
-        this.customTabModel.reset();
-        this.valuesTabModel?.reset();
-    }
 }

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilter.ts

@@ -0,0 +1,88 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+
+import {filler} from '@xh/hoist/cmp/layout';
+import {tabContainer} from '@xh/hoist/cmp/tab';
+import {creates, hoistCmp} from '@xh/hoist/core';
+import {button, buttonGroup} from '@xh/hoist/desktop/cmp/button';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon';
+import {stopPropagation} from '@xh/hoist/utils/js';
+import {HeaderFilterModel} from './HeaderFilterModel';
+
+/**
+ * Pop-up panel to display column specific filters
+ *
+ * @internal
+ */
+export const headerFilter = hoistCmp.factory({
+    model: creates(HeaderFilterModel),
+    render() {
+        return panel({
+            title: `Filter`,
+            className: 'xh-column-header-filter',
+            compactHeader: true,
+            onClick: stopPropagation,
+            onDoubleClick: stopPropagation,
+            headerItems: [switcher()],
+            item: tabContainer(),
+            bbar: bbar()
+        });
+    }
+});
+
+const bbar = hoistCmp.factory<HeaderFilterModel>({
+    render({model}) {
+        const {commitOnChange} = model;
+        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()
+                })
+            ]
+        });
+    }
+});
+
+const switcher = hoistCmp.factory<HeaderFilterModel>(({model}) => {
+    const {fieldType, enableValues} = model.fieldSpec,
+        {tabs} = model.tabContainerModel;
+
+    return buttonGroup({
+        omit: !enableValues || fieldType === 'bool',
+        className: 'xh-column-header-filter__tab-switcher',
+        items: tabs.map(it => switcherButton({...it}))
+    });
+});
+
+const switcherButton = hoistCmp.factory<HeaderFilterModel>(({model, id, title}) => {
+    const {tabContainerModel} = model,
+        {activeTabId} = tabContainerModel;
+
+    return button({
+        className: 'xh-column-header-filter__tab-switcher__button',
+        text: title,
+        active: activeTabId === id,
+        outlined: true,
+        onClick: () => tabContainerModel.activateTab(id)
+    });
+});