@xh/hoist 75.0.0-SNAPSHOT.1751070190067 → 75.0.0-SNAPSHOT.1751290908617

package/CHANGELOG.md

@@ -2,8 +2,17 @@
 
 ## v75.0.0-SNAPSHOT - unreleased
 
+## 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

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/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/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/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/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;
+        }
       }
     }
   }

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -5,18 +5,17 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {box, div, filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
+import {box, div, filler, fragment, hbox, hframe, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
-import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
+import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
-import {elemWithin, getTestId, TEST_ID} from '@xh/hoist/utils/js';
+import {elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
-import {ReactElement} from 'react';
 import classNames from 'classnames';
 import {compact, isEmpty, sortBy} from 'lodash';
 import './GroupingChooser.scss';
@@ -34,14 +33,14 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
     /** 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;
 }
 
 /**
@@ -60,24 +59,22 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             model,
             className,
             emptyText = 'Ungrouped',
-            popoverWidth = 250,
+            popoverWidth,
             popoverMinHeight,
             popoverTitle = 'Group By',
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
-            favoritesIcon,
             ...rest
         },
         ref
     ) {
-        const {editorIsOpen, favoritesIsOpen, persistFavorites, value, allowEmpty} = model,
-            isOpen = editorIsOpen || favoritesIsOpen,
+        const {editorIsOpen, value, allowEmpty, persistFavorites} = model,
+            isOpen = editorIsOpen,
             label = isEmpty(value) && allowEmpty ? emptyText : model.getValueLabel(value),
-            [layoutProps, buttonProps] = splitLayoutProps(rest),
-            favoritesMenuTestId = getTestId(testId, 'favorites-menu'),
-            favoritesIconTestId = getTestId(testId, 'favorites-icon'),
-            editorTestId = getTestId(testId, 'editor');
+            [layoutProps, buttonProps] = splitLayoutProps(rest);
+
+        popoverWidth = popoverWidth || (persistFavorites ? 500 : 250);
 
         return box({
             ref,
@@ -87,10 +84,9 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                 isOpen,
                 popoverRef: model.popoverRef,
                 popoverClassName: 'xh-grouping-chooser-popover xh-popup--framed',
-                // right align favorites popover to match star icon
-                // left align editor to keep in place when button changing size when commitOnChange: true
-                position: favoritesIsOpen ? `${popoverPosition}-right` : `${popoverPosition}-left`,
-                minimal: styleButtonAsInput,
+                // Left align editor to keep in place when button changing size when commitOnChange: true
+                position: `${popoverPosition}-left`,
+                minimal: false,
                 item: fragment(
                     button({
                         text: label,
@@ -98,34 +94,27 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         tabIndex: -1,
                         className: classNames(
                             'xh-grouping-chooser-button',
-                            styleButtonAsInput ? 'xh-grouping-chooser-button--as-input' : null,
-                            persistFavorites ? 'xh-grouping-chooser-button--with-favorites' : null
+                            styleButtonAsInput ? 'xh-grouping-chooser-button--as-input' : null
                         ),
                         minimal: styleButtonAsInput,
                         ...buttonProps,
                         onClick: () => model.toggleEditor(),
                         testId
-                    }),
-                    favoritesIconCmp({testId: favoritesIconTestId, favoritesIcon})
+                    })
                 ),
-                content: favoritesIsOpen
-                    ? favoritesMenu({testId: favoritesMenuTestId})
-                    : editor({
-                          popoverWidth,
-                          popoverMinHeight,
-                          popoverTitle,
-                          emptyText,
-                          testId: editorTestId
-                      }),
+                content: popoverCmp({
+                    popoverWidth,
+                    popoverMinHeight,
+                    popoverTitle,
+                    emptyText,
+                    testId
+                }),
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&
                         nextOpenState === false &&
                         e?.target &&
-                        !elemWithin(
-                            e.target as HTMLElement,
-                            'xh-grouping-chooser-button--with-favorites'
-                        )
+                        !elemWithin(e.target as HTMLElement, 'xh-grouping-chooser-button')
                     ) {
                         model.commitPendingValueAndClose();
                     }
@@ -138,18 +127,38 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
 //------------------
 // Editor
 //------------------
-const editor = hoistCmp.factory<GroupingChooserModel>({
-    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
+const popoverCmp = hoistCmp.factory<GroupingChooserModel>({
+    render({model, popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
         return panel({
             width: popoverWidth,
             minHeight: popoverMinHeight,
+            items: hframe({
+                items: [
+                    editor({
+                        popoverTitle,
+                        emptyText,
+                        testId: getTestId(testId, 'editor')
+                    }),
+                    favoritesChooser({
+                        omit: !model.persistFavorites,
+                        testId: getTestId(testId, 'favorites')
+                    })
+                ]
+            })
+        });
+    }
+});
+
+const editor = hoistCmp.factory<GroupingChooserModel>({
+    render({popoverTitle, emptyText, testId}) {
+        return vbox({
+            className: 'xh-grouping-chooser__editor',
+            testId,
             items: [
                 div({className: 'xh-popup__title', item: popoverTitle, omit: !popoverTitle}),
                 dimensionList({emptyText}),
-                addDimensionControl(),
-                filler()
-            ],
-            testId
+                addDimensionControl()
+            ]
         });
     }
 });
@@ -283,7 +292,7 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
                     // ensure the Select loses its internal input state.
                     key: JSON.stringify(options),
                     options,
-                    placeholder: 'Add...',
+                    placeholder: 'Add level...',
                     flex: 1,
                     width: null,
                     hideDropdownIndicator: true,
@@ -320,47 +329,28 @@ function getDimOptions(dims, model) {
 //------------------
 // Favorites
 //------------------
-const favoritesIconCmp = hoistCmp.factory<GroupingChooserModel>({
-    render({model, testId, favoritesIcon}) {
-        if (!model.persistFavorites) return null;
-        return div({
-            item: favoritesIcon ?? Icon.favorite(),
-            className: 'xh-grouping-chooser__favorite-icon',
-            [TEST_ID]: testId,
-            onClick: e => {
-                model.toggleFavoritesMenu();
-                e.stopPropagation();
-            }
-        });
-    }
-});
-
-const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
+const favoritesChooser = hoistCmp.factory<GroupingChooserModel>({
     render({model, testId}) {
-        const options = model.favoritesOptions,
-            isFavorite = model.isFavorite(model.value),
-            omitAdd = isEmpty(model.value) || isFavorite,
-            items = [];
-
-        if (isEmpty(options)) {
-            items.push(menuItem({text: 'No favorites saved...', disabled: true}));
-        } else {
-            items.push(...options.map(it => favoriteMenuItem(it)));
-        }
-
-        items.push(
-            menuDivider({omit: omitAdd}),
-            menuItem({
-                icon: Icon.add({intent: 'success'}),
-                text: 'Add current',
-                omit: omitAdd,
-                onClick: () => model.addFavorite(model.value)
-            })
-        );
+        const {favoritesOptions: options, isAddFavoriteEnabled} = model,
+            items = isEmpty(options)
+                ? [menuItem({text: 'No favorites saved.', disabled: true})]
+                : options.map(it => favoriteMenuItem(it));
 
         return vbox({
+            className: 'xh-grouping-chooser__favorites',
             testId,
-            items: [div({className: 'xh-popup__title', item: 'Favorites'}), menu({items})]
+            items: [
+                div({className: 'xh-popup__title', item: 'Favorites'}),
+                menu({items}),
+                button({
+                    text: 'Add current',
+                    icon: Icon.add({intent: 'success'}),
+                    className: 'xh-grouping-chooser__favorites__add-btn',
+                    outlined: true,
+                    omit: !isAddFavoriteEnabled,
+                    onClick: () => model.addPendingAsFavorite()
+                })
+            ]
         });
     }
 });
@@ -369,7 +359,7 @@ const favoriteMenuItem = hoistCmp.factory<GroupingChooserModel>({
     render({model, value, label}) {
         return menuItem({
             text: label,
-            className: 'xh-grouping-chooser__favorite',
+            className: 'xh-grouping-chooser__favorites__favorite',
             onClick: () => model.setValue(value),
             labelElement: button({
                 icon: Icon.delete(),

package/mobile/appcontainer/FeedbackDialog.ts

@@ -7,6 +7,7 @@
 import {FeedbackDialogModel} from '@xh/hoist/appcontainer/FeedbackDialogModel';
 import {filler} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
+import {Icon} from '@xh/hoist/icon';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {dialog} from '@xh/hoist/mobile/cmp/dialog';
 import {textArea} from '@xh/hoist/mobile/cmp/input';
@@ -41,6 +42,9 @@ export const feedbackDialog = hoistCmp.factory({
                 }),
                 button({
                     text: 'Send',
+                    icon: Icon.mail(),
+                    intent: 'primary',
+                    outlined: true,
                     onClick: () => model.submitAsync()
                 })
             ]

package/mobile/appcontainer/OptionsDialog.ts

@@ -57,8 +57,10 @@ export const optionsDialog = hoistCmp.factory({
                     onClick: () => model.hide()
                 }),
                 button({
-                    text: 'Save',
+                    text: 'Apply',
                     icon: reloadRequired ? Icon.refresh() : Icon.check(),
+                    intent: 'primary',
+                    outlined: true,
                     disabled: !formModel.isDirty,
                     onClick: () => model.saveAsync()
                 })

package/mobile/cmp/grid/impl/ColChooser.ts

@@ -60,7 +60,6 @@ export const [ColChooser, colChooser] = hoistCmp.withFactory<ColChooserProps>({
                     onDragEnd: impl.onDragEnd,
                     items: [
                         panel({
-                            title: 'Visible Columns',
                             className: 'xh-col-chooser__section',
                             scrollable: true,
                             items: [
@@ -119,8 +118,10 @@ export const [ColChooser, colChooser] = hoistCmp.withFactory<ColChooserProps>({
                     onClick: () => model.close()
                 }),
                 button({
-                    text: 'Save',
+                    text: 'Apply',
                     icon: Icon.check(),
+                    intent: 'primary',
+                    outlined: true,
                     onClick: () => {
                         model.commit();
                         model.close();

package/mobile/cmp/grouping/GroupingChooser.scss

@@ -16,18 +16,23 @@
     }
   }
 
+  &__editor {
+    .xh-panel__content {
+      padding: var(--xh-pad-px);
+    }
+  }
+
   &__row {
     display: flex;
     align-items: center;
     background-color: var(--xh-bg);
-    height: 35px;
+    height: 45px;
     flex-shrink: 0;
 
     &__grabber {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 30px;
       width: 30px;
     }
 
@@ -49,30 +54,46 @@
   }
 
   &__add-control {
-    padding: var(--xh-pad-half-px);
+    // Align with already-added level controls.
+    padding: 5px 40px 5px 30px;
   }
 
-  &__favorite {
-    height: 35px;
-    align-items: center;
+  &__favorites {
+    // Fix at 50% of dialog height, preventing panel's default flex:auto
+    flex: none !important;
+    height: 50%;
 
-    .xh-button {
-      justify-content: left;
+    // Section heading style for internal title (like colChooser)
+    .xh-panel-header {
+      background-color: var(--xh-appbar-bg);
+      color: var(--xh-appbar-title-color);
+      padding-left: var(--xh-pad-px);
     }
-  }
-}
 
-.xh-grouping-chooser-popover {
-  .dialog {
-    min-width: unset;
-  }
+    .xh-panel__content {
+      padding: var(--xh-pad-px);
+    }
 
-  .xh-dialog__inner {
-    padding: 0;
-  }
+    // Empty state placeholder - don't flex as it pushes add button down.
+    .xh-placeholder {
+      flex: none;
+      margin: var(--xh-pad-px);
+    }
+
+    // Individual favorite items (hBoxes w/buttons)
+    &__favorite {
+      flex: none !important;
+      height: 35px;
+      align-items: center;
 
-  &__content {
-    padding: 3px var(--xh-pad-half-px);
-    min-width: 240px; // Required to allow for toolbars
+      .xh-button {
+        justify-content: left;
+      }
+    }
+
+    &__add-btn {
+      width: 200px;
+      margin: var(--xh-pad-px) auto;
+    }
   }
 }