@xh/hoist 75.0.0-SNAPSHOT.1753115287677 → 75.0.0-SNAPSHOT.1753198948130

package/CHANGELOG.md

@@ -4,13 +4,15 @@
 
 ### 🎁 New Features
 
-* Added new `GridModel.expandToLevel` config to control the expansion state of tree/grouped grids.
+* Added new `GridModel.expandLevel` config to control the expansion state of tree/grouped grids.
     * Replaces the use of the `agOptions.groupDefaultExpanded` on the component.
     * The most recently expanded level is persistable with other grid state.
     * The default grid context menu now supports a new item to allow users to expand/collapse out to
       a specific level/depth. Set `GridModel.levelLabels` to activate this feature.
 * Added new `GroupingChooserModel.sortDimensions` config. Set to `false` to respect the order in
   which `dimensions` are provided to the model.
+* The usage of the `RelativeTimestamp` component has been streamlined by deprecating the `options`
+  prop.  All `RelativeTimestampOptions` are now supported by this component as top-level props.
 
 ### 🐞 Bug Fixes
 

package/admin/tabs/activity/tracking/ActivityTrackingModel.ts

@@ -429,7 +429,7 @@ export class ActivityTrackingModel extends HoistModel implements ActivityDetailP
             exportOptions: {filename: exportFilename('activity-summary')},
             emptyText: 'No activity reported...',
             sortBy: ['cubeLabel'],
-            expandToLevel: 1,
+            expandLevel: 1,
             levelLabels: () => ['Total', ...this.groupingChooserModel.valueDisplayNames],
             columns: [
                 {

package/admin/tabs/clients/activity/ClientDetailPanel.ts

@@ -40,11 +40,12 @@ const clientDetail = hoistCmp.factory<ClientDetailModel>(({model}) => {
                         items: [
                             relativeTimestamp({
                                 timestamp: data.createdTime,
-                                options: {prefix: 'Session established'}
+                                prefix: 'Session established'
                             }),
                             relativeTimestamp({
                                 timestamp: data.lastReceivedTime,
-                                options: {prefix: 'Last heartbeat', emptyResult: 'No heartbeat yet'}
+                                prefix: 'Last heartbeat',
+                                emptyResult: 'No heartbeat yet'
                             })
                         ]
                     })

package/admin/tabs/cluster/objects/ClusterObjectsModel.ts

@@ -43,7 +43,7 @@ export class ClusterObjectsModel extends HoistModel {
     @managed gridModel = new GridModel({
         selModel: 'multiple',
         treeMode: true,
-        expandToLevel: 2,
+        expandLevel: 2,
         autosizeOptions: {mode: 'managed', includeCollapsedChildren: true},
         enableExport: true,
         exportOptions: {filename: exportFilenameWithDate('cluster-objects'), columns: 'ALL'},

package/admin/tabs/general/alertBanner/AlertBannerPanel.ts

@@ -148,11 +148,8 @@ const formPanel = hoistCmp.factory<AlertBannerModel>(({model}) => {
                             field: 'expires',
                             info: relativeTimestamp({
                                 timestamp: formModel.values.expires,
-                                options: {
-                                    allowFuture: true,
-                                    emptyResult:
-                                        'Set a date & time to automatically hide this banner.'
-                                }
+                                allowFuture: true,
+                                emptyResult: 'Set a date & time to automatically hide this banner.'
                             }),
                             item: dateInput({
                                 enableClear: true,

package/build/types/cmp/grid/GridModel.d.ts

@@ -58,7 +58,7 @@ export interface GridConfig {
      * Depth level to expand to on initial load. 0 = all collapsed, 1 = top level expanded, etc.
      * Defaults to 0 for tree grids (i.e. treeMode = true), 1 for standard grouped grids.
      */
-    expandToLevel?: number;
+    expandLevel?: number;
     /** True (default) to show a count of group member rows within each full-width group row. */
     showGroupRowCounts?: boolean;
     /** Size of text in grid.  If undefined, will default and bind to `XH.sizingMode`. */
@@ -261,7 +261,7 @@ export declare class GridModel extends HoistModel {
     expandState: any;
     sortBy: GridSorter[];
     groupBy: string[];
-    expandToLevel: number;
+    expandLevel: number;
     get persistableColumnState(): ColumnState[];
     showSummary: boolean | VSide;
     emptyText: ReactNode;
@@ -435,7 +435,7 @@ export declare class GridModel extends HoistModel {
     /** Collapse all parent rows in grouped or tree grid. */
     collapseAll(): void;
     /** Expand all parent rows in grouped or tree grid to the specified level. */
-    setExpandToLevel(level: number): void;
+    expandToLevel(level: number): void;
     /**
      * Sort this grid.
      * This method is a no-op if provided any sorters without a corresponding column.

package/build/types/cmp/relativetimestamp/RelativeTimestamp.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, HoistProps } from '@xh/hoist/core';
-interface RelativeTimestampProps extends HoistProps, BoxProps {
+interface RelativeTimestampProps extends HoistProps, BoxProps, RelativeTimestampOptions {
     /**
      * Property on context model containing timestamp.
      * Specify as an alternative to direct `timestamp` prop (and minimize parent re-renders).
@@ -7,7 +7,11 @@ interface RelativeTimestampProps extends HoistProps, BoxProps {
     bind?: string;
     /** Date or milliseconds representing the starting time / time to compare. See also `bind`. */
     timestamp?: Date | number;
-    /** Formatting options */
+    /**
+     * Formatting options.
+     *
+     * @deprecated - these options should be spread into this object directly.
+     */
     options?: RelativeTimestampOptions;
 }
 export interface RelativeTimestampOptions {

package/build/types/cmp/zoneGrid/ZoneGridModel.d.ts

@@ -73,7 +73,7 @@ export interface ZoneGridConfig {
     /** Column ID(s) by which to do full-width grouping. */
     groupBy?: Some<string>;
     /** Group level to expand to on initial load. 0 = all collapsed, 1 = only top level expanded. */
-    expandToLevel?: number;
+    expandLevel?: number;
     /** True (default) to show a count of group member rows within each full-width group row. */
     showGroupRowCounts?: boolean;
     /** True to highlight the currently hovered row. */

package/cmp/grid/Grid.ts

@@ -246,7 +246,7 @@ export class GridLocalModel extends HoistModel {
             navigateToNextCell: this.navigateToNextCell,
             processCellForClipboard: this.processCellForClipboard,
             initialGroupOrderComparator: model.groupSortFn ? this.groupSortComparator : undefined,
-            groupDefaultExpanded: model.expandToLevel,
+            groupDefaultExpanded: model.expandLevel,
             groupDisplayType: 'groupRows',
             groupRowRendererParams: {
                 innerRenderer: model.groupRowRenderer,

package/cmp/grid/GridModel.ts

@@ -172,7 +172,7 @@ export interface GridConfig {
      * Depth level to expand to on initial load. 0 = all collapsed, 1 = top level expanded, etc.
      * Defaults to 0 for tree grids (i.e. treeMode = true), 1 for standard grouped grids.
      */
-    expandToLevel?: number;
+    expandLevel?: number;
 
     /** True (default) to show a count of group member rows within each full-width group row. */
     showGroupRowCounts?: boolean;
@@ -426,7 +426,7 @@ export class GridModel extends HoistModel {
     @observable.ref expandState: any = {};
     @observable.ref sortBy: GridSorter[] = [];
     @observable.ref groupBy: string[] = null;
-    @observable expandToLevel: number = 0;
+    @observable expandLevel: number = 0;
 
     get persistableColumnState(): ColumnState[] {
         return this.cleanColumnState(this.columnState);
@@ -540,7 +540,7 @@ export class GridModel extends HoistModel {
             restoreDefaultsWarning = GridModel.DEFAULT_RESTORE_DEFAULTS_WARNING,
             fullRowEditing = false,
             clicksToEdit = 2,
-            expandToLevel = treeMode ? 0 : 1,
+            expandLevel = treeMode ? 0 : 1,
             levelLabels,
             highlightRowOnClick = XH.isMobileApp,
             experimental,
@@ -588,7 +588,7 @@ export class GridModel extends HoistModel {
         this.clicksToExpand = clicksToExpand;
         this.clicksToEdit = clicksToEdit;
         this.highlightRowOnClick = highlightRowOnClick;
-        this.expandToLevel = expandToLevel;
+        this.expandLevel = expandLevel;
         this.levelLabels = levelLabels;
 
         throwIf(
@@ -644,9 +644,9 @@ export class GridModel extends HoistModel {
         });
 
         this.addReaction({
-            track: () => [this.expandToLevel, this.isReady],
+            track: () => [this.expandLevel, this.isReady],
             run: () => {
-                this.agApi?.setGridOption('groupDefaultExpanded', this.expandToLevel);
+                this.agApi?.setGridOption('groupDefaultExpanded', this.expandLevel);
             }
         });
 
@@ -1028,18 +1028,18 @@ export class GridModel extends HoistModel {
 
     /** Expand all parent rows in grouped or tree grid. (Note, this is recursive for trees!) */
     expandAll() {
-        this.setExpandToLevel(this.maxDepth);
+        this.expandToLevel(this.maxDepth);
     }
 
     /** Collapse all parent rows in grouped or tree grid. */
     collapseAll() {
-        this.setExpandToLevel(0);
+        this.expandToLevel(0);
     }
 
     /** Expand all parent rows in grouped or tree grid to the specified level. */
     @action
-    setExpandToLevel(level: number) {
-        this.expandToLevel = level;
+    expandToLevel(level: number) {
+        this.expandLevel = level;
     }
 
     /**

package/cmp/grid/impl/InitPersist.ts

@@ -83,12 +83,12 @@ export function initPersist(
             : rootPersistWith;
         PersistenceProvider.create({
             persistOptions: {
-                path: `${path}.expandToLevel`,
+                path: `${path}.expandLevel`,
                 ...persistWith
             },
             target: {
-                getPersistableState: () => new PersistableState(gridModel.expandToLevel),
-                setPersistableState: ({value}) => gridModel.setExpandToLevel(value)
+                getPersistableState: () => new PersistableState(gridModel.expandLevel),
+                setPersistableState: ({value}) => gridModel.expandToLevel(value)
             },
             owner: gridModel
         });

package/cmp/grid/impl/MenuSupport.ts

@@ -283,7 +283,7 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
         text: 'Expand to ...',
         displayFn: () => {
             // Don't show for degenerate shallow grid models, or if we don't have labels
-            const {maxDepth, expandToLevel} = gridModel;
+            const {maxDepth, expandLevel} = gridModel;
             if (maxDepth <= 1) return {hidden: true};
 
             // Validate level labels.
@@ -300,13 +300,13 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
 
             const items = levelLabels.map((label, idx) => {
                 const isCurrLevel =
-                    expandToLevel === idx ||
-                    (expandToLevel > maxDepth && idx === levelLabels.length - 1);
+                    expandLevel === idx ||
+                    (expandLevel > maxDepth && idx === levelLabels.length - 1);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : null,
                     text: label,
-                    actionFn: () => gridModel.setExpandToLevel(idx)
+                    actionFn: () => gridModel.expandToLevel(idx)
                 };
             });
             return {items};

package/cmp/relativetimestamp/RelativeTimestamp.ts

@@ -4,6 +4,7 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {getLayoutProps} from '@xh/hoist/utils/react';
 import {inRange, isNil} from 'lodash';
 import moment from 'moment';
 import {box, span} from '@xh/hoist/cmp/layout';
@@ -20,9 +21,9 @@ import {fmtCompactDate, fmtDateTime} from '@xh/hoist/format';
 import {action, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {Timer} from '@xh/hoist/utils/async';
 import {DAYS, HOURS, LocalDate, SECONDS} from '@xh/hoist/utils/datetime';
-import {logWarn, withDefault} from '@xh/hoist/utils/js';
+import {apiDeprecated, logWarn, withDefault} from '@xh/hoist/utils/js';
 
-interface RelativeTimestampProps extends HoistProps, BoxProps {
+interface RelativeTimestampProps extends HoistProps, BoxProps, RelativeTimestampOptions {
     /**
      * Property on context model containing timestamp.
      * Specify as an alternative to direct `timestamp` prop (and minimize parent re-renders).
@@ -32,7 +33,11 @@ interface RelativeTimestampProps extends HoistProps, BoxProps {
     /** Date or milliseconds representing the starting time / time to compare. See also `bind`. */
     timestamp?: Date | number;
 
-    /** Formatting options */
+    /**
+     * Formatting options.
+     *
+     * @deprecated - these options should be spread into this object directly.
+     */
     options?: RelativeTimestampOptions;
 }
 
@@ -91,13 +96,13 @@ export const [RelativeTimestamp, relativeTimestamp] = hoistCmp.withFactory<Relat
     displayName: 'RelativeTimestamp',
     className: 'xh-relative-timestamp',
 
-    render({className, bind, timestamp, options, ...rest}, ref) {
-        const impl = useLocalModel(RelativeTimestampLocalModel);
-
+    render({className, bind, timestamp, ...rest}, ref) {
+        const impl = useLocalModel(RelativeTimestampLocalModel),
+            layoutProps = getLayoutProps(rest);
         return box({
             className,
             ref,
-            ...rest,
+            ...layoutProps,
             item: span({
                 className: 'xh-title-tip',
                 item: impl.display,
@@ -128,7 +133,15 @@ class RelativeTimestampLocalModel extends HoistModel {
 
     @computed.struct
     get options(): RelativeTimestampOptions {
-        return this.componentProps.options;
+        const {componentProps} = this;
+
+        apiDeprecated('options', {
+            test: componentProps.options,
+            msg: 'Spread options directly in this object instead',
+            v: `77`
+        });
+
+        return componentProps.options ?? componentProps;
     }
 
     constructor() {

package/cmp/zoneGrid/ZoneGridModel.ts

@@ -148,7 +148,7 @@ export interface ZoneGridConfig {
     groupBy?: Some<string>;
 
     /** Group level to expand to on initial load. 0 = all collapsed, 1 = only top level expanded. */
-    expandToLevel?: number;
+    expandLevel?: number;
 
     /** True (default) to show a count of group member rows within each full-width group row. */
     showGroupRowCounts?: boolean;

package/desktop/cmp/leftrightchooser/LeftRightChooserModel.ts

@@ -189,7 +189,7 @@ export class LeftRightChooserModel extends HoistModel {
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
             columns: [leftTextCol, groupCol],
             contextMenu: false,
-            expandToLevel: leftGroupingExpanded ? 1 : 0,
+            expandLevel: leftGroupingExpanded ? 1 : 0,
             xhImpl: true
         });
 
@@ -201,7 +201,7 @@ export class LeftRightChooserModel extends HoistModel {
             onRowDoubleClicked: e => this.onRowDoubleClicked(e),
             columns: [rightTextCol, groupCol],
             contextMenu: false,
-            expandToLevel: rightGroupingExpanded ? 1 : 0,
+            expandLevel: rightGroupingExpanded ? 1 : 0,
             xhImpl: true
         });
 

package/package.json

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