@xh/hoist 74.1.1 → 75.0.0-SNAPSHOT.1749666833237

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -5,66 +5,43 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {
-    box,
-    div,
-    filler,
-    fragment,
-    hbox,
-    hframe,
-    placeholder,
-    vbox,
-    vframe
-} from '@xh/hoist/cmp/layout';
-import {hoistCmp, Side, uses} from '@xh/hoist/core';
+import {box, div, filler, fragment, hbox, 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 {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';
-import {menu, menuItem, popover} from '@xh/hoist/kit/blueprint';
+import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
-import {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
+import {elemWithin, getTestId, TEST_ID} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
+import {ReactElement} from 'react';
 import classNames from 'classnames';
-import {compact, isEmpty, isNil, isUndefined, sortBy} from 'lodash';
+import {compact, isEmpty, sortBy} from 'lodash';
 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;
+    /** Title for popover (default "GROUP BY") or null to suppress. */
+    popoverTitle?: string;
 
-    /**
-     * Width in pixels of the popover menu itself.
-     * If unspecified, will default based on favorites enabled status + side.
-     */
+    /** 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;
 }
 
 /**
@@ -82,35 +59,25 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
         {
             model,
             className,
-            editorTitle = 'Group By',
             emptyText = 'Ungrouped',
-            favoritesSide = 'right',
-            favoritesTitle = 'Favorites',
-            popoverWidth,
+            popoverWidth = 250,
             popoverMinHeight,
-            popoverTitle,
+            popoverTitle = 'Group By',
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
+            favoritesIcon,
             ...rest
         },
         ref
     ) {
-        const {editorIsOpen, value, allowEmpty, persistFavorites} = model,
-            isOpen = editorIsOpen,
+        const {editorIsOpen, favoritesIsOpen, persistFavorites, value, allowEmpty} = model,
+            isOpen = editorIsOpen || favoritesIsOpen,
             label = isEmpty(value) && allowEmpty ? emptyText : model.getValueLabel(value),
             [layoutProps, buttonProps] = splitLayoutProps(rest),
-            favesClassNameMod = `faves-${persistFavorites ? favoritesSide : 'disabled'}`,
-            favesTB = isTB(favoritesSide);
-
-        if (!isUndefined(popoverTitle)) {
-            apiDeprecated('GroupingChooser.popoverTitle', {
-                msg: `Update to use 'editorTitle' instead`
-            });
-            editorTitle = popoverTitle;
-        }
-
-        popoverWidth = popoverWidth || (persistFavorites && !favesTB ? 500 : 250);
+            favoritesMenuTestId = getTestId(testId, 'favorites-menu'),
+            favoritesIconTestId = getTestId(testId, 'favorites-icon'),
+            editorTestId = getTestId(testId, 'editor');
 
         return box({
             ref,
@@ -119,10 +86,11 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             item: popover({
                 isOpen,
                 popoverRef: model.popoverRef,
-                popoverClassName: `xh-grouping-chooser-popover xh-grouping-chooser-popover--${favesClassNameMod} xh-popup--framed`,
-                // Left align editor to keep in place when button changing size when commitOnChange: true
-                position: `${popoverPosition}-left`,
-                minimal: false,
+                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,
                 item: fragment(
                     button({
                         text: label,
@@ -130,29 +98,34 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                         tabIndex: -1,
                         className: classNames(
                             'xh-grouping-chooser-button',
-                            styleButtonAsInput ? 'xh-grouping-chooser-button--as-input' : null
+                            styleButtonAsInput ? 'xh-grouping-chooser-button--as-input' : null,
+                            persistFavorites ? 'xh-grouping-chooser-button--with-favorites' : null
                         ),
                         minimal: styleButtonAsInput,
                         ...buttonProps,
                         onClick: () => model.toggleEditor(),
                         testId
-                    })
+                    }),
+                    favoritesIconCmp({testId: favoritesIconTestId, favoritesIcon})
                 ),
-                content: popoverCmp({
-                    editorTitle,
-                    emptyText,
-                    favoritesSide,
-                    favoritesTitle,
-                    popoverWidth,
-                    popoverMinHeight,
-                    testId
-                }),
+                content: favoritesIsOpen
+                    ? favoritesMenu({testId: favoritesMenuTestId})
+                    : editor({
+                          popoverWidth,
+                          popoverMinHeight,
+                          popoverTitle,
+                          emptyText,
+                          testId: editorTestId
+                      }),
                 onInteraction: (nextOpenState, e) => {
                     if (
                         isOpen &&
                         nextOpenState === false &&
                         e?.target &&
-                        !elemWithin(e.target as HTMLElement, 'xh-grouping-chooser-button')
+                        !elemWithin(
+                            e.target as HTMLElement,
+                            'xh-grouping-chooser-button--with-favorites'
+                        )
                     ) {
                         model.commitPendingValueAndClose();
                     }
@@ -165,65 +138,18 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
 //------------------
 // Editor
 //------------------
-const popoverCmp = hoistCmp.factory<Partial<GroupingChooserProps>>({
-    render({
-        model,
-        editorTitle,
-        emptyText,
-        favoritesSide,
-        favoritesTitle,
-        popoverWidth,
-        popoverMinHeight,
-        testId
-    }) {
-        const favesTB = isTB(favoritesSide),
-            isFavesFirst = favoritesSide === 'left' || favoritesSide === 'top',
-            items = [
-                editor({
-                    editorTitle,
-                    emptyText,
-                    testId: getTestId(testId, 'editor')
-                }),
-                favoritesChooser({
-                    // Omit if favorites generally disabled, or if none saved yet AND in top/bottom
-                    // orientation - the empty state looks clumsy in that case. Show when empty in
-                    // left/right orientation to avoid large jump in popover width.
-                    omit: !model.persistFavorites || (!model.hasFavorites && favesTB),
-                    favoritesSide,
-                    favoritesTitle,
-                    testId: getTestId(testId, 'favorites')
-                })
-            ],
-            itemsContainer = favesTB ? vframe : hframe;
-
-        if (isFavesFirst) {
-            items.reverse();
-        }
-
+const editor = hoistCmp.factory<GroupingChooserModel>({
+    render({popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
         return panel({
-            className: 'xh-grouping-chooser-popover__inner',
             width: popoverWidth,
             minHeight: popoverMinHeight,
-            items: itemsContainer({items}),
-            bbar: toolbar({
-                compact: true,
-                omit: !model.persistFavorites,
-                items: [filler(), favoritesAddBtn({testId})]
-            })
-        });
-    }
-});
-
-const editor = hoistCmp.factory<GroupingChooserModel>({
-    render({editorTitle, emptyText, testId}) {
-        return vbox({
-            className: 'xh-grouping-chooser__editor',
-            testId,
             items: [
-                div({className: 'xh-popup__title', item: editorTitle, omit: isNil(editorTitle)}),
+                div({className: 'xh-popup__title', item: popoverTitle, omit: !popoverTitle}),
                 dimensionList({emptyText}),
-                addDimensionControl()
-            ]
+                addDimensionControl(),
+                filler()
+            ],
+            testId
         });
     }
 });
@@ -357,7 +283,7 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
                     // ensure the Select loses its internal input state.
                     key: JSON.stringify(options),
                     options,
-                    placeholder: 'Add level...',
+                    placeholder: 'Add...',
                     flex: 1,
                     width: null,
                     hideDropdownIndicator: true,
@@ -394,25 +320,47 @@ function getDimOptions(dims, model) {
 //------------------
 // Favorites
 //------------------
-const favoritesChooser = hoistCmp.factory<GroupingChooserModel>({
-    render({model, favoritesSide, favoritesTitle, testId}) {
-        const {favoritesOptions: options, hasFavorites} = model;
+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>({
+    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)
+            })
+        );
 
         return vbox({
-            className: `xh-grouping-chooser__favorites xh-grouping-chooser__favorites--${favoritesSide}`,
             testId,
-            items: [
-                div({
-                    className: 'xh-popup__title',
-                    item: favoritesTitle,
-                    omit: isNil(favoritesTitle)
-                }),
-                hasFavorites
-                    ? menu({
-                          items: options.map(it => favoriteMenuItem(it))
-                      })
-                    : placeholder('No favorites saved.')
-            ]
+            items: [div({className: 'xh-popup__title', item: 'Favorites'}), menu({items})]
         });
     }
 });
@@ -421,7 +369,7 @@ const favoriteMenuItem = hoistCmp.factory<GroupingChooserModel>({
     render({model, value, label}) {
         return menuItem({
             text: label,
-            className: 'xh-grouping-chooser__favorites__favorite',
+            className: 'xh-grouping-chooser__favorite',
             onClick: () => model.setValue(value),
             labelElement: button({
                 icon: Icon.delete(),
@@ -434,19 +382,3 @@ const favoriteMenuItem = hoistCmp.factory<GroupingChooserModel>({
         });
     }
 });
-
-const favoritesAddBtn = hoistCmp.factory<GroupingChooserModel>({
-    render({model, testId}) {
-        return button({
-            text: 'Save as Favorite',
-            icon: Icon.favorite(),
-            className: 'xh-grouping-chooser__favorites__add-btn',
-            testId: getTestId(testId, 'favorites-add-btn'),
-            omit: !model.persistFavorites,
-            disabled: !model.isAddFavoriteEnabled,
-            onClick: () => model.addPendingAsFavorite()
-        });
-    }
-});
-
-const isTB = (favoritesSide: Side) => favoritesSide === 'top' || favoritesSide === 'bottom';

package/desktop/cmp/panel/Panel.ts

@@ -84,7 +84,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/desktop/cmp/viewmanager/ViewManager.ts

@@ -7,14 +7,13 @@
 
 import {box, fragment, hbox} from '@xh/hoist/cmp/layout';
 import {spinner} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistProps, MenuItemLike, useLocalModel, uses} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, useLocalModel, uses} from '@xh/hoist/core';
 import {ViewManagerModel} from '@xh/hoist/cmp/viewmanager';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import {popover} from '@xh/hoist/kit/blueprint';
 import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import {startCase} from 'lodash';
-import {ReactElement} from 'react';
 import {viewMenu} from './ViewMenu';
 import {ViewManagerLocalModel} from './ViewManagerLocalModel';
 import {manageDialog} from './dialog/ManageDialog';
@@ -22,44 +21,28 @@ import {saveAsDialog} from './dialog/SaveAsDialog';
 
 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 relative to the menu on which save/revert buttons should render. Default 'right'. */
+    /** Side the save and revert buttons should appear on (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).
@@ -77,14 +60,9 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
         menuButtonProps,
         saveButtonProps,
         revertButtonProps,
-        defaultViewIcon = Icon.bookmark(),
-        ownedViewIcon = Icon.bookmark(),
-        sharedViewIcon = Icon.users(),
-        globalViewIcon = Icon.globe(),
         showSaveButton = 'whenDirty',
         showRevertButton = 'never',
-        buttonSide = 'right',
-        extraMenuItems = []
+        buttonSide = 'right'
     }: ViewManagerProps) {
         const {loadModel} = model,
             locModel = useLocalModel(() => new ViewManagerLocalModel(model)),
@@ -92,17 +70,7 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
             revert = revertButton({model: locModel, mode: showRevertButton, ...revertButtonProps}),
             menu = popover({
                 disabled: !locModel.isVisible, // Prevent orphaned popover menu
-                item: menuButton({
-                    model: locModel,
-                    icon: buttonIcon({
-                        model: locModel,
-                        defaultViewIcon,
-                        ownedViewIcon,
-                        sharedViewIcon,
-                        globalViewIcon
-                    }),
-                    ...menuButtonProps
-                }),
+                item: menuButton({model: locModel, ...menuButtonProps}),
                 content: loadModel.isPending
                     ? box({
                           item: spinner({compact: true}),
@@ -111,7 +79,7 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
                           height: 30,
                           width: 30
                       })
-                    : viewMenu({model: locModel, extraMenuItems}),
+                    : viewMenu({model: locModel}),
                 onOpening: () => model.refreshAsync(),
                 placement: 'bottom',
                 popoverClassName: 'xh-view-manager__popover'
@@ -129,13 +97,13 @@ export const [ViewManager, viewManager] = hoistCmp.withFactory<ViewManagerProps>
 });
 
 const menuButton = hoistCmp.factory<ViewManagerLocalModel>({
-    render({model, icon, ...rest}) {
+    render({model, ...rest}) {
         const {view, typeDisplayName, isLoading} = model.parent;
         return button({
             className: 'xh-view-manager__menu-button',
             text: view.isDefault ? `Default ${startCase(typeDisplayName)}` : view.name,
             icon: !isLoading
-                ? icon
+                ? Icon.bookmark()
                 : box({
                       item: spinner({width: 13, height: 13, style: {margin: 'auto'}}),
                       width: 16.25
@@ -147,16 +115,6 @@ const menuButton = hoistCmp.factory<ViewManagerLocalModel>({
     }
 });
 
-const buttonIcon = hoistCmp.factory<ViewManagerLocalModel>({
-    render({model, ownedViewIcon, sharedViewIcon, globalViewIcon, defaultViewIcon}) {
-        const {view} = model.parent;
-        if (view.isOwned) return ownedViewIcon;
-        if (view.isShared) return sharedViewIcon;
-        if (view.isGlobal) return globalViewIcon;
-        return defaultViewIcon;
-    }
-});
-
 const saveButton = hoistCmp.factory<ViewManagerLocalModel>({
     render({model, mode, ...rest}) {
         if (hideStateButton(model, mode)) return null;

package/desktop/cmp/viewmanager/ViewMenu.ts

@@ -11,7 +11,6 @@ import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem} from '@xh/hoist/kit/blueprint';
 import {pluralize} from '@xh/hoist/utils/js';
-import {filterConsecutiveMenuSeparators, parseMenuItems} from '@xh/hoist/utils/impl';
 import {Dictionary} from 'express-serve-static-core';
 import {each, filter, groupBy, isEmpty, isFunction, orderBy, some, startCase} from 'lodash';
 import {ReactNode} from 'react';
@@ -21,16 +20,10 @@ import {ViewManagerLocalModel} from './ViewManagerLocalModel';
  * Default Menu used by ViewManager.
  */
 export const viewMenu = hoistCmp.factory<ViewManagerLocalModel>({
-    render({model, extraMenuItems}) {
+    render({model}) {
         return menu({
             className: 'xh-view-manager__menu',
-            items: [
-                ...getNavMenuItems(model.parent),
-                menuDivider(),
-                ...parseMenuItems(extraMenuItems),
-                menuDivider(),
-                ...getOtherMenuItems(model)
-            ].filter(filterConsecutiveMenuSeparators())
+            items: [...getNavMenuItems(model.parent), menuDivider(), ...getOtherMenuItems(model)]
         });
     }
 });

package/mobile/appcontainer/FeedbackDialog.ts

@@ -7,7 +7,6 @@
 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';
@@ -42,9 +41,6 @@ export const feedbackDialog = hoistCmp.factory({
                 }),
                 button({
                     text: 'Send',
-                    icon: Icon.mail(),
-                    intent: 'primary',
-                    outlined: true,
                     onClick: () => model.submitAsync()
                 })
             ]

package/mobile/appcontainer/OptionsDialog.ts

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

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

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