@xh/hoist 74.1.2 → 75.0.0-SNAPSHOT.1750963411217

package/CHANGELOG.md

@@ -1,60 +1,28 @@
 # Changelog
 
-## v74.1.2 - 2025-07-03
-
-### 🐞 Bug Fixes
-
-* Fixed `GroupingChooser` layout issue, visible only when favorites are disabled.
-
-## v74.1.1 - 2025-07-02
-
-### 🎁 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.
-
-### 🐞 Bug Fixes
-
-* Fixed a bug where `TrackService` was not properly verifying that tracked `data` was below the
-  configured `maxDataLength` limit.
-
-## v74.1.0 - 2025-06-30
+## v75.0.0-SNAPSHOT - unreleased
 
 ### 🎁 New Features
-
-* Updated the `GroupingChooser` UI to use a single popover for both updating the value and
-  selecting/managing favorite groupings (if enabled).
-    * Adjusted `GroupingChooserModel` API and some CSS class names and testIds of `GroupingChooser`
-      internals, although those changes are very unlikely to require app-level adjustments.
-    * Adjusted/removed (rarely used) desktop and mobile `GroupingChooser` props related to popover
-      sizing and titling.
-    * Updated the mobile UI to use a full-screen dialog, similar to `ColumnChooser`.
 * Added props to `ViewManager` to customize icons used for different types of views, and modified
   default icons for Global and Shared views.
-* Added `ViewManager.extraMenuItems` prop to allow insertion of custom, app-specific items into the
-  component's standard menu.
 
 ## v74.0.0 - 2025-06-11
 
 ### 💥 Breaking Changes (upgrade difficulty: 🟢 LOW - minor changes to ViewManagerModel, ChartModel)
 
 * Removed `ViewManagerModel.settleTime`. Now set via individual `PersistOptions.settleTime` instead.
-* ️Removed `ChartModel.showContextMenu`. Use a setting of `false` for the new
-  `ChartModel.contextMenu` property instead.
+* ️Removed `ChartModel.showContextMenu`.  Use a setting of `false` for the new `ChartModel.contextMenu`
+property instead.
 
 ### 🎁 New Features
-
 * Added `ViewManagerModel.preserveUnsavedChanges` flag to opt-out of that behaviour.
 * Added `PersistOptions.settleTime` to configure time to wait for state to settle before persisting.
 * Support for grid column level `onCellClicked` events.
 * General improvements to `MenuItem` api
-    * New `MenuContext` object now sent as 2nd arg to `actionFn` and `prepareFn`.
-    * New `ChartModel.contextMenu` property provides a fully customizable context menu for charts.
+  * New `MenuContext` object now sent as 2nd arg to `actionFn` and `prepareFn`.
+  * New `ChartModel.contextMenu` property provides a fully customizable context menu for charts.
 
 ### 🐞 Bug Fixes
-
 * Improved `ViewManagerModel.settleTime` by delegating to individual `PersistenceProviders`.
 * Fixed bug where grid column state could become unintentionally dirty when columns were hidden.
 * Improved `WebsocketService` heartbeat detection to auto-reconnect when the socket reports as open

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

@@ -8,10 +8,7 @@ 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`.
-     */
+    /** Initial favorites as an array of dim name arrays, or a function to produce such an array. */
     initialFavorites?: string[][] | (() => string[][]);
     /** Options governing persistence. */
     persistWith?: GroupingChooserPersistOptions;
@@ -50,6 +47,7 @@ export declare class GroupingChooserModel extends HoistModel {
     persistFavorites: boolean;
     pendingValue: string[];
     editorIsOpen: boolean;
+    favoritesIsOpen: boolean;
     popoverRef: import("react").RefObject<HTMLElement> & import("react").RefCallback<HTMLElement>;
     private dimensions;
     private dimensionNames;
@@ -57,12 +55,12 @@ export declare class GroupingChooserModel extends HoistModel {
     get dimensionSpecs(): DimensionSpec[];
     get isValid(): boolean;
     get isAddEnabled(): boolean;
-    get isAddFavoriteEnabled(): boolean;
     constructor({ dimensions, initialValue, initialFavorites, persistWith, allowEmpty, maxDepth, commitOnChange }: GroupingChooserConfig);
     setDimensions(dimensions: Array<DimensionSpec | string>): void;
     setValue(value: string[]): void;
     toggleEditor(): void;
-    closeEditor(): void;
+    toggleFavoritesMenu(): void;
+    closePopover(): void;
     addPendingDim(dimName: string): void;
     replacePendingDimAtIdx(dimName: string, idx: number): void;
     removePendingDimAtIdx(idx: number): void;
@@ -76,10 +74,8 @@ export declare class GroupingChooserModel extends HoistModel {
         value: string[];
         label: string;
     }[];
-    get hasFavorites(): boolean;
     setFavorites(favorites: string[][]): void;
     addFavorite(value: string[]): void;
-    addPendingAsFavorite(): void;
     removeFavorite(value: string[]): void;
     isFavorite(value: string[]): boolean;
     private initPersist;

package/build/types/core/types/Interfaces.d.ts

@@ -177,7 +177,7 @@ export interface TrackOptions {
     /** Correlation ID to save along with track log. */
     correlationId?: string;
     /** App-supplied data to save along with track log.*/
-    data?: PlainObject | Array<unknown>;
+    data?: PlainObject | PlainObject[];
     /**
      * Set true to log on the server all primitive values in the 'data' property.
      * May also be specified as list of specific property keys that should be logged.

package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts

@@ -1,34 +1,23 @@
 import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
-import { Side } from '@xh/hoist/core';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
+import { ReactElement } from 'react';
 import './GroupingChooser.scss';
-import { ReactNode } from 'react';
 export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel> {
-    /** Title for value-editing portion of popover, or null to suppress. */
-    editorTitle?: ReactNode;
     /** Text to represent empty state (i.e. value = null or []) */
     emptyText?: string;
-    /**
-     * Side of the popover, relative to the value-editing controls, on which the Favorites list
-     * should be rendered, if enabled.
-     */
-    favoritesSide?: Side;
-    /** Title for favorites-list portion of popover, or null to suppress. */
-    favoritesTitle?: ReactNode;
     /** Min height in pixels of the popover menu itself. */
     popoverMinHeight?: number;
     /** Position of popover relative to target button. */
     popoverPosition?: 'bottom' | 'top';
-    /** @deprecated - use `editorTitle` instead */
-    popoverTitle?: ReactNode;
-    /**
-     * Width in pixels of the popover menu itself.
-     * If unspecified, will default based on favorites enabled status + side.
-     */
+    /** Title for popover (default "GROUP BY") or null to suppress. */
+    popoverTitle?: string;
+    /** Width in pixels of the popover menu itself. */
     popoverWidth?: number;
     /** True (default) to style target button as an input field - blends better in toolbars. */
     styleButtonAsInput?: boolean;
+    /** Icon clicked to launch favorites menu. Defaults to Icon.favorite() */
+    favoritesIcon?: ReactElement;
 }
 /**
  * Control for selecting a list of dimensions for grouping APIs, with built-in support for

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -44,7 +44,7 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
      */
     tbar?: Some<ReactNode>;
     /**
-     * A toolbar to be docked at the bottom of the panel.
+     * A toolbar to be docked at the top of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
     bbar?: Some<ReactNode>;

package/build/types/desktop/cmp/viewmanager/ViewManager.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps, MenuItemLike } from '@xh/hoist/core';
+import { HoistProps } from '@xh/hoist/core';
 import { ViewManagerModel } from '@xh/hoist/cmp/viewmanager';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import { ReactElement } from 'react';
@@ -21,13 +21,6 @@ export interface ViewManagerProps extends HoistProps<ViewManagerModel> {
     showRevertButton?: ViewManagerStateButtonMode;
     /** Side relative to the menu on which save/revert buttons should render. Default 'right'. */
     buttonSide?: 'left' | 'right';
-    /**
-     * Array of extra menu items. Can contain:
-     *  + `MenuItems` or configs to create them.
-     *  + `MenuDividers` or the special string token '-'.
-     *  + React Elements or strings, which will be interpreted as the `text` property for a MenuItem.
-     */
-    extraMenuItems?: MenuItemLike[];
 }
 /**
  * Visibility options for save/revert buttons inlined next to the ViewManager menu:

package/build/types/mobile/cmp/grouping/GroupingChooser.d.ts

@@ -3,10 +3,14 @@ import { ButtonProps } from '@xh/hoist/mobile/cmp/button';
 import '@xh/hoist/mobile/register';
 import './GroupingChooser.scss';
 export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel> {
-    /** Custom title for editor dialog, or null to suppress. */
-    dialogTitle?: string;
     /** Text to represent empty state (i.e. value = null or [])*/
     emptyText?: string;
+    /** Title for popover (default "GROUP BY") or null to suppress. */
+    popoverTitle?: string;
+    /** Min height in pixels of the popover inner content (excl. header & toolbar). */
+    popoverMinHeight?: number;
+    /** Width in pixels of the popover menu itself. */
+    popoverWidth?: number;
 }
 /**
  * Control for selecting a list of dimensions for grouping APIs.

package/build/types/utils/impl/index.d.ts

@@ -2,4 +2,3 @@ export * from './Separators';
 export * from './TimeZone';
 export * from './Equals';
 export * from './IsOmitted';
-export * from './MenuItems';

package/cmp/grouping/GroupingChooserModel.ts

@@ -23,10 +23,7 @@ export interface GroupingChooserConfig {
     /** 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`.
-     */
+    /** Initial favorites as an array of dim name arrays, or a function to produce such an array. */
     initialFavorites?: string[][] | (() => string[][]);
 
     /** Options governing persistence. */
@@ -77,6 +74,7 @@ export class GroupingChooserModel extends HoistModel {
     // Implementation fields for Control
     @observable.ref pendingValue: string[] = [];
     @observable editorIsOpen: boolean = false;
+    @observable favoritesIsOpen: boolean = false;
     popoverRef = createObservableRef<HTMLElement>();
 
     // Internal state
@@ -107,15 +105,6 @@ export class GroupingChooserModel extends HoistModel {
         return !atMaxDepth && !isEmpty(availableDims);
     }
 
-    @computed
-    get isAddFavoriteEnabled(): boolean {
-        return (
-            this.persistFavorites &&
-            !isEmpty(this.pendingValue) &&
-            !this.isFavorite(this.pendingValue)
-        );
-    }
-
     constructor({
         dimensions,
         initialValue = [],
@@ -180,11 +169,19 @@ export class GroupingChooserModel extends HoistModel {
     toggleEditor() {
         this.pendingValue = this.value;
         this.editorIsOpen = !this.editorIsOpen;
+        this.favoritesIsOpen = false;
+    }
+
+    @action
+    toggleFavoritesMenu() {
+        this.favoritesIsOpen = !this.favoritesIsOpen;
+        this.editorIsOpen = false;
     }
 
     @action
-    closeEditor() {
+    closePopover() {
         this.editorIsOpen = false;
+        this.favoritesIsOpen = false;
     }
 
     //-------------------------
@@ -227,7 +224,7 @@ export class GroupingChooserModel extends HoistModel {
         if (!isEqual(value, pendingValue) && this.validateValue(pendingValue)) {
             this.setValue(pendingValue);
         }
-        this.closeEditor();
+        this.closePopover();
     }
 
     validateValue(value: string[]) {
@@ -266,11 +263,6 @@ export class GroupingChooserModel extends HoistModel {
         );
     }
 
-    @computed
-    get hasFavorites() {
-        return !isEmpty(this.favorites);
-    }
-
     @action
     setFavorites(favorites: string[][]) {
         this.favorites = favorites.filter(v => this.validateValue(v));
@@ -282,11 +274,6 @@ export class GroupingChooserModel extends HoistModel {
         this.favorites = [...this.favorites, value];
     }
 
-    @action
-    addPendingAsFavorite() {
-        this.addFavorite(this.pendingValue);
-    }
-
     @action
     removeFavorite(value: string[]) {
         this.favorites = this.favorites.filter(v => !isEqual(v, value));

package/core/HoistAppModel.ts

@@ -99,7 +99,6 @@ export class HoistAppModel extends HoistModel {
         const XH = window['XH'];
         await XH.prefService.clearAllAsync();
         XH.localStorageService.clear();
-        XH.sessionStorageService.clear();
     }
 }
 

package/core/exception/ExceptionHandler.ts

@@ -202,7 +202,7 @@ export class ExceptionHandler {
             XH.track({
                 category: 'Client Error',
                 severity: exception.isRoutine ? 'INFO' : 'ERROR',
-                message: exception.message || 'Client Error',
+                message: exception.message ?? 'Client Error',
                 correlationId: exception.correlationId,
                 data,
                 logData: ['userAlerted']

package/core/types/Interfaces.ts

@@ -6,8 +6,8 @@
  */
 
 import {RuleLike} from '@xh/hoist/data';
+import {MouseEvent, ReactElement, ReactNode, isValidElement} from 'react';
 import {isString} from 'lodash';
-import {isValidElement, MouseEvent, ReactElement, ReactNode} from 'react';
 import {LoadSpec} from '../load';
 import {Intent, PlainObject, Thunkable} from './Types';
 
@@ -224,7 +224,7 @@ export interface TrackOptions {
     correlationId?: string;
 
     /** App-supplied data to save along with track log.*/
-    data?: PlainObject | Array<unknown>;
+    data?: PlainObject | PlainObject[];
 
     /**
      * Set true to log on the server all primitive values in the 'data' property.

package/desktop/cmp/button/AppMenuButton.ts

@@ -4,13 +4,17 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {hoistCmp, MenuItemLike, XH} from '@xh/hoist/core';
+import {MenuItemProps} from '@blueprintjs/core';
+import {hoistCmp, isMenuItem, MenuItemLike, XH} from '@xh/hoist/core';
 import {ButtonProps, button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
-import {menu, popover} from '@xh/hoist/kit/blueprint';
-import {parseMenuItems} from '@xh/hoist/utils/impl';
+import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
+import {wait} from '@xh/hoist/promise';
+import {filterConsecutiveMenuSeparators, isOmitted} from '@xh/hoist/utils/impl';
 import {withDefault} from '@xh/hoist/utils/js';
+import {clone, isEmpty} from 'lodash';
+import {ReactNode} from 'react';
 
 export interface AppMenuButtonProps extends ButtonProps {
     /**
@@ -172,3 +176,42 @@ function buildMenuItems(props: AppMenuButtonProps) {
 
     return parseMenuItems([...extraItems, '-', ...defaultItems]);
 }
+
+function parseMenuItems(items: MenuItemLike[]): ReactNode[] {
+    items = items.map(item => {
+        if (!isMenuItem(item)) return item;
+
+        item = clone(item);
+        item.items = clone(item.items);
+        item.prepareFn?.(item);
+        return item;
+    });
+
+    return items
+        .filter(it => !isMenuItem(it) || (!it.hidden && !isOmitted(it)))
+        .filter(filterConsecutiveMenuSeparators())
+        .map(item => {
+            if (item === '-') return menuDivider();
+            if (!isMenuItem(item)) return item;
+
+            const {actionFn} = item;
+
+            // Create menuItem from config
+            const cfg: MenuItemProps = {
+                text: item.text,
+                icon: item.icon,
+                intent: item.intent,
+                className: item.className,
+                onClick: actionFn ? e => wait().then(() => actionFn(e)) : null, // do async to allow menu to close
+                disabled: item.disabled
+            };
+
+            // Recursively parse any submenus
+            if (!isEmpty(item.items)) {
+                cfg.children = parseMenuItems(item.items);
+                cfg.popoverProps = {openOnTargetFocus: false};
+            }
+
+            return menuItem(cfg);
+        });
+}

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -22,6 +22,11 @@
         color: var(--xh-text-color-muted);
       }
     }
+
+    // We must account for the favorites icon when eliding text
+    &--with-favorites {
+      padding-right: 30px !important;
+    }
   }
 
   // Outer box is sized via layoutSupport - all nested inner elements should stretch to fill.
@@ -34,22 +39,6 @@
     position: relative;
   }
 
-  &-popover {
-    // 60/40 split in favor of favorites in left/right orientation
-    &--faves-right,
-    &--faves-left {
-      .xh-grouping-chooser__editor {
-        width: 40%;
-      }
-    }
-
-    &--faves-disabled {
-      .xh-grouping-chooser__editor {
-        flex: 1;
-      }
-    }
-  }
-
   &__list {
     margin-bottom: var(--xh-pad-half-px);
     background-color: var(--xh-bg-alt);
@@ -127,47 +116,53 @@
     }
   }
 
-  &__favorites {
-    &--top {
-      border-bottom: 1px solid var(--xh-popup-border-color);
-    }
+  &__btn-row {
+    min-height: unset !important;
+    padding: 2px var(--xh-tbar-item-pad-px);
+  }
 
-    &--right {
-      flex: 1;
-      border-left: 1px solid var(--xh-popup-border-color);
+  &__favorite-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 20px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    color: var(--xh-text-color-muted);
+
+    &:hover {
+      color: var(--xh-text-color);
     }
 
-    &--bottom {
-      border-top: 1px solid var(--xh-popup-border-color);
+    .xh-toolbar--compact & {
+      height: 15px;
     }
 
-    &--left {
-      flex: 1;
-      border-right: 1px solid var(--xh-popup-border-color);
+    // Matched to FilterChooser equivalent.
+    & > .svg-inline--fa {
+      width: 12px;
     }
+  }
 
-    --xh-menu-border: none;
+  &__favorite {
+    align-items: center;
+    max-width: 50vw;
 
-    .bp5-menu {
-      padding: 0;
+    .xh-button {
+      padding: 0 !important;
+      min-width: 20px !important;
+      min-height: 20px !important;
+      visibility: hidden;
     }
 
-    &__favorite {
-      align-items: center;
+    &:hover {
+      background-color: var(--xh-bg-highlight);
 
       .xh-button {
-        padding: 0 !important;
-        min-width: 20px !important;
-        min-height: 20px !important;
-        visibility: hidden;
-      }
-
-      &:hover {
-        background-color: var(--xh-bg-highlight);
-
-        .xh-button {
-          visibility: unset;
-        }
+        visibility: unset;
       }
     }
   }