@xh/hoist 71.0.0-SNAPSHOT.1735061018823 → 71.0.0-SNAPSHOT.1735061320692

package/{desktop/cmp → cmp}/treemap/TreeMap.ts

@@ -17,9 +17,8 @@ import {
     uses,
     XH
 } from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
-import '@xh/hoist/desktop/register';
+import {errorMessage} from '@xh/hoist/cmp/error';
+import {mask} from '@xh/hoist/cmp/mask';
 import {Highcharts} from '@xh/hoist/kit/highcharts';
 import {wait} from '@xh/hoist/promise';
 import {logError, logWithDebug} from '@xh/hoist/utils/js';

package/{desktop/cmp → cmp}/treemap/TreeMapModel.ts

@@ -8,7 +8,6 @@ import {HoistModel, PlainObject, Theme} from '@xh/hoist/core';
 import {Store, StoreRecord, StoreRecordId} from '@xh/hoist/data';
 import {GridModel} from '@xh/hoist/cmp/grid';
 import {FilterLike} from '@xh/hoist/data/filter/Types';
-import '@xh/hoist/desktop/register';
 import {numberRenderer} from '@xh/hoist/format';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';

package/desktop/appcontainer/AppContainer.ts

@@ -17,7 +17,7 @@ import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/imp
 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';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport';
 import {pinPadImpl} from '@xh/hoist/desktop/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilterField';
@@ -26,6 +26,8 @@ import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
+import {errorMessageImpl} from '@xh/hoist/desktop/cmp/error/impl/ErrorMessage';
+import {maskImpl} from '@xh/hoist/desktop/cmp/mask/impl/Mask';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
 import {aboutDialog} from './AboutDialog';
@@ -41,7 +43,6 @@ import {optionsDialog} from './OptionsDialog';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 import {ReactElement} from 'react';
-import {errorMessage} from '../cmp/error/ErrorMessage';
 
 installDesktopImpls({
     tabContainerImpl,
@@ -56,7 +57,8 @@ installDesktopImpls({
     ColumnHeaderFilterModel,
     useContextMenu,
     ModalSupportModel,
-    errorMessage
+    errorMessageImpl,
+    maskImpl
 });
 /**
  * Top-level wrapper for Desktop applications.

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

@@ -14,7 +14,7 @@ import {
     TestSupportProps,
     uses
 } from '@xh/hoist/core';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {useOnMount, useOnResize} from '@xh/hoist/utils/react';
 import {useContext} from 'react';

package/desktop/cmp/error/impl/ErrorMessage.ts

@@ -0,0 +1,65 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {ErrorMessageProps} from '@xh/hoist/cmp/error';
+import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {isString} from 'lodash';
+import {isValidElement} from 'react';
+import '@xh/hoist/desktop/register';
+
+/**
+ * Desktop implementation of ErrorMessage.
+ * @internal
+ */
+export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
+    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+        let buttons = [],
+            buttonBar = null;
+        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
+        if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
+        if (buttons.length == 1) {
+            buttonBar = buttons[0];
+        } else if (buttons.length == 2) {
+            buttonBar = hbox(buttons[0], filler(), buttons[1]);
+        }
+
+        return div({
+            className: 'xh-error-message__inner',
+            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+        });
+    }
+});
+
+const titleCmp = hoistCmp.factory(({title}) => {
+    if (isValidElement(title)) return title;
+    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
+    return null;
+});
+
+const messageCmp = hoistCmp.factory(({message}) => {
+    if (isValidElement(message)) return message;
+    if (isString(message)) return p(message);
+    return null;
+});
+
+const actionButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Retry',
+        icon: Icon.refresh(),
+        ...props
+    });
+});
+
+const detailsButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Details',
+        icon: Icon.detail(),
+        ...props
+    });
+});

package/desktop/cmp/mask/impl/Mask.ts

@@ -0,0 +1,40 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {box, vbox, vspacer} from '@xh/hoist/cmp/layout';
+import {MaskProps} from '@xh/hoist/cmp/mask';
+import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
+import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import classNames from 'classnames';
+import '@xh/hoist/desktop/register';
+import './Mask.scss';
+
+/**
+ * Desktop implementation of Mask.
+ * @internal
+ */
+export const maskImpl = hoistCmp.factory<MaskProps>({
+    render({message, onClick, inline = true, spinner = false, className}) {
+        return overlay({
+            className: classNames(className, Classes.OVERLAY_SCROLL_CONTAINER),
+            autoFocus: false,
+            isOpen: true,
+            canEscapeKeyClose: false,
+            usePortal: !inline,
+            enforceFocus: !inline,
+            item: vbox({
+                onClick,
+                className: 'xh-mask-body',
+                items: [
+                    spinner ? spinnerCmp() : null,
+                    spinner ? vspacer(10) : null,
+                    message ? box({className: 'xh-mask-text', item: message}) : null
+                ]
+            })
+        });
+    }
+});

package/desktop/cmp/panel/Panel.ts

@@ -17,8 +17,8 @@ import {
     useContextModel,
     uses
 } from '@xh/hoist/core';
-import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
+import {mask} from '@xh/hoist/cmp/mask';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import '@xh/hoist/desktop/register';

package/desktop/cmp/rest/RestGrid.ts

@@ -8,7 +8,7 @@
 import {grid} from '@xh/hoist/cmp/grid';
 import {fragment} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, PlainObject, Some, uses} from '@xh/hoist/core';
-import {MaskProps} from '@xh/hoist/desktop/cmp/mask';
+import {MaskProps} from '@xh/hoist/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
 import {getTestId} from '@xh/hoist/utils/js';

package/dynamics/desktop.ts

@@ -22,12 +22,13 @@ export let colChooser = null;
 export let zoneMapper = null;
 export let columnHeaderFilter = null;
 export let dockContainerImpl = null;
-export let errorMessage = null;
 export let gridFilterDialog = null;
 export let pinPadImpl = null;
 export let storeFilterFieldImpl = null;
 export let tabContainerImpl = null;
 export let useContextMenu = null;
+export let errorMessageImpl = null;
+export let maskImpl = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -42,10 +43,11 @@ export function installDesktopImpls(impls) {
     zoneMapper = impls.zoneMapper;
     columnHeaderFilter = impls.columnHeaderFilter;
     dockContainerImpl = impls.dockContainerImpl;
-    errorMessage = impls.errorMessage;
     gridFilterDialog = impls.gridFilterDialog;
     pinPadImpl = impls.pinPadImpl;
     storeFilterFieldImpl = impls.storeFilterFieldImpl;
     tabContainerImpl = impls.tabContainerImpl;
     useContextMenu = impls.useContextMenu;
+    errorMessageImpl = impls.errorMessageImpl;
+    maskImpl = impls.maskImpl;
 }

package/dynamics/mobile.ts

@@ -18,10 +18,11 @@
 export let ColChooserModel = null;
 export let colChooser = null;
 export let zoneMapper = null;
-export let errorMessage = null;
 export let pinPadImpl = null;
 export let storeFilterFieldImpl = null;
 export let tabContainerImpl = null;
+export let errorMessageImpl = null;
+export let maskImpl = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -32,8 +33,9 @@ export function installMobileImpls(impls) {
     ColChooserModel = impls.ColChooserModel;
     colChooser = impls.colChooser;
     zoneMapper = impls.zoneMapper;
-    errorMessage = impls.errorMessage;
     pinPadImpl = impls.pinPadImpl;
     storeFilterFieldImpl = impls.storeFilterFieldImpl;
     tabContainerImpl = impls.tabContainerImpl;
+    errorMessageImpl = impls.errorMessageImpl;
+    maskImpl = impls.maskImpl;
 }

package/mobile/appcontainer/AppContainer.ts

@@ -8,17 +8,18 @@ import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
 import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {fragment, frame, vframe, viewport} from '@xh/hoist/cmp/layout';
 import {createElement, hoistCmp, refreshContextView, uses, XH} from '@xh/hoist/core';
+import {errorMessageImpl} from '@xh/hoist/mobile/cmp/error/impl/ErrorMessage';
+import {maskImpl} from '@xh/hoist/mobile/cmp/mask/impl/Mask';
 import {installMobileImpls} from '@xh/hoist/dynamics/mobile';
 import {colChooser} from '@xh/hoist/mobile/cmp/grid/impl/ColChooser';
 import {ColChooserModel} from '@xh/hoist/mobile/cmp/grid/impl/ColChooserModel';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {pinPadImpl} from '@xh/hoist/mobile/cmp/pinpad/impl/PinPad';
 import {storeFilterFieldImpl} from '@xh/hoist/mobile/cmp/store/impl/StoreFilterField';
 import {tabContainerImpl} from '@xh/hoist/mobile/cmp/tab/impl/TabContainer';
 import {zoneMapper} from '@xh/hoist/mobile/cmp/zoneGrid/impl/ZoneMapper';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
-import {errorMessage} from '../cmp/error/ErrorMessage';
 import {aboutDialog} from './AboutDialog';
 import {banner} from './Banner';
 import {exceptionDialog} from './ExceptionDialog';
@@ -40,7 +41,8 @@ installMobileImpls({
     colChooser,
     ColChooserModel,
     zoneMapper,
-    errorMessage
+    errorMessageImpl,
+    maskImpl
 });
 
 /**

package/mobile/appcontainer/OptionsDialog.ts

@@ -11,7 +11,7 @@ import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {button, restoreDefaultsButton} from '@xh/hoist/mobile/cmp/button';
 import {formField} from '@xh/hoist/mobile/cmp/form';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import './OptionsDialog.scss';
 import {dialogPanel} from '@xh/hoist/mobile/cmp/panel';
 

package/mobile/cmp/error/impl/ErrorMessage.ts

@@ -0,0 +1,65 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {div, filler, hbox, p} from '@xh/hoist/cmp/layout';
+import {ErrorMessageProps} from '@xh/hoist/cmp/error';
+import {button, ButtonProps} from '@xh/hoist/mobile/cmp/button';
+import {Icon} from '@xh/hoist/icon';
+import {isString} from 'lodash';
+import {isValidElement} from 'react';
+import '@xh/hoist/mobile/register';
+
+/**
+ * Mobile implementation of ErrorMessage.
+ * @internal
+ */
+export const errorMessageImpl = hoistCmp.factory<ErrorMessageProps>({
+    render({error, message, title, actionButtonProps, detailsButtonProps}) {
+        let buttons = [],
+            buttonBar = null;
+        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps as ButtonProps));
+        if (actionButtonProps) buttons.push(actionButton(actionButtonProps as ButtonProps));
+        if (buttons.length == 1) {
+            buttonBar = buttons[0];
+        } else if (buttons.length == 2) {
+            buttonBar = hbox(buttons[0], filler(), buttons[1]);
+        }
+
+        return div({
+            className: 'xh-error-message__inner',
+            items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
+        });
+    }
+});
+
+const titleCmp = hoistCmp.factory(({title}) => {
+    if (isValidElement(title)) return title;
+    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
+    return null;
+});
+
+const messageCmp = hoistCmp.factory(({message}) => {
+    if (isValidElement(message)) return message;
+    if (isString(message)) return p(message);
+    return null;
+});
+
+const actionButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Retry',
+        icon: Icon.refresh(),
+        ...props
+    });
+});
+
+const detailsButton = hoistCmp.factory<ButtonProps>(props => {
+    return button({
+        text: 'Show Details',
+        icon: Icon.detail(),
+        ...props
+    });
+});

package/mobile/cmp/mask/impl/Mask.ts

@@ -0,0 +1,34 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2024 Extremely Heavy Industries Inc.
+ */
+import {hoistCmp} from '@xh/hoist/core';
+import {box, div, vbox, vspacer} from '@xh/hoist/cmp/layout';
+import {MaskProps} from '@xh/hoist/cmp/mask';
+import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
+import '@xh/hoist/mobile/register';
+import './Mask.scss';
+
+/**
+ * Mobile implementation of Mask.
+ * @internal
+ */
+export const maskImpl = hoistCmp.factory<MaskProps>({
+    render({message, onClick, spinner = false, className}, ref) {
+        return div({
+            ref,
+            onClick,
+            className,
+            item: vbox({
+                className: 'xh-mask-body',
+                items: [
+                    spinner ? spinnerCmp() : null,
+                    spinner ? vspacer(10) : null,
+                    message ? box({className: 'xh-mask-text', item: message}) : null
+                ]
+            })
+        });
+    }
+});

package/mobile/cmp/panel/Panel.ts

@@ -15,8 +15,8 @@ import {
     hoistCmp,
     HoistModel
 } from '@xh/hoist/core';
-import {loadingIndicator} from '@xh/hoist/mobile/cmp/loadingindicator';
-import {mask} from '@xh/hoist/mobile/cmp/mask';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
+import {mask} from '@xh/hoist/cmp/mask';
 import {toolbar} from '@xh/hoist/mobile/cmp/toolbar';
 import '@xh/hoist/mobile/register';
 import {splitLayoutProps} from '@xh/hoist/utils/react';

package/package.json

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