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

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

@@ -7,13 +7,10 @@
 import {AgGrid} from '@xh/hoist/cmp/ag-grid';
 import {box, div, fragment, hbox, hframe, p, placeholder, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {BoxProps, hoistCmp, HoistProps, 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 classNames from 'classnames';
 import {compact, uniq} from 'lodash';
-import {splitter} from './impl/Splitter';
-
 import './SplitTreeMap.scss';
 import {SplitTreeMapModel} from './SplitTreeMapModel';
 import {treeMap} from './TreeMap';
@@ -110,7 +107,8 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
 
     const container = titleOrientation === 'horizontal' ? hbox : vbox,
         dim = titleOrientation === 'horizontal' ? 'height' : 'width',
-        size = (AgGrid as any).getHeaderHeightForSizingMode(XH.sizingMode);
+        sizingMode = XH.isMobileApp ? 'tiny' : XH.sizingMode,
+        size = (AgGrid as any).getHeaderHeightForSizingMode(sizingMode);
 
     return container({
         style: {[dim]: `${size}px`},
@@ -125,6 +123,16 @@ const mapTitle = hoistCmp.factory<SplitTreeMapModel>(({model, isPrimary}) => {
     });
 });
 
+const splitter = hoistCmp.factory<SplitTreeMapModel>(({model}) => {
+    const {orientation} = model,
+        vertical = orientation === 'vertical',
+        cmp = vertical ? hbox : vbox;
+
+    return cmp({
+        className: `xh-split-treemap__splitter xh-split-treemap__splitter--${vertical ? 'vertical' : 'horizontal'}`
+    });
+});
+
 const errorPanel = hoistCmp.factory(({errors}) =>
     errorMessage({error: errors.join(' '), message: fragment(errors.map(e => p(e)))})
 );

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

@@ -5,7 +5,6 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {HoistModel, managed, PlainObject, Theme} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import {action, observable, computed, makeObservable} from '@xh/hoist/mobx';
 import {throwIf, withDefault} from '@xh/hoist/utils/js';
 import {StoreRecord, StoreRecordId} from '@xh/hoist/data';

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/data/cube/Query.ts

@@ -52,6 +52,12 @@ export interface QueryConfig {
     /** True to include leaf nodes in return.*/
     includeLeaves?: boolean;
 
+    /**
+     * True (default) to recursively omit single-child parents in the hierarchy.
+     * Apps can implement further omit logic using `omitFn`.
+     */
+    omitRedundantNodes?: boolean;
+
     /**
      * Optional function to be called for each aggregate node to determine if it should be "locked",
      * preventing drill-down into its children.  Defaults to Cube.lockFn.
@@ -79,6 +85,7 @@ export class Query {
     readonly filter: Filter;
     readonly includeRoot: boolean;
     readonly includeLeaves: boolean;
+    readonly omitRedundantNodes: boolean;
     readonly cube: Cube;
     readonly lockFn: LockFn;
     readonly bucketSpecFn: BucketSpecFn;
@@ -93,6 +100,7 @@ export class Query {
         filter = null,
         includeRoot = false,
         includeLeaves = false,
+        omitRedundantNodes = true,
         lockFn = cube.lockFn,
         bucketSpecFn = cube.bucketSpecFn,
         omitFn = cube.omitFn
@@ -102,6 +110,7 @@ export class Query {
         this.dimensions = this.parseDimensions(dimensions);
         this.includeRoot = includeRoot;
         this.includeLeaves = includeLeaves;
+        this.omitRedundantNodes = omitRedundantNodes;
         this.filter = parseFilter(filter);
         this.lockFn = lockFn;
         this.bucketSpecFn = bucketSpecFn;
@@ -117,6 +126,7 @@ export class Query {
             filter: this.filter,
             includeRoot: this.includeRoot,
             includeLeaves: this.includeLeaves,
+            omitRedundantNodes: this.omitRedundantNodes,
             lockFn: this.lockFn,
             bucketSpecFn: this.bucketSpecFn,
             omitFn: this.omitFn,
@@ -153,6 +163,7 @@ export class Query {
             this.cube === other.cube &&
             this.includeRoot === other.includeRoot &&
             this.includeLeaves === other.includeLeaves &&
+            this.omitRedundantNodes === other.omitRedundantNodes &&
             this.bucketSpecFn == other.bucketSpecFn &&
             this.omitFn == other.omitFn &&
             this.lockFn == other.lockFn

package/data/cube/row/BaseRow.ts

@@ -65,12 +65,14 @@ export abstract class BaseRow {
 
         // 3a) Before attaching examine that we don't have a chain of redundant nodes
         // (not sure if loop needed -- are these redundant relations transitive?)
-        while (dataChildren?.length === 1) {
-            const childRow = dataChildren[0]._meta;
-            if (this.isRedundantChild(this, childRow)) {
-                dataChildren = childRow.data.children;
-            } else {
-                break;
+        if (view.query.omitRedundantNodes) {
+            while (dataChildren?.length === 1) {
+                const childRow = dataChildren[0]._meta;
+                if (this.isRedundantChild(this, childRow)) {
+                    dataChildren = childRow.data.children;
+                } else {
+                    break;
+                }
             }
         }
 

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.1735062266455",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",