@xh/hoist 59.0.3 → 59.1.0

package/desktop/cmp/panel/Panel.ts

@@ -13,7 +13,8 @@ import {
     TaskObserver,
     useContextModel,
     uses,
-    hoistCmp
+    hoistCmp,
+    HoistModel
 } from '@xh/hoist/core';
 import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
 import {mask} from '@xh/hoist/desktop/cmp/mask';
@@ -30,17 +31,24 @@ import './Panel.scss';
 import {PanelModel} from './PanelModel';
 import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
 import {ContextMenuSpec} from '../contextmenu/ContextMenu';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'title'> {
     /** True to style panel header (if displayed) with reduced padding and font-size. */
     compactHeader?: boolean;
 
+    /** CSS class name specific to the panel's header. */
+    headerClassName?: string;
+
     /** Items to be added to the right-side of the panel's header. */
     headerItems?: ReactNode[];
 
     /** An icon placed at the left-side of the panel's header. */
     icon?: ReactElement;
 
+    /** Icon to be used when the panel is collapsed. Defaults to `icon`. */
+    collapsedIcon?: ReactElement;
+
     /** Context Menu to show on context clicking this panel. */
     contextMenu?: ContextMenuSpec;
 
@@ -118,6 +126,8 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             icon,
             compactHeader,
             collapsedTitle,
+            collapsedIcon,
+            headerClassName,
             headerItems,
             mask: maskProp,
             loadingIndicator: loadingIndicatorProp,
@@ -145,22 +155,23 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
         const {
             resizable,
             collapsible,
-            collapsed,
+            isRenderedCollapsed,
             renderMode,
             vertical,
             showSplitter,
             refreshContextModel,
-            modalSupportModel
+            modalSupportModel,
+            errorBoundaryModel
         } = model;
 
-        if (collapsed) {
+        if (isRenderedCollapsed) {
             delete layoutProps[`min${vertical ? 'Height' : 'Width'}`];
             delete layoutProps[vertical ? 'height' : 'width'];
         }
 
         let coreContents = null;
         if (
-            !collapsed ||
+            !isRenderedCollapsed ||
             renderMode === 'always' ||
             (renderMode === 'lazy' && wasDisplayed.current)
         ) {
@@ -169,7 +180,7 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             };
 
             coreContents = vframe({
-                style: {display: collapsed ? 'none' : 'flex'},
+                style: {display: isRenderedCollapsed ? 'none' : 'flex'},
                 items: Children.toArray([
                     parseToolbar(tbar),
                     ...castArray(children),
@@ -177,17 +188,30 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
                 ])
             });
         }
-        if (!collapsed) wasDisplayed.current = true;
+        if (!isRenderedCollapsed) wasDisplayed.current = true;
 
         // decorate with hooks (internally conditional, of course)
         coreContents = useContextMenu(coreContents, contextMenu);
         coreContents = useHotkeys(coreContents, hotkeys);
 
-        // 3) Prepare combined layout with header above core.  This is what layout props are trampolined to
+        // Apply error boundary to content *excluding* header and affordances.
+        if (errorBoundaryModel) {
+            coreContents = errorBoundary({model: errorBoundaryModel, item: coreContents});
+        }
+
+        // 3) Prepare core layout with header above core.  This is what layout props are trampolined to
         let item = vbox({
             className: 'xh-panel__content',
             items: [
-                panelHeader({title, icon, compact: compactHeader, collapsedTitle, headerItems}),
+                panelHeader({
+                    title,
+                    icon,
+                    compact: compactHeader,
+                    collapsedTitle,
+                    collapsedIcon,
+                    className: headerClassName,
+                    headerItems
+                }),
                 coreContents,
                 parseLoadDecorator(maskProp, 'mask', contextModel),
                 parseLoadDecorator(loadingIndicatorProp, 'loadingIndicator', contextModel)
@@ -195,23 +219,23 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             ...rest
         });
 
+        // 4) Additional optional wrappers
         if (refreshContextModel) {
             item = refreshContextView({model: refreshContextModel, item});
         }
 
-        // 3) Wrap in modal support if needed.  Inner frame ensures className is still present in
-        // DOM when rendered in Dialog
         if (modalSupportModel) {
             item = modalSupport({
                 model: modalSupportModel,
                 item: frame({
+                    // Frame ensures className is still present when rendered in Dialog
                     item,
                     className: model.isModal ? className : undefined
                 })
             });
         }
 
-        // 4) Return wrapped in resizable affordances if needed, or equivalent layout box
+        // 5) Return wrapped in resizable affordances if needed, or equivalent layout box
         item =
             resizable || collapsible || showSplitter
                 ? resizeContainer({ref, item, className})
@@ -221,9 +245,8 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
     }
 });
 
-function parseLoadDecorator(prop, name, contextModel) {
+function parseLoadDecorator(prop: any, name: string, contextModel: HoistModel) {
     const cmp = (name === 'mask' ? mask : loadingIndicator) as any;
-    if (!prop) return null;
     if (isValidElement(prop)) return prop;
     if (prop === true) return cmp({isDisplayed: true});
     if (prop === 'onLoad') {

package/desktop/cmp/panel/PanelModel.ts

@@ -25,6 +25,7 @@ import {throwIf} from '@xh/hoist/utils/js';
 import {isNil, isNumber, isString} from 'lodash';
 import {createRef} from 'react';
 import {ModalSupportConfig, ModalSupportModel} from '../modalsupport/';
+import {ErrorBoundaryConfig, ErrorBoundaryModel} from '@xh/hoist/cmp/error/ErrorBoundaryModel';
 
 export interface PanelConfig {
     /** Can panel be resized? */
@@ -62,10 +63,16 @@ export interface PanelConfig {
 
     /**
      * Set to true to enable built-in support for showing panel contents in a modal, or provide a
-     * config to further configure.
+     * config to further configure. Default false.
      */
     modalSupport?: boolean | ModalSupportConfig;
 
+    /**
+     * Set to true to place an ErrorBoundary around the panel, or provide a
+     * config to further configure.  Default false.
+     */
+    errorBoundary?: boolean | ErrorBoundaryConfig;
+
     /** How should collapsed content be rendered? Ignored if collapsible is false. */
     renderMode?: RenderMode;
 
@@ -126,6 +133,7 @@ export class PanelModel extends HoistModel {
 
     @managed modalSupportModel: ModalSupportModel;
     @managed refreshContextModel: RefreshContextModel;
+    @managed errorBoundaryModel: ErrorBoundaryModel;
     @managed provider: PersistenceProvider;
 
     //----------------
@@ -136,11 +144,14 @@ export class PanelModel extends HoistModel {
     //---------------------
     // Observable State
     //---------------------
-    /** Is the Panel rendering in a collapsed state? */
+    /**
+     * True when collapsed in its "home" location as per this model's state.
+     * See also {@link isRenderedCollapsed}, which takes modal state into account.
+     */
     @observable
     collapsed: boolean = false;
 
-    /** Size in pixels or percents along sizing dimension.  Used when object is *not* collapsed. */
+    /** Size in pixels or percents along sizing dimension. Used when object is *not* collapsed. */
     @bindable
     size: number | string = null;
 
@@ -157,8 +168,13 @@ export class PanelModel extends HoistModel {
         return !!this.modalSupportModel;
     }
 
+    /** True when both collapsed and not currently in a modal - i.e. *really* collapsed. */
+    get isRenderedCollapsed(): boolean {
+        return this.collapsed && !this.isModal;
+    }
+
     get isActive(): boolean {
-        return !this.collapsed;
+        return !this.isRenderedCollapsed;
     }
 
     //-----------------
@@ -177,6 +193,7 @@ export class PanelModel extends HoistModel {
         defaultCollapsed = false,
         side,
         modalSupport = false,
+        errorBoundary = false,
         renderMode = 'lazy',
         refreshMode = 'onShowLazy',
         persistWith = null,
@@ -227,9 +244,10 @@ export class PanelModel extends HoistModel {
         this.refreshMode = refreshMode;
         this.showSplitter = showSplitter;
         this.showSplitterCollapseButton = showSplitterCollapseButton;
-        this.showHeaderCollapseButton = showHeaderCollapseButton;
-        this.showModalToggleButton = showModalToggleButton;
+        this.showHeaderCollapseButton = collapsible && showHeaderCollapseButton;
+        this.showModalToggleButton = modalSupport && showModalToggleButton;
 
+        // Set up various optional functionality;
         if (modalSupport) {
             this.modalSupportModel =
                 modalSupport === true
@@ -237,7 +255,13 @@ export class PanelModel extends HoistModel {
                     : new ModalSupportModel(modalSupport);
         }
 
-        // Set up various optional functionality;
+        if (errorBoundary) {
+            this.errorBoundaryModel =
+                errorBoundary === true
+                    ? new ErrorBoundaryModel()
+                    : new ErrorBoundaryModel(errorBoundary);
+        }
+
         if (collapsible) {
             this.refreshContextModel = new ManagedRefreshContextModel(this);
         }
@@ -340,6 +364,10 @@ export class PanelModel extends HoistModel {
         return this.side === 'top' || this.side === 'left';
     }
 
+    get isCollapsedToLeftOrRight(): boolean {
+        return this.isRenderedCollapsed && !this.vertical;
+    }
+
     enforceSizeLimits() {
         if (this.collapsed) return;
 

package/desktop/cmp/panel/impl/PanelHeader.scss

@@ -38,6 +38,11 @@
     color: var(--xh-panel-title-text-color) !important;
   }
 
+  // Ensure text color correct for Blueprint controls, e.g. a switch in headerItems
+  .bp4-control {
+    color: var(--xh-panel-title-text-color);
+  }
+
   // Vertical mode - collapsed to left or right
   &.xh-vbox {
     width: var(--xh-title-height-px);

package/desktop/cmp/panel/impl/PanelHeader.ts

@@ -21,13 +21,39 @@ export const panelHeader = hoistCmp.factory({
 
     render({className, ...props}) {
         const panelModel = useContextModel(PanelModel),
-            {collapsed, collapsible, isModal, vertical, side} = panelModel,
-            {title, icon, compact} = props,
-            collapsedTitle = withDefault(props.collapsedTitle, title),
-            displayedTitle = collapsed ? collapsedTitle : title,
-            headerItems = props.headerItems ?? [];
+            {
+                isRenderedCollapsed,
+                isCollapsedToLeftOrRight,
+                collapsible,
+                isModal,
+                side,
+                showModalToggleButton,
+                showHeaderCollapseButton
+            } = panelModel,
+            {title, icon, compact} = props;
 
-        if (isNil(title) && isNil(icon) && isEmpty(headerItems)) return null;
+        // Title and icon can vary based on collapsed state.
+        const collapsedTitle = withDefault(props.collapsedTitle, title),
+            displayedTitle = (isRenderedCollapsed ? collapsedTitle : title) ?? null,
+            collapsedIcon = withDefault(props.collapsedIcon, icon),
+            displayedIcon = (isRenderedCollapsed ? collapsedIcon : icon) ?? null;
+
+        // As can headerItems, which include app-specified controls (never shown when collapsed)
+        // as well as (maybe) built-in modal/collapse toggle buttons.
+        const headerItems = props.headerItems ?? [],
+            displayedHeaderItems = isRenderedCollapsed ? [] : [...headerItems];
+
+        // Return null if nothing to display.
+        if (isNil(displayedTitle) && isNil(displayedIcon) && isEmpty(displayedHeaderItems)) {
+            return null;
+        }
+
+        if (showModalToggleButton && !isRenderedCollapsed) {
+            displayedHeaderItems.push(modalToggleButton());
+        }
+        if (showHeaderCollapseButton && !isModal) {
+            displayedHeaderItems.push(collapseToggleButton({panelModel}));
+        }
 
         const onDoubleClick = () => {
             if (isModal) {
@@ -41,12 +67,13 @@ export const panelHeader = hoistCmp.factory({
             sideCls = `xh-panel-header--${side}`,
             compactCls = compact ? 'xh-panel-header--compact' : null;
 
-        // 1) Classic "top" title bar
-        if (!collapsed || vertical || isModal) {
-            return hbox({
-                className: classNames(className, compactCls),
+        // Return a vertically oriented header if collapsed to left or right side.
+        if (isCollapsedToLeftOrRight) {
+            return vbox({
+                className: classNames(className, sideCls, compactCls),
+                flex: 1,
                 items: [
-                    icon || null,
+                    displayedIcon,
                     displayedTitle
                         ? box({
                               className: titleCls,
@@ -54,44 +81,38 @@ export const panelHeader = hoistCmp.factory({
                               item: span({className: `${titleCls}__inner`, item: displayedTitle})
                           })
                         : filler(),
-                    hbox({
-                        className: 'xh-panel-header__items',
-                        items: [
-                            ...(!collapsed || isModal ? headerItems : []),
-                            modalButton({panelModel}),
-                            collapseButton({panelModel})
-                        ],
-                        onDoubleClick: e => e.stopPropagation()
-                    })
+                    ...displayedHeaderItems
                 ],
                 onDoubleClick
             });
         }
 
-        // 2) ...otherwise its a narrow, sidebar
-        return vbox({
-            className: classNames(className, sideCls, compactCls),
-            flex: 1,
+        // Return a standard horizontal header otherwise.
+        // Panel is expanded, modal, and/or collapsed to the top or bottom side.
+        return hbox({
+            className: classNames(className, compactCls),
             items: [
-                collapseButton({panelModel}),
-                icon || null,
+                displayedIcon,
                 displayedTitle
                     ? box({
                           className: titleCls,
+                          flex: 1,
                           item: span({className: `${titleCls}__inner`, item: displayedTitle})
                       })
-                    : null
+                    : filler(),
+                hbox({
+                    className: 'xh-panel-header__items',
+                    items: displayedHeaderItems,
+                    onDoubleClick: e => e.stopPropagation()
+                })
             ],
             onDoubleClick
         });
     }
 });
 
-const collapseButton = hoistCmp.factory(({panelModel}) => {
-    const {showHeaderCollapseButton, collapsible, isModal} = panelModel as PanelModel;
-    if (!showHeaderCollapseButton || !collapsible || isModal) return null;
-
-    const {vertical, collapsed, contentFirst} = panelModel,
+const collapseToggleButton = hoistCmp.factory(({panelModel}) => {
+    const {vertical, collapsed, contentFirst} = panelModel as PanelModel,
         directions = vertical ? ['chevronUp', 'chevronDown'] : ['chevronLeft', 'chevronRight'],
         idx = contentFirst !== collapsed ? 0 : 1,
         chevron = directions[idx];
@@ -102,9 +123,3 @@ const collapseButton = hoistCmp.factory(({panelModel}) => {
         minimal: true
     });
 });
-
-const modalButton = hoistCmp.factory(({panelModel}) => {
-    const {showModalToggleButton, hasModalSupport} = panelModel as PanelModel;
-    if (!showModalToggleButton || !hasModalSupport) return null;
-    return modalToggleButton();
-});

package/desktop/cmp/tab/impl/Tab.ts

@@ -9,6 +9,7 @@ import {TabModel} from '@xh/hoist/cmp/tab';
 import {hoistCmp, refreshContextView, uses} from '@xh/hoist/core';
 import {elementFromContent} from '@xh/hoist/utils/react';
 import {useRef} from 'react';
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 /**
  * Wrapper for contents to be shown within a TabContainer. This Component is used by TabContainer's
@@ -43,7 +44,7 @@ export const tab = hoistCmp.factory({
             className,
             item: refreshContextView({
                 model: refreshContextModel,
-                item: elementFromContent(content, {flex: 1})
+                item: errorBoundary(elementFromContent(content, {flex: 1}))
             })
         });
     }

package/dynamics/desktop.ts

@@ -15,37 +15,35 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
-export let tabContainerImpl = null;
-export let dockContainerImpl = null;
+export let ColChooserModel = null;
+export let ColumnHeaderFilterModel = null;
+export let ModalSupportModel = null;
 export let colChooser = null;
 export let columnHeaderFilter = null;
+export let dockContainerImpl = null;
+export let errorMessage = null;
 export let gridFilterDialog = null;
-export let storeFilterFieldImpl = null;
 export let pinPadImpl = null;
-
-export let ColChooserModel = null;
-export let ColumnHeaderFilterModel = null;
+export let storeFilterFieldImpl = null;
+export let tabContainerImpl = null;
 export let useContextMenu = null;
 
-export let ModalSupportModel = null;
-
 /**
  * Provide implementations of functions and classes exported in this file.
  *
  * Not for Application use.
  */
 export function installDesktopImpls(impls) {
-    tabContainerImpl = impls.tabContainerImpl;
-    dockContainerImpl = impls.dockContainerImpl;
-    storeFilterFieldImpl = impls.storeFilterFieldImpl;
-    pinPadImpl = impls.pinPadImpl;
+    ColChooserModel = impls.ColChooserModel;
+    ColumnHeaderFilterModel = impls.ColumnHeaderFilterModel;
+    ModalSupportModel = impls.ModalSupportModel;
     colChooser = impls.colChooser;
     columnHeaderFilter = impls.columnHeaderFilter;
+    dockContainerImpl = impls.dockContainerImpl;
+    errorMessage = impls.errorMessage;
     gridFilterDialog = impls.gridFilterDialog;
-
-    ColChooserModel = impls.ColChooserModel;
-    ColumnHeaderFilterModel = impls.ColumnHeaderFilterModel;
+    pinPadImpl = impls.pinPadImpl;
+    storeFilterFieldImpl = impls.storeFilterFieldImpl;
+    tabContainerImpl = impls.tabContainerImpl;
     useContextMenu = impls.useContextMenu;
-
-    ModalSupportModel = impls.ModalSupportModel;
 }

package/dynamics/mobile.ts

@@ -15,11 +15,12 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
-export let tabContainerImpl = null;
-export let storeFilterFieldImpl = null;
-export let pinPadImpl = null;
-export let colChooser = null;
 export let ColChooserModel = null;
+export let colChooser = null;
+export let errorMessage = null;
+export let pinPadImpl = null;
+export let storeFilterFieldImpl = null;
+export let tabContainerImpl = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -27,9 +28,10 @@ export let ColChooserModel = null;
  * Not for Application use.
  */
 export function installMobileImpls(impls) {
-    tabContainerImpl = impls.tabContainerImpl;
-    storeFilterFieldImpl = impls.storeFilterFieldImpl;
-    pinPadImpl = impls.pinPadImpl;
-    colChooser = impls.colChooser;
     ColChooserModel = impls.ColChooserModel;
+    colChooser = impls.colChooser;
+    errorMessage = impls.errorMessage;
+    pinPadImpl = impls.pinPadImpl;
+    storeFilterFieldImpl = impls.storeFilterFieldImpl;
+    tabContainerImpl = impls.tabContainerImpl;
 }

package/inspector/Inspector.scss

@@ -1,14 +1,4 @@
 .xh-inspector {
-  & > .xh-panel__content > .xh-panel-header {
-    background-color: hsl(33, 93%, 40%);
-    color: white;
-  }
-
-  .xh-modal-support__host > div > .xh-panel__content > .xh-panel-header {
-    background-color: hsl(33, 93%, 40%);
-    color: white;
-  }
-
   .xh-font-family-mono {
     font-size: 0.9em;
   }
@@ -21,3 +11,8 @@
     background-color: var(--xh-bg);
   }
 }
+
+.xh-inspector-panel-header {
+  background-color: hsl(33, 93%, 40%);
+  color: white;
+}

package/inspector/InspectorPanel.ts

@@ -26,11 +26,13 @@ export const inspectorPanel = hoistCmp.factory({
             title: `Inspector - Hoist v${XH.environmentService.get('hoistReactVersion')}`,
             icon: Icon.search(),
             className: 'xh-inspector',
+            headerClassName: 'xh-inspector-panel-header',
             modelConfig: {
                 defaultSize: 400,
                 side: 'bottom',
                 persistWith: XH.inspectorService.persistWith,
                 modalSupport: true,
+                errorBoundary: true,
                 showModalToggleButton: true,
                 showHeaderCollapseButton: false,
                 xhImpl: true

package/kit/react-markdown/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 {elementFactory} from '@xh/hoist/core';
+import ReactMarkdown from 'react-markdown';
+
+export {ReactMarkdown};
+export const reactMarkdown = elementFactory(ReactMarkdown);

package/mobile/appcontainer/AppContainer.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {AppContainerModel} from '@xh/hoist/appcontainer/AppContainerModel';
-import {errorBoundary} from '@xh/hoist/appcontainer/ErrorBoundary';
+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 {installMobileImpls} from '@xh/hoist/dynamics/mobile';
@@ -30,13 +30,15 @@ import {messageSource} from './MessageSource';
 import {optionsDialog} from './OptionsDialog';
 import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
+import {errorMessage} from '../cmp/error/ErrorMessage';
 
 installMobileImpls({
     tabContainerImpl,
     storeFilterFieldImpl,
     pinPadImpl,
     colChooser,
-    ColChooserModel
+    ColChooserModel,
+    errorMessage
 });
 
 /**
@@ -57,7 +59,19 @@ export const AppContainer = hoistCmp({
         useOnMount(() => model.initAsync());
 
         return fragment(
-            errorBoundary(viewForState()),
+            errorBoundary({
+                modelConfig: {
+                    errorHandler: {
+                        title: 'Critical Error',
+                        message:
+                            XH.clientAppName +
+                            ' encountered a critical error and cannot be displayed.',
+                        requireReload: true
+                    },
+                    errorRenderer: () => null
+                },
+                item: viewForState()
+            }),
             // Modal component helpers rendered here at top-level to support display of messages
             // and exceptions at any point during the app lifecycle.
             exceptionDialog(),

package/mobile/appcontainer/Banner.scss

@@ -20,6 +20,31 @@ body.xh-app .xh-banner {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    // Disallow most markdown styling except **bold**, *italics* and (links)
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    ul,
+    li,
+    a,
+    code {
+      display: inline;
+      margin: unset;
+      padding: unset;
+      color: unset;
+      font-weight: unset;
+      font-size: unset;
+      font-family: unset;
+      list-style: none;
+    }
+
+    // Render links with an underline
+    a {
+      text-decoration: underline;
+    }
   }
 
   &__action-button {

package/mobile/appcontainer/Banner.ts

@@ -9,6 +9,7 @@ import {XH, uses, hoistCmp} from '@xh/hoist/core';
 import {hframe, div} from '@xh/hoist/cmp/layout';
 import {button} from '@xh/hoist/mobile/cmp/button';
 import {Icon} from '@xh/hoist/icon';
+import {markdown} from '@xh/hoist/cmp/markdown';
 import {isEmpty, isFunction} from 'lodash';
 import classNames from 'classnames';
 
@@ -41,7 +42,7 @@ export const banner = hoistCmp.factory({
                         icon,
                         div({
                             className: 'xh-banner__message',
-                            item: message,
+                            item: markdown({content: message}),
                             onClick
                         })
                     ]