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

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/data/validation/constraints.ts

@@ -5,6 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {LocalDate} from '@xh/hoist/utils/datetime';
+import {pluralize} from '@xh/hoist/utils/js';
 import {isArray, isEmpty, isFinite, isNil, isString, uniq} from 'lodash';
 import moment from 'moment';
 import {Constraint} from './Rule';
@@ -43,21 +44,21 @@ export const validEmail: Constraint<string> = ({value, displayName}) => {
  */
 export function validEmails(c?: ValidEmailsOptions): Constraint<string> {
     return ({value, displayName}) => {
-        if (isNil(value)) return null;
+        if (isNil(value) && !c?.minCount) return null;
 
-        const emails = value
+        const emails = (value ?? '')
             .split(';')
             .map(it => it.trim())
             .filter(Boolean);
 
         if (uniq(emails).length !== emails.length) {
-            return `${displayName} must not contain duplicate email addresses.`;
+            return `${displayName} must not contain duplicate emails.`;
         }
         if (emails.length < c?.minCount) {
-            return `${displayName} must contain at least ${c.minCount} email addresses.`;
+            return `${displayName} must contain at least ${c.minCount} ${pluralize('email', c.minCount)}.`;
         }
         if (!isNil(c?.maxCount) && emails.length > c.maxCount) {
-            return `${displayName} must contain no more than ${c.maxCount} email addresses.`;
+            return `${displayName} must contain no more than ${c.maxCount} ${pluralize('email', c.maxCount)}.`;
         }
 
         const isValid = emails.every(it => emailRegEx.test(it));

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