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

package/CHANGELOG.md

@@ -22,6 +22,9 @@
   views will be pinned by default.  This feature was deemed too confusing, and not useful in
   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/data/validation/constraints.d.ts

@@ -10,10 +10,21 @@ import { Constraint } from './Rule';
  */
 export declare const required: Constraint;
 /**
- * Validate an email address.
- * https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript/46181#46181.
+ * Validate a single email address in a field that expects only one email address.
  */
 export declare const validEmail: Constraint<string>;
+/**
+ * Validate all email addresses in a field that allows multiple email addresses
+ * separated by a semicolon - the separator used by Outlook for multiple email addresses.
+ * All email addresses must be unique.
+ */
+export declare function validEmails(c?: ValidEmailsOptions): Constraint<string>;
+export interface ValidEmailsOptions {
+    /** Require at least N email addresses. */
+    minCount?: number;
+    /** Require no more than N email addresses. */
+    maxCount?: number;
+}
 /** Validate length of a string.*/
 export declare function lengthIs(c: LengthIsOptions): Constraint<string>;
 export interface LengthIsOptions {

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,7 +5,7 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {LocalDate} from '@xh/hoist/utils/datetime';
-import {isArray, isEmpty, isFinite, isNil, isString} from 'lodash';
+import {isArray, isEmpty, isFinite, isNil, isString, uniq} from 'lodash';
 import moment from 'moment';
 import {Constraint} from './Rule';
 /**
@@ -27,19 +27,52 @@ export const required: Constraint = ({value, displayName}) => {
 };
 
 /**
- * Validate an email address.
- * https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript/46181#46181.
+ * Validate a single email address in a field that expects only one email address.
  */
 export const validEmail: Constraint<string> = ({value, displayName}) => {
     if (isNil(value)) return null;
 
-    // prettier-ignore
-    // eslint-disable-next-line no-useless-escape
-    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-        isValid = re.test(value);
-    if (!isValid) return `${displayName} is not a properly formatted address.`;
+    const isValid = emailRegEx.test(value);
+    if (!isValid) return `${displayName} is not a properly formatted email address.`;
 };
 
+/**
+ * Validate all email addresses in a field that allows multiple email addresses
+ * separated by a semicolon - the separator used by Outlook for multiple email addresses.
+ * All email addresses must be unique.
+ */
+export function validEmails(c?: ValidEmailsOptions): Constraint<string> {
+    return ({value, displayName}) => {
+        if (isNil(value)) return null;
+
+        const emails = value
+            .split(';')
+            .map(it => it.trim())
+            .filter(Boolean);
+
+        if (uniq(emails).length !== emails.length) {
+            return `${displayName} must not contain duplicate email addresses.`;
+        }
+        if (emails.length < c?.minCount) {
+            return `${displayName} must contain at least ${c.minCount} email addresses.`;
+        }
+        if (!isNil(c?.maxCount) && emails.length > c.maxCount) {
+            return `${displayName} must contain no more than ${c.maxCount} email addresses.`;
+        }
+
+        const isValid = emails.every(it => emailRegEx.test(it));
+
+        if (!isValid) return `${displayName} has an improperly formatted email address.`;
+    };
+}
+export interface ValidEmailsOptions {
+    /** Require at least N email addresses. */
+    minCount?: number;
+
+    /** Require no more than N email addresses. */
+    maxCount?: number;
+}
+
 /** Validate length of a string.*/
 export function lengthIs(c: LengthIsOptions): Constraint<string> {
     return ({value, displayName}) => {
@@ -197,3 +230,8 @@ export const isValidJson: Constraint = ({value, displayName}) => {
         return `${displayName} is not valid JSON`;
     }
 };
+
+// https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript/46181#46181
+// prettier-ignore
+// eslint-disable-next-line no-useless-escape
+const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

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.1757428490497",
+  "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",