@xh/hoist 75.0.0-SNAPSHOT.1752765224740 → 75.0.0-SNAPSHOT.1752777363110

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## 75.0-SNAPSHOT - Unreleased
 
+### 🎁 New Features
+
+* Added new `GroupingChooserModel.sortDimensions` config - can be set to false to respect the order
+  in which dimensions are provided to the model.
+
 ### 🐞 Bug Fixes
 
 * DashCanvas: ensure `allowAdd=false` is not enforced if loadingState
@@ -10,7 +15,7 @@
   within the canvas, not the next parent container up that has `position: relative;`.
 
 * `useContextModel` is now reactive to a change of an (observable) resolved model when it is set.
-Previously this value was cached on first render.
+  Previously this value was cached on first render.
 
 * Fixes to framework components that bind to grids (e.g. `ColChooserButton`, `ColAutosizeButton`,
   `GridFindField`) to rebind to a new observable GridModel available via context.
@@ -26,9 +31,9 @@ Previously this value was cached on first render.
 ### 🎁 New Features
 
 * Further refinements to the `GroupingChooser` desktop UI.
-  * Added new props `favoritesSide` and `favoritesTitle`.
-  * Deprecated `popoverTitle` prop - use `editorTitle` instead.
-  * Moved "Save as Favorite" button to a new compact toolbar within the popover.
+    * Added new props `favoritesSide` and `favoritesTitle`.
+    * Deprecated `popoverTitle` prop - use `editorTitle` instead.
+    * Moved "Save as Favorite" button to a new compact toolbar within the popover.
 
 ### 🐞 Bug Fixes
 

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

@@ -1,29 +1,34 @@
-import { HoistModel, PersistOptions } from '@xh/hoist/core';
+import { HoistModel, PersistOptions, SelectOption } from '@xh/hoist/core';
 export interface GroupingChooserConfig {
+    /** True to accept an empty list as a valid value. */
+    allowEmpty?: boolean;
+    /**
+     * False (default) waits for the user to dismiss the popover before updating the
+     * external/observable value.
+     */
+    commitOnChange?: boolean;
     /**
      * Dimensions available for selection. When using GroupingChooser to create Cube queries,
      * it is recommended to pass the `dimensions` from the related cube (or a subset thereof).
      * Note that {@link CubeField} meets the `DimensionSpec` interface.
      */
     dimensions?: (DimensionSpec | string)[];
-    /** Initial value as an array of dimension names, or a function to produce such an array. */
-    initialValue?: string[] | (() => string[]);
     /**
      * Initial favorites as an array of dim name arrays, or a function to produce such an array.
      * Ignored if `persistWith.persistFavorites: false`.
      */
     initialFavorites?: string[][] | (() => string[][]);
-    /** Options governing persistence. */
-    persistWith?: GroupingChooserPersistOptions;
-    /** True to accept an empty list as a valid value. */
-    allowEmpty?: boolean;
+    /** Initial value as an array of dimension names, or a function to produce such an array. */
+    initialValue?: string[] | (() => string[]);
     /** Maximum number of dimensions allowed in a single grouping. */
     maxDepth?: number;
+    /** Options governing persistence. */
+    persistWith?: GroupingChooserPersistOptions;
     /**
-     * False (default) waits for the user to dismiss the popover before updating the
-     * external/observable value.
+     * True (default) to auto-sort dimensions by label. Set to false to show them in the order
+     * provided in the `dimensions` config.
      */
-    commitOnChange?: boolean;
+    sortDimensions?: boolean;
 }
 /**
  * Metadata for dimensions that are available for selection via a GroupingChooser control.
@@ -45,9 +50,10 @@ export declare class GroupingChooserModel extends HoistModel {
     value: string[];
     favorites: string[][];
     allowEmpty: boolean;
-    maxDepth: number;
     commitOnChange: boolean;
+    maxDepth: number;
     persistFavorites: boolean;
+    sortDimensions: boolean;
     pendingValue: string[];
     editorIsOpen: boolean;
     popoverRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
@@ -58,11 +64,13 @@ export declare class GroupingChooserModel extends HoistModel {
     get isValid(): boolean;
     get isAddEnabled(): boolean;
     get isAddFavoriteEnabled(): boolean;
-    constructor({ dimensions, initialValue, initialFavorites, persistWith, allowEmpty, maxDepth, commitOnChange }: GroupingChooserConfig);
+    constructor({ allowEmpty, commitOnChange, dimensions, initialFavorites, initialValue, maxDepth, persistWith, sortDimensions }: GroupingChooserConfig);
     setDimensions(dimensions: Array<DimensionSpec | string>): void;
     setValue(value: string[]): void;
     toggleEditor(): void;
     closeEditor(): void;
+    /** Transform dimension names into SelectOptions, with displayName and optional sort. */
+    getDimSelectOpts(dims?: string[]): SelectOption[];
     addPendingDim(dimName: string): void;
     replacePendingDimAtIdx(dimName: string, idx: number): void;
     removePendingDimAtIdx(idx: number): void;

package/cmp/grouping/GroupingChooserModel.ts

@@ -5,14 +5,39 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 
-import {HoistModel, PersistableState, PersistenceProvider, PersistOptions} from '@xh/hoist/core';
+import {
+    HoistModel,
+    PersistableState,
+    PersistenceProvider,
+    PersistOptions,
+    SelectOption
+} from '@xh/hoist/core';
 import {genDisplayName} from '@xh/hoist/data';
 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 {difference, isArray, isEmpty, isEqual, isObject, isString, keys, sortBy} from 'lodash';
+import {
+    compact,
+    difference,
+    isArray,
+    isEmpty,
+    isEqual,
+    isObject,
+    isString,
+    keys,
+    sortBy
+} from 'lodash';
 
 export interface GroupingChooserConfig {
+    /** True to accept an empty list as a valid value. */
+    allowEmpty?: boolean;
+
+    /**
+     * False (default) waits for the user to dismiss the popover before updating the
+     * external/observable value.
+     */
+    commitOnChange?: boolean;
+
     /**
      * Dimensions available for selection. When using GroupingChooser to create Cube queries,
      * it is recommended to pass the `dimensions` from the related cube (or a subset thereof).
@@ -20,29 +45,26 @@ export interface GroupingChooserConfig {
      */
     dimensions?: (DimensionSpec | string)[];
 
-    /** Initial value as an array of dimension names, or a function to produce such an array. */
-    initialValue?: string[] | (() => string[]);
-
     /**
      * Initial favorites as an array of dim name arrays, or a function to produce such an array.
      * Ignored if `persistWith.persistFavorites: false`.
      */
     initialFavorites?: string[][] | (() => string[][]);
 
-    /** Options governing persistence. */
-    persistWith?: GroupingChooserPersistOptions;
-
-    /** True to accept an empty list as a valid value. */
-    allowEmpty?: boolean;
+    /** Initial value as an array of dimension names, or a function to produce such an array. */
+    initialValue?: string[] | (() => string[]);
 
     /** Maximum number of dimensions allowed in a single grouping. */
     maxDepth?: number;
 
+    /** Options governing persistence. */
+    persistWith?: GroupingChooserPersistOptions;
+
     /**
-     * False (default) waits for the user to dismiss the popover before updating the
-     * external/observable value.
+     * True (default) to auto-sort dimensions by label. Set to false to show them in the order
+     * provided in the `dimensions` config.
      */
-    commitOnChange?: boolean;
+    sortDimensions?: boolean;
 }
 
 /**
@@ -70,9 +92,10 @@ export class GroupingChooserModel extends HoistModel {
     @observable.ref favorites: string[][] = [];
 
     allowEmpty: boolean;
-    maxDepth: number;
     commitOnChange: boolean;
+    maxDepth: number;
     persistFavorites: boolean = false;
+    sortDimensions: boolean;
 
     // Implementation fields for Control
     @observable.ref pendingValue: string[] = [];
@@ -117,20 +140,22 @@ export class GroupingChooserModel extends HoistModel {
     }
 
     constructor({
+        allowEmpty = false,
+        commitOnChange = false,
         dimensions,
-        initialValue = [],
         initialFavorites = [],
-        persistWith = null,
-        allowEmpty = false,
+        initialValue = [],
         maxDepth = null,
-        commitOnChange = false
+        persistWith = null,
+        sortDimensions = true
     }: GroupingChooserConfig) {
         super();
         makeObservable(this);
 
         this.allowEmpty = allowEmpty;
-        this.maxDepth = maxDepth;
         this.commitOnChange = commitOnChange;
+        this.maxDepth = maxDepth;
+        this.sortDimensions = sortDimensions;
 
         this.setDimensions(dimensions);
 
@@ -187,6 +212,15 @@ export class GroupingChooserModel extends HoistModel {
         this.editorIsOpen = false;
     }
 
+    /** Transform dimension names into SelectOptions, with displayName and optional sort. */
+    getDimSelectOpts(dims: string[] = this.availableDims): SelectOption[] {
+        const ret = compact(dims).map(dimName => ({
+            value: dimName,
+            label: this.getDimDisplayName(dimName)
+        }));
+        return this.sortDimensions ? sortBy(ret, 'label') : ret;
+    }
+
     //-------------------------
     // Value handling
     //-------------------------

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -29,7 +29,7 @@ import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautif
 import {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, isNil, isUndefined, sortBy} from 'lodash';
+import {isEmpty, isNil, isUndefined} from 'lodash';
 import './GroupingChooser.scss';
 import {ReactNode} from 'react';
 
@@ -264,7 +264,7 @@ const dimensionList = hoistCmp.factory<GroupingChooserModel>({
 const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
     render({model, dimension, idx}) {
         // The options for this select include its current value
-        const options = getDimOptions([...model.availableDims, dimension], model);
+        const options = model.getDimSelectOpts([...model.availableDims, dimension]);
 
         return draggable({
             key: dimension,
@@ -346,7 +346,8 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
 const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
         if (!model.isAddEnabled) return null;
-        const options = getDimOptions(model.availableDims, model);
+
+        const options = model.getDimSelectOpts();
         return div({
             className: 'xh-grouping-chooser__add-control',
             items: [
@@ -372,9 +373,8 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
 });
 
 /**
- * Extract integer values from CSS transform string.
- * Works for both `translate` and `translate3d`
- * e.g. `translate3d(250px, 150px, 0px)` is equivalent to [250, 150, 0]
+ * Extract integer values from CSS transform string. Works for both `translate` and `translate3d`.
+ * e.g. `translate3d(250px, 150px, 0px) -> [250, 150, 0]`
  */
 function parseTransform(transformStr: string): number[] {
     return transformStr
@@ -383,16 +383,6 @@ function parseTransform(transformStr: string): number[] {
         ?.map(it => parseInt(it));
 }
 
-/**
- * Convert a list of dim names into select options
- */
-function getDimOptions(dims, model) {
-    const ret = compact(dims).map(dimName => {
-        return {value: dimName, label: model.getDimDisplayName(dimName)};
-    });
-    return sortBy(ret, 'label');
-}
-
 //------------------
 // Favorites
 //------------------

package/mobile/cmp/grouping/GroupingChooser.ts

@@ -15,7 +15,7 @@ import '@xh/hoist/mobile/register';
 import {dialogPanel, panel} from '@xh/hoist/mobile/cmp/panel';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, sortBy} from 'lodash';
+import {isEmpty} from 'lodash';
 
 import './GroupingChooser.scss';
 
@@ -134,7 +134,7 @@ const dimensionList = hoistCmp.factory<GroupingChooserModel>({
 const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
     render({model, dimension, idx}) {
         // The options for this select include its current value
-        const options = getDimOptions([...model.availableDims, dimension], model);
+        const options = model.getDimSelectOpts([...model.availableDims, dimension]);
 
         return draggable({
             key: dimension,
@@ -182,7 +182,8 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
 const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
         if (!model.isAddEnabled) return null;
-        const options = getDimOptions(model.availableDims, model);
+
+        const options = model.getDimSelectOpts();
         return div({
             className: 'xh-grouping-chooser__add-control',
             items: [
@@ -203,16 +204,6 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
     }
 });
 
-/**
- * Convert a list of dim names into select options
- */
-function getDimOptions(dims, model) {
-    const ret = compact(dims).map(dimName => {
-        return {value: dimName, label: model.getDimDisplayName(dimName)};
-    });
-    return sortBy(ret, 'label');
-}
-
 //------------------
 // Favorites
 //------------------

package/package.json

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