@xh/hoist 79.0.0-SNAPSHOT.1766500045639 → 79.0.0-SNAPSHOT.1766589539491

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

@@ -4,13 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import type {LayoutItem} from 'react-grid-layout';
 import {Persistable, PersistableState, PersistenceProvider, XH} from '@xh/hoist/core';
 import {required} from '@xh/hoist/data';
 import {DashCanvasViewModel, DashCanvasViewSpec, DashConfig, DashViewState, DashModel} from '../';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable, computed, observable, bindable} from '@xh/hoist/mobx';
-import {ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
+import {ensureUniqueBy, observeResize, throwIf} from '@xh/hoist/utils/js';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {createObservableRef} from '@xh/hoist/utils/react';
 import {
@@ -39,17 +40,26 @@ export interface DashCanvasConfig extends DashConfig<DashCanvasViewSpec, DashCan
      */
     rowHeight?: number;
 
-    /** Whether views should "compact" vertically to condense vertical space. Default `true`. */
-    compact?: boolean;
+    /**
+     * Whether views should "compact" vertically or horizontally
+     * to condense space. Default `true` defaults to vertical compaction.
+     * See react-grid-layout docs for more information.
+     * */
+    compact?: boolean | 'vertical' | 'horizontal';
 
     /** Between items [x,y] in pixels. Default `[10, 10]`. */
     margin?: [number, number];
 
+    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
+    containerPadding?: [number, number];
+
     /** Maximum number of rows permitted for this container. Default `Infinity`. */
     maxRows?: number;
 
-    /** Padding inside the container [x, y] in pixels. Defaults to same as `margin`. */
-    containerPadding?: [number, number];
+    /**
+     * Whether a grid background should be shown. Default false.
+     */
+    showGridBackground?: boolean;
 }
 
 export interface DashCanvasItemState {
@@ -79,9 +89,11 @@ export class DashCanvasModel
     //------------------------------
     @bindable columns: number;
     @bindable rowHeight: number;
-    @bindable compact: boolean;
+    @bindable compact: 'vertical' | 'horizontal';
     @bindable.ref margin: [number, number]; // [x, y]
     @bindable.ref containerPadding: [number, number]; // [x, y]
+    @bindable showGridBackground: boolean;
+    @bindable rglHeight: number;
 
     //-----------------------------
     // Public properties
@@ -135,11 +147,12 @@ export class DashCanvasModel
         addViewButtonText = 'Add View',
         columns = 12,
         rowHeight = 50,
-        compact = true,
+        compact = 'vertical',
         margin = [10, 10],
         maxRows = Infinity,
         containerPadding = margin,
-        extraMenuItems
+        extraMenuItems,
+        showGridBackground = false
     }: DashCanvasConfig) {
         super();
         makeObservable(this);
@@ -182,11 +195,11 @@ export class DashCanvasModel
         this.maxRows = maxRows;
         this.containerPadding = containerPadding;
         this.margin = margin;
-        this.containerPadding = containerPadding;
-        this.compact = compact;
+        this.compact = compact === true ? 'vertical' : compact === false ? null : compact;
         this.emptyText = emptyText;
         this.addViewButtonText = addViewButtonText;
         this.extraMenuItems = extraMenuItems;
+        this.showGridBackground = showGridBackground;
 
         this.loadState(initialState);
         this.state = this.buildState();
@@ -206,6 +219,18 @@ export class DashCanvasModel
             track: () => this.viewState,
             run: () => (this.state = this.buildState())
         });
+
+        // Used to make the height of RGL available to the gridBackground component
+        this.addReaction({
+            when: () => !!this.ref.current,
+            run: () => {
+                this.rglResizeObserver = observeResize(
+                    rect => (this.rglHeight = rect.height),
+                    this.ref.current.querySelector('.react-grid-layout'),
+                    {debounce: 100}
+                );
+            }
+        });
     }
 
     /** Removes all views from the canvas */
@@ -327,6 +352,8 @@ export class DashCanvasModel
     //------------------------
     // Implementation
     //------------------------
+    private rglResizeObserver: ResizeObserver;
+
     private getLayoutFromPosition(position: string, specId: string) {
         switch (position) {
             case 'first':
@@ -384,13 +411,13 @@ export class DashCanvasModel
         return model;
     }
 
-    onRglLayoutChange(rglLayout) {
+    onRglLayoutChange(rglLayout: LayoutItem[]) {
         rglLayout = rglLayout.map(it => pick(it, ['i', 'x', 'y', 'w', 'h']));
         this.setLayout(rglLayout);
     }
 
     @action
-    private setLayout(layout) {
+    private setLayout(layout: LayoutItem[]) {
         layout = sortBy(layout, 'i');
         const layoutChanged = !isEqual(layout, this.layout);
         if (!layoutChanged) return;
@@ -492,6 +519,7 @@ export class DashCanvasModel
                 }
             }
         }
+
         const checkPosition = (originX, originY) => {
             for (let y = originY; y < originY + height; y++) {
                 for (let x = originX; x < originX + width; x++) {

package/desktop/cmp/panel/Panel.ts

@@ -81,13 +81,13 @@ export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'titl
      * A toolbar to be docked at the top of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 
     /**
      * A toolbar to be docked at the bottom of the panel.
      * If specified as an array, items will be passed as children to a Toolbar component.
      */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
 
     /** Title text added to the panel's header. */
     title?: ReactNode;

package/desktop/cmp/rest/RestGrid.ts

@@ -7,7 +7,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 {hoistCmp, HoistProps, PlainObject, uses} from '@xh/hoist/core';
 import {MaskProps} from '@xh/hoist/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
@@ -33,7 +33,7 @@ export interface RestGridProps
      * Optional components rendered adjacent to the top toolbar's action buttons.
      * See also {@link tbar} to take full control of the toolbar.
      */
-    extraToolbarItems?: Some<ReactNode> | (() => Some<ReactNode>);
+    extraToolbarItems?: ReactNode | (() => ReactNode);
 
     /** Classname to be passed to RestForm. */
     formClassName?: string;
@@ -50,7 +50,7 @@ export interface RestGridProps
      * configs `toolbarActions`, `filterFields`, and `showRefreshButton`. If specified as an array,
      * will be passed as children to a Toolbar component.
      */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 }
 
 export const [RestGrid, restGrid] = hoistCmp.withFactory<RestGridProps>({

package/kit/react-markdown/index.ts

@@ -4,8 +4,8 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {elementFactory} from '@xh/hoist/core';
-import ReactMarkdown from 'react-markdown';
+import {type ElementFactory, elementFactory} from '@xh/hoist/core';
+import ReactMarkdown, {type Options} from 'react-markdown';
 
 export {ReactMarkdown};
-export const reactMarkdown = elementFactory(ReactMarkdown);
+export const reactMarkdown: ElementFactory<Readonly<Options>> = elementFactory(ReactMarkdown);

package/mobile/cmp/panel/Panel.ts

@@ -29,7 +29,7 @@ import {logWarn} from '@xh/hoist/utils/js';
 
 export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** A toolbar to be docked at the bottom of the panel. */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
 
     /** CSS class name specific to the panel's header. */
     headerClassName?: string;
@@ -62,7 +62,7 @@ export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     scrollable?: boolean;
 
     /** A toolbar to be docked at the top of the panel. */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 
     /** Title text added to the panel's header. */
     title?: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1766500045639",
+  "version": "79.0.0-SNAPSHOT.1766589539491",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -67,7 +67,7 @@
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "1.5.0",
+    "react-grid-layout": "2.1.1",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",
@@ -93,7 +93,6 @@
   "devDependencies": {
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
-    "@types/react-grid-layout": "1.3.5",
     "@xh/hoist-dev-utils": "11.x",
     "ag-grid-community": "34.x",
     "ag-grid-react": "34.x",

package/styles/vars.scss

@@ -797,4 +797,13 @@ body {
       // to be blank/missing/glitched, even when light theme is active.
       --xh-viewport-bg: black;
     }
+
+  //------------------------
+  // DashCanvas
+  //------------------------
+  --xh-dash-canvas-grid-cell-color: var(--dash-canvas-grid-cell-color, #{mc-muted('blue-grey', '50', 0%, 4%)});
+
+  &.xh-dark {
+    --xh-dash-canvas-grid-cell-color: var(--dash-canvas-grid-cell-color,  var(--black, hsl(202, 17%, 8%)));
+  }
 }

package/tsconfig.json

@@ -9,7 +9,7 @@
     "lib": ["dom", "es2022"],
 
     "jsx": "react",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
 
     "allowSyntheticDefaultImports": true,