@xh/hoist 74.0.0 → 74.1.1

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

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": "74.0.0",
+  "version": "74.1.1",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",

package/svc/TrackService.ts

@@ -132,10 +132,11 @@ 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;
-        if (ret.data?.length > maxDataLength) {
+        const {maxDataLength} = this.conf,
+            dataLength = JSON.stringify(ret.data)?.length ?? 0;
+        if (dataLength > maxDataLength) {
             this.logWarn(
-                `Track log includes ${ret.data.length} chars of JSON data`,
+                `Track log includes ${dataLength} chars of JSON data`,
                 `exceeds limit of ${maxDataLength}`,
                 'data will not be persisted',
                 options.data