@singularsystems/neo-react 1.3.7 → 1.3.9

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file details all new features and changes to functionality. If you only need to see changes that require updates to your project, see the [breaking changes](./Breaking.md) readme.
 
+## Version 1.3.9 (4 March 2026)
+
+- Dropdown
+    - Added support for grouped drop downs by specifying `groupDisplayMember` and `childListMember` props.
+- ValidationSummary
+    - Fixed component not updating when invalid rules change.
+
+## Version 1.3.8 (24 Nov 2025)
+
+- Deserialiser
+    - Fixed plain arrays not deserialising when marked with `ChildList` attribute.
+
 ## Version 1.3.7 (18 Nov 2025)
 
 - Modals shown with ModalUtils will now preserve pre-formatted text if the provided content is a string.

package/dist/React/ReactModelCreator.js

@@ -141,6 +141,10 @@ var ReactModelCreator = /** @class */ (function (_super) {
     };
     ReactModelCreator.prototype.setupList = function (object, propertyName, originalList) {
         var obsArray = object[propertyName];
+        if ((originalList === null || originalList === void 0 ? void 0 : originalList.setupProxy) === undefined) {
+            // This is a plain array, not a neo list.
+            return;
+        }
         List.copyMethods(obsArray);
         originalList.setupProxy(obsArray, object);
         // Don't allow list to change, just change the list contents.

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -9,8 +9,10 @@ interface IOption {
     value: string | number;
     label: string;
     item?: any;
+    itemParent?: any;
+    options?: IOption[];
 }
-interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption, true> {
+interface IAutoCompleteCommonProps<T, TChild = T> extends ICommonEditorProps, Props<IOption, true> {
     /**
      * Callback for loading data.
      */
@@ -19,28 +21,28 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
      * Items to display for non async drop down, or default items to display in async drop down before typing.
      */
     items?: ItemSource<T>;
-    valueMember?: keyof T;
-    displayMember?: keyof T;
+    valueMember?: keyof TChild;
+    displayMember?: keyof TChild;
     /**
      * Function used to filter items out of the datasource.
      * **Note:** this will only apply to the `items` prop. */
-    filterPredicate?: (item: T) => boolean;
+    filterPredicate?: (item: TChild, itemParent?: T) => boolean;
     /**
      * Function used to filter items based on what the user has typed.
      * Applies after `filterPredicate`, and is ignored if `itemSource` is specified.
      * Use if you are displaying multiple columns and need to match on any of the columns.
      */
-    inputFilter?: (input: string, item: T) => boolean;
+    inputFilter?: (input: string, item: TChild, parent?: T) => boolean;
     /**
      * Property of an item to use as the description.
      *
      * Description will be shown in muted text below the item name.
      */
-    descriptionMember?: keyof T | false;
+    descriptionMember?: keyof TChild | false;
     /**
      * Callback used to provide a custom option component instead of displaying the display member value.
      */
-    option?: (item: T) => JSX.Element;
+    option?: (item: T | TChild) => JSX.Element;
     /**
      * Text to display when the user has typed something, but no records were returned.
      */
@@ -54,7 +56,7 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
      * The removedItem parameter will be provided when removing an item from a multi select drop down.
      * The addedItem parameter will be provided when an item is selected in a multi select drop down. This is the item stored in the bindItems list.
      */
-    onItemSelected?: (item?: T, removedItem?: Model.ISelectedItem, addedItem?: Model.ISelectedItem) => void;
+    onItemSelected?: (item?: TChild, removedItem?: Model.ISelectedItem, addedItem?: Model.ISelectedItem) => void;
     /**
      * Millisecond delay from the last typed character, to when the itemSource function is called.
      * Default is 500ms.
@@ -65,6 +67,14 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
      * Default is 1.
      */
     minCharacters?: number;
+    /**
+     * The group member to use as the display for grouped items.
+     */
+    groupDisplayMember?: keyof T;
+    /**
+     * Name of the property on the parent which contains a child list.
+     */
+    childListMember?: keyof T;
 }
 export interface IAutoCompleteProps {
     bind: Model.IPropertyInstance;
@@ -85,20 +95,31 @@ export interface IAutoCompleteMultiSelectProps {
      */
     fieldInfoLimit?: number;
 }
-export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoCompleteCommonProps<T> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps)> {
+export default class AutoCompleteDropDown<T, TChild = T> extends DropDownBase<T, IAutoCompleteCommonProps<T, TChild> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps), TChild> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private asyncSelectImplementation;
     private selectImplementation;
-    constructor(props: IAutoCompleteCommonProps<T> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps));
+    constructor(props: IAutoCompleteCommonProps<T, TChild> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps));
     private bindProperty;
     private bindIdsList?;
     private bindIdsProperty?;
-    static getBindProp<T>(props: IAutoCompleteProps | IAutoCompleteMultiSelectProps): Model.IPropertyInstance<any>;
+    static getBindProp<TChild>(props: IAutoCompleteProps | IAutoCompleteMultiSelectProps): Model.IPropertyInstance<any>;
     private onKeyPress;
     private setBindProperty;
     private mapTArrayToOptions;
+    private mapChildItemsToOptions;
+    private getGroupedOptionsFromItems;
+    /**
+     * Finds an option in the items list by value.
+     * Handles both flat lists and grouped (nested) items.
+     * @param items The items array to search in
+     * @param value The value to search for
+     * @returns The matching IOption or undefined if not found
+     */
+    private findOptionByValue;
     private onItemSelected;
+    private get isGrouped();
     render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | JSX.Element | null | undefined;
     private getOption;
 }

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -35,7 +35,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                     else {
                         items = list;
                     }
-                    dataReceived(_this.mapTArrayToOptions(items));
+                    dataReceived(_this.mapTArrayToOptions((items).slice()));
                 });
             }, (_b = this.props.delayMs) !== null && _b !== void 0 ? _b : 500);
         }
@@ -68,16 +68,69 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
     };
     AutoCompleteDropDown.prototype.mapTArrayToOptions = function (items) {
-        var _this = this;
+        if (this.isGrouped) {
+            var firstChildItem = this.getFirstChildItem(items, this.props.childListMember);
+            if (firstChildItem) {
+                this.findMembers(firstChildItem);
+            }
+            return this.getGroupedOptionsFromItems(items);
+        }
         if (items.length) {
             this.findMembers(items[0]);
         }
-        return items.map(function (item) { return ({
-            item: item,
-            value: item[_this.valueMember],
-            label: item[_this.displayMember]
+        return this.mapChildItemsToOptions(items);
+    };
+    AutoCompleteDropDown.prototype.mapChildItemsToOptions = function (childItems, parentItem) {
+        var _this = this;
+        return childItems.map(function (childItem) { return ({
+            item: childItem,
+            itemParent: parentItem,
+            value: childItem[_this.valueMember],
+            label: childItem[_this.displayMember]
         }); });
     };
+    AutoCompleteDropDown.prototype.getGroupedOptionsFromItems = function (groupedItems) {
+        var _this = this;
+        var groupedOptions = groupedItems.map(function (groupItem) {
+            var childOptions = _this.mapChildItemsToOptions(groupItem[_this.props.childListMember], groupItem);
+            return {
+                item: groupItem,
+                itemParent: null,
+                label: groupItem[_this.props.groupDisplayMember],
+                options: childOptions
+            };
+        });
+        return groupedOptions;
+    };
+    /**
+     * Finds an option in the items list by value.
+     * Handles both flat lists and grouped (nested) items.
+     * @param items The items array to search in
+     * @param value The value to search for
+     * @returns The matching IOption or undefined if not found
+     */
+    AutoCompleteDropDown.prototype.findOptionByValue = function (items, value) {
+        if (!items) {
+            return undefined;
+        }
+        if (this.isGrouped) {
+            // For grouped items, search within child options of each group
+            for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+                var group = items_1[_i];
+                if (group.options) {
+                    var childMatch = group.options.find(function (option) { return option.value === value; });
+                    if (childMatch) {
+                        return childMatch;
+                    }
+                }
+            }
+            return undefined;
+        }
+        else {
+            // For flat items, search directly
+            return items.find(function (item) { return item.value === value; });
+        }
+    };
     AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
         var _a;
         var onItemSelected = this.props.onItemSelected, singleProps = this.props, multiProps = this.props;
@@ -129,6 +182,13 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             }
         }
     };
+    Object.defineProperty(AutoCompleteDropDown.prototype, "isGrouped", {
+        get: function () {
+            return this.props.groupDisplayMember !== undefined && this.props.childListMember !== undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     AutoCompleteDropDown.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -150,19 +210,40 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         var defaultItems = undefined;
         if (this.props.items) {
-            var items_1 = this.getItems(this.props.items);
-            defaultItems = this.mapTArrayToOptions(items_1);
+            var items_2 = [];
+            if (this.isGrouped) {
+                items_2 = this.getItems(this.props.items);
+                defaultItems = this.getGroupedOptionsFromItems(items_2);
+            }
+            else {
+                items_2 = this.getItems(this.props.items);
+                defaultItems = this.mapTArrayToOptions(items_2);
+            }
             if (filterPredicate !== undefined) {
-                if (bindValue) {
-                    // Dont filter out the current selected item even if excluded by the filter.
-                    defaultItems = defaultItems.filter(function (option) { return bindValue.value === option.value || filterPredicate(option.item); });
+                if (this.isGrouped) {
+                    var groupsWithFilteredChildren = defaultItems.map(function (group) { return (__assign(__assign({}, group), { options: group.options.filter(function (option) {
+                            if (bindValue) {
+                                return bindValue.value === option.value || filterPredicate(option.item, option.itemParent);
+                            }
+                            else {
+                                return filterPredicate(option.item, option.itemParent);
+                            }
+                        }) })); });
+                    // Remove groups that have no children after filtering
+                    defaultItems = groupsWithFilteredChildren.filter(function (group) { return group.options.length > 0; });
                 }
                 else {
-                    defaultItems = defaultItems.filter(function (option) { return filterPredicate(option.item); });
+                    if (bindValue) {
+                        // Dont filter out the current selected item even if excluded by the filter.
+                        defaultItems = defaultItems.filter(function (option) { return bindValue.value === option.value || filterPredicate(option.item, option.itemParent); });
+                    }
+                    else {
+                        defaultItems = defaultItems.filter(function (option) { return filterPredicate(option.item, option.itemParent); });
+                    }
                 }
             }
-            if (descriptionMember === undefined && items_1.length > 0) {
-                if (EnumHelper.isEnumItem(items_1[0])) {
+            if (descriptionMember === undefined && items_2.length > 0) {
+                if (EnumHelper.isEnumItem(items_2[0])) {
                     descriptionMember = "description";
                 }
             }
@@ -186,7 +267,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
                 var displayValue = bindDisplayProperty === null || bindDisplayProperty === void 0 ? void 0 : bindDisplayProperty.value;
                 if (!bindDisplayProperty) {
                     if (defaultItems) {
-                        displayValue = (_d = (_c = defaultItems.find(function (c) { return c.value === bindValue.value; })) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
+                        displayValue = (_d = (_c = this.findOptionByValue(defaultItems, bindValue.value)) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "";
                     }
                     else {
                         throw "bindDisplay is required when the items prop is not set.";
@@ -225,7 +306,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         };
         if (this.props.inputFilter && !this.props.itemSource) {
             nativeProps.filterOption = function (option, input) {
-                return !input || _this.props.inputFilter(input, option.data.item);
+                return !input || _this.props.inputFilter(input, option.data.item, option.data.itemParent);
             };
         }
         if (this.props.itemSource !== undefined) {

package/dist/ReactComponents/DropDown/DropDown.d.ts

@@ -3,20 +3,20 @@ import { IBindableEditorProps } from '../PropTypes';
 import { Data } from '@singularsystems/neo-core';
 import { DropDownBase } from './DropDownBase';
 import { FormContext } from '../FormContext';
-export interface IDropDownSpecificProps<T> {
+export interface IDropDownSpecificProps<T, TChild = T> {
     items?: T[] | Promise<T[]>;
     itemSource?: Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
-    valueMember?: keyof T;
-    displayMember?: keyof T;
+    valueMember?: keyof TChild;
+    displayMember?: keyof TChild;
     /**
      * Set to true if your bind property is nullable, and you need to show a blank item in the list.
      * If your property value is null, a blank item will automatically be shown.
      */
     allowNulls?: boolean;
     /** Function used to filter items out of the datasource. */
-    filterPredicate?: (item: T) => boolean;
+    filterPredicate?: (item: TChild, itemParent?: T) => boolean;
     /** Callback which fires when an item is selected. */
-    onItemSelected?: (item?: T) => void;
+    onItemSelected?: (item?: TChild) => void;
     /**
      * True if the display member of the selected item should display as plain text.
      * Use this if you need a readonly display, and don't want a form control rendered.
@@ -28,18 +28,28 @@ export interface IDropDownSpecificProps<T> {
     deSelectText?: string;
     /** Set to true if the property should be sorted by value instead of display text. */
     sortByValue?: boolean;
+    /**
+     * The group member to use as the display for grouped items.
+     */
+    groupDisplayMember?: keyof T;
+    /**
+     * The child list containing the grouped items.
+     */
+    childListMember?: keyof T;
 }
-export interface IDropDownProps<T> extends IBindableEditorProps<HTMLSelectElement> {
-    select: IDropDownSpecificProps<T>;
+export interface IDropDownProps<T, TChild = T> extends IBindableEditorProps<HTMLSelectElement> {
+    select: IDropDownSpecificProps<T, TChild>;
 }
-export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
+export default class DropDown<T, TChild = T> extends DropDownBase<T, IDropDownProps<T, TChild>, TChild> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private selectedItem;
     private sortByValue?;
     private listIndexSymbol;
-    constructor(props: IDropDownProps<T>);
+    private get isGrouped();
+    constructor(props: IDropDownProps<T, TChild>);
     private get items();
+    private get groupedItems();
     private createLookupIndex;
     private getSelectedOption;
     private onItemSelected;

package/dist/ReactComponents/DropDown/DropDown.js

@@ -15,17 +15,36 @@ var DropDown = /** @class */ (function (_super) {
         _this.fieldInfoContainer = Model.ModelFieldInfo.asModelFieldInfoContainer(_this.props.bind.attachedTo);
         return _this;
     }
+    Object.defineProperty(DropDown.prototype, "isGrouped", {
+        get: function () {
+            return this.props.select.groupDisplayMember !== undefined
+                && this.props.select.childListMember !== undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DropDown.prototype, "items", {
         get: function () {
             var _this = this;
-            var _a;
-            var items = this.getItems((_a = this.props.select.items) !== null && _a !== void 0 ? _a : this.props.select.itemSource);
-            if (items && items.length > 0) {
-                var item = items[0];
-                this.findMembers(item);
+            var _a, _b;
+            var items = [];
+            if (this.isGrouped) {
+                var groups = this.getItems((_a = this.props.select.items) !== null && _a !== void 0 ? _a : this.props.select.itemSource);
+                var firstChildItem = this.getFirstChildItem(groups, this.props.select.childListMember);
+                if (firstChildItem) {
+                    this.findMembers(firstChildItem);
+                }
+                items = groups.flatMap(function (group) { return group[_this.props.select.childListMember]; });
+            }
+            else {
+                items = this.getItems((_b = this.props.select.items) !== null && _b !== void 0 ? _b : this.props.select.itemSource);
+                if (items && items.length > 0) {
+                    var item = items[0];
+                    this.findMembers(item);
+                }
             }
             if (this.props.select.filterPredicate !== undefined) {
-                return items.filter(function (item) { return _this.props.bind.value === item[_this.valueMember] || _this.props.select.filterPredicate(item); });
+                return items.filter(function (item) { return _this.props.bind.value === item[_this.valueMember] || _this.props.select.filterPredicate(item, undefined); });
             }
             else {
                 return items;
@@ -34,6 +53,31 @@ var DropDown = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(DropDown.prototype, "groupedItems", {
+        get: function () {
+            var _this = this;
+            var _a;
+            var groups = this.getItems((_a = this.props.select.items) !== null && _a !== void 0 ? _a : this.props.select.itemSource);
+            var firstChildItem = this.getFirstChildItem(groups, this.props.select.childListMember);
+            if (firstChildItem) {
+                this.findMembers(firstChildItem);
+            }
+            // Handle grouped filtering - filter children in each group
+            var groupsWithFilteredChildren = groups.map(function (group) {
+                var children = group[_this.props.select.childListMember];
+                if (_this.props.select.filterPredicate !== undefined) {
+                    return __assign(__assign({}, group), { options: children.filter(function (item) { return _this.props.bind.value === (item)[_this.valueMember] || _this.props.select.filterPredicate(item, group); }) });
+                }
+                else {
+                    return __assign(__assign({}, group), { options: children });
+                }
+            });
+            // Remove groups that have no children after filtering
+            return groupsWithFilteredChildren.filter(function (group) { return group.options.length > 0; });
+        },
+        enumerable: false,
+        configurable: true
+    });
     DropDown.prototype.createLookupIndex = function (list) {
         var _this = this;
         var index = {};
@@ -42,12 +86,12 @@ var DropDown = /** @class */ (function (_super) {
         list.forEach(function (item) { return index[item[_this.valueMember]] = item; });
         return index;
     };
-    DropDown.prototype.getSelectedOption = function (value) {
+    DropDown.prototype.getSelectedOption = function (value, items) {
         if (!this.sortByValue) {
             this.props.bind.propertyInfo.hasSortValue = true;
         }
         if (!this.selectedItem || this.selectedItem[this.valueMember] != value) {
-            var list = this.items;
+            var list = items !== null && items !== void 0 ? items : this.items;
             //@ts-ignore
             var index = list[this.listIndexSymbol];
             var indexJustCreated = false;
@@ -103,7 +147,7 @@ var DropDown = /** @class */ (function (_super) {
         var displayInfo = this.props.bind.validator.getDisplayState(this.context.validationDisplayMode);
         displayInfo.applyToDom(domProps, !splitProps.inGroup);
         var items = this.items;
-        var selectedItem = this.getSelectedOption(this.props.bind.value); // This sets the sort value to allow sorting of drop downs in grids. 
+        var selectedItem = this.getSelectedOption(this.props.bind.value, items); // This sets the sort value to allow sorting of drop downs in grids. 
         var value = this.props.bind.value;
         var valueIsEmpty = !value;
         var notFound = items.length > 0 && !valueIsEmpty && selectedItem[this.valueMember] !== value;
@@ -132,10 +176,22 @@ var DropDown = /** @class */ (function (_super) {
             if (valueIsNull) {
                 domProps.className = Utils.joinWithSpaces(domProps.className, "select-no-value");
             }
+            var childListMember = void 0;
+            var groupDisplayMember_1;
+            if (this.isGrouped) {
+                childListMember = this.props.select.childListMember;
+                groupDisplayMember_1 = this.props.select.groupDisplayMember;
+            }
             control =
                 React.createElement("select", __assign({ value: valueIsNull ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
                     addBlankItem && React.createElement("option", { className: "option-default" }, notFound ? "(Not found): ".concat(value) : nullText),
-                    items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
+                    !this.isGrouped &&
+                        this.items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }),
+                    this.isGrouped &&
+                        this.groupedItems.map(function (group) {
+                            var children = group.options;
+                            return React.createElement("optgroup", { label: group[groupDisplayMember_1], key: group[groupDisplayMember_1] }, (children.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); })));
+                        }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor, domProps));
     };

package/dist/ReactComponents/DropDown/DropDownBase.d.ts

@@ -1,9 +1,9 @@
 import { Data, Model } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 export type ItemSource<T> = T[] | Promise<T[]> | Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
-export declare abstract class DropDownBase<T, TProps> extends ComponentBase<TProps> {
-    protected valueMember: keyof T;
-    protected displayMember: keyof T;
+export declare abstract class DropDownBase<T, TProps, TChild = T> extends ComponentBase<TProps> {
+    protected valueMember: keyof TChild;
+    protected displayMember: keyof TChild;
     protected findMembers(item: any): void;
     protected isLoading: boolean;
     protected dataSource: Data.IAsyncDataSource<T[]> | null;
@@ -13,4 +13,5 @@ export declare abstract class DropDownBase<T, TProps> extends ComponentBase<TPro
     afterRender(isInitial: boolean): Promise<void>;
     private fieldDisplayInfo;
     protected setFieldInfo(bindProperty: Model.IPropertyInstance, displayValue: string, readableName?: string): void;
+    protected getFirstChildItem(items: T[], childListMember: keyof T): TChild | null;
 }

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -81,6 +81,16 @@ var DropDownBase = /** @class */ (function (_super) {
             this.fieldDisplayInfo = { bindProperty: bindProperty, displayValue: displayValue, readableName: readableName };
         }
     };
+    DropDownBase.prototype.getFirstChildItem = function (items, childListMember) {
+        if (items.length > 0) {
+            var firstParentItem = items[0];
+            var childList = firstParentItem[childListMember];
+            if (childList && childList.length > 0) {
+                return childList[0];
+            }
+        }
+        return null;
+    };
     return DropDownBase;
 }(ComponentBase));
 export { DropDownBase };

package/dist/ReactComponents/Form.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Components, Model } from '@singularsystems/neo-core';
-interface IFormProps<T extends Model.IModelBase> extends Omit<React.FormHTMLAttributes<HTMLElement>, "children">, Components.IFormOptions<T> {
+interface IFormProps<T extends Model.IModelBase> extends Omit<React.FormHTMLAttributes<HTMLElement>, "children" | "onInvalid">, Components.IFormOptions<T> {
     /**
      * Called when the form is submitted, but the model is not valid.
      * The firstSubmit parameter will be true if this is the first submit attempt for the model.
      */
-    onInvalid?: (e?: React.FormEvent, firstSubmit?: boolean) => void;
+    onInvalid?: (e?: React.SubmitEvent, firstSubmit?: boolean) => void;
     children: React.ReactNode | ((item: T, meta: Model.TransformMetaType<T>) => React.ReactNode);
 }
 export default class Form<T extends Model.IModelBase> extends React.Component<IFormProps<T>> {

package/dist/ReactComponents/Form.js

@@ -1,7 +1,7 @@
 import { __assign, __awaiter, __decorate, __extends, __generator, __rest } from "tslib";
 import * as React from 'react';
-import { observer, Observer } from 'mobx-react';
-import { Validation, Model, ModalUtils, Misc } from '@singularsystems/neo-core';
+import { observer } from 'mobx-react';
+import { Model, ModalUtils, Misc } from '@singularsystems/neo-core';
 import ValidationSummary from './ValidationSummary';
 import { reaction } from 'mobx';
 import { FormContextProvider } from './FormContext';
@@ -82,7 +82,7 @@ var Form = /** @class */ (function (_super) {
                         }
                         codeModal_1 = ModalUtils.showModal(_this.props.invalidSummaryTitle || "Invalid data", React.createElement("div", null,
                             _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
-                            React.createElement(Observer, null, function () { return React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(modelOrModels), hideTopLevelTitle: !(modelOrModels instanceof Array) }); })), { onClose: onClose, closeButton: closeButton });
+                            React.createElement(ValidationSummary, { model: modelOrModels, hideTopLevelTitle: !(modelOrModels instanceof Array) })), { onClose: onClose, closeButton: closeButton });
                     }
                     if (someBusy()) {
                         // Async rule is busy, listen for when isBusy changes to false.
@@ -112,7 +112,7 @@ var Form = /** @class */ (function (_super) {
     };
     Form.prototype.render = function () {
         var _this = this;
-        var _a = this.props, validationDisplayMode = _a.validationDisplayMode, allReadOnly = _a.allReadOnly, allDisabled = _a.allDisabled, model = _a.model, showSummaryModal = _a.showSummaryModal, invalidSummaryTitle = _a.invalidSummaryTitle, invalidSummaryText = _a.invalidSummaryText, labelSizes = _a.labelSizes, suppressLabels = _a.suppressLabels, native = __rest(_a, ["validationDisplayMode", "allReadOnly", "allDisabled", "model", "showSummaryModal", "invalidSummaryTitle", "invalidSummaryText", "labelSizes", "suppressLabels"]);
+        var _a = this.props, validationDisplayMode = _a.validationDisplayMode, allReadOnly = _a.allReadOnly, allDisabled = _a.allDisabled, model = _a.model, showSummaryModal = _a.showSummaryModal, invalidSummaryTitle = _a.invalidSummaryTitle, invalidSummaryText = _a.invalidSummaryText, labelSizes = _a.labelSizes, suppressLabels = _a.suppressLabels, onInvalid = _a.onInvalid, native = __rest(_a, ["validationDisplayMode", "allReadOnly", "allDisabled", "model", "showSummaryModal", "invalidSummaryTitle", "invalidSummaryText", "labelSizes", "suppressLabels", "onInvalid"]);
         return (React.createElement("form", __assign({}, native, { onSubmit: function (e) { return _this.onSubmit(e); } }),
             React.createElement(FormContextProvider, { validationDisplayMode: validationDisplayMode !== null && validationDisplayMode !== void 0 ? validationDisplayMode : Misc.Settings.form.validationDisplayMode, allReadOnly: allReadOnly, allDisabled: allDisabled, labelSizes: labelSizes, suppressLabels: suppressLabels }, (this.props.children instanceof Function) ? this.props.children(model, model.meta) : this.props.children)));
     };

package/dist/ReactComponents/PropTypes.d.ts

@@ -132,7 +132,7 @@ export declare class BindPropsHelper {
      * Gets the correct input control type based on the props. E.g. Input / DatePicker / Select
      * @param props Props passed to a multi type input container. E.g. FormGroup / Column
      */
-    static getFormControl(props: IEditorNormalisedProps<any, any>): React.CElement<import("./DatePicker").INeoDatePickerProps, DatePicker> | React.CElement<import("./NumberInput").INumberInputProps, NumberInput> | React.CElement<import("./DropDown/DropDown").IDropDownProps<unknown>, DropDown<unknown>> | React.CElement<IFileEditorProps, FileInput> | React.CElement<import("./Input").IInputProps, Input> | React.CElement<import("./RadioList").IRadioListProps<unknown>, RadioList<unknown>>;
+    static getFormControl(props: IEditorNormalisedProps<any, any>): React.CElement<import("./DatePicker").INeoDatePickerProps, DatePicker> | React.CElement<import("./NumberInput").INumberInputProps, NumberInput> | React.CElement<import("./DropDown/DropDown").IDropDownProps<unknown, unknown>, DropDown<unknown, unknown>> | React.CElement<IFileEditorProps, FileInput> | React.CElement<import("./Input").IInputProps, Input> | React.CElement<import("./RadioList").IRadioListProps<unknown>, RadioList<unknown>>;
     static getControlType(props: IEditorNormalisedProps<any, any>): ControlType;
     static getCheckBoxType(props: IEditorNormalisedProps<any, any>, instance?: any): CheckboxType;
     /**

package/dist/ReactComponents/RadioList.js

@@ -55,7 +55,12 @@ var RadioList = /** @class */ (function (_super) {
         return React.createElement("div", { className: className }, this.items.map(function (item, index) {
             var _a, _b;
             return React.createElement("div", { className: "custom-radio " + prefix + (radioProps.inline ? " ".concat(prefix, "-inline") : ""), key: item.id },
-                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function () { return _this.onItemSelected(item); }, className: "".concat(prefix, "-input") }),
+                React.createElement("input", { type: "radio", id: splitProps.uniqueID + ((_a = item.id) !== null && _a !== void 0 ? _a : ""), name: splitProps.uniqueID, checked: bindValue === item.id, disabled: domProps.disabled || domProps.readOnly, onChange: function (e) {
+                        _this.onItemSelected(item);
+                        if (domProps.onChange) {
+                            domProps.onChange(e);
+                        }
+                    }, className: "".concat(prefix, "-input") }),
                 React.createElement("label", { className: "".concat(prefix, "-label"), htmlFor: splitProps.uniqueID + ((_b = item.id) !== null && _b !== void 0 ? _b : ""), "data-tip": tooltips && index < tooltips.length ? tooltips[index] : undefined }, item.name));
         }));
     };

package/dist/ReactComponents/ValidationSummary.js

@@ -1,7 +1,8 @@
-import { __extends } from "tslib";
+import { __decorate, __extends } from "tslib";
 import React from 'react';
 import { Validation, Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
+import { observer } from "mobx-react";
 var ValidationSummary = /** @class */ (function (_super) {
     __extends(ValidationSummary, _super);
     function ValidationSummary() {
@@ -9,6 +10,7 @@ var ValidationSummary = /** @class */ (function (_super) {
         _this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         return _this;
     }
+    ValidationSummary_1 = ValidationSummary;
     ValidationSummary.prototype.getRules = function (modelInfo) {
         return modelInfo.objectDisplayInfo.concat(modelInfo.propertyRules)
             .sort(function (a, b) { return a.order === b.order ? 0 : (a.order > b.order ? 1 : -1); })
@@ -37,10 +39,14 @@ var ValidationSummary = /** @class */ (function (_super) {
                     _this.iconFactory.getIconComponent(rule.displayInfo.icon, { fixedWidth: true, spin: !!rule.displayInfo.asyncBusyText }),
                     " ",
                     rule.displayInfo.displayText)); })),
-                React.createElement(ValidationSummary, { graph: modelInfo.valueObjects }),
-                React.createElement(ValidationSummary, { graph: modelInfo.childObjects }),
-                React.createElement(ValidationSummary, { graph: modelInfo.childLists })))); })));
+                React.createElement(ValidationSummary_1, { graph: modelInfo.valueObjects }),
+                React.createElement(ValidationSummary_1, { graph: modelInfo.childObjects }),
+                React.createElement(ValidationSummary_1, { graph: modelInfo.childLists })))); })));
     };
+    var ValidationSummary_1;
+    ValidationSummary = ValidationSummary_1 = __decorate([
+        observer
+    ], ValidationSummary);
     return ValidationSummary;
 }(React.Component));
 export default ValidationSummary;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,26 +18,26 @@
   "devDependencies": {
     "@types/jest": "30.0.0",
     "@types/memoize-one": "5.1.2",
-    "@types/node": "24.7.2",
-    "@types/react": "19.2.2",
+    "@types/node": "25.3.0",
+    "@types/react": "19.2.14",
     "@types/react-custom-scrollbars": "4.0.13",
-    "@types/react-dom": "19.2.2",
+    "@types/react-dom": "19.2.3",
     "decimal.js-light": "2.5.1",
     "react-scripts": "5.0.1",
-    "typescript": "5.7.3"
+    "typescript": "5.9.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.3.4",
+    "@singularsystems/neo-core": "1.3.8",
     "@types/react-color": "3.0.13",
-    "axios": "1.12.2",
+    "axios": "1.13.5",
     "inversify": "6.0.2",
     "memoize-one": "6.0.0",
     "mobx": "6.15.0",
     "mobx-react": "9.2.1",
     "rc-slider": "11.1.9",
-    "react": "19.2.0",
+    "react": "19.2.4",
     "react-custom-scrollbars": "4.2.1",
-    "react-dom": "19.2.0",
+    "react-dom": "19.2.4",
     "react-select": "5.10.2",
     "tslib": "2.8.1"
   },