@xh/hoist 80.0.0-SNAPSHOT.1768251023007 → 80.0.0-SNAPSHOT.1768251400948

package/desktop/cmp/dash/canvas/widgetwell/DashCanvasWidgetWellModel.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 © 2025 Extremely Heavy Industries Inc.
+ */
+import {DragEvent} from 'react';
+import {DashCanvasModel} from '@xh/hoist/desktop/cmp/dash';
+import {HoistModel, managed} from '@xh/hoist/core';
+import '@xh/hoist/desktop/register';
+import {makeObservable, observable} from '@xh/hoist/mobx';
+import {runInAction} from 'mobx';
+
+export class DashCanvasWidgetWellModel extends HoistModel {
+    @managed
+    @observable.ref
+    dashCanvasModel: DashCanvasModel;
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        this.addReaction({
+            track: () => this.componentProps,
+            run: () =>
+                runInAction(() => (this.dashCanvasModel = this.componentProps.dashCanvasModel)),
+            fireImmediately: true
+        });
+    }
+
+    onDragStart(evt: DragEvent<HTMLDivElement>) {
+        const target = evt.target as HTMLElement;
+        if (!target) return;
+
+        this.dashCanvasModel.showAddViewButtonWhenEmpty = false;
+        evt.dataTransfer.effectAllowed = 'move';
+        target.classList.add('is-dragging');
+
+        const viewSpecId: string = target.getAttribute('id').split('draggableFor-')[1],
+            viewSpec = this.dashCanvasModel.viewSpecs.find(it => it.id === viewSpecId),
+            {width, height} = viewSpec,
+            widget = {
+                viewSpecId,
+                layout: {
+                    x: 0,
+                    y: 0,
+                    w: width,
+                    h: height
+                }
+            };
+
+        this.dashCanvasModel.setDraggedInView(widget);
+    }
+
+    onDragEnd(evt: DragEvent<HTMLDivElement>) {
+        this.dashCanvasModel.showAddViewButtonWhenEmpty = true;
+
+        const target = evt.target as HTMLElement;
+        if (!target) return;
+
+        target.classList.remove('is-dragging');
+    }
+}

package/dynamics/desktop.ts

@@ -15,6 +15,7 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
+export let collapsibleSetButton = null;
 export let ColChooserModel = null;
 export let ColumnHeaderFilterModel = null;
 export let ModalSupportModel = null;
@@ -37,6 +38,7 @@ export let DynamicTabSwitcherModel = null;
  * Not for Application use.
  */
 export function installDesktopImpls(impls) {
+    collapsibleSetButton = impls.collapsibleSetButton;
     ColChooserModel = impls.ColChooserModel;
     ColumnHeaderFilterModel = impls.ColumnHeaderFilterModel;
     ModalSupportModel = impls.ModalSupportModel;

package/dynamics/mobile.ts

@@ -15,6 +15,7 @@
  *
  * See the platform specific AppContainer where these implementations are actually provided.
  */
+export let collapsibleSetButton = null;
 export let ColChooserModel = null;
 export let colChooser = null;
 export let zoneMapper = null;
@@ -30,6 +31,7 @@ export let maskImpl = null;
  * Not for Application use.
  */
 export function installMobileImpls(impls) {
+    collapsibleSetButton = impls.collapsibleSetButton;
     ColChooserModel = impls.ColChooserModel;
     colChooser = impls.colChooser;
     zoneMapper = impls.zoneMapper;

package/mobile/appcontainer/AppContainer.ts

@@ -18,6 +18,7 @@ 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 {collapsibleSetButton} from '@xh/hoist/mobile/cmp/button/CollapsibleSetButton';
 import {elementFromContent, useOnMount} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
 import {aboutDialog} from './AboutDialog';
@@ -34,6 +35,7 @@ import {toastSource} from './ToastSource';
 import {versionBar} from './VersionBar';
 
 installMobileImpls({
+    collapsibleSetButton,
     tabContainerImpl,
     storeFilterFieldImpl,
     pinPadImpl,

package/mobile/cmp/button/CollapsibleSetButton.ts

@@ -0,0 +1,57 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+
+import {type ReactElement, type ReactNode, type JSX, useState} from 'react';
+import {tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
+import {fragment} from '@xh/hoist/cmp/layout';
+import {hoistCmp} from '@xh/hoist/core';
+import type {Intent, HoistProps} from '@xh/hoist/core';
+import {button} from '@xh/hoist/mobile/cmp/button';
+import {legend} from '@xh/hoist/cmp/layout';
+import {Icon} from '@xh/hoist/icon/Icon';
+
+export interface CollapsibleSetButtonProps extends HoistProps {
+    icon?: ReactElement;
+    text: ReactNode;
+    tooltip?: JSX.Element | string;
+    clickHandler?: (boolean) => void;
+    intent?: Intent;
+    collapsed?: boolean;
+    disabled?: boolean;
+}
+
+export const [CollapsibleSetButton, collapsibleSetButton] =
+    hoistCmp.withFactory<CollapsibleSetButtonProps>({
+        displayName: 'CollapsibleSetButton',
+        model: false,
+        render({icon, text, tooltip, intent, clickHandler, collapsed, disabled}) {
+            const [isCollapsed, setIsCollapsed] = useState<boolean>(collapsed === true),
+                btn = button({
+                    text: fragment(text, isCollapsed ? Icon.angleDown() : Icon.angleUp()),
+                    icon,
+                    outlined: isCollapsed && !intent,
+                    minimal: !intent || (intent && !isCollapsed),
+                    intent,
+                    disabled,
+                    onClick: () => {
+                        const val = !isCollapsed;
+                        setIsCollapsed(val);
+                        clickHandler?.(val);
+                    }
+                });
+
+            return legend(
+                tooltip
+                    ? bpTooltip({
+                          item: btn,
+                          content: tooltip,
+                          intent
+                      })
+                    : btn
+            );
+        }
+    });

package/mobile/cmp/header/AppBar.scss

@@ -18,17 +18,6 @@
     display: flex;
   }
 
-  .xh-app-menu-button__user-profile {
-    border-radius: 50%;
-    border: 1px solid var(--xh-appbar-title-color);
-    cursor: pointer;
-    height: 28px;
-    font-size: var(--xh-font-size-small-em);
-    line-height: 27px;
-    text-align: center;
-    width: 28px;
-  }
-
   .xh-button {
     background: transparent !important;
     color: var(--xh-appbar-title-color) !important;

package/mobile/cmp/header/AppMenuButton.ts

@@ -4,14 +4,11 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {div} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, HoistUser, MenuItemLike, XH} from '@xh/hoist/core';
+import {hoistCmp, MenuItemLike, XH} from '@xh/hoist/core';
 import {Icon} from '@xh/hoist/icon';
 import {menuButton, MenuButtonProps} from '@xh/hoist/mobile/cmp/menu';
 import '@xh/hoist/mobile/register';
 import {withDefault} from '@xh/hoist/utils/js';
-import {isFunction} from 'lodash';
-import {ReactNode} from 'react';
 
 export interface AppMenuButtonProps extends MenuButtonProps {
     /** Array of app-specific MenuItems or configs to create them. */
@@ -40,17 +37,8 @@ export interface AppMenuButtonProps extends MenuButtonProps {
 
     /** True to hide the About button */
     hideAboutItem?: boolean;
-
-    /**
-     * Replace the default hamburger icon with a user profile representation. Set to true to render
-     * the user's initials from their `HoistUser.displayName`. Alternately, provide a custom
-     * function to render an alternate compact string or element for the current user.
-     */
-    renderWithUserProfile?: boolean | RenderWithUserProfileCustomFn;
 }
 
-type RenderWithUserProfileCustomFn = (user: HoistUser) => ReactNode;
-
 /**
  * A top-level application drop down menu, which installs a standard set of menu items for common
  * application actions. Application specific items can be displayed before these standard items.
@@ -74,13 +62,11 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
             hideOptionsItem,
             hideThemeItem,
             hideAboutItem,
-            renderWithUserProfile,
             ...rest
         } = props;
 
         return menuButton({
             className,
-            icon: renderWithUserProfile ? userProfile({renderWithUserProfile}) : Icon.menu(),
             menuItems: buildMenuItems(props),
             menuClassName: 'xh-app-menu',
             popoverProps: {popoverClassName: 'xh-app-menu-popover'},
@@ -92,20 +78,6 @@ export const [AppMenuButton, appMenuButton] = hoistCmp.withFactory<AppMenuButton
 //---------------------------
 // Implementation
 //---------------------------
-const userProfile = hoistCmp.factory<
-    HoistProps & {renderWithUserProfile: true | RenderWithUserProfileCustomFn}
->({
-    model: false,
-    render({renderWithUserProfile}) {
-        return div({
-            className: 'xh-app-menu-button__user-profile',
-            item: isFunction(renderWithUserProfile)
-                ? renderWithUserProfile(XH.getUser())
-                : XH.getUserInitials()
-        });
-    }
-});
-
 function buildMenuItems({
     hideOptionsItem,
     hideFeedbackItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "80.0.0-SNAPSHOT.1768251023007",
+  "version": "80.0.0-SNAPSHOT.1768251400948",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -62,11 +62,11 @@
     "moment": "~2.30.1",
     "numbro": "~2.5.0",
     "onsenui": "~2.12.8",
-    "qs": "~6.14.0",
+    "qs": "~6.14.1",
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "2.1.1",
+    "react-grid-layout": "2.2.2",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",

package/styles/vars.scss

@@ -205,14 +205,13 @@ body {
   //---------
   --xh-appbar-bg: var(--appbar-bg, var(--xh-bg-alt));
   --xh-appbar-border-color: var(--appbar-border-color, transparent);
-  --xh-appbar-box-shadow: var(--appbar-box-shadow, #{0 0 0 1px rgb(17 20 24 / 10%), 0 1px 1px rgb(17 20 24 / 20%)});
   --xh-appbar-color: var(--appbar-color, var(--xh-text-color));
   --xh-appbar-height: var(--appbar-height, 42);
   --xh-appbar-height-px: calc(var(--xh-appbar-height) * 1px);
   --xh-appbar-title-color: var(--appbar-title-color, #{mc('blue-grey', '700')});
   --xh-appbar-title-font-size: var(--appbar-title-font-size, calc(var(--xh-font-size) * 1.9));
   --xh-appbar-title-font-size-px: calc(var(--xh-appbar-title-font-size) * 1px);
-  --xh-appbar-user-profile-hover-color: var(--appbar-user-profile-hover-color, var(--xh-orange));
+  --xh-appbar-box-shadow: var(--appbar-box-shadow, #{0 0 0 1px rgb(17 20 24 / 10%), 0 1px 1px rgb(17 20 24 / 20%)});
 
   &.xh-dark {
     --xh-appbar-border-color: var(--appbar-border-color, #{mc('blue-grey', '700')});

package/svc/IdentityService.ts

@@ -30,28 +30,16 @@ export class IdentityService extends HoistService {
         }
     }
 
-    /** @returns current acting user (see authUser for notes on impersonation) */
+    /** Current acting user (see authUser for notes on impersonation) */
     get user(): HoistUser {
         return this._apparentUser;
     }
 
-    /** @returns current acting user's username. */
+    /** Current acting user's username. */
     get username(): string {
         return this.user?.username ?? null;
     }
 
-    /** @returns current acting user's initials, based on displayName. */
-    get userInitials(): string {
-        // Handle common case of displayName being left as an email address.
-        const [displayName] = this.user.displayName.split('@'),
-            nameParts = displayName.split(/[\s.]+/);
-
-        return nameParts
-            .map(part => part.charAt(0).toUpperCase())
-            .join('')
-            .substring(0, XH.isMobileApp ? 2 : 3);
-    }
-
     /**
      * Actual user who authenticated to the web application.
      * This will be the same as the user except when an administrator is impersonation another