@xh/hoist 74.1.0 → 74.1.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## v74.1.2 - 2025-07-03
+
+### 🐞 Bug Fixes
+
+* Fixed `GroupingChooser` layout issue, visible only when favorites are disabled.
+
+## v74.1.1 - 2025-07-02
+
+### 🎁 New Features
+
+* Further refinements to the `GroupingChooser` desktop UI.
+  * Added new props `favoritesSide` and `favoritesTitle`.
+  * Deprecated `popoverTitle` prop - use `editorTitle` instead.
+  * Moved "Save as Favorite" button to a new compact toolbar within the popover.
+
+### 🐞 Bug Fixes
+
+* Fixed a bug where `TrackService` was not properly verifying that tracked `data` was below the
+  configured `maxDataLength` limit.
+
 ## v74.1.0 - 2025-06-30
 
 ### 🎁 New Features

package/build/types/cmp/grouping/GroupingChooserModel.d.ts

@@ -76,6 +76,7 @@ export declare class GroupingChooserModel extends HoistModel {
         value: string[];
         label: string;
     }[];
+    get hasFavorites(): boolean;
     setFavorites(favorites: string[][]): void;
     addFavorite(value: string[]): void;
     addPendingAsFavorite(): void;

package/build/types/core/types/Interfaces.d.ts

@@ -177,7 +177,7 @@ export interface TrackOptions {
     /** Correlation ID to save along with track log. */
     correlationId?: string;
     /** App-supplied data to save along with track log.*/
-    data?: PlainObject | PlainObject[];
+    data?: PlainObject | Array<unknown>;
     /**
      * Set true to log on the server all primitive values in the 'data' property.
      * May also be specified as list of specific property keys that should be logged.

package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts

@@ -1,19 +1,30 @@
 import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
+import { Side } from '@xh/hoist/core';
 import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 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';
-    /** Title for popover (default "GROUP BY") or null to suppress. */
-    popoverTitle?: string;
+    /** @deprecated - use `editorTitle` instead */
+    popoverTitle?: ReactNode;
     /**
      * Width in pixels of the popover menu itself.
-     * If unspecified, will default based on whether favorites are enabled.
+     * If unspecified, will default based on favorites enabled status + side.
      */
     popoverWidth?: number;
     /** True (default) to style target button as an input field - blends better in toolbars. */

package/build/types/desktop/cmp/panel/Panel.d.ts

@@ -44,7 +44,7 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
      */
     tbar?: Some<ReactNode>;
     /**
-     * A toolbar to be docked at the top of the panel.
+     * A toolbar to be docked at the bottom of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
     bbar?: Some<ReactNode>;

package/cmp/grouping/GroupingChooserModel.ts

@@ -266,6 +266,11 @@ export class GroupingChooserModel extends HoistModel {
         );
     }
 
+    @computed
+    get hasFavorites() {
+        return !isEmpty(this.favorites);
+    }
+
     @action
     setFavorites(favorites: string[][]) {
         this.favorites = favorites.filter(v => this.validateValue(v));

package/core/exception/ExceptionHandler.ts

@@ -202,7 +202,7 @@ export class ExceptionHandler {
             XH.track({
                 category: 'Client Error',
                 severity: exception.isRoutine ? 'INFO' : 'ERROR',
-                message: exception.message ?? 'Client Error',
+                message: exception.message || 'Client Error',
                 correlationId: exception.correlationId,
                 data,
                 logData: ['userAlerted']

package/core/types/Interfaces.ts

@@ -6,8 +6,8 @@
  */
 
 import {RuleLike} from '@xh/hoist/data';
-import {MouseEvent, ReactElement, ReactNode, isValidElement} from 'react';
 import {isString} from 'lodash';
+import {isValidElement, MouseEvent, ReactElement, ReactNode} from 'react';
 import {LoadSpec} from '../load';
 import {Intent, PlainObject, Thunkable} from './Types';
 
@@ -224,7 +224,7 @@ export interface TrackOptions {
     correlationId?: string;
 
     /** App-supplied data to save along with track log.*/
-    data?: PlainObject | PlainObject[];
+    data?: PlainObject | Array<unknown>;
 
     /**
      * Set true to log on the server all primitive values in the 'data' property.

package/desktop/cmp/grouping/GroupingChooser.scss

@@ -34,8 +34,20 @@
     position: relative;
   }
 
-  &__editor {
-    flex: 1;
+  &-popover {
+    // 60/40 split in favor of favorites in left/right orientation
+    &--faves-right,
+    &--faves-left {
+      .xh-grouping-chooser__editor {
+        width: 40%;
+      }
+    }
+
+    &--faves-disabled {
+      .xh-grouping-chooser__editor {
+        flex: 1;
+      }
+    }
   }
 
   &__list {
@@ -115,14 +127,24 @@
     }
   }
 
-  &__btn-row {
-    min-height: unset !important;
-    padding: 2px var(--xh-tbar-item-pad-px);
-  }
-
   &__favorites {
-    flex: 1;
-    border-left: 1px solid var(--xh-popup-border-color);
+    &--top {
+      border-bottom: 1px solid var(--xh-popup-border-color);
+    }
+
+    &--right {
+      flex: 1;
+      border-left: 1px solid var(--xh-popup-border-color);
+    }
+
+    &--bottom {
+      border-top: 1px solid var(--xh-popup-border-color);
+    }
+
+    &--left {
+      flex: 1;
+      border-right: 1px solid var(--xh-popup-border-color);
+    }
 
     --xh-menu-border: none;
 
@@ -130,14 +152,8 @@
       padding: 0;
     }
 
-    &__add-btn {
-      flex: none;
-      margin: var(--xh-pad-px) auto;
-    }
-
     &__favorite {
       align-items: center;
-      max-width: 50vw;
 
       .xh-button {
         padding: 0 !important;

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -5,37 +5,62 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {GroupingChooserModel} from '@xh/hoist/cmp/grouping';
-import {box, div, filler, fragment, hbox, hframe, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses} from '@xh/hoist/core';
+import {
+    box,
+    div,
+    filler,
+    fragment,
+    frame,
+    hbox,
+    hframe,
+    placeholder,
+    vbox,
+    vframe
+} from '@xh/hoist/cmp/layout';
+import {hoistCmp, Side, 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 {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
-import {elemWithin, getTestId} from '@xh/hoist/utils/js';
+import {apiDeprecated, elemWithin, getTestId} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, sortBy} from 'lodash';
+import {compact, isEmpty, isNil, isUndefined, 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';
 
-    /** Title for popover (default "GROUP BY") or null to suppress. */
-    popoverTitle?: string;
+    /** @deprecated - use `editorTitle` instead */
+    popoverTitle?: ReactNode;
 
     /**
      * Width in pixels of the popover menu itself.
-     * If unspecified, will default based on whether favorites are enabled.
+     * If unspecified, will default based on favorites enabled status + side.
      */
     popoverWidth?: number;
 
@@ -58,10 +83,13 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
         {
             model,
             className,
+            editorTitle = 'Group By',
             emptyText = 'Ungrouped',
+            favoritesSide = 'right',
+            favoritesTitle = 'Favorites',
             popoverWidth,
             popoverMinHeight,
-            popoverTitle = 'Group By',
+            popoverTitle,
             popoverPosition = 'bottom',
             styleButtonAsInput = true,
             testId,
@@ -72,9 +100,18 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
         const {editorIsOpen, value, allowEmpty, persistFavorites} = model,
             isOpen = editorIsOpen,
             label = isEmpty(value) && allowEmpty ? emptyText : model.getValueLabel(value),
-            [layoutProps, buttonProps] = splitLayoutProps(rest);
+            [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 ? 500 : 250);
+        popoverWidth = popoverWidth || (persistFavorites && !favesTB ? 500 : 250);
 
         return box({
             ref,
@@ -83,7 +120,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
             item: popover({
                 isOpen,
                 popoverRef: model.popoverRef,
-                popoverClassName: 'xh-grouping-chooser-popover xh-popup--framed',
+                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,
@@ -103,10 +140,12 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
                     })
                 ),
                 content: popoverCmp({
+                    editorTitle,
+                    emptyText,
+                    favoritesSide,
+                    favoritesTitle,
                     popoverWidth,
                     popoverMinHeight,
-                    popoverTitle,
-                    emptyText,
                     testId
                 }),
                 onInteraction: (nextOpenState, e) => {
@@ -127,35 +166,63 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
 //------------------
 // Editor
 //------------------
-const popoverCmp = hoistCmp.factory<GroupingChooserModel>({
-    render({model, popoverWidth, popoverMinHeight, popoverTitle, emptyText, testId}) {
+const popoverCmp = hoistCmp.factory<Partial<GroupingChooserProps>>({
+    render({
+        model,
+        editorTitle,
+        emptyText,
+        favoritesSide,
+        favoritesTitle,
+        popoverWidth,
+        popoverMinHeight,
+        testId
+    }) {
+        const {persistFavorites} = model,
+            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 = !persistFavorites ? frame : favesTB ? vframe : hframe;
+
+        if (isFavesFirst) {
+            items.reverse();
+        }
+
         return panel({
+            className: 'xh-grouping-chooser-popover__inner',
             width: popoverWidth,
             minHeight: popoverMinHeight,
-            items: hframe({
-                items: [
-                    editor({
-                        popoverTitle,
-                        emptyText,
-                        testId: getTestId(testId, 'editor')
-                    }),
-                    favoritesChooser({
-                        omit: !model.persistFavorites,
-                        testId: getTestId(testId, 'favorites')
-                    })
-                ]
+            items: itemsContainer({items}),
+            bbar: toolbar({
+                compact: true,
+                omit: !model.persistFavorites,
+                items: [filler(), favoritesAddBtn({testId})]
             })
         });
     }
 });
 
 const editor = hoistCmp.factory<GroupingChooserModel>({
-    render({popoverTitle, emptyText, testId}) {
+    render({editorTitle, emptyText, testId}) {
         return vbox({
             className: 'xh-grouping-chooser__editor',
             testId,
             items: [
-                div({className: 'xh-popup__title', item: popoverTitle, omit: !popoverTitle}),
+                div({className: 'xh-popup__title', item: editorTitle, omit: isNil(editorTitle)}),
                 dimensionList({emptyText}),
                 addDimensionControl()
             ]
@@ -330,26 +397,23 @@ function getDimOptions(dims, model) {
 // Favorites
 //------------------
 const favoritesChooser = hoistCmp.factory<GroupingChooserModel>({
-    render({model, testId}) {
-        const {favoritesOptions: options, isAddFavoriteEnabled} = model,
-            items = isEmpty(options)
-                ? [menuItem({text: 'No favorites saved.', disabled: true})]
-                : options.map(it => favoriteMenuItem(it));
+    render({model, favoritesSide, favoritesTitle, testId}) {
+        const {favoritesOptions: options, hasFavorites} = model;
 
         return vbox({
-            className: 'xh-grouping-chooser__favorites',
+            className: `xh-grouping-chooser__favorites xh-grouping-chooser__favorites--${favoritesSide}`,
             testId,
             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()
-                })
+                div({
+                    className: 'xh-popup__title',
+                    item: favoritesTitle,
+                    omit: isNil(favoritesTitle)
+                }),
+                hasFavorites
+                    ? menu({
+                          items: options.map(it => favoriteMenuItem(it))
+                      })
+                    : placeholder('No favorites saved.')
             ]
         });
     }
@@ -372,3 +436,19 @@ 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 top of the panel.
+     * A toolbar to be docked at the bottom of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
     bbar?: Some<ReactNode>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "74.1.0",
+  "version": "74.1.2",
   "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