@xh/hoist 74.1.2 → 75.0.0-SNAPSHOT.1749666833237

package/mobile/cmp/grouping/GroupingChooser.scss

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

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} from '@xh/hoist/cmp/layout';
+import {box, div, filler, hbox, placeholder, span, vbox, vframe} 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,10 +20,14 @@ 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;
 }
 
 /**
@@ -36,7 +40,15 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
     className: 'xh-grouping-chooser',
 
     render(
-        {model, className, dialogTitle = 'Choose Group By', emptyText = 'Ungrouped', ...rest},
+        {
+            model,
+            className,
+            emptyText = 'Ungrouped',
+            popoverWidth = 270,
+            popoverMinHeight,
+            popoverTitle = 'Group By',
+            ...rest
+        },
         ref
     ) {
         const {value, allowEmpty} = model,
@@ -48,55 +60,74 @@ 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()
                 }),
-                dialogCmp({dialogTitle, emptyText})
+                favoritesButton()
             ]
         });
     }
 });
 
-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()
-                })
-            ]
+//---------------------------
+// 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()
+                      })
+                  ]
         });
     }
-});
+);
 
 //------------------
 // Editor
 //------------------
 const editor = hoistCmp.factory({
     render({emptyText}) {
-        return panel({
-            className: 'xh-grouping-chooser__editor',
-            scrollable: true,
-            items: [dimensionList({emptyText}), addDimensionControl()]
-        });
+        return vbox(dimensionList({emptyText}), addDimensionControl());
     }
 });
 
@@ -191,7 +222,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,
@@ -216,37 +247,35 @@ function getDimOptions(dims, model) {
 //------------------
 // Favorites
 //------------------
-const favoritesChooser = hoistCmp.factory<GroupingChooserModel>({
+const favoritesButton = hoistCmp.factory<GroupingChooserModel>({
     render({model}) {
-        const {favoritesOptions: options, isAddFavoriteEnabled} = model,
-            items = isEmpty(options)
-                ? [placeholder('No favorites saved.')]
-                : options.map(it => favoriteItem(it));
-
-        return panel({
-            title: 'Favorites',
+        if (!model.persistFavorites) return null;
+        return button({
             icon: Icon.favorite(),
-            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()
-                })
-            ]
+            minimal: true,
+            className: 'xh-grouping-chooser__favorite-button',
+            onClick: () => model.toggleFavoritesMenu()
         });
     }
 });
 
-const favoriteItem = hoistCmp.factory<GroupingChooserModel>({
+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>({
     render({model, value, label}) {
         return hbox({
-            className: 'xh-grouping-chooser__favorites__favorite',
+            className: 'xh-grouping-chooser__favorite',
             items: [
                 button({
                     text: label,
@@ -254,7 +283,7 @@ const favoriteItem = hoistCmp.factory<GroupingChooserModel>({
                     flex: 1,
                     onClick: () => {
                         model.setValue(value);
-                        model.closeEditor();
+                        model.closePopover();
                     }
                 }),
                 button({

package/mobile/cmp/panel/DialogPanel.scss

@@ -23,11 +23,6 @@
       & > .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": "74.1.2",
+  "version": "75.0.0-SNAPSHOT.1749666833237",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/TrackService.ts

@@ -132,11 +132,10 @@ export class TrackService extends HoistService {
         if (options.logData !== undefined) ret.logData = options.logData;
         if (options.elapsed !== undefined) ret.elapsed = options.elapsed;
 
-        const {maxDataLength} = this.conf,
-            dataLength = JSON.stringify(ret.data)?.length ?? 0;
-        if (dataLength > maxDataLength) {
+        const {maxDataLength} = this.conf;
+        if (ret.data?.length > maxDataLength) {
             this.logWarn(
-                `Track log includes ${dataLength} chars of JSON data`,
+                `Track log includes ${ret.data.length} chars of JSON data`,
                 `exceeds limit of ${maxDataLength}`,
                 'data will not be persisted',
                 options.data