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

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

@@ -4,6 +4,13 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import ReactGridLayout, {
+    type LayoutItem,
+    type GridLayoutProps,
+    useContainerWidth,
+    getCompactor
+} from 'react-grid-layout';
+import {GridBackground, type GridBackgroundProps} from 'react-grid-layout/extras';
 import {showContextMenu} from '@xh/hoist/kit/blueprint';
 import composeRefs from '@seznam/compose-react-refs';
 import {div, vbox, vspacer} from '@xh/hoist/cmp/layout';
@@ -18,10 +25,8 @@ import {
 import {dashCanvasAddViewButton} from '@xh/hoist/desktop/cmp/button/DashCanvasAddViewButton';
 import '@xh/hoist/desktop/register';
 import {Classes, overlay} from '@xh/hoist/kit/blueprint';
-import {consumeEvent, TEST_ID} from '@xh/hoist/utils/js';
+import {consumeEvent, mergeDeep, TEST_ID} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
-import ReactGridLayout, {WidthProvider} from 'react-grid-layout';
-import type {ReactGridLayoutProps} from 'react-grid-layout';
 import {DashCanvasModel} from './DashCanvasModel';
 import {dashCanvasContextMenu} from './impl/DashCanvasContextMenu';
 import {dashCanvasView} from './impl/DashCanvasView';
@@ -33,10 +38,10 @@ export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSuppor
     /**
      * Optional additional configuration options to pass through to the underlying ReactGridLayout component.
      * See the RGL documentation for details:
-     * {@link https://www.npmjs.com/package/react-grid-layout#grid-layout-props}
+     * {@link https://www.npmjs.com/package/react-grid-layout#api-reference}
      * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
      */
-    rglOptions?: ReactGridLayoutProps;
+    rglOptions?: Partial<GridLayoutProps>;
 }
 
 /**
@@ -58,7 +63,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
-            [padX, padY] = model.containerPadding;
+            {width, containerRef, mounted} = useContainerWidth();
 
         return refreshContextView({
             model: model.refreshContextModel,
@@ -68,37 +73,51 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                     isDraggable ? `${className}--draggable` : null,
                     isResizable ? `${className}--resizable` : null
                 ),
-                style: {padding: `${padY}px ${padX}px`},
-                ref: composeRefs(ref, model.ref),
+                ref: composeRefs(ref, model.ref, containerRef),
                 onContextMenu: e => onContextMenu(e, model),
                 items: [
+                    gridBackgroundCells({
+                        omit: !model.showGridBackground || !mounted,
+                        width
+                    }),
                     reactGridLayout({
+                        ...mergeDeep(
+                            {
+                                gridConfig: {
+                                    cols: model.columns,
+                                    rowHeight: model.rowHeight,
+                                    margin: model.margin,
+                                    maxRows: model.maxRows,
+                                    containerPadding: model.containerPadding
+                                },
+                                dragConfig: {
+                                    enabled: isDraggable,
+                                    handle: '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
+                                    cancel: '.xh-button',
+                                    bounded: true
+                                },
+                                resizeConfig: {
+                                    enabled: isResizable
+                                },
+                                compactor: getCompactor(model.compact, false, false),
+                                onLayoutChange: (layout: LayoutItem[]) =>
+                                    model.onRglLayoutChange(layout),
+                                onResizeStart: () => (model.isResizing = true),
+                                onResizeStop: () => (model.isResizing = false)
+                            },
+                            rglOptions
+                        ),
+                        omit: !mounted,
                         layout: model.rglLayout,
-                        cols: model.columns,
-                        rowHeight: model.rowHeight,
-                        isDraggable,
-                        isResizable,
-                        compactType: model.compact ? 'vertical' : null,
-                        margin: model.margin,
-                        maxRows: model.maxRows,
-                        containerPadding: [0, 0], // Workaround for https://github.com/react-grid-layout/react-grid-layout/issues/1990
-                        autoSize: true,
-                        isBounded: true,
-                        draggableHandle:
-                            '.xh-dash-tab.xh-panel > .xh-panel__content > .xh-panel-header',
-                        draggableCancel: '.xh-button',
-                        onLayoutChange: layout => model.onRglLayoutChange(layout),
-                        onResizeStart: () => (model.isResizing = true),
-                        onResizeStop: () => (model.isResizing = false),
-                        items: model.viewModels.map(vm =>
+                        children: model.viewModels.map(vm =>
                             div({
                                 key: vm.id,
                                 item: dashCanvasView({model: vm})
                             })
                         ),
-                        ...rglOptions
+                        width
                     }),
-                    emptyContainerOverlay()
+                    emptyContainerOverlay({omit: !mounted})
                 ],
                 [TEST_ID]: testId
             })
@@ -106,6 +125,24 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     }
 });
 
+const gridBackgroundCells = hoistCmp.factory<DashCanvasModel>({
+    displayName: 'DashCanvasGridBackgroundCells',
+    model: uses(DashCanvasModel),
+    render({model, width}) {
+        return gridBackground({
+            className: 'xh-dash-canvas__grid-background',
+            width,
+            height: model.rglHeight,
+            cols: model.columns,
+            rowHeight: model.rowHeight,
+            margin: model.margin,
+            rows: 'auto',
+            color: 'var(--xh-dash-canvas-grid-cell-color)',
+            borderRadius: 0
+        });
+    }
+});
+
 const emptyContainerOverlay = hoistCmp.factory<DashCanvasModel>(({model}) => {
     const {isEmpty, emptyText} = model;
     if (!isEmpty) return null;
@@ -147,4 +184,5 @@ const onContextMenu = (e, model) => {
     }
 };
 
-const reactGridLayout = elementFactory(WidthProvider(ReactGridLayout));
+const reactGridLayout = elementFactory<GridLayoutProps>(ReactGridLayout);
+const gridBackground = elementFactory<GridBackgroundProps>(GridBackground);

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.1767027774190",
   "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,