Update GroupingChooser with local model for transient UI state

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 59.0.0-SNAPSHOT - unreleased
 
+### 🐞 Bug Fixes
+
+* Fixed bug where having multiple `GroupingChooser` components rendered using the same model would
+  result in the popover for all components showing on click.
+
 ## 58.0.1 - 2023-07-13
 
 ### 🐞 Bug Fixes

cmp/grouping/GroupingChooserModel.ts

@@ -13,21 +13,10 @@ import {
     PlainObject,
     XH
 } from '@xh/hoist/core';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
 import {genDisplayName} from '@xh/hoist/data';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 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 {cloneDeep, isArray, isEmpty, isEqual, isFunction, isString, keys, sortBy} from 'lodash';
 
 export interface GroupingChooserConfig {
     /**
@@ -94,32 +83,6 @@ export class GroupingChooserModel extends HoistModel {
     persistValue: boolean = false;
     persistFavorites: boolean = false;
 
-    // Implementation fields for Control
-    @observable.ref pendingValue: string[] = [];
-    @observable editorIsOpen: boolean = false;
-    @observable favoritesIsOpen: boolean = false;
-
-    popoverRef = createObservableRef<HTMLElement>();
-
-    @computed
-    get availableDims(): string[] {
-        return difference(this.dimensionNames, this.pendingValue);
-    }
-
-    @computed
-    get isValid(): boolean {
-        return this.validateValue(this.pendingValue);
-    }
-
-    @computed
-    get isAddEnabled(): boolean {
-        const {pendingValue, maxDepth, dimensionNames, availableDims} = this,
-            limit =
-                maxDepth > 0 ? Math.min(maxDepth, dimensionNames.length) : dimensionNames.length,
-            atMaxDepth = pendingValue.length === limit;
-        return !atMaxDepth && !isEmpty(availableDims);
-    }
-
     constructor({
         dimensions,
         initialValue = [],
@@ -176,13 +139,6 @@ export class GroupingChooserModel extends HoistModel {
             }
         }
 
-        this.addReaction({
-            track: () => this.pendingValue,
-            run: () => {
-                if (this.commitOnChange) this.setValue(this.pendingValue);
-            }
-        });
-
         this.setValue(value);
         this.setFavorites(favorites);
     }
@@ -194,69 +150,6 @@ export class GroupingChooserModel extends HoistModel {
             return;
         }
         this.value = value;
-        this.pendingValue = value;
-    }
-
-    @action
-    toggleEditor() {
-        this.pendingValue = this.value;
-        this.editorIsOpen = !this.editorIsOpen;
-        this.favoritesIsOpen = false;
-    }
-
-    @action
-    toggleFavoritesMenu() {
-        this.favoritesIsOpen = !this.favoritesIsOpen;
-        this.editorIsOpen = false;
-    }
-
-    @action
-    closePopover() {
-        this.editorIsOpen = false;
-        this.favoritesIsOpen = false;
-    }
-
-    //-------------------------
-    // Value handling
-    //-------------------------
-    @action
-    addPendingDim(dimName: string) {
-        if (!dimName) return;
-        this.pendingValue = [...this.pendingValue, dimName];
-    }
-
-    @action
-    replacePendingDimAtIdx(dimName: string, idx: number) {
-        if (!dimName) return this.removePendingDimAtIdx(idx);
-        const pendingValue = [...this.pendingValue];
-        pendingValue[idx] = dimName;
-        this.pendingValue = pendingValue;
-    }
-
-    @action
-    removePendingDimAtIdx(idx: number) {
-        const pendingValue = [...this.pendingValue];
-        pendingValue.splice(idx, 1);
-        this.pendingValue = pendingValue;
-    }
-
-    @action
-    movePendingDimToIndex(dimName: string, toIdx: number) {
-        const pendingValue = [...this.pendingValue],
-            dim = pendingValue.find(it => it === dimName),
-            fromIdx = pendingValue.indexOf(dim);
-
-        pendingValue.splice(toIdx, 0, pendingValue.splice(fromIdx, 1)[0]);
-        this.pendingValue = pendingValue;
-    }
-
-    @action
-    commitPendingValueAndClose() {
-        const {pendingValue, value} = this;
-        if (!isEqual(value, pendingValue) && this.validateValue(pendingValue)) {
-            this.setValue(pendingValue);
-        }
-        this.closePopover();
     }
 
     validateValue(value) {
@@ -292,15 +185,6 @@ export class GroupingChooserModel extends HoistModel {
         return this.dimensions[dimName].displayName;
     }
 
-    //--------------------
-    // Drag Drop
-    //--------------------
-    onDragEnd(result) {
-        const {draggableId, destination} = result;
-        if (!destination) return;
-        this.movePendingDimToIndex(draggableId, destination.index);
-    }
-
     //--------------------
     // Favorites
     //--------------------

cmp/grouping/impl/GroupingChooserLocalModel.ts

@@ -0,0 +1,135 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | [email protected])
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+
+import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
+import {HoistModel} from '@xh/hoist/core';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {createObservableRef} from '@xh/hoist/utils/react';
+import {difference, isEmpty, isEqual} from 'lodash';
+
+/**
+ * @internal
+ */
+export class GroupingChooserLocalModel extends HoistModel {
+    private readonly model: GroupingChooserModel;
+
+    @observable.ref pendingValue: string[] = [];
+    @observable editorIsOpen: boolean = false;
+    @observable favoritesIsOpen: boolean = false;
+
+    popoverRef = createObservableRef<HTMLElement>();
+
+    constructor(model: GroupingChooserModel) {
+        super();
+        makeObservable(this);
+
+        this.model = model;
+
+        this.addReaction({
+            track: () => this.pendingValue,
+            run: () => {
+                if (model.commitOnChange) model.setValue(this.pendingValue);
+            }
+        });
+    }
+
+    @computed
+    get availableDims(): string[] {
+        return difference(this.model.dimensionNames, this.pendingValue);
+    }
+
+    @computed
+    get isValid(): boolean {
+        return this.model.validateValue(this.pendingValue);
+    }
+
+    @computed
+    get isAddEnabled(): boolean {
+        const {pendingValue, availableDims} = this,
+            {maxDepth, dimensionNames} = this.model,
+            limit =
+                maxDepth > 0 ? Math.min(maxDepth, dimensionNames.length) : dimensionNames.length,
+            atMaxDepth = pendingValue.length === limit;
+        return !atMaxDepth && !isEmpty(availableDims);
+    }
+
+    @action
+    toggleEditor() {
+        this.pendingValue = this.model.value;
+        this.editorIsOpen = !this.editorIsOpen;
+        this.favoritesIsOpen = false;
+    }
+
+    @action
+    toggleFavoritesMenu() {
+        this.favoritesIsOpen = !this.favoritesIsOpen;
+        this.editorIsOpen = false;
+    }
+
+    @action
+    closePopover() {
+        this.editorIsOpen = false;
+        this.favoritesIsOpen = false;
+    }
+
+    //-------------------------
+    // Value handling
+    //-------------------------
+
+    @action
+    addPendingDim(dimName: string) {
+        if (!dimName) return;
+        this.pendingValue = [...this.pendingValue, dimName];
+    }
+
+    @action
+    replacePendingDimAtIdx(dimName: string, idx: number) {
+        if (!dimName) return this.removePendingDimAtIdx(idx);
+        const pendingValue = [...this.pendingValue];
+        pendingValue[idx] = dimName;
+        this.pendingValue = pendingValue;
+    }
+
+    @action
+    removePendingDimAtIdx(idx: number) {
+        const pendingValue = [...this.pendingValue];
+        pendingValue.splice(idx, 1);
+        this.pendingValue = pendingValue;
+    }
+
+    @action
+    movePendingDimToIndex(dimName: string, toIdx: number) {
+        const pendingValue = [...this.pendingValue],
+            dim = pendingValue.find(it => it === dimName),
+            fromIdx = pendingValue.indexOf(dim);
+
+        pendingValue.splice(toIdx, 0, pendingValue.splice(fromIdx, 1)[0]);
+        this.pendingValue = pendingValue;
+    }
+
+    @action
+    commitPendingValueAndClose() {
+        const {pendingValue, model} = this,
+            {value} = model;
+
+        if (!isEqual(value, pendingValue) && model.validateValue(pendingValue)) {
+            model.setValue(pendingValue);
+        }
+
+        this.closePopover();
+    }
+
+    //--------------------
+    // Drag Drop
+    //--------------------
+
+    onDragEnd(result) {
+        const {draggableId, destination} = result;
+        if (!destination) return;
+        this.movePendingDimToIndex(draggableId, destination.index);
+    }
+}