@singularsystems/neo-react 0.10.40 → 0.10.43

package/dist/Modules/NeoReactModule.js

@@ -10,9 +10,11 @@ import { AutoRunnerFactory } from '../React/AutoRunner';
 import { RoutingState } from '../Routing/RoutingState';
 import { ContextMenuState } from '../ReactComponents/ContextMenu/ContextMenuState';
 import { DisposeHelper } from '../Services/DisposeHelper';
+import Decimal from 'decimal.js-light';
 var neoReactModule = new AppServices.Module("neo-react", function (container) {
     container.bind(AppServices.NeoTypes.Core.AutoRunnerFactory).to(AutoRunnerFactory).inSingletonScope();
     container.bind(AppServices.NeoTypes.Core.ModelCreator).to(ReactModelCreator).inTransientScope();
+    container.bind(AppServices.NeoTypes.Misc.DecimalType).toConstantValue(Decimal);
     container.bind(AppServices.NeoTypes.UI.ErrorHandler).to(ErrorHandler).inSingletonScope();
     container.bind(AppServices.NeoTypes.UI.GlobalContextMenuState).toConstantValue(new ContextMenuState());
     container.bind(AppServices.NeoTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();

package/dist/Modules/Types.d.ts

@@ -5,6 +5,7 @@ import Slider, { Range } from 'rc-slider';
 import { SketchPicker } from 'react-color';
 import AsyncSelect from 'react-select/async';
 import { AxiosStatic } from 'axios';
+import Decimal from 'decimal.js-light';
 import Select from 'react-select';
 import { IDisposeHelper } from '../Services/IDisposeHelper';
 declare const NeoReactTypes: {
@@ -38,6 +39,9 @@ declare const NeoReactTypes: {
     Localisation: {
         LocalisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Localisation").ILocalisationService>;
     };
+    Misc: {
+        DecimalType: AppServices.ServiceIdentifier<typeof Decimal>;
+    };
     Security: {
         AuthenticationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthenticationService>;
         AuthorisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthorisationService>;

package/dist/React/AutoRunner.d.ts

@@ -1,5 +1,5 @@
 import { Misc, Model } from '@singularsystems/neo-core';
 import { IAutoRunnerFactory } from '@singularsystems/neo-core/dist/Model/IAutoRunner';
 export declare class AutoRunnerFactory implements IAutoRunnerFactory {
-    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions): Misc.IAutoRunner;
+    create<T extends Model.IModelBase>(model: T, callback: (model: T) => void, options?: Misc.IAutoRunnerOptions<T>): Misc.IAutoRunner;
 }

package/dist/React/AutoRunner.js

@@ -55,9 +55,10 @@ var AutoRunner = /** @class */ (function () {
         if (instance && !trackedInstances.has(instance)) {
             trackedInstances.set(instance, true);
             var info = instance.constructor.neo;
+            var filterProperties = path === "" ? this.options.rootProperties : undefined;
             for (var _i = 0, _b = info.properties; _i < _b.length; _i++) {
                 var propertyInfo = _b[_i];
-                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName]) {
+                if (!propertyInfo.noTrack && instance.meta[propertyInfo.propertyName] && (!filterProperties || filterProperties.indexOf(propertyInfo.propertyName) >= 0)) {
                     if (propertyInfo.relationType === Misc.RelationType.None) {
                         var key = path + propertyInfo.propertyName;
                         var useDelay = this.propertyMap[key];

package/dist/ReactComponents/Button.js

@@ -49,7 +49,7 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _this = this;
         var _a;
-        var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, pulse = _b.pulse, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "pulse"]);
+        var _b = this.props, isSubmit = _b.isSubmit, variant = _b.variant, size = _b.size, isOutline = _b.isOutline, icon = _b.icon, iconAlignment = _b.iconAlignment, text = _b.text, menuItems = _b.menuItems, splitMenu = _b.splitMenu, menuAlignment = _b.menuAlignment, buttonGroupClassName = _b.buttonGroupClassName, tooltip = _b.tooltip, task = _b.task, isBusy = _b.isBusy, pulse = _b.pulse, native = __rest(_b, ["isSubmit", "variant", "size", "isOutline", "icon", "iconAlignment", "text", "menuItems", "splitMenu", "menuAlignment", "buttonGroupClassName", "tooltip", "task", "isBusy", "pulse"]);
         native.type = isSubmit ? "submit" : "button";
         variant = (variant !== null && variant !== void 0 ? variant : "primary");
         var isDropDown = menuItems && menuItems.length;
@@ -60,7 +60,7 @@ var Button = /** @class */ (function (_super) {
             buttonClasses += " dropdown-toggle";
             native.onClick = this.showMenu;
         }
-        if ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy) {
+        if (isBusy || ((_a = task) === null || _a === void 0 ? void 0 : _a.isBusy)) {
             icon = "fa-circle-notch fa-spin";
             native.disabled = true;
         }

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

@@ -20,6 +20,12 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
     items?: ItemSource<T>;
     valueMember?: keyof T;
     displayMember?: keyof T;
+    /**
+     * Property of an item to use as the description.
+     *
+     * Description will be shown in muted text below the item name.
+     */
+    descriptionMember?: keyof T | false;
     /**
      * Callback used to provide a custom option component instead of displaying the display member value.
      */
@@ -72,5 +78,6 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private mapTArrayToOptions;
     private onItemSelected;
     render(): JSX.Element;
+    private getOption;
 }
 export {};

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -1,6 +1,6 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
-import { Misc, Utils } from '@singularsystems/neo-core';
+import { EnumHelper, Misc, Utils } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import { DropDownBase } from './DropDownBase';
 import { BindPropsHelper } from '../PropTypes';
@@ -98,7 +98,7 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
     AutoCompleteDropDown.prototype.render = function () {
         var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
+        var _m = this.props, bind = _m.bind, bindDisplay = _m.bindDisplay, bindItems = _m.bindItems, bindIds = _m.bindIds, itemSource = _m.itemSource, items = _m.items, displayMember = _m.displayMember, valueMember = _m.valueMember, descriptionMember = _m.descriptionMember, option = _m.option, noRecordsPrompt = _m.noRecordsPrompt, typeToSearchPrompt = _m.typeToSearchPrompt, delayMs = _m.delayMs, minCharacters = _m.minCharacters, onItemSelected = _m.onItemSelected, otherProps = __rest(_m, ["bind", "bindDisplay", "bindItems", "bindIds", "itemSource", "items", "displayMember", "valueMember", "descriptionMember", "option", "noRecordsPrompt", "typeToSearchPrompt", "delayMs", "minCharacters", "onItemSelected"]);
         var splitProps = BindPropsHelper.splitCommonEditorProps(otherProps);
         var nativeProps = splitProps.rest;
         var bindItemsProperty = bindItems;
@@ -112,7 +112,13 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         this.valueMember = (_c = this.props.valueMember, (_c !== null && _c !== void 0 ? _c : ""));
         var defaultItems = undefined;
         if (this.props.items) {
-            defaultItems = this.mapTArrayToOptions(this.getItems(this.props.items));
+            var items_1 = this.getItems(this.props.items);
+            defaultItems = this.mapTArrayToOptions(items_1);
+            if (descriptionMember === undefined && items_1.length > 0) {
+                if (EnumHelper.isEnumItem(items_1[0])) {
+                    descriptionMember = "description";
+                }
+            }
         }
         var value = null;
         if (bindItems) {
@@ -135,11 +141,15 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         var components = (_j = nativeProps.components, (_j !== null && _j !== void 0 ? _j : {}));
         if (this.props.option) {
-            components.Option = function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: "react-select-row" + (item.isFocused ? " focused" : "") }), _this.props.option(item.data))); };
+            components.Option = this.getOption(this.props.option);
         }
         else if (components.Option) {
-            var originalOption_1 = components.Option;
-            components.Option = function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: "react-select-row" + (item.isFocused ? " focused" : "") }), originalOption_1(item))); };
+            components.Option = this.getOption(components.Option);
+        }
+        else if (descriptionMember) {
+            components.Option = this.getOption(function (item) { return React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "react-select-name" }, item[_this.displayMember]),
+                React.createElement("div", { className: "react-select-description" }, item[descriptionMember])); }, "with-description");
         }
         if (nativeProps.isClearable === undefined) {
             nativeProps.isClearable = true;
@@ -165,6 +175,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
             return Tooltip.fromDataAttributes(InputHelpers.surroundWithInputGroup(React.createElement(this.selectImplementation, __assign({}, nativeProps, { placeholder: (_l = this.props.placeholder, (_l !== null && _l !== void 0 ? _l : "")), classNamePrefix: "react-select-bs", options: defaultItems, isLoading: this.isLoading, isMulti: bindItems !== undefined, noOptionsMessage: function (c) { var _a; return _a = _this.props.noRecordsPrompt, (_a !== null && _a !== void 0 ? _a : "No records found"); }, value: value, onChange: this.onItemSelected, components: components })), splitProps.editor), nativeProps);
         }
     };
+    AutoCompleteDropDown.prototype.getOption = function (content, additionalClass) {
+        return function (item) { return (React.createElement("div", __assign({ ref: item.innerRef }, item.innerProps, { className: Utils.joinWithSpaces("react-select-row", additionalClass, item.isFocused ? "focused" : undefined, item.isSelected ? "selected" : undefined) }), content(item.data))); };
+    };
     AutoCompleteDropDown.contextType = FormContext;
     AutoCompleteDropDown = __decorate([
         observer,

package/dist/ReactComponents/DropDown/DropDown.js

@@ -80,7 +80,7 @@ var DropDown = /** @class */ (function (_super) {
     };
     DropDown.prototype.render = function () {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         var splitProps = BindPropsHelper.normaliseEditorProps(this, this.props);
         var domProps = BindPropsHelper.autoSetDomProperties(splitProps, this.context);
         domProps.className = Utils.joinWithSpaces(domProps.className, splitProps.isBootstrap ? "form-control" : "neo-forms-editor");
@@ -96,7 +96,7 @@ var DropDown = /** @class */ (function (_super) {
         var selectedItem = this.getSelectedOption(this.props.bind.value); // This sets the sort value to allow sorting of drop downs in grids. 
         var value = this.props.bind.value;
         var addBlankItem = (_b = (_a = splitProps.select) === null || _a === void 0 ? void 0 : _a.allowNulls, (_b !== null && _b !== void 0 ? _b : this.props.bind.propertyInfo.allowNulls)) || !value;
-        if (addBlankItem && items.find(function (item) { return item[_this.valueMember] === null; })) {
+        if (addBlankItem && items.find(function (item) { return item[_this.valueMember] === null || item[_this.valueMember] === ""; })) {
             // If there is an item with a null value, don't add a blank drop down item.
             addBlankItem = false;
         }
@@ -116,9 +116,10 @@ var DropDown = /** @class */ (function (_super) {
                 domProps.disabled = true;
             }
             var valueIsBlank = value === undefined || value === null;
+            var nullText = (valueIsBlank || ((_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.deSelectText) === undefined) ? (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.nullText : (_f = splitProps.select) === null || _f === void 0 ? void 0 : _f.deSelectText;
             control =
                 React.createElement("select", __assign({ value: valueIsBlank ? "" : value, onChange: this.onItemSelected, ref: splitProps.editor.inputElement }, domProps),
-                    addBlankItem && React.createElement("option", null, valueIsBlank ? (_d = splitProps.select) === null || _d === void 0 ? void 0 : _d.nullText : (_e = splitProps.select) === null || _e === void 0 ? void 0 : _e.deSelectText),
+                    addBlankItem && React.createElement("option", null, nullText),
                     items.map(function (item) { return (React.createElement("option", { value: item[_this.valueMember], key: item[_this.valueMember] }, item[_this.displayMember])); }));
         }
         return (InputHelpers.surroundWithInputGroup(control, splitProps.editor));

package/dist/ReactComponents/DropDown/DropDownBase.js

@@ -1,5 +1,5 @@
 import { __awaiter, __extends, __generator } from "tslib";
-import { Data, Model } from '@singularsystems/neo-core';
+import { Data, EnumHelper, Model } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 var DropDownBase = /** @class */ (function (_super) {
     __extends(DropDownBase, _super);
@@ -13,6 +13,10 @@ var DropDownBase = /** @class */ (function (_super) {
     }
     DropDownBase.prototype.findMembers = function (item) {
         if (!this.valueMember || !this.displayMember) {
+            if (EnumHelper.isEnumItem(item)) {
+                this.valueMember = "id";
+                this.displayMember = "name";
+            }
             if (!this.displayMember) {
                 var neoTypeInfo = item.constructor.neo;
                 if (neoTypeInfo && neoTypeInfo.displayMember) {

package/dist/ReactComponents/FileManager/FileBasicInput.js

@@ -1,4 +1,4 @@
-import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import { __assign, __awaiter, __decorate, __extends, __generator, __metadata, __rest } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { FileContext } from './FileContext';
@@ -14,9 +14,30 @@ var FileBasicInput = /** @class */ (function (_super) {
         return _this;
     }
     FileBasicInput.prototype.onFileSelected = function (e) {
-        if (e.target.files) {
-            this.fileManager.processFiles(e.target.files, { handleErrors: !this.fileManager.options.taskRunner });
-        }
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!e.target.files) return [3 /*break*/, 4];
+                        _c.label = 1;
+                    case 1:
+                        _c.trys.push([1, , 3, 4]);
+                        return [4 /*yield*/, this.fileManager.processFiles(e.target.files, { handleErrors: !this.fileManager.options.taskRunner })];
+                    case 2:
+                        _c.sent();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        input = (_a = e.target, (_a !== null && _a !== void 0 ? _a : (_b = this.props.inputRef) === null || _b === void 0 ? void 0 : _b.current));
+                        if (input) {
+                            input.value = "";
+                        }
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
     };
     FileBasicInput.prototype.render = function () {
         var _a = this.props, fileManager = _a.fileManager, isHidden = _a.isHidden, inputRef = _a.inputRef, native = __rest(_a, ["fileManager", "isHidden", "inputRef"]);

package/dist/ReactComponents/Grid/ButtonColumn.d.ts

@@ -3,6 +3,16 @@ import { GridContext } from './Grid';
 import { IButtonOptions } from '@singularsystems/neo-core/dist/Components/ButtonOptions';
 import ComponentBase from '../ComponentBase';
 import { INeoCommonColumnProps } from './ColumnHelper';
+interface IDeleteButtonOptions extends IButtonOptions {
+    /**
+     * Callback to run when a non new item is deleted.
+     * * Use this to call an api to delete the item in the database.
+     *   * Return true if the item was deleted, and must be removed from the list.
+     *   * The list will not be marked dirty.
+     * * If the item is new, it will be removed without invoking this callback.
+     */
+    onDeleteExisting?: (item: any) => Promise<boolean>;
+}
 interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTMLTableCellElement> {
     /** Item to pass to edit and delete callbacks. Defaults to the current rows item */
     item?: any;
@@ -15,7 +25,7 @@ interface IButtonColumnProps extends INeoCommonColumnProps, React.HTMLProps<HTML
     /** Show delete button? Not required if deleteButton options are set. */
     showDelete?: boolean;
     /** Delete button options. Will cause delete button to be shown. */
-    deleteButton?: IButtonOptions;
+    deleteButton?: IDeleteButtonOptions;
     /** Edit button options. Will cause edit button to be shown. */
     editButton?: IButtonOptions;
     /** View button options. Will cause view button to be shown. */
@@ -31,7 +41,7 @@ export declare class ButtonColumn extends ComponentBase<IButtonColumnProps> {
     private item;
     private section;
     protected onFirstRender(): void;
-    onDelete(): void;
+    onDelete(): Promise<void>;
     render(): JSX.Element;
 }
 export {};

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -1,4 +1,4 @@
-import { __assign, __extends, __rest } from "tslib";
+import { __assign, __awaiter, __extends, __generator, __rest } from "tslib";
 import * as React from 'react';
 import { GridContext } from './Grid';
 import NeoButton from '../Button';
@@ -17,7 +17,28 @@ var ButtonColumn = /** @class */ (function (_super) {
         this.item = this.context.currentItem;
     };
     ButtonColumn.prototype.onDelete = function () {
-        this.context.dataView.rawItems.remove(this.props.item || this.item);
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var item, mustRemove;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        item = (_a = this.props.item, (_a !== null && _a !== void 0 ? _a : this.item));
+                        if (!(item.isNew === false && ((_b = this.props.deleteButton) === null || _b === void 0 ? void 0 : _b.onDeleteExisting) !== undefined)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.props.deleteButton.onDeleteExisting(item)];
+                    case 1:
+                        mustRemove = _c.sent();
+                        if (mustRemove) {
+                            this.context.dataView.rawItems.removeWithoutTracking(item);
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        this.context.dataView.rawItems.remove(item);
+                        _c.label = 3;
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
     };
     ButtonColumn.prototype.render = function () {
         this.onRender();

package/dist/ReactComponents/Grid/Grid.d.ts

@@ -67,6 +67,12 @@ export interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
     isSmallTable?: boolean;
     /** Additional footer row(s) to display below the main footer row. */
     footerContent?: (data: T[]) => React.ReactNode;
+    /**
+     * Additional content to show next to the add new button.
+     *
+     * Set `showAddButton = false` if you don't want the default button.
+     */
+    footerButtons?: () => React.ReactNode;
 }
 export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;

package/dist/ReactComponents/Grid/Grid.js

@@ -32,7 +32,7 @@ var Grid = /** @class */ (function (_super) {
     }
     Grid.prototype.render = function () {
         var _this = this;
-        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent"]);
+        var _a = this.props, items = _a.items, showAddButton = _a.showAddButton, addButton = _a.addButton, filterPredicate = _a.filterPredicate, keyProperty = _a.keyProperty, allowSort = _a.allowSort, expandAll = _a.expandAll, collapseAll = _a.collapseAll, initialSort = _a.initialSort, initialSortAscending = _a.initialSortAscending, isBordered = _a.isBordered, isStriped = _a.isStriped, isBorderless = _a.isBorderless, showHover = _a.showHover, isSmallTable = _a.isSmallTable, footerContent = _a.footerContent, footerButtons = _a.footerButtons, domProps = __rest(_a, ["items", "showAddButton", "addButton", "filterPredicate", "keyProperty", "allowSort", "expandAll", "collapseAll", "initialSort", "initialSortAscending", "isBordered", "isStriped", "isBorderless", "showHover", "isSmallTable", "footerContent", "footerButtons"]);
         if (expandAll === true) {
             this.gridContext.expandAll = true;
         }
@@ -90,11 +90,12 @@ var Grid = /** @class */ (function (_super) {
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item) { return (React.createElement(ItemGroup, { item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                React.createElement(Observer, null, function () { return (showAddButton || addButton || _this.gridContext.hasSummaries || footerContent !== undefined) &&
+                React.createElement(Observer, null, function () { return (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
                     React.createElement(TableSection, { type: "footer" },
                         _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta),
                         footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
-                        (showAddButton || addButton) && React.createElement(AddButtonRow, { addButton: addButton })); }))));
+                        (showAddButton || addButton || footerButtons) &&
+                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })); }))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;
@@ -171,12 +172,15 @@ var AddButtonRow = /** @class */ (function (_super) {
         }
     };
     AddButtonRow.prototype.render = function () {
-        var addButtonOptions = Utils.populatePartialWithDefaults(this.props.addButton, __assign({}, Misc.Settings.grid.addButton));
+        var _a = this.props, addButton = _a.addButton, showAddButton = _a.showAddButton, additionalContent = _a.additionalContent;
+        var addButtonOptions = Utils.populatePartialWithDefaults(addButton, __assign({}, Misc.Settings.grid.addButton));
         if (!addButtonOptions.onClick)
             addButtonOptions.onClick = this.onAddNew;
         return (React.createElement("tr", { ref: this.domRef },
             React.createElement("td", { colSpan: this.context.columnCount + (this.context.expandProperty ? 1 : 0) },
-                React.createElement(NeoButton, __assign({}, addButtonOptions)))));
+                React.createElement("div", { className: "neo-grid-button-row" },
+                    showAddButton !== false && React.createElement(NeoButton, __assign({}, addButtonOptions)),
+                    additionalContent !== undefined && additionalContent()))));
     };
     AddButtonRow.contextType = GridContext;
     return AddButtonRow;

package/dist/ReactComponents/Modal/Modal.js

@@ -41,13 +41,16 @@ var Modal = /** @class */ (function (_super) {
                 }
             }
             show = !!propertyInstance.value;
-            onClose = function () {
+            onClose = function (event) {
                 if (propertyInstance.value === true) {
                     propertyInstance.value = false;
                 }
                 else {
                     propertyInstance.value = null;
                 }
+                if (_this.props.onClose) {
+                    _this.props.onClose(event);
+                }
             };
         }
         else {

package/dist/ReactComponents/NumberInput.js

@@ -45,7 +45,7 @@ var FormatState = /** @class */ (function () {
             return this.zeroText;
         }
         if (value !== undefined && value !== null) {
-            if (value instanceof Decimal) {
+            if (value instanceof Misc.Globals.decimalType) {
                 value = value.toNumber();
             }
             if (typeof value === "number") {
@@ -65,6 +65,8 @@ var FormatState = /** @class */ (function () {
     return FormatState;
 }());
 export { FormatState };
+// Taken from https://github.com/MikeMcl/decimal.js-light/blob/master/decimal.js since it is not exported.
+var validDecimalRegex = /^(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i;
 var NumberInput = /** @class */ (function (_super) {
     __extends(NumberInput, _super);
     function NumberInput(props) {
@@ -82,8 +84,10 @@ var NumberInput = /** @class */ (function (_super) {
     }
     NumberInput.prototype.onChanged = function (e) {
         var newValue;
-        if (e.target.value !== "" && isNaN(parseFloat(e.target.value))) {
-            return;
+        if (e.target.value !== "") {
+            if (isNaN(parseFloat(e.target.value)) || !validDecimalRegex.test(e.target.value)) {
+                return;
+            }
         }
         if (e.target.value == "") {
             newValue = this.props.bind.propertyInfo.allowNulls ? null : new Decimal(0);
@@ -122,7 +126,7 @@ var NumberInput = /** @class */ (function (_super) {
     };
     NumberInput.prototype.getBindValueAsNumber = function () {
         var propertyValue = this.props.bind.value;
-        if (propertyValue instanceof Decimal) {
+        if (propertyValue instanceof Misc.Globals.decimalType) {
             return propertyValue.toNumber();
         }
         else {

package/dist/ReactComponents/_Exports.d.ts

@@ -36,6 +36,7 @@ import Tab from './Tabs/Tab';
 import Toast from './Notifications/Toast';
 import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
+import { TooltipHelper } from './TooltipHelper';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipHelper, TooltipProvider, ValidationSummary };

package/dist/ReactComponents/_Exports.js

@@ -36,6 +36,7 @@ import Tab from './Tabs/Tab';
 import Toast from './Notifications/Toast';
 import ToastContainer from './Notifications/ToastContainer';
 import Tooltip from './Tooltip';
+import { TooltipHelper } from './TooltipHelper';
 import TooltipProvider from './TooltipProvider';
 import ValidationSummary from './ValidationSummary';
-export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipProvider, ValidationSummary };
+export { Alert, AutoCompleteDropDown, Button, Card, Checkbox, Collapsable, ColorPicker, ContextMenuContainer, DatePicker, DropDown, FileBasicInput, FileContext, FileDropArea, FileInput, FileUploadButton, FileUploadProgress, Form, FormContext, FormGroup, FormGroupFloating, FormGroupInline, GridLayout, Input, Link, Loader, Modal, ModalContainer, NumberInput, Pager, PagerControlsBasic, PageSizeControl, Passwordbox, ProgressBar, RadioList, Slider, TabContainer, Tab, Textbox, Toast, ToastContainer, Tooltip, TooltipHelper, TooltipProvider, ValidationSummary };

package/dist/Views/ViewModelBase.d.ts

@@ -19,6 +19,7 @@ export default abstract class ViewModelBase extends ModelBase implements IViewMo
     registerReaction<T>(expression: () => T, effect: (value: T) => void): IReactionDisposer;
     /**
      * Instantiates, and registers a child view model that will be disposed when this view model is disposed.
+     * The task runner will be passed to the new vm from this one.
      * @param viewModel View model type.
      */
     registerViewModel<TViewModel extends IViewModel>(viewModel: new () => TViewModel, options?: {
@@ -37,7 +38,14 @@ export default abstract class ViewModelBase extends ModelBase implements IViewMo
      * Uses the task runner to call an api endpoint. The returned data is deserialised into an instance of the provided model type.
      */
     waitForModel<T extends BindableBase>(modelType: typeof BindableBase, task: AxiosPromise<Model.PlainTrackedObject<T>>, options?: Partial<WaitForTaskRunnerOptions<Model.PlainTrackedObject<T>>>): Promise<T>;
+    /**
+     * Registers the object for disposal when this viewmodel is disposed.
+     */
     autoDispose<T extends Misc.IDisposable>(disposable: T): T;
+    /**
+     * Binds a list of functions to the viewmodel instance.
+     */
+    protected bindMethods(...fns: Function[]): void;
     dispose(): void;
     /**
      * Creates a view model instance.

package/dist/Views/ViewModelBase.js

@@ -59,9 +59,30 @@ var ViewModelBase = /** @class */ (function (_super) {
             });
         });
     };
+    /**
+     * Registers the object for disposal when this viewmodel is disposed.
+     */
     ViewModelBase.prototype.autoDispose = function (disposable) {
         return this.disposeHelper.autoDispose(disposable);
     };
+    /**
+     * Binds a list of functions to the viewmodel instance.
+     */
+    ViewModelBase.prototype.bindMethods = function () {
+        var fns = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            fns[_i] = arguments[_i];
+        }
+        for (var _a = 0, fns_1 = fns; _a < fns_1.length; _a++) {
+            var fn = fns_1[_a];
+            if (fn.name) {
+                this[fn.name] = fn.bind(this);
+            }
+            else {
+                throw "Cannot bind a function without a name.";
+            }
+        }
+    };
     ViewModelBase.prototype.dispose = function () {
         this.disposeHelper.dispose();
         for (var _i = 0, _a = this.trackedViewModels; _i < _a.length; _i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "0.10.40",
+  "version": "0.10.43",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "@types/react-select": "3.1.0",
-    "@singularsystems/neo-core": "^0.10.47",
+    "@singularsystems/neo-core": "^0.10.50",
     "axios": "^0.21.1",
     "decimal.js-light": "2.5.1",
     "history": "4.10.1",

package/styles/Forms.scss

@@ -139,8 +139,26 @@ div.neo-form-group-floating {
     justify-content: space-between;
     border-bottom: 1px solid #eee;
     cursor: pointer;
-  
+      
+    &.with-description {
+        div.react-select-name {
+            width: 100%;
+        }
+        div.react-select-description {
+            font-size: 0.9rem;
+            color: #999;
+        }
+    }
+
     &.focused, &:hover {
         background: $input-btn-focus-color;
     }
+    &.selected {
+        background: #1E90FF;
+        color: #fff;
+
+        div.react-select-description {
+            color: #C7E4FF;
+        }
+    }
 }