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

package/mobile/cmp/grouping/GroupingChooser.ts

@@ -5,14 +5,14 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {box, div, filler, hbox, placeholder, span, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {box, div, filler, hbox, placeholder, span} from '@xh/hoist/cmp/layout';
 import {hoistCmp, uses} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
 import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
-import {dialog} from '@xh/hoist/mobile/cmp/dialog';
 import {select} from '@xh/hoist/mobile/cmp/input';
 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';
@@ -20,14 +20,10 @@ import {compact, isEmpty, sortBy} from 'lodash';
 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;
 }
 
 /**
@@ -40,15 +36,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
     className: 'xh-grouping-chooser',
 
     render(
-        {
-            model,
-            className,
-            emptyText = 'Ungrouped',
-            popoverWidth = 270,
-            popoverMinHeight,
-            popoverTitle = 'Group By',
-            ...rest
-        },
+        {model, className, dialogTitle = 'Choose Group By', emptyText = 'Ungrouped', ...rest},
         ref
     ) {
         const {value, allowEmpty} = model,
@@ -60,74 +48,55 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             className,
             ...layoutProps,
             items: [
-                popoverCmp({popoverTitle, popoverWidth, popoverMinHeight, emptyText}),
                 button({
                     className: 'xh-grouping-chooser-button',
                     item: span(label),
                     ...buttonProps,
                     onClick: () => model.toggleEditor()
                 }),
-                favoritesButton()
+                dialogCmp({dialogTitle, emptyText})
             ]
         });
     }
 });
 
-//---------------------------
-// Popover
-//---------------------------
-const popoverCmp = hoistCmp.factory<GroupingChooserModel>(
-    ({model, popoverTitle, popoverWidth, popoverMinHeight, emptyText}) => {
-        const {editorIsOpen, favoritesIsOpen, isValid, value} = model,
-            isOpen = editorIsOpen || favoritesIsOpen,
-            addFavoriteDisabled = isEmpty(value) || !!model.isFavorite(value);
-
-        return dialog({
-            isOpen,
-            title: favoritesIsOpen ? 'Favorites' : popoverTitle,
-            icon: favoritesIsOpen ? Icon.favorite({prefix: 'fas'}) : Icon.treeList(),
-            className: 'xh-grouping-chooser-popover',
-            content: vframe({
-                className: 'xh-grouping-chooser-popover__content',
-                width: popoverWidth,
-                minHeight: popoverMinHeight,
-                item: favoritesIsOpen ? favoritesMenu() : editor({emptyText})
-            }),
-            onCancel: () => model.closePopover(),
-            buttons: favoritesIsOpen
-                ? [
-                      button({
-                          icon: Icon.add(),
-                          flex: 1,
-                          text: 'Add current',
-                          disabled: addFavoriteDisabled,
-                          onClick: () => model.addFavorite(model.value)
-                      })
-                  ]
-                : [
-                      filler(),
-                      button({
-                          text: 'Cancel',
-                          minimal: true,
-                          onClick: () => model.closePopover()
-                      }),
-                      button({
-                          icon: Icon.check(),
-                          text: 'Apply',
-                          disabled: !isValid,
-                          onClick: () => model.commitPendingValueAndClose()
-                      })
-                  ]
+const dialogCmp = hoistCmp.factory<GroupingChooserModel>({
+    render({model, dialogTitle, emptyText}) {
+        return dialogPanel({
+            isOpen: model.editorIsOpen,
+            title: dialogTitle,
+            icon: Icon.treeList(),
+            items: [editor({emptyText}), favoritesChooser({omit: !model.persistFavorites})],
+            bbar: [
+                filler(),
+                button({
+                    text: 'Cancel',
+                    minimal: true,
+                    onClick: () => model.closeEditor()
+                }),
+                button({
+                    text: 'Apply',
+                    icon: Icon.check(),
+                    intent: 'primary',
+                    outlined: true,
+                    disabled: !model.isValid,
+                    onClick: () => model.commitPendingValueAndClose()
+                })
+            ]
         });
     }
-);
+});
 
 //------------------
 // Editor
 //------------------
 const editor = hoistCmp.factory({
     render({emptyText}) {
-        return vbox(dimensionList({emptyText}), addDimensionControl());
+        return panel({
+            className: 'xh-grouping-chooser__editor',
+            scrollable: true,
+            items: [dimensionList({emptyText}), addDimensionControl()]
+        });
     }
 });
 
@@ -222,7 +191,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,
@@ -247,35 +216,37 @@ function getDimOptions(dims, model) {
 //------------------
 // Favorites
 //------------------
-const favoritesButton = hoistCmp.factory<GroupingChooserModel>({
+const favoritesChooser = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
-        if (!model.persistFavorites) return null;
-        return button({
+        const {favoritesOptions: options, isAddFavoriteEnabled} = model,
+            items = isEmpty(options)
+                ? [placeholder('No favorites saved.')]
+                : options.map(it => favoriteItem(it));
+
+        return panel({
+            title: 'Favorites',
             icon: Icon.favorite(),
-            minimal: true,
-            className: 'xh-grouping-chooser__favorite-button',
-            onClick: () => model.toggleFavoritesMenu()
+            className: 'xh-grouping-chooser__favorites',
+            scrollable: true,
+            items: [
+                ...items,
+                button({
+                    text: 'Add current',
+                    icon: Icon.add({intent: 'success'}),
+                    className: 'xh-grouping-chooser__favorites__add-btn',
+                    outlined: true,
+                    omit: !isAddFavoriteEnabled,
+                    onClick: () => model.addPendingAsFavorite()
+                })
+            ]
         });
     }
 });
 
-const favoritesMenu = hoistCmp.factory<GroupingChooserModel>({
-    render({model}) {
-        const options = model.favoritesOptions;
-
-        if (isEmpty(options)) {
-            return placeholder('No favorites saved...');
-        }
-
-        const items = options.map(it => favoriteMenuItem(it));
-        return div({items});
-    }
-});
-
-const favoriteMenuItem = hoistCmp.factory<GroupingChooserModel>({
+const favoriteItem = hoistCmp.factory<GroupingChooserModel>({
     render({model, value, label}) {
         return hbox({
-            className: 'xh-grouping-chooser__favorite',
+            className: 'xh-grouping-chooser__favorites__favorite',
             items: [
                 button({
                     text: label,
@@ -283,7 +254,7 @@ const favoriteMenuItem = hoistCmp.factory<GroupingChooserModel>({
                     flex: 1,
                     onClick: () => {
                         model.setValue(value);
-                        model.closePopover();
+                        model.closeEditor();
                     }
                 }),
                 button({

package/mobile/cmp/panel/DialogPanel.scss

@@ -23,6 +23,11 @@
       & > .xh-panel {
         width: 100%;
         height: 100%;
+
+        // Additional padding on dialog panel's own header.
+        > .xh-panel-header {
+          padding: 10px;
+        }
       }
     }
   }

package/package.json

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