@xh/hoist 74.0.0 → 74.1.0

package/CHANGELOG.md

@@ -1,22 +1,40 @@
 # Changelog
 
+## v74.1.0 - 2025-06-30
+
+### 🎁 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,7 +8,10 @@ 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. */
+    /**
+     * 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;
@@ -47,7 +50,6 @@ 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;
@@ -55,12 +57,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;
-    toggleFavoritesMenu(): void;
-    closePopover(): void;
+    closeEditor(): void;
     addPendingDim(dimName: string): void;
     replacePendingDimAtIdx(dimName: string, idx: number): void;
     removePendingDimAtIdx(idx: number): void;
@@ -76,6 +78,7 @@ export declare class GroupingChooserModel extends HoistModel {
     }[];
     setFavorites(favorites: string[][]): void;
     addFavorite(value: string[]): void;
+    addPendingAsFavorite(): void;
     removeFavorite(value: string[]): void;
     isFavorite(value: string[]): boolean;
     private initPersist;

package/build/types/cmp/viewmanager/ViewInfo.d.ts

@@ -15,15 +15,19 @@ export declare class ViewInfo {
     readonly description: string;
     /** User owning this view. Null if the view is global.*/
     readonly owner: string;
-    /** Is the owner making this view accessible to others? Always true for global views. */
+    /**
+     * True if the owner (which can be the current user) has made this view accessible to all other
+     * users. Note always `false` for global views, to better distinguish the two sharing models.
+     */
     readonly isShared: boolean;
     /** True if this view is global and visible to all users. */
     readonly isGlobal: boolean;
     /** Optional group name used for bucketing this view in display. */
     readonly group: string;
     /**
-     * Should this view be pinned by users by default?
-     * This value is intended to be used for global views only.
+     * True if this view should be pinned by default to all users' menus, where it will appear
+     * unless the user has explicitly unpinned it. Only applicable for global views, can be enabled
+     * by view managers to promote especially important global views and ensure users see them.
      */
     readonly isDefaultPinned: boolean;
     /**

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

@@ -1,7 +1,6 @@
 import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
-import { ReactElement } from 'react';
 import './GroupingChooser.scss';
 export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel> {
     /** Text to represent empty state (i.e. value = null or []) */
@@ -12,12 +11,13 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     popoverPosition?: 'bottom' | 'top';
     /** Title for popover (default "GROUP BY") or null to suppress. */
     popoverTitle?: string;
-    /** Width in pixels of the popover menu itself. */
+    /**
+     * Width in pixels of the popover menu itself.
+     * If unspecified, will default based on whether favorites are enabled.
+     */
     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/viewmanager/ViewManager.d.ts

@@ -1,26 +1,42 @@
-import { HoistProps } from '@xh/hoist/core';
+import { HoistProps, MenuItemLike } from '@xh/hoist/core';
 import { ViewManagerModel } from '@xh/hoist/cmp/viewmanager';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
+import { ReactElement } from 'react';
 import './ViewManager.scss';
-/**
- * Visibility options for save/revert button.
- *
- * 'never' to hide button.
- * 'whenDirty' to only show when persistence state is dirty and button is therefore enabled.
- * 'always' will always show button.
- */
-export type ViewManagerStateButtonMode = 'whenDirty' | 'always' | 'never';
 export interface ViewManagerProps extends HoistProps<ViewManagerModel> {
     menuButtonProps?: Partial<ButtonProps>;
     saveButtonProps?: Partial<ButtonProps>;
     revertButtonProps?: Partial<ButtonProps>;
+    /** Button icon when on the default (in-code state) view. Default `Icon.bookmark`. */
+    defaultViewIcon?: ReactElement;
+    /** Button icon when the selected view is owned by the current user. Default `Icon.bookmark`. */
+    ownedViewIcon?: ReactElement;
+    /** Button icon when the selected view is shared by another user. Default `Icon.users`. */
+    sharedViewIcon?: ReactElement;
+    /** Button icon when the selected view is globally shared. Default `Icon.globe`. */
+    globalViewIcon?: ReactElement;
     /** Default 'whenDirty' */
     showSaveButton?: ViewManagerStateButtonMode;
     /** Default 'never' */
     showRevertButton?: ViewManagerStateButtonMode;
-    /** Side the save and revert buttons should appear on (default 'right') */
+    /** 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:
+ *      'never' to always hide - user must save/revert via menu.
+ *      'whenDirty' (default) to show only when view state is dirty and the button is enabled.
+ *      'always' to always show, including when view not dirty and the button is disabled.
+ *          Useful to avoid jumpiness in toolbar layouts.
+ */
+export type ViewManagerStateButtonMode = 'whenDirty' | 'always' | 'never';
 /**
  * Desktop ViewManager component - a button-based menu for saving and swapping between named
  * bundles of persisted component state (e.g. grid views, dashboards, and similar).

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

@@ -3,14 +3,10 @@ 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/MenuItems.d.ts

@@ -0,0 +1,13 @@
+import { MenuItemLike } from '@xh/hoist/core';
+import { ReactNode } from 'react';
+/**
+ * Parse MenuItem configs into Blueprint MenuItems.
+ *
+ * Note this is currently used in a few limited places and is not generally applied to all menu-
+ * like components in Hoist. In particular, it is not used by the `menu` component re-exported from
+ * Blueprint. See https://github.com/xh/hoist-react/issues/2400 covering TBD work to more fully
+ * standardize a Hoist menu component that might then incorporate this processing.
+ *
+ * @internal
+ */
+export declare function parseMenuItems(items: MenuItemLike[]): ReactNode[];

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

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

package/cmp/grouping/GroupingChooserModel.ts

@@ -23,7 +23,10 @@ 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. */
+    /**
+     * 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. */
@@ -74,7 +77,6 @@ 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
@@ -105,6 +107,15 @@ 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 = [],
@@ -169,21 +180,13 @@ export class GroupingChooserModel extends HoistModel {
     toggleEditor() {
         this.pendingValue = this.value;
         this.editorIsOpen = !this.editorIsOpen;
-        this.favoritesIsOpen = false;
     }
 
     @action
-    toggleFavoritesMenu() {
-        this.favoritesIsOpen = !this.favoritesIsOpen;
+    closeEditor() {
         this.editorIsOpen = false;
     }
 
-    @action
-    closePopover() {
-        this.editorIsOpen = false;
-        this.favoritesIsOpen = false;
-    }
-
     //-------------------------
     // Value handling
     //-------------------------
@@ -224,7 +227,7 @@ export class GroupingChooserModel extends HoistModel {
         if (!isEqual(value, pendingValue) && this.validateValue(pendingValue)) {
             this.setValue(pendingValue);
         }
-        this.closePopover();
+        this.closeEditor();
     }
 
     validateValue(value: string[]) {
@@ -274,6 +277,11 @@ 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/cmp/viewmanager/ViewInfo.ts

@@ -29,7 +29,10 @@ export class ViewInfo {
     /** User owning this view. Null if the view is global.*/
     readonly owner: string;
 
-    /** Is the owner making this view accessible to others? Always true for global views. */
+    /**
+     * True if the owner (which can be the current user) has made this view accessible to all other
+     * users. Note always `false` for global views, to better distinguish the two sharing models.
+     */
     readonly isShared: boolean;
 
     /** True if this view is global and visible to all users. */
@@ -39,8 +42,9 @@ export class ViewInfo {
     readonly group: string;
 
     /**
-     * Should this view be pinned by users by default?
-     * This value is intended to be used for global views only.
+     * True if this view should be pinned by default to all users' menus, where it will appear
+     * unless the user has explicitly unpinned it. Only applicable for global views, can be enabled
+     * by view managers to promote especially important global views and ensure users see them.
      */
     readonly isDefaultPinned: boolean;
 

package/core/HoistAppModel.ts

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

package/desktop/cmp/button/AppMenuButton.ts

@@ -4,17 +4,13 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {MenuItemProps} from '@blueprintjs/core';
-import {hoistCmp, isMenuItem, MenuItemLike, XH} from '@xh/hoist/core';
+import {hoistCmp, 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, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
-import {wait} from '@xh/hoist/promise';
-import {filterConsecutiveMenuSeparators, isOmitted} from '@xh/hoist/utils/impl';
+import {menu, popover} from '@xh/hoist/kit/blueprint';
+import {parseMenuItems} 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 {
     /**
@@ -176,42 +172,3 @@ 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,11 +22,6 @@
         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.
@@ -39,6 +34,10 @@
     position: relative;
   }
 
+  &__editor {
+    flex: 1;
+  }
+
   &__list {
     margin-bottom: var(--xh-pad-half-px);
     background-color: var(--xh-bg-alt);
@@ -121,48 +120,38 @@
     padding: 2px var(--xh-tbar-item-pad-px);
   }
 
-  &__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);
-    }
+  &__favorites {
+    flex: 1;
+    border-left: 1px solid var(--xh-popup-border-color);
 
-    .xh-toolbar--compact & {
-      height: 15px;
-    }
+    --xh-menu-border: none;
 
-    // Matched to FilterChooser equivalent.
-    & > .svg-inline--fa {
-      width: 12px;
+    .bp5-menu {
+      padding: 0;
     }
-  }
-
-  &__favorite {
-    align-items: center;
-    max-width: 50vw;
 
-    .xh-button {
-      padding: 0 !important;
-      min-width: 20px !important;
-      min-height: 20px !important;
-      visibility: hidden;
+    &__add-btn {
+      flex: none;
+      margin: var(--xh-pad-px) auto;
     }
 
-    &:hover {
-      background-color: var(--xh-bg-highlight);
+    &__favorite {
+      align-items: center;
+      max-width: 50vw;
 
       .xh-button {
-        visibility: unset;
+        padding: 0 !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        visibility: hidden;
+      }
+
+      &:hover {
+        background-color: var(--xh-bg-highlight);
+
+        .xh-button {
+          visibility: unset;
+        }
       }
     }
   }