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

package/CHANGELOG.md

@@ -11,6 +11,8 @@
       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/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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "75.0.0-SNAPSHOT.1753116344421",
+  "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",