@xh/hoist 67.0.0-SNAPSHOT.1725048431197 → 67.0.0-SNAPSHOT.1725049253748

package/CHANGELOG.md

@@ -21,10 +21,12 @@
 * New property `FetchOptions.asJson` to instruct `FetchService` to decode an HTTP response as JSON.
   Note that `FetchService` methods suffixed with `Json` will set this property automatically.
 * `GridModel` will now accept `contextMenu: false` to omit context menus.
-* New bindable `AppContainerModel.intializingLoadMaskMessage` property to allow apps to customize
+* New bindable property `AppContainerModel.intializingLoadMaskMessage` to allow apps to customize
   the loading mask message shown during app initialization.
 * Enhanced `select` component with new `emptyValue` prop, allowing for a custom value to be returned
   when the control is empty (vs default of `null`). Expected usage is `[]` when `enableMulti:true`.
+* New `GroupingChooserModel.setDimensions()` API, to support updating available dimensions on an
+  already constructed `GroupingChooserModel`.
 
 ### 🐞 Bug Fixes
 

package/build/types/cmp/grouping/GroupingChooserModel.d.ts

@@ -42,8 +42,6 @@ export interface GroupingChooserPersistOptions extends PersistOptions {
 export declare class GroupingChooserModel extends HoistModel {
     value: string[];
     favorites: string[][];
-    dimensions: Record<string, DimensionSpec>;
-    dimensionNames: string[];
     allowEmpty: boolean;
     maxDepth: number;
     commitOnChange: boolean;
@@ -54,10 +52,14 @@ export declare class GroupingChooserModel extends HoistModel {
     editorIsOpen: boolean;
     favoritesIsOpen: boolean;
     popoverRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
+    private dimensions;
+    private dimensionNames;
     get availableDims(): string[];
+    get dimensionSpecs(): DimensionSpec[];
     get isValid(): boolean;
     get isAddEnabled(): boolean;
     constructor({ dimensions, initialValue, initialFavorites, persistWith, allowEmpty, maxDepth, commitOnChange }: GroupingChooserConfig);
+    setDimensions(dimensions: Array<DimensionSpec | string>): void;
     setValue(value: string[]): void;
     toggleEditor(): void;
     toggleFavoritesMenu(): void;
@@ -67,13 +69,7 @@ export declare class GroupingChooserModel extends HoistModel {
     removePendingDimAtIdx(idx: number): void;
     movePendingDimToIndex(dimName: string, toIdx: number): void;
     commitPendingValueAndClose(): void;
-    validateValue(value: any): boolean;
-    normalizeDimensions(dims: Array<DimensionSpec | string>): Record<string, DimensionSpec>;
-    createDimension(src: DimensionSpec | string): {
-        /** Shortname or code (almost always a `CubeField.name`). */
-        name: string;
-        displayName: string;
-    };
+    validateValue(value: string[]): boolean;
     getValueLabel(value: string[]): string;
     getDimDisplayName(dimName: string): string;
     onDragEnd(result: any): void;
@@ -86,4 +82,7 @@ export declare class GroupingChooserModel extends HoistModel {
     removeFavorite(value: string[]): void;
     isFavorite(value: string[]): boolean;
     get persistState(): PlainObject;
+    private normalizeDimensions;
+    private createDimension;
+    private removeUnknownDimsFromValue;
 }

package/cmp/grouping/GroupingChooserModel.ts

@@ -13,21 +13,11 @@ import {
     PlainObject,
     XH
 } from '@xh/hoist/core';
-import {action, computed, observable, makeObservable} from '@xh/hoist/mobx';
 import {genDisplayName} from '@xh/hoist/data';
-import {throwIf} from '@xh/hoist/utils/js';
+import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
+import {executeIfFunction, 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, difference, isArray, isEmpty, isEqual, isString, keys, sortBy} from 'lodash';
 
 export interface GroupingChooserConfig {
     /**
@@ -81,11 +71,8 @@ export interface GroupingChooserPersistOptions extends PersistOptions {
 
 export class GroupingChooserModel extends HoistModel {
     @observable.ref value: string[];
-
     @observable.ref favorites: string[][] = [];
 
-    dimensions: Record<string, DimensionSpec>;
-    dimensionNames: string[];
     allowEmpty: boolean;
     maxDepth: number;
     commitOnChange: boolean;
@@ -98,14 +85,22 @@ export class GroupingChooserModel extends HoistModel {
     @observable.ref pendingValue: string[] = [];
     @observable editorIsOpen: boolean = false;
     @observable favoritesIsOpen: boolean = false;
-
     popoverRef = createObservableRef<HTMLElement>();
 
+    // Internal state
+    @observable.ref private dimensions: Record<string, DimensionSpec>;
+    @observable.ref private dimensionNames: string[];
+
     @computed
     get availableDims(): string[] {
         return difference(this.dimensionNames, this.pendingValue);
     }
 
+    @computed
+    get dimensionSpecs(): DimensionSpec[] {
+        return Object.values(this.dimensions);
+    }
+
     @computed
     get isValid(): boolean {
         return this.validateValue(this.pendingValue);
@@ -132,17 +127,15 @@ export class GroupingChooserModel extends HoistModel {
         super();
         makeObservable(this);
 
-        this.dimensions = this.normalizeDimensions(dimensions);
-        this.dimensionNames = keys(this.dimensions);
         this.allowEmpty = allowEmpty;
         this.maxDepth = maxDepth;
         this.commitOnChange = commitOnChange;
 
-        throwIf(isEmpty(this.dimensions), 'Must provide valid dimensions available for selection.');
+        this.setDimensions(dimensions);
 
         // Read and validate value and favorites
-        let value = isFunction(initialValue) ? initialValue() : initialValue,
-            favorites = isFunction(initialFavorites) ? initialFavorites() : initialFavorites;
+        let value = executeIfFunction(initialValue),
+            favorites = executeIfFunction(initialFavorites);
 
         throwIf(isEmpty(value) && !this.allowEmpty, 'Initial value cannot be empty.');
         throwIf(!this.validateValue(value), 'Initial value is invalid.');
@@ -187,6 +180,18 @@ export class GroupingChooserModel extends HoistModel {
         this.setFavorites(favorites);
     }
 
+    @action
+    setDimensions(dimensions: Array<DimensionSpec | string>) {
+        throwIf(
+            isEmpty(dimensions) && !this.allowEmpty,
+            'Must provide valid dimensions available for selection.'
+        );
+
+        this.dimensions = this.normalizeDimensions(dimensions);
+        this.dimensionNames = keys(this.dimensions);
+        this.removeUnknownDimsFromValue();
+    }
+
     @action
     setValue(value: string[]) {
         if (!this.validateValue(value)) {
@@ -259,37 +264,18 @@ export class GroupingChooserModel extends HoistModel {
         this.closePopover();
     }
 
-    validateValue(value) {
+    validateValue(value: string[]) {
         if (!isArray(value)) return false;
         if (isEmpty(value) && !this.allowEmpty) return false;
         return value.every(dim => this.dimensionNames.includes(dim));
     }
 
-    normalizeDimensions(dims: Array<DimensionSpec | string>): Record<string, DimensionSpec> {
-        dims = dims ?? [];
-        const ret = {};
-        dims.forEach(it => {
-            const dim = this.createDimension(it);
-            ret[dim.name] = dim;
-        });
-        return ret;
-    }
-
-    createDimension(src: DimensionSpec | string) {
-        src = isString(src) ? {name: src} : src;
-        throwIf(
-            !src.hasOwnProperty('name'),
-            "Dimensions provided as Objects must define a 'name' property."
-        );
-        return {displayName: genDisplayName(src.name), ...src};
-    }
-
-    getValueLabel(value: string[]) {
+    getValueLabel(value: string[]): string {
         return value.map(dimName => this.getDimDisplayName(dimName)).join(' › ');
     }
 
     getDimDisplayName(dimName: string) {
-        return this.dimensions[dimName].displayName;
+        return this.dimensions[dimName]?.displayName ?? dimName;
     }
 
     //--------------------
@@ -343,4 +329,41 @@ export class GroupingChooserModel extends HoistModel {
         if (this.persistFavorites) ret.favorites = this.favorites;
         return ret;
     }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private normalizeDimensions(
+        dims: Array<DimensionSpec | string>
+    ): Record<string, DimensionSpec> {
+        dims = dims ?? [];
+        const ret = {};
+        dims.forEach(it => {
+            const dim = this.createDimension(it);
+            ret[dim.name] = dim;
+        });
+        return ret;
+    }
+
+    private createDimension(src: DimensionSpec | string) {
+        src = isString(src) ? {name: src} : src;
+        throwIf(
+            !src.hasOwnProperty('name'),
+            "Dimensions provided as Objects must define a 'name' property."
+        );
+        return {displayName: genDisplayName(src.name), ...src};
+    }
+
+    private removeUnknownDimsFromValue() {
+        const {value, dimensionNames, allowEmpty} = this,
+            cleanValue = value?.filter(dim => dimensionNames.includes(dim));
+
+        if (isEqual(value, cleanValue)) return;
+
+        if (isEmpty(cleanValue) && !allowEmpty) {
+            cleanValue.push(dimensionNames[0]);
+        }
+
+        this.setValue(cleanValue);
+    }
 }

package/package.json

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