@xh/hoist 76.0.0-SNAPSHOT.1757949377824 → 76.0.0-SNAPSHOT.1757966316621

package/CHANGELOG.md

@@ -23,6 +23,8 @@
   practice.  App maintainers should ensure that all global views are appropriate and well
   organized enough to be shown immediately to new users in the view menu.
 * New constraint rule: `validEmails` - to validate one or more email addresses in an input field.
+* `DashCanvas` accepts a new prop `rglOptions` to pass additional options to the underlying
+  `react-grid-layout`.
 
 ### 🐞 Bug Fixes
 

package/build/types/desktop/cmp/dash/canvas/DashCanvas.d.ts

@@ -1,9 +1,18 @@
 import { HoistProps, TestSupportProps } from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
+import type { ReactGridLayoutProps } from 'react-grid-layout';
 import { DashCanvasModel } from './DashCanvasModel';
 import 'react-grid-layout/css/styles.css';
 import './DashCanvas.scss';
-export type DashCanvasProps = HoistProps<DashCanvasModel> & TestSupportProps;
+export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSupportProps {
+    /**
+     * 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}
+     * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
+     */
+    rglOptions?: ReactGridLayoutProps;
+}
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.
  *

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

@@ -21,6 +21,7 @@ import {Classes, overlay} from '@xh/hoist/kit/blueprint';
 import {consumeEvent, 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';
@@ -28,7 +29,15 @@ import {dashCanvasView} from './impl/DashCanvasView';
 import 'react-grid-layout/css/styles.css';
 import './DashCanvas.scss';
 
-export type DashCanvasProps = HoistProps<DashCanvasModel> & TestSupportProps;
+export interface DashCanvasProps extends HoistProps<DashCanvasModel>, TestSupportProps {
+    /**
+     * 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}
+     * Note that some ReactGridLayout props are managed directly by DashCanvas and will be overridden if provided here.
+     */
+    rglOptions?: ReactGridLayoutProps;
+}
 
 /**
  * Dashboard-style container that allows users to drag-and-drop child widgets into flexible layouts.
@@ -46,7 +55,7 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
     className: 'xh-dash-canvas',
     model: uses(DashCanvasModel),
 
-    render({className, model, testId}, ref) {
+    render({className, model, rglOptions, testId}, ref) {
         const isDraggable = !model.layoutLocked,
             isResizable = !model.layoutLocked,
             [padX, padY] = model.containerPadding;
@@ -86,7 +95,8 @@ export const [DashCanvas, dashCanvas] = hoistCmp.withFactory<DashCanvasProps>({
                                 key: vm.id,
                                 item: dashCanvasView({model: vm})
                             })
-                        )
+                        ),
+                        ...rglOptions
                     }),
                     emptyContainerOverlay()
                 ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "76.0.0-SNAPSHOT.1757949377824",
+  "version": "76.0.0-SNAPSHOT.1757966316621",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -96,6 +96,7 @@
     "@ag-grid-community/react": "31.x",
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
+    "@types/react-grid-layout": "1.3.5",
     "@xh/hoist-dev-utils": "11.x",
     "csstype": "3.x",
     "eslint": "9.x",