@xh/hoist 70.0.0-SNAPSHOT.1731694945674 → 70.0.0-SNAPSHOT.1731700937079

package/CHANGELOG.md

@@ -56,6 +56,8 @@
   of the model.
 * Expanded the `JsonBlob` interface to include additional properties present on all blobs.
 * Corrected `DashViewSpec.title` to be optional - it can be defaulted from the `id`.
+* Corrected the return type for `SelectProps.loadingMessageFn` and `noOptionsMessageFn` to return
+  `ReactNode` vs `string`. The component supports rendering richer content via these options.
 
 ## 69.1.0 - 2024-11-07
 

package/build/types/core/persist/viewmanager/ViewManagerModel.d.ts

@@ -1,9 +1,9 @@
-import { HoistModel, LoadSpec, Persistable, PersistableState, PersistOptions, PlainObject, Thunkable, ViewManagerProvider } from '@xh/hoist/core';
+import { HoistModel, LoadSpec, Persistable, PersistableState, PersistOptions, PlainObject, TaskObserver, Thunkable, ViewManagerProvider } from '@xh/hoist/core';
 import { SaveDialogModel } from './impl/SaveDialogModel';
 import { View, ViewTree } from './Types';
 export interface ViewManagerConfig {
     /**
-     * True (default) to allow user to opt-in to automatically saving changes to their private
+     * True (default) to allow user to opt in to automatically saving changes to their private
      * views - requires `persistWith`.
      */
     enableAutoSave?: boolean;
@@ -84,6 +84,11 @@ export declare class ViewManagerModel<T extends PlainObject = PlainObject> exten
      * generally available as per `enableAutoSave`).
      */
     autoSaveActive: boolean;
+    /**
+     * TaskObserver linked to {@link selectViewAsync}. If a change to the active view is likely to
+     * require intensive layout/grid work, consider masking affected components with this observer.
+     */
+    viewSelectionObserver: TaskObserver;
     manageDialogOpen: boolean;
     readonly saveDialogModel: SaveDialogModel;
     private readonly _enableSharing;

package/build/types/desktop/cmp/input/Select.d.ts

@@ -72,7 +72,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     /** Icon to display inline on the left side of the input. */
     leftIcon?: ReactElement;
     /** Function to return loading message during an async query. Passed current query input. */
-    loadingMessageFn?: (query: string) => string;
+    loadingMessageFn?: (query: string) => ReactNode;
     /** Maximum height of the menu before scrolling. Defaults to 300px. */
     maxMenuHeight?: number;
     /** Placement of the dropdown menu relative to the input control. */
@@ -80,7 +80,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     /** Width in pixels for the dropdown menu - if unspecified, defaults to control width. */
     menuWidth?: number;
     /** Function to return message indicating no options loaded. Passed current query input. */
-    noOptionsMessageFn?: (query: string) => string;
+    noOptionsMessageFn?: (query: string) => ReactNode;
     /** True to auto-open the dropdown menu on input focus. */
     openMenuOnFocus?: boolean;
     /**
@@ -88,7 +88,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      * will contain at minimum a value and label field, as well as any other fields present in
      * the source objects).
      */
-    optionRenderer?: (SelectOption: any) => ReactNode;
+    optionRenderer?: (opt: SelectOption) => ReactNode;
     /**
      * Preset list of options for selection. Elements can be either a primitive or an object.
      * Primitives will be displayed via toString().

package/core/persist/viewmanager/ViewManagerModel.ts

@@ -7,6 +7,7 @@ import {
     PersistenceProvider,
     PersistOptions,
     PlainObject,
+    TaskObserver,
     Thunkable,
     ViewManagerProvider,
     XH
@@ -22,7 +23,7 @@ import {View, ViewTree} from './Types';
 
 export interface ViewManagerConfig {
     /**
-     * True (default) to allow user to opt-in to automatically saving changes to their private
+     * True (default) to allow user to opt in to automatically saving changes to their private
      * views - requires `persistWith`.
      */
     enableAutoSave?: boolean;
@@ -114,6 +115,12 @@ export class ViewManagerModel<T extends PlainObject = PlainObject>
      */
     @bindable autoSaveActive = false;
 
+    /**
+     * TaskObserver linked to {@link selectViewAsync}. If a change to the active view is likely to
+     * require intensive layout/grid work, consider masking affected components with this observer.
+     */
+    viewSelectionObserver: TaskObserver;
+
     @observable manageDialogOpen = false;
     @managed readonly saveDialogModel: SaveDialogModel;
 
@@ -234,6 +241,10 @@ export class ViewManagerModel<T extends PlainObject = PlainObject>
         this.enableFavorites = enableFavorites && !!persistWith;
         this.saveDialogModel = new SaveDialogModel(this);
 
+        this.viewSelectionObserver = TaskObserver.trackLast({
+            message: `Updating ${this.displayName}...`
+        });
+
         if (persistWith) {
             PersistenceProvider.create({
                 persistOptions: {
@@ -278,18 +289,19 @@ export class ViewManagerModel<T extends PlainObject = PlainObject>
     }
 
     async selectViewAsync(token: string) {
-        // TODO - review if we benefit from async + masking - eg during intensive
-        //      component rebuild within setValue?
-        await wait();
-
-        this.selectedToken = token;
-
-        // Allow this model to restore its own persisted state in its ctor and note the desired
-        // selected token before views have been loaded. Once views are loaded, this method will
-        // be called again with the desired token and will proceed to set the value.
-        if (isEmpty(this.views)) return;
-
-        this.setValue(this.selectedView?.value ?? ({} as T));
+        // Introduce minimal wait and link to viewSelectionObserver to allow apps to mask.
+        await wait(100)
+            .then(() => {
+                this.selectedToken = token;
+
+                // Allow this model to restore its own persisted state in its ctor and note the desired
+                // selected token before views have been loaded. Once views are loaded, this method will
+                // be called again with the desired token and will proceed to set the value.
+                if (isEmpty(this.views)) return;
+
+                this.setValue(this.selectedView?.value ?? ({} as T));
+            })
+            .linkTo(this.viewSelectionObserver);
     }
 
     async saveAsync(skipToast: boolean = false) {

package/desktop/cmp/input/Select.ts

@@ -123,7 +123,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     leftIcon?: ReactElement;
 
     /** Function to return loading message during an async query. Passed current query input. */
-    loadingMessageFn?: (query: string) => string;
+    loadingMessageFn?: (query: string) => ReactNode;
 
     /** Maximum height of the menu before scrolling. Defaults to 300px. */
     maxMenuHeight?: number;
@@ -135,7 +135,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
     menuWidth?: number;
 
     /** Function to return message indicating no options loaded. Passed current query input. */
-    noOptionsMessageFn?: (query: string) => string;
+    noOptionsMessageFn?: (query: string) => ReactNode;
 
     /** True to auto-open the dropdown menu on input focus. */
     openMenuOnFocus?: boolean;
@@ -145,7 +145,7 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
      * will contain at minimum a value and label field, as well as any other fields present in
      * the source objects).
      */
-    optionRenderer?: (SelectOption) => ReactNode;
+    optionRenderer?: (opt: SelectOption) => ReactNode;
 
     /**
      * Preset list of options for selection. Elements can be either a primitive or an object.

package/desktop/cmp/viewmanager/ViewManager.ts

@@ -188,7 +188,7 @@ const viewMenu = hoistCmp.factory<ViewManagerProps>({
                 }),
                 menuItem({
                     icon: Icon.copy(),
-                    text: 'Save as...',
+                    text: 'Save As...',
                     onClick: () => model.saveAsAsync()
                 }),
                 menuItem({

package/package.json

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