@xh/hoist 59.2.0 → 59.3.0

package/core/XH.ts

@@ -5,27 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {RouterModel} from '@xh/hoist/appcontainer/RouterModel';
-import {Router, State} from 'router5';
-import {
-    HoistService,
-    AppSpec,
-    AppState,
-    Exception,
-    ExceptionHandlerOptions,
-    ExceptionHandler,
-    TrackOptions,
-    SizingMode,
-    HoistServiceClass,
-    Theme,
-    PlainObject,
-    HoistException,
-    PageState,
-    AppSuspendData,
-    FetchResponse
-} from './';
 import {Store} from '@xh/hoist/data';
-import {instanceManager} from './impl/InstanceManager';
-import {installServicesAsync} from './impl/InstallServices';
 import {Icon} from '@xh/hoist/icon';
 import {action} from '@xh/hoist/mobx';
 import {never} from '@xh/hoist/promise';
@@ -35,6 +15,7 @@ import {
     ChangelogService,
     ConfigService,
     EnvironmentService,
+    FetchOptions,
     FetchService,
     GridAutosizeService,
     GridExportService,
@@ -45,17 +26,41 @@ import {
     LocalStorageService,
     PrefService,
     TrackService,
-    WebSocketService,
-    FetchOptions
+    WebSocketService
 } from '@xh/hoist/svc';
 import {camelCase, flatten, isString, uniqueId} from 'lodash';
+import {Router, State} from 'router5';
+import {CancelFn} from 'router5/types/types/base';
 import {AppContainerModel} from '../appcontainer/AppContainerModel';
-import {ToastModel} from '../appcontainer/ToastModel';
 import {BannerModel} from '../appcontainer/BannerModel';
+import {ToastModel} from '../appcontainer/ToastModel';
 import '../styles/XH.scss';
-import {ModelSelector, HoistModel, RefreshContextModel} from './model';
-import {HoistAppModel, BannerSpec, ToastSpec, MessageSpec, HoistUser, TaskObserver} from './';
-import {CancelFn} from 'router5/types/types/base';
+import {
+    AppSpec,
+    AppState,
+    AppSuspendData,
+    BannerSpec,
+    Exception,
+    ExceptionHandler,
+    ExceptionHandlerOptions,
+    FetchResponse,
+    HoistAppModel,
+    HoistException,
+    HoistService,
+    HoistServiceClass,
+    HoistUser,
+    MessageSpec,
+    PageState,
+    PlainObject,
+    SizingMode,
+    TaskObserver,
+    Theme,
+    ToastSpec,
+    TrackOptions
+} from './';
+import {installServicesAsync} from './impl/InstallServices';
+import {instanceManager} from './impl/InstanceManager';
+import {HoistModel, ModelSelector, RefreshContextModel} from './model';
 import {apiDeprecated} from '@xh/hoist/utils/js';
 
 export const MIN_HOIST_CORE_VERSION = '16.0';
@@ -659,7 +664,7 @@ export class XHApi {
      * Get a collection of Models currently 'active' in the app, returned in creation-time order.
      * This will include all models that have not yet had `destroy()` called on them.
      */
-    getActiveModels(selector: ModelSelector = '*'): HoistModel[] {
+    getModels<T extends HoistModel>(selector: ModelSelector = '*'): T[] {
         const ret = [];
         instanceManager.models.forEach(m => {
             if (m.matchesSelector(selector, true)) ret.push(m);
@@ -667,6 +672,23 @@ export class XHApi {
         return ret;
     }
 
+    /** Get the first active model that matches the given selector, or null if none found. */
+    getModel<T extends HoistModel>(selector: ModelSelector = '*'): T {
+        instanceManager.models.forEach(m => {
+            if (m.matchesSelector(selector, true)) return m;
+        });
+        return null;
+    }
+
+    /**
+     * Get the first active model that has been assigned the given testId, or null if none found.
+     * Note that a small subset of models are automatically assigned the testId of their component.
+     * @see InstanceManager.testSupportedModels
+     */
+    getModelByTestId<T extends HoistModel>(testId: string): T {
+        return instanceManager.getModelByTestId(testId) as T;
+    }
+
     /** All services registered with this application. */
     getServices(): HoistService[] {
         return Array.from(instanceManager.services);

package/core/elem.ts

@@ -4,14 +4,15 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {TEST_ID} from '@xh/hoist/utils/js';
 import {castArray, isFunction, isNil, isPlainObject} from 'lodash';
 import {
     createElement as reactCreateElement,
+    ForwardedRef,
     isValidElement,
-    ReactNode,
+    Key,
     ReactElement,
-    ForwardedRef,
-    Key
+    ReactNode
 } from 'react';
 import {PlainObject, Some, Thunkable} from './types/Types';
 
@@ -60,6 +61,13 @@ export type ElementSpec<P extends PlainObject> = P & {
     /** React key for this component. */
     key?: Key;
 
+    /**
+     * Supports passing a "data-testid" prop to built-in tags (e.g. `div`), to be rendered as an
+     * HTML attribute. See {@link TestSupportProps} for the higher-level `testId` prop that most
+     * Hoist components accept and should use.
+     */
+    [TEST_ID]?: string;
+
     //----------------------------
     // Technical -- Escape support
     //----------------------------

package/core/impl/InstanceManager.ts

@@ -5,7 +5,8 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 
-import {HoistService, HoistModel} from './..';
+import {HoistService, HoistModel} from '../';
+import {isNil} from 'lodash';
 import {Store} from '@xh/hoist/data';
 import {observable, makeObservable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
@@ -24,6 +25,9 @@ class InstanceManager {
     @observable.shallow
     stores: Set<Store> = new Set();
 
+    private modelsByTestId: Map<string, HoistModel> = new Map();
+    private testSupportedModels = new Set(['GridModel', 'DataViewModel', 'FormModel', 'TabModel']);
+
     registerModel(m: HoistModel) {
         wait().thenAction(() => this.models.add(m));
     }
@@ -44,6 +48,25 @@ class InstanceManager {
         wait().thenAction(() => this.stores.delete(s));
     }
 
+    registerModelWithTestId(testId: string, m: HoistModel) {
+        if (
+            isNil(testId) ||
+            !m.isHoistModel ||
+            !this.testSupportedModels.has(m.constructor.name) ||
+            this.modelsByTestId.has(testId)
+        )
+            return;
+        this.modelsByTestId.set(testId, m);
+    }
+
+    unregisterModelWithTestId(testId: string) {
+        this.modelsByTestId.delete(testId);
+    }
+
+    getModelByTestId(testId: string): HoistModel {
+        return this.modelsByTestId.get(testId);
+    }
+
     constructor() {
         makeObservable(this);
     }

package/core/model/HoistModel.ts

@@ -4,13 +4,13 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {forOwn, has, isFunction} from 'lodash';
+import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {warnIf} from '@xh/hoist/utils/js';
+import {forOwn, has, isFunction} from 'lodash';
 import {DefaultHoistProps, HoistBase, managed, PlainObject} from '../';
-import {ModelSelector} from './';
-import {LoadSupport, LoadSpec, Loadable} from '../load';
-import {observable, action, makeObservable} from '@xh/hoist/mobx';
 import {instanceManager} from '../impl/InstanceManager';
+import {Loadable, LoadSpec, LoadSupport} from '../load';
+import {ModelSelector} from './';
 
 /**
  * Core superclass for stateful Models in Hoist. Models are used throughout the toolkit and

package/data/RecordAction.ts

@@ -7,11 +7,11 @@
 
 import {isBoolean, isEmpty, isNil, isNumber, isString} from 'lodash';
 import {ReactElement} from 'react';
-import {Intent, PlainObject} from '../core';
+import {Intent, PlainObject, TestSupportProps} from '../core';
 import {StoreRecord} from './StoreRecord';
-import {GridModel, Column} from '../cmp/grid';
+import {Column, GridModel} from '../cmp/grid';
 
-export interface RecordActionSpec {
+export interface RecordActionSpec extends TestSupportProps {
     /** Label to be displayed. */
     text?: string;
 
@@ -112,6 +112,7 @@ export class RecordAction {
     disabled: boolean;
     hidden: boolean;
     recordsRequired: boolean | number;
+    testId: string;
 
     constructor({
         text,
@@ -125,7 +126,8 @@ export class RecordAction {
         disabled = false,
         hidden = false,
         displayFn = null,
-        recordsRequired = false
+        recordsRequired = false,
+        testId = null
     }: RecordActionSpec) {
         this.text = text;
         this.secondaryText = secondaryText;
@@ -138,6 +140,7 @@ export class RecordAction {
         this.hidden = hidden;
         this.displayFn = displayFn;
         this.recordsRequired = recordsRequired;
+        this.testId = testId;
 
         this.items = items?.map(it => {
             if (isString(it)) return it;

package/data/StoreRecord.ts

@@ -6,7 +6,7 @@
  */
 import {PlainObject} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
-import {isNil, flatMap} from 'lodash';
+import {isNil, flatMap, isMatch} from 'lodash';
 import {Store} from './Store';
 import {ValidationState} from './validation/ValidationState';
 import {RecordValidator} from './impl/RecordValidator';
@@ -243,6 +243,13 @@ export class StoreRecord {
         this.store.getAncestorsById(this.id, fromFiltered).forEach(fn);
     }
 
+    /**
+     * Tests to see if this Record's data matches the given partial data object.
+     */
+    matchesData(partialData: PlainObject): boolean {
+        return isMatch(this.data, partialData);
+    }
+
     // --------------------------
     // Protected methods
     // --------------------------

package/desktop/appcontainer/AppContainer.ts

@@ -13,6 +13,7 @@ import {suspendPanel} from '@xh/hoist/desktop/appcontainer/SuspendPanel';
 import {dockContainerImpl} from '@xh/hoist/desktop/cmp/dock/impl/DockContainer';
 import {colChooserDialog as colChooser} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserDialog';
 import {ColChooserModel} from '@xh/hoist/desktop/cmp/grid/impl/colchooser/ColChooserModel';
+import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {columnHeaderFilter} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilter';
 import {ColumnHeaderFilterModel} from '@xh/hoist/desktop/cmp/grid/impl/filter/ColumnHeaderFilterModel';
 import {gridFilterDialog} from '@xh/hoist/desktop/cmp/grid/impl/filter/GridFilterDialog';
@@ -48,6 +49,7 @@ installDesktopImpls({
     storeFilterFieldImpl,
     pinPadImpl,
     colChooser,
+    zoneMapper,
     columnHeaderFilter,
     gridFilterDialog,
     ColChooserModel,

package/desktop/cmp/appbar/AppBar.ts

@@ -6,18 +6,18 @@
  */
 
 import {span} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HSide, XH} from '@xh/hoist/core';
+import {hoistCmp, HoistProps, HSide, TestSupportProps, XH} from '@xh/hoist/core';
 import {appBarSeparator} from '@xh/hoist/desktop/cmp/appbar';
 import {appMenuButton, AppMenuButtonProps, refreshButton} from '@xh/hoist/desktop/cmp/button';
 import {whatsNewButton} from '@xh/hoist/desktop/cmp/button/WhatsNewButton';
 import '@xh/hoist/desktop/register';
 import {navbar, navbarGroup} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {isEmpty} from 'lodash';
-import {ReactNode, ReactElement} from 'react';
+import {ReactElement, ReactNode} from 'react';
 import './AppBar.scss';
 
-export interface AppBarProps extends HoistProps {
+export interface AppBarProps extends HoistProps, TestSupportProps {
     /** Position of the AppMenuButton. */
     appMenuButtonPosition?: HSide;
 
@@ -69,7 +69,8 @@ export const [AppBar, appBar] = hoistCmp.withFactory<AppBarProps>({
             hideAppMenuButton,
             className,
             appMenuButtonProps = {},
-            appMenuButtonPosition = 'right'
+            appMenuButtonPosition = 'right',
+            testId
         } = props;
 
         const title = withDefault(props.title, XH.clientAppName);
@@ -102,7 +103,8 @@ export const [AppBar, appBar] = hoistCmp.withFactory<AppBarProps>({
                         })
                     ]
                 })
-            ]
+            ],
+            [TEST_ID]: testId
         });
     }
 });

package/desktop/cmp/button/Button.ts

@@ -6,19 +6,28 @@
  */
 import {ButtonProps as BpButtonProps} from '@blueprintjs/core';
 import composeRefs from '@seznam/compose-react-refs';
-import {hoistCmp, HoistModel, HoistProps, LayoutProps, StyleProps, Intent} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    Intent,
+    LayoutProps,
+    StyleProps,
+    TestSupportProps
+} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {button as bpButton} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
+import {TEST_ID, withDefault} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {ReactNode, ReactElement} from 'react';
+import {ReactElement, ReactNode} from 'react';
 import './Button.scss';
 
 export interface ButtonProps<M extends HoistModel = null>
     extends HoistProps<M>,
         StyleProps,
         LayoutProps,
+        TestSupportProps,
         BpButtonProps {
     active?: boolean;
     autoFocus?: boolean;
@@ -69,6 +78,7 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps>({
             tooltip,
             active,
             elementRef,
+            testId,
             ...rest
         } = nonLayoutProps;
 
@@ -96,6 +106,7 @@ export const [Button, button] = hoistCmp.withFactory<ButtonProps>({
             autoFocus,
             className: classNames(className, classes),
             elementRef: composeRefs(ref, elementRef),
+            [TEST_ID]: testId,
             disabled,
             icon,
             intent,

package/desktop/cmp/button/ButtonGroup.ts

@@ -4,17 +4,26 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
-import {SetOptional} from 'type-fest';
 import {ButtonGroupProps as BpButtonGroupProps} from '@blueprintjs/core';
-import {hoistCmp, HoistModel, HoistProps, LayoutProps, StyleProps} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    LayoutProps,
+    StyleProps,
+    TestSupportProps
+} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {buttonGroup as bpButtonGroup} from '@xh/hoist/kit/blueprint';
+import {TEST_ID} from '@xh/hoist/utils/js';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
+import {SetOptional} from 'type-fest';
 
 export interface ButtonGroupProps<M extends HoistModel = null>
     extends HoistProps<M>,
         LayoutProps,
         StyleProps,
+        TestSupportProps,
         SetOptional<BpButtonGroupProps, 'children'> {
     /** True to have all buttons fill available width equally. */
     fill?: boolean;
@@ -35,11 +44,13 @@ export const [ButtonGroup, buttonGroup] = hoistCmp.withFactory<ButtonGroupProps>
     className: 'xh-button-group',
 
     render(props, ref) {
-        const [layoutProps, {fill, minimal, vertical, style, ...rest}] = splitLayoutProps(props);
+        const [layoutProps, {fill, minimal, vertical, style, testId, ...rest}] =
+            splitLayoutProps(props);
         return bpButtonGroup({
             fill,
             minimal,
             vertical,
+            [TEST_ID]: testId,
             style: {
                 ...style,
                 ...layoutProps

package/desktop/cmp/button/ZoneMapperButton.ts

@@ -0,0 +1,82 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2023 Extremely Heavy Industries Inc.
+ */
+import '@xh/hoist/desktop/register';
+import {hoistCmp, useContextModel} from '@xh/hoist/core';
+import {div, vbox} from '@xh/hoist/cmp/layout';
+import {ZoneGridModel} from '@xh/hoist/cmp/zoneGrid';
+import {ZoneMapperModel} from '@xh/hoist/cmp/zoneGrid/impl/ZoneMapperModel';
+import {zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapper';
+import {Icon} from '@xh/hoist/icon';
+import {popover, Position} from '@xh/hoist/kit/blueprint';
+import {stopPropagation, withDefault} from '@xh/hoist/utils/js';
+import {button, ButtonProps} from './Button';
+
+export interface ZoneMapperButtonProps extends ButtonProps {
+    /** ZoneGridModel of the grid for which this button should show a chooser. */
+    zoneGridModel?: ZoneGridModel;
+
+    /** Position for chooser popover, as per Blueprint docs. */
+    popoverPosition?: Position;
+}
+
+/**
+ * A convenience button to trigger the display of a ZoneMapper UI for ZoneGrid configuration.
+ *
+ * Requires a `ZoneGridModel.zoneMapperModel` config option, set to true for default implementation.
+ */
+export const [ZoneMapperButton, zoneMapperButton] = hoistCmp.withFactory<ZoneMapperButtonProps>({
+    displayName: 'ZoneMapperButton',
+    model: false,
+    render({icon, title, zoneGridModel, popoverPosition, disabled, ...rest}, ref) {
+        zoneGridModel = withDefault(zoneGridModel, useContextModel(ZoneGridModel));
+
+        const mapperModel = zoneGridModel?.mapperModel as ZoneMapperModel;
+
+        if (!zoneGridModel) {
+            console.error(
+                "No ZoneGridModel available to ZoneMapperButton. Provide via a 'zoneGridModel' prop, or context."
+            );
+            disabled = true;
+        }
+
+        if (!mapperModel) {
+            console.error(
+                'No ZoneMapperModel available on bound ZoneGridModel - enable via ZoneGridModel.zoneMapperModel config.'
+            );
+            disabled = true;
+        }
+
+        const isOpen = mapperModel?.isPopoverOpen;
+        return popover({
+            isOpen,
+            popoverClassName: 'xh-zone-mapper-popover xh-popup--framed',
+            position: withDefault(popoverPosition, 'auto'),
+            target: button({
+                icon: withDefault(icon, Icon.gridLarge()),
+                title: withDefault(title, 'Customize fields...'),
+                disabled,
+                ...rest
+            }),
+            disabled,
+            content: vbox({
+                onClick: stopPropagation,
+                onDoubleClick: stopPropagation,
+                items: [
+                    div({ref, className: 'xh-popup__title', item: 'Customize Fields'}),
+                    zoneMapper({model: mapperModel})
+                ]
+            }),
+            onInteraction: (nextOpenState, e) => {
+                if (nextOpenState) {
+                    mapperModel.openPopover();
+                } else {
+                    mapperModel.close();
+                }
+            }
+        });
+    }
+});

package/desktop/cmp/button/index.ts

@@ -14,3 +14,4 @@ export * from './OptionsButton';
 export * from './RefreshButton';
 export * from './RestoreDefaultsButton';
 export * from './ThemeToggleButton';
+export * from './ZoneMapperButton';

package/desktop/cmp/dash/canvas/DashCanvas.ts

@@ -7,10 +7,19 @@
 import {ContextMenu} from '@blueprintjs/core';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {elementFactory, hoistCmp, HoistProps, refreshContextView, uses, XH} from '@xh/hoist/core';
+import {
+    elementFactory,
+    hoistCmp,
+    HoistProps,
+    refreshContextView,
+    TestSupportProps,
+    uses,
+    XH
+} from '@xh/hoist/core';
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {TEST_ID} from '@xh/hoist/utils/js';
 import {useOnVisibleChange} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
@@ -20,7 +29,7 @@ import {DashCanvasModel} from './DashCanvasModel';
 import {dashCanvasContextMenu} from './impl/DashCanvasContextMenu';
 import {dashCanvasView} from './impl/DashCanvasView';
 
-export type DashCanvasProps = HoistProps<DashCanvasModel>;
+export type DashCanvasProps = HoistProps<DashCanvasModel> & TestSupportProps;
 
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.
@@ -38,7 +47,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     className: 'xh-dash-canvas',
     model: uses(DashCanvasModel),
 
-    render({className, model}, ref) {
+    render({className, model, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked;
 
@@ -85,7 +94,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                         )
                     }),
                     emptyContainerOverlay()
-                ]
+                ],
+                [TEST_ID]: testId
             })
         });
     }

package/desktop/cmp/dash/container/DashContainer.ts

@@ -6,7 +6,14 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {div, frame, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {hoistCmp, uses, ModelLookupContext, HoistProps, refreshContextView} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistProps,
+    ModelLookupContext,
+    refreshContextView,
+    TestSupportProps,
+    uses
+} from '@xh/hoist/core';
 import {mask} from '@xh/hoist/desktop/cmp/mask';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {useOnMount, useOnResize} from '@xh/hoist/utils/react';
@@ -15,7 +22,7 @@ import './DashContainer.scss';
 import {DashContainerModel} from './DashContainerModel';
 import {dashContainerAddViewButton} from './impl/DashContainerContextMenu';
 
-export type DashContainerProps = HoistProps<DashContainerModel>;
+export type DashContainerProps = HoistProps<DashContainerModel> & TestSupportProps;
 
 /**
  * Display a set of child components in accordance with a DashContainerModel.
@@ -25,7 +32,7 @@ export const [DashContainer, dashContainer] = hoistCmp.withFactory<DashContainer
     model: uses(DashContainerModel),
     className: 'xh-dash-container',
 
-    render({model, className}, ref) {
+    render({model, className, testId}, ref) {
         // Store current ModelLookupContext in model, to be applied in views later
         const context = useContext(ModelLookupContext);
         useOnMount(() => (model.modelLookupContext = context));
@@ -39,7 +46,7 @@ export const [DashContainer, dashContainer] = hoistCmp.withFactory<DashContainer
         return refreshContextView({
             model: model.refreshContextModel,
             item: frame(
-                frame({className, ref}),
+                frame({className, ref, testId}),
                 mask({spinner: true, bind: model.loadingStateTask}),
                 emptyContainerOverlay()
             )

package/desktop/cmp/error/ErrorMessage.ts

@@ -5,16 +5,15 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
 import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {isNil, isString} from 'lodash';
 import {isValidElement, ReactNode} from 'react';
-
 import './ErrorMessage.scss';
 import {Icon} from '@xh/hoist/icon';
 
-export interface ErrorMessageProps extends HoistProps {
+export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
      * If provided, will render a "Retry" button that calls this function.
      * Use `actionButtonProps` for further control over this button.
@@ -69,7 +68,8 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
             actionFn,
             actionButtonProps,
             detailsFn,
-            detailsButtonProps
+            detailsButtonProps,
+            ...rest
         } = props;
 
         if (isNil(error)) return null;
@@ -77,17 +77,17 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
         if (!message) {
             if (isString(error)) {
                 message = error;
-            } else if (error.message) {
-                message = error.message;
+            } else {
+                message = error.message || error.name || 'Unknown Error';
             }
         }
 
         if (actionFn) {
-            actionButtonProps = {...actionButtonProps, onClick: error => actionFn(error)};
+            actionButtonProps = {...actionButtonProps, onClick: () => actionFn(error)};
         }
 
         if (detailsFn) {
-            detailsButtonProps = {...detailsButtonProps, onClick: error => detailsFn(error)};
+            detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
         }
 
         let buttons = [],
@@ -103,6 +103,7 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
         return frame({
             ref,
             className,
+            ...rest,
             item: div({
                 className: 'xh-error-message__inner',
                 items: [titleCmp({title}), messageCmp({message, error}), buttonBar]