@singularsystems/neo-react 1.2.4 → 1.3.1

package/CHANGELOG.md

@@ -1,171 +1,50 @@
-# Version 1.2
+# Neo react changelog
 
-Version 1.2 upgrades React to v19. A few of the other dependencies were also updated, which will need to be updated in each project.
+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.
 
-Please take the following steps when upgrading:
+## Version 1.3.1
 
-- Update `react`, `react-dom` and their types packages to the latest version.
-- Update `react-select` to at least 5.10.0.
-- Update `react-custom-scrollbars` and its types to the latest version.
-- If you are using `rc-slider`. 
-    - Remove the `@types/rc-slider` package, and update `rc-slider` to the latest version.
-    - In your app module, remove the `Range` import, and remove this line: `container.bind(Types.Neo.Components.Range).toConstantValue(Range);`
-- If you are using `react-color`.
-    - Update the package, and types to the latest version.
-- Under React 19, JSX is no longer a global import. You may receive errors such as "Cannot find namespace 'JSX'." 
-    - To rectify, change `JSX.Element` to `React.ReactNode`.
-    - If that doesn't work, you can import JSX from React. E.g. `import React, { JSX } from 'React';`
-- Finally, run `yarn dedupe` to make sure all old transitive packages reference the project version.
+- Routing - Fixed an issue where the base route would take precedence over other routes if it had parameters, and was declared before other routes.
 
-# Version 1.1
+## Version 1.3.0
 
-Version 1.1 removes the `react-router` dependency. This requires updates to your project which are explained in [this guide](./docs/RemoveReactRouter.md).
+- ViewBase and ViewComponentBase now require that the linked view model has a `TaskRunner` as the first argument. See breaking changes for more info.
+- GridLayout
+    - Added `arrangeVertically` prop. Allows items to flow from top to bottom instead of left to right. Useful the height of each item differs.
+- Neo.Card
+    - Now has a `footerContent` prop. This allows a footer to be added to the card. The footer will be anchored to the bottom of the card, and will be collapsed if the card is collapsed.
+- Settings
+    - Added `buttons.backButton` setting to replace the `icons.backIcon` global setting. This allows more customisation of back buttons used in built in neo screens.
+    - Added `icons.unDelete` to allow changing the undo delete icon in neo grids.
+- Deferred deleting: see below.
 
-It also fixes some issues preventing projects from upgrading to `mobx-react` v9.x.
+### Deferred deleting
 
-## Version 1.0.22
+Previously when clicking the default delete button in a neo grid, the item would be removed from the bound list, and tracked under the `deletedList` property. When serialising the list (usually on clicking save), the deleted items would be included with a tracking state of "deleted" so that they could be deleted from the database.
 
-React-select dependency was updated which has a breaking change in its types. You will need to update the version of this package in your project to at least:
+This was slightly confusing for a user, since they might not know that a save is required to actually commit the delete. Additionally, if the save failed, the item would not re-appear in the grid and the user would be stuck, having to reload the screen.
 
-```json
-"react-select": "5.8.1",
-```
+In this version, a new option has been added to allow the grid to keep displaying the row being deleted, but displayed with ~~strikethrough~~ text and 50% transparency. The delete button will show a different icon when the item is marked as deleted, allowing the user to undo the delete before saving. A tooltip will also show when hovering over the row.
 
-# Version 1.0
+To make this work, 3 main changes were made to `ModelBase` and `List`. 
+- `ModelBase` now has an `isSelfDeleting` property. 
+    - This causes the grid to display the item differently. 
+    - Models with this property set to true will be serialised with a tracking state of deleted.
+    - This will cause `isDirty` to return true, however `isSelfDirty` will remain false.
+- `List` has new methods: `beginRemove` and `toggleRemove`.
+    - These new methods check whether the list is in "soft delete" mode (see below), and if so, sets `isSelfDeleting` to true on the item being removed.
+    - The existing `remove` and `removeWithoutTracking` methods will always remove the item from the main list regardless of the delete mode.
+- `List` now has an `activeLength` property.
+    - Use this if you need to check if the list is required to have a certain amount of items. E.g. in validation rules.
 
-Version 1 of neo-react upgrades react to version 18, and mobX to version 6. Both of these are major updates and will require you to make code changes to your project.
 
-## Testing
+#### Settings:
 
-In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
+To control the behavior when removing an item, you use the global setting, or you can configure each list individually by passing in options to the list constructor. 
 
-The project changes required are detailed below:
+- To configure globally, set `Misc.Settings.list.removeItemBehavior` to `RemoveItemBehavior.MarkDeleted`.
+- The tooltip to show that the item is being deleted can be customised by setting the `isDeletingTooltip` prop on the grid row, or by using the `Misc.Settings.grid.isDeletingTooltip` global setting.
 
-## Package changes:
+By default this setting will be enabled for catalogue grids, but is not enabled globally.
 
-* Update all neo packages to the latest 1.x version.
-* Update the following packages to the latest version (these were the latest at time of writing):
-    * dependencies
-        * `"axios": "1.6.7"`,
-        * `"decimal.js-light": "2.5.1"`, - See below for alternative
-        * `"mobx": "6.11.0"`,
-        * `"mobx-react": "7.6.0"`,
-        * `"react": "18.2.0"`,
-        * `"react-dom": "18.2.0"`,
-        * `"react-router": "5.2.1"`, - Must be version 5.x
-        * `"react-router-dom": "5.3.0"`, - Must be version 5.x
-        * `"react-select": "5.7.3"`,
-        
-    * devDependencies
-        * `"@types/react": "18.2.37"`,
-        * `"@types/react-dom": "18.2.15"`,
-        * `"@types/react-router": "5.1.17"`, - Must be version 5.x
-        * `"@types/react-router-dom": "5.3.3"`, - Must be version 5.x
-    * resolutions
-        * remove all entries
-* delete yarn.lock, and run `yarn install`
-
-## Fix errors
-
-If any of your components allow children, React 18 requires to you have an explicit `children` prop. Add this to the props definition of the component:
-
-```typescript
-interface MyProps {
-    ...
-    children: React.ReactNode;
-}
-
-// or if the component has no other props:
-
-MyComponent extends React.Component<{ children: React.ReactNode }> {
-    ...
-}
-```
-
-The React root api has also changed in version 18. Make the following changes to your `index.tsx` file:
-
-Your existing code will look something like this:
-
-```typescript
-import ReactDOM from 'react-dom';
-...
-// React init
-ReactDOM.render(
-    renderComponent,
-    document.getElementById('root') as HTMLElement
-);
-```
-
-Change the `ReactDOM` import, and the react init code:
-
-```typescript
-import ReactDOM from 'react-dom/client';
-...
-// React init
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(renderComponent);
-```
-
-## Mobx
-
-Before mobx 6, you could mark a property as being observable by adding an `@observable` decorator to the property. In mobx 6 this no longer works ([read more](https://mobx.js.org/migrating-from-4-or-5.html)). 
-
-For any class that extends `ModelBase`, `ValueObject`, `ViewModelBase` etc, this change is handled by neo, and you will not need to change any code.
-
-For other classes, you will need to add initialisation code to the constructor.
-
-* Search for `@observable` in your project. (In most projects this will be in the Sidebar and AppLayout components)
-* In the constructor of the class that contains the property, add:
-
-```typescript
-makeObservable(this);
-```
-
-### Decorators on neo models
-
-If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
-
-> [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
-
-This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
-
-* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.
-
-### Array sorting
-
-Mobx no longer allows you to call `sort` on an observable array. You first need to call `slice` to create a copy of the array. This change has been made in the neo `sortBy` method, but will cause unexpected behaviour if you relied on the list being sorted in-place, as this no longer happens.
-
-* Search for `.sort` in your project. Change to use the neo `sortBy` method.
-* Search for `.sortBy`. Ensure you use the array returned by this method, and not the array passed in.
-
-### Viewmodels
-
-You may receive errors such as:
-
-```
-Argument of type 'typeof MyVM' is not assignable to parameter of type 'VMConstructor<MyVM>'.
-```
-
-The `registerViewModel` method on the `ViewModelBase` class now requires the view model passed to it to have a `taskRunner` as the first argument. This task runner instance must be passed to the base constructor.
-
-## Decimals
-
-Neo no longer includes the `decimal.js-light` package by default. This is to allow for other decimal packages to be used. You will now need to manually register a decimal service in your app module.
-
-The easiest would be to continue using `decimal.js-light`:
-
-* Ensure your project references `decimal.js-light` directly.
-* In your main app module, add the following code:
-```typescript
-import Decimal from "decimal.js-light";
-...
-container.bind(Types.Neo.Core.DecimalService).toConstantValue(new Numeric.DecimalService(Decimal, Decimal.ROUND_HALF_UP, Decimal.ROUND_DOWN));
-```
-
-An alternative is to use `big.js`. This package is slightly smaller than the above, but has less features.
-
-```typescript
-import Big from "big.js";
-...
-container.bind(Types.Neo.Core.DecimalService).toConstantValue(new Numeric.DecimalService(Big, Big.roundHalfUp, Big.roundDown))
-```
+To change the styling of deleted rows, target: `tr.neo-item-deleting`.

package/dist/ReactComponents/BootstrapUtils.d.ts

@@ -1,6 +1,8 @@
+import { Components } from "@singularsystems/neo-core";
 import React, { MouseEventHandler } from "react";
 declare class BootstrapUtils {
     constructor();
+    private breakPoints;
     /** Bootstrap version is before v5 */
     get isPre5(): boolean;
     /** Class prefix (without -) for start margin / left margin. */
@@ -12,6 +14,8 @@ declare class BootstrapUtils {
      * @param pre5ClassName Class to add if bootstrap version is <5.
      */
     getCloseButton(onClick: MouseEventHandler<HTMLButtonElement>, pre5ClassName?: string): React.JSX.Element;
+    getBreakpoints(): Components.IBootstrapSizes<number>;
+    currentDimension<T>(props: Partial<Components.IBootstrapSizes<T>>): T | undefined;
 }
 declare const _default: BootstrapUtils;
 export default _default;

package/dist/ReactComponents/BootstrapUtils.js

@@ -2,6 +2,7 @@ import { Misc, Utils } from "@singularsystems/neo-core";
 import React from "react";
 var BootstrapUtils = /** @class */ (function () {
     function BootstrapUtils() {
+        this.breakPoints = null;
     }
     Object.defineProperty(BootstrapUtils.prototype, "isPre5", {
         /** Bootstrap version is before v5 */
@@ -38,6 +39,41 @@ var BootstrapUtils = /** @class */ (function () {
                 React.createElement("span", { "aria-hidden": "true" }, "\u00D7")) :
             React.createElement("button", { type: "button", className: "btn-close", "aria-label": "Close", onClick: onClick });
     };
+    BootstrapUtils.prototype.getBreakpoints = function () {
+        if (!this.breakPoints) {
+            var styles = window.getComputedStyle(document.body);
+            this.breakPoints = {
+                xs: parseInt(styles.getPropertyValue('--bs-breakpoint-xs')),
+                sm: parseInt(styles.getPropertyValue('--bs-breakpoint-sm')),
+                md: parseInt(styles.getPropertyValue('--bs-breakpoint-md')),
+                lg: parseInt(styles.getPropertyValue('--bs-breakpoint-lg')),
+                xl: parseInt(styles.getPropertyValue('--bs-breakpoint-xl')),
+                xxl: parseInt(styles.getPropertyValue('--bs-breakpoint-xxl'))
+            };
+        }
+        return this.breakPoints;
+    };
+    BootstrapUtils.prototype.currentDimension = function (props) {
+        var _a, _b, _c, _d, _e;
+        var width = window.innerWidth;
+        var breakpoints = this.getBreakpoints();
+        var found = props.xs;
+        if (width < breakpoints.sm)
+            return found;
+        found = (_a = props.sm) !== null && _a !== void 0 ? _a : found;
+        if (width < breakpoints.md)
+            return found;
+        found = (_b = props.md) !== null && _b !== void 0 ? _b : found;
+        if (width < breakpoints.lg)
+            return found;
+        found = (_c = props.lg) !== null && _c !== void 0 ? _c : found;
+        if (width < breakpoints.xl)
+            return found;
+        found = (_d = props.xl) !== null && _d !== void 0 ? _d : found;
+        if (width < breakpoints.xxl)
+            return found;
+        return (_e = props.xxl) !== null && _e !== void 0 ? _e : found;
+    };
     return BootstrapUtils;
 }());
 export default new BootstrapUtils();

package/dist/ReactComponents/Card.d.ts

@@ -7,6 +7,8 @@ interface ICardProps {
     title?: any;
     /** Header elements to show on right hand side of header. */
     headerElements?: JSX.Element;
+    /** Footer elements to show on bottom of the card. */
+    footerContent?: JSX.Element;
     /** Use a custom scrollbar instead of the browser scrollbar. */
     useCustomScrollbar?: boolean;
     /** Causes the card to be collapsible. Adds a collapse icon to the header. */

package/dist/ReactComponents/Card.js

@@ -15,7 +15,7 @@ var Card = /** @class */ (function (_super) {
         return _this;
     }
     Card.prototype.render = function () {
-        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, expandIconPosition = _a.expandIconPosition, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded", "expandIconPosition"]);
+        var _a = this.props, icon = _a.icon, title = _a.title, children = _a.children, headerElements = _a.headerElements, footerContent = _a.footerContent, useCustomScrollbar = _a.useCustomScrollbar, collapsible = _a.collapsible, initiallyCollapsed = _a.initiallyCollapsed, isExpanded = _a.isExpanded, expandIconPosition = _a.expandIconPosition, domProps = __rest(_a, ["icon", "title", "children", "headerElements", "footerContent", "useCustomScrollbar", "collapsible", "initiallyCollapsed", "isExpanded", "expandIconPosition"]);
         var className = Utils.joinWithSpaces("neo-card card", domProps.className);
         expandIconPosition !== null && expandIconPosition !== void 0 ? expandIconPosition : (expandIconPosition = "right");
         var isCollapsible = collapsible || isExpanded !== undefined || initiallyCollapsed !== undefined;
@@ -45,9 +45,13 @@ var Card = /** @class */ (function (_super) {
         var body = React.createElement("div", { className: "card-body" },
             useCustomScrollbar && React.createElement(Scrollbar, null, children),
             !useCustomScrollbar && children);
+        var footer = footerContent ? (React.createElement("div", { className: 'card-footer' }, footerContent)) : null;
+        var content = React.createElement(React.Fragment, null,
+            body,
+            footer);
         if (isCollapsible) {
-            body =
-                React.createElement(Collapsable, { show: expandState.value }, body);
+            content =
+                React.createElement(Collapsable, { show: expandState.value }, content);
         }
         return (React.createElement("div", __assign({}, domProps, { className: className }),
             (icon || title) &&
@@ -57,7 +61,7 @@ var Card = /** @class */ (function (_super) {
                         this.iconFactory.getIconComponent(icon),
                         React.createElement("span", null, title)),
                     headerElements && React.createElement("div", { className: "card-header-right-section", onClick: function (e) { return e.stopPropagation(); } }, headerElements)),
-            body));
+            content));
     };
     Card = __decorate([
         observer

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

@@ -42,6 +42,7 @@ export declare class ButtonColumn extends ComponentBase<IButtonColumnProps> {
     private item;
     private section;
     protected onFirstRender(): void;
+    private get itemAsModel();
     onDelete(): Promise<void>;
     render(): React.JSX.Element;
 }

package/dist/ReactComponents/Grid/ButtonColumn.js

@@ -1,10 +1,11 @@
-import { __assign, __awaiter, __extends, __generator, __rest } from "tslib";
+import { __assign, __awaiter, __decorate, __extends, __generator, __metadata, __rest } from "tslib";
 import * as React from 'react';
 import { GridContext } from './Grid';
 import NeoButton from '../Button';
 import { Misc, Utils } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import { ColumnHelper } from './ColumnHelper';
+import { observer } from "mobx-react";
 var ButtonColumn = /** @class */ (function (_super) {
     __extends(ButtonColumn, _super);
     function ButtonColumn(props) {
@@ -16,33 +17,52 @@ var ButtonColumn = /** @class */ (function (_super) {
         this.section = this.context.section;
         this.item = this.context.currentItem;
     };
+    Object.defineProperty(ButtonColumn.prototype, "itemAsModel", {
+        get: function () {
+            var _a;
+            var item = (_a = this.props.item) !== null && _a !== void 0 ? _a : this.item;
+            if ((item === null || item === void 0 ? void 0 : item.entityIdentifier) !== undefined) {
+                return item;
+            }
+            return undefined;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ButtonColumn.prototype.onDelete = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var item, mustRemove;
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var item, list, mustRemove;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
                     case 0:
-                        item = (_a = this.props.item) !== 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];
+                        item = this.itemAsModel;
+                        list = this.context.dataView.rawItems;
+                        if (!(item.isNew === false && ((_a = this.props.deleteButton) === null || _a === void 0 ? void 0 : _a.onDeleteExisting) !== undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.props.deleteButton.onDeleteExisting(item)];
                     case 1:
-                        mustRemove = _c.sent();
+                        mustRemove = _b.sent();
                         if (mustRemove) {
-                            this.context.dataView.rawItems.removeWithoutTracking(item);
+                            list.removeWithoutTracking(item);
                         }
                         return [3 /*break*/, 3];
                     case 2:
-                        this.context.dataView.rawItems.remove(item);
-                        _c.label = 3;
+                        if (list.toggleRemove !== undefined) {
+                            list.toggleRemove(item);
+                        }
+                        else {
+                            this.context.dataView.rawItems.remove(item);
+                        }
+                        _b.label = 3;
                     case 3: return [2 /*return*/];
                 }
             });
         });
     };
     ButtonColumn.prototype.render = function () {
+        var _a, _b;
         this.onRender();
-        var _a = this.props, item = _a.item, label = _a.label, showDefaultButtonText = _a.showDefaultButtonText, buttonSize = _a.buttonSize, showDelete = _a.showDelete, editButton = _a.editButton, deleteButton = _a.deleteButton, viewButton = _a.viewButton, childAlignment = _a.childAlignment, hideBelow = _a.hideBelow, hideAbove = _a.hideAbove, alignment = _a.alignment, domProps = __rest(_a, ["item", "label", "showDefaultButtonText", "buttonSize", "showDelete", "editButton", "deleteButton", "viewButton", "childAlignment", "hideBelow", "hideAbove", "alignment"]);
+        var _c = this.props, item = _c.item, label = _c.label, showDefaultButtonText = _c.showDefaultButtonText, buttonSize = _c.buttonSize, showDelete = _c.showDelete, editButton = _c.editButton, deleteButton = _c.deleteButton, viewButton = _c.viewButton, childAlignment = _c.childAlignment, hideBelow = _c.hideBelow, hideAbove = _c.hideAbove, alignment = _c.alignment, domProps = __rest(_c, ["item", "label", "showDefaultButtonText", "buttonSize", "showDelete", "editButton", "deleteButton", "viewButton", "childAlignment", "hideBelow", "hideAbove", "alignment"]);
         domProps.className = Utils.joinWithSpaces("neo-grid-button-column", domProps.className);
         domProps.className = ColumnHelper.addCommonClasses(domProps.className, this.props);
         var buttonColumnDefaults = Misc.Settings.grid.buttonColumnButtons;
@@ -62,8 +82,14 @@ var ButtonColumn = /** @class */ (function (_super) {
         var editButtonOptions = editButton ? Utils.populatePartialWithDefaults(editButton, editButtonDefaults) : null;
         var deleteButtonOptions = (deleteButton || showDelete) ? Utils.populatePartialWithDefaults(deleteButton, deleteButtonDefaults) : null;
         var viewButtonOptions = viewButton ? Utils.populatePartialWithDefaults(viewButton, viewButtonDefaults) : null;
-        if (deleteButtonOptions && !deleteButtonOptions.onClick) {
-            deleteButtonOptions.onClick = this.onDelete;
+        if (deleteButtonOptions) {
+            if (!deleteButtonOptions.onClick) {
+                deleteButtonOptions.onClick = this.onDelete;
+            }
+            if ((_a = this.itemAsModel) === null || _a === void 0 ? void 0 : _a.isSelfDeleting) {
+                deleteButtonOptions.icon = Misc.Settings.icons.unDelete;
+                (_b = deleteButtonOptions.tooltip) !== null && _b !== void 0 ? _b : (deleteButtonOptions.tooltip = "Undo delete");
+            }
         }
         var buttons = React.createElement(React.Fragment, null,
             viewButtonOptions && React.createElement(NeoButton, __assign({}, viewButtonOptions)),
@@ -79,6 +105,10 @@ var ButtonColumn = /** @class */ (function (_super) {
     };
     ButtonColumn.isColumnComponent = true;
     ButtonColumn.contextType = GridContext;
+    ButtonColumn = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], ButtonColumn);
     return ButtonColumn;
 }(ComponentBase));
 export { ButtonColumn };

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

@@ -9,7 +9,7 @@ export interface INeoColumnProps<TData> extends INeoCommonColumnProps, IEditorCo
     width?: number | string;
     /** Tooltip to show in header. If you want the tooltip to show on the cells as well, use 'data-tip'. */
     headerTooltip?: string;
-    /** Tooltip to show in cells. If you want the tooltip to show on the cells as well, use 'data-tip'. */
+    /** Tooltip to show in cells. If you want the tooltip to show on the headers as well, use 'data-tip'. */
     cellTooltip?: string;
     /** Allows you to override the default allow sorting setting of the datasource, or make clicking a column heading sort a specific property. */
     sort?: Model.IPropertyInstance | boolean;

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { GridContext, GridSection } from './Grid';
 import { Model } from '@singularsystems/neo-core';
-import { StateObserver } from '../StateObserver';
 import ComponentBase from '../ComponentBase';
 interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
     showInHeader?: boolean;
@@ -15,9 +14,8 @@ interface IRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTab
     onHeaderClick?: (section: GridSection, e: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     /** Class name that will not be applied to headers. */
     bodyClassName?: string;
-}
-interface IState {
-    isExpanded: boolean;
+    /** Allows overriding the tooltip shown when an item is marked for deletion. */
+    isDeletingTooltip?: string;
 }
 export default class Row<TData> extends ComponentBase<IRowProps> {
     static contextType: React.Context<import("./Grid").GridContextParams<unknown>>;
@@ -27,10 +25,11 @@ export default class Row<TData> extends ComponentBase<IRowProps> {
         showInHeader: boolean;
     };
     private setGridContext;
-    section: GridSection;
-    stateObserver: StateObserver<IState>;
-    expandProperty?: Model.IPropertyInstance;
-    firstRowInGroup: boolean;
+    private section;
+    private stateObserver;
+    private expandProperty?;
+    private firstRowInGroup;
+    private item?;
     onFirstRender(): void;
     componentWillUnmount(): void;
     onExpandClick(): void;

package/dist/ReactComponents/Grid/Row.js

@@ -7,6 +7,7 @@ import Column from './Column';
 import NeoButton from '../Button';
 import { StateObserver } from '../StateObserver';
 import ComponentBase from '../ComponentBase';
+import Tooltip from "../Tooltip";
 var Row = /** @class */ (function (_super) {
     __extends(Row, _super);
     function Row(props) {
@@ -40,6 +41,9 @@ var Row = /** @class */ (function (_super) {
                 return { isExpanded: _this.expandProperty.value };
             });
         }
+        if (this.context.currentItem && this.context.currentItem.isSelfDeleting !== undefined) {
+            this.item = this.context.currentItem;
+        }
     };
     Row.prototype.componentWillUnmount = function () {
         if (this.stateObserver)
@@ -52,8 +56,9 @@ var Row = /** @class */ (function (_super) {
     };
     Row.prototype.render = function () {
         var _this = this;
+        var _a, _b;
         _super.prototype.onRender.call(this);
-        var _a = this.props, showInHeader = _a.showInHeader, onHeaderClick = _a.onHeaderClick, bodyClassName = _a.bodyClassName, domProps = __rest(_a, ["showInHeader", "onHeaderClick", "bodyClassName"]);
+        var _c = this.props, showInHeader = _c.showInHeader, onHeaderClick = _c.onHeaderClick, bodyClassName = _c.bodyClassName, domProps = __rest(_c, ["showInHeader", "onHeaderClick", "bodyClassName"]);
         var inBody = this.section === "body";
         if (this.stateObserver)
             this.stateObserver.observe();
@@ -69,6 +74,10 @@ var Row = /** @class */ (function (_super) {
             if (bodyClassName) {
                 domProps.className = Utils.joinWithSpaces(domProps.className, bodyClassName);
             }
+            if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.isSelfDeleting) {
+                domProps.className = Utils.joinWithSpaces(domProps.className, "neo-item-deleting");
+                Tooltip.setDomProperties(domProps, (_b = this.props.isDeletingTooltip) !== null && _b !== void 0 ? _b : Misc.Settings.grid.isDeletingTooltip);
+            }
         }
         else {
             if (onHeaderClick) {
@@ -91,6 +100,10 @@ var Row = /** @class */ (function (_super) {
     Row.defaultProps = {
         showInHeader: true
     };
+    Row = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Row);
     return Row;
 }(ComponentBase));
 export default Row;

package/dist/ReactComponents/GridLayout.d.ts

@@ -12,6 +12,8 @@ interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
     /** Sets dynamic horizontal spacing. If this is set, normal column spacing is ignored.  */
     justifyContent?: Components.flexJustifyContent;
     formGroupProps?: Components.IColumnWidthBreakpoints;
+    /** Arranges child elements vertically rather than horizontally. */
+    arrangeVertically?: boolean;
 }
 export declare class FormGroupLayoutContextParams {
     formGroupProps?: Components.IColumnWidthBreakpoints;

package/dist/ReactComponents/GridLayout.js

@@ -15,7 +15,8 @@ var GridLayout = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     GridLayout.prototype.render = function () {
-        var _a = this.props, gutterSize = _a.gutterSize, verticalSpace = _a.verticalSpace, withGaps = _a.withGaps, alignItems = _a.alignItems, justifyContent = _a.justifyContent, formGroupProps = _a.formGroupProps, xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, xxl = _a.xxl, domProps = __rest(_a, ["gutterSize", "verticalSpace", "withGaps", "alignItems", "justifyContent", "formGroupProps", "xs", "sm", "md", "lg", "xl", "xxl"]);
+        var _a;
+        var _b = this.props, gutterSize = _b.gutterSize, verticalSpace = _b.verticalSpace, withGaps = _b.withGaps, alignItems = _b.alignItems, justifyContent = _b.justifyContent, formGroupProps = _b.formGroupProps, arrangeVertically = _b.arrangeVertically, xs = _b.xs, sm = _b.sm, md = _b.md, lg = _b.lg, xl = _b.xl, xxl = _b.xxl, domProps = __rest(_b, ["gutterSize", "verticalSpace", "withGaps", "alignItems", "justifyContent", "formGroupProps", "arrangeVertically", "xs", "sm", "md", "lg", "xl", "xxl"]);
         var isBsPre5 = BootstrapUtils.isPre5;
         var hasColumns = (xs || sm || md || lg || xl || xxl);
         var columnClassName = undefined;
@@ -44,9 +45,20 @@ var GridLayout = /** @class */ (function (_super) {
             containerStyle.marginTop = "-" + verticalSpace;
             columnStyle = { marginTop: verticalSpace, marginLeft: "auto" };
         }
-        var childCount = React.Children.count(this.props.children);
+        var childItems = React.Children.toArray(this.props.children).filter(function (c) { return !!c; });
+        var childCount = childItems.length;
+        if (arrangeVertically) {
+            var maxColumns = (_a = BootstrapUtils.currentDimension(this.props)) !== null && _a !== void 0 ? _a : 2;
+            var itemsPerRow = Math.ceil(childCount / maxColumns);
+            var rows = [];
+            for (var i = 0; i < maxColumns; i++) {
+                BootstrapUtils;
+                rows.push(React.createElement("div", { key: i }, childItems.splice(0, itemsPerRow)));
+            }
+            childItems = rows;
+        }
         return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: formGroupProps } },
-            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child, index) { return (child && React.createElement("div", { className: columnClassName, style: __assign(__assign({}, columnStyle), { marginLeft: childCount === 2 && index === 1 && isJustifyBetween ? "auto" : undefined }) }, child)); }))));
+            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), childItems.map(function (child, index) { return (child && React.createElement("div", { key: index, className: columnClassName, style: __assign(__assign({}, columnStyle), { marginLeft: childCount === 2 && index === 1 && isJustifyBetween ? "auto" : undefined }) }, child)); }))));
     };
     return GridLayout;
 }(React.Component));

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -85,6 +85,7 @@ var neoFontAwesomeMappings = [
     ["angle-down", "keyboard_arrow_down"],
     ["caret-left", "arrow_left"],
     ["trash", "delete"],
+    ["trash-restore", "delete_forever"],
     ["user", "person"],
     ["users", "groups"],
     ["user-shield", "admin_panel_settings"],
@@ -117,5 +118,6 @@ var neoFontAwesomeMappings = [
     ["greater-than-equal", ""],
     ["stamp", "approval"],
     ["circle-notch", "progress_activity"],
-    ["cube", "deployed_code"]
+    ["cube", "deployed_code"],
+    ["paper-plane", "send"]
 ];

package/dist/Routing/RouteProvider.d.ts

@@ -10,6 +10,7 @@ export interface IProcessedRoute extends Routing.IRoute {
     path: string;
     /** Route params in order, excluding query parameters. */
     params: INamedRouteParameter[];
+    order: number;
 }
 type ParamsObject = {
     [index: string]: string | undefined;

package/dist/Routing/RouteProvider.js

@@ -22,9 +22,7 @@ var RouteProvider = /** @class */ (function () {
         this.staticRoutes = this.allRoutes.filter(function (c) { return c.params.length === 0; });
         this.parameterisedRoutes = this.allRoutes
             .filter(function (c) { return c.params.length > 0; })
-            .map(function (route) { return ({ route: route, order: route.path.split("/").length }); })
-            .sortBy(function (c) { return c.order; }, "desc")
-            .map(function (c) { return c.route; });
+            .sortBy(function (c) { return c.order; }, "desc");
     }
     /** Gets the path the component is bound to. If the component is bound to multiple paths, the first path is returned. */
     RouteProvider.prototype.getPathForComponent = function (component) {
@@ -108,7 +106,7 @@ var RouteProvider = /** @class */ (function () {
      * Adds a unique key, and adds route parameters extracted from the component static params object.
      */
     RouteProvider.prototype.processRoute = function (into, route) {
-        var processed = __assign(__assign({}, route), { path: route.path, params: [], key: this.key++ });
+        var processed = __assign(__assign({}, route), { path: route.path, params: [], key: this.key++, order: 0 });
         if (route instanceof MenuRoute) {
             processed.path = route.basePath;
         }
@@ -116,6 +114,9 @@ var RouteProvider = /** @class */ (function () {
         if (processed.path.length > 1 && processed.path.endsWith("/")) {
             processed.path = processed.path.substring(0, processed.path.length - 1);
         }
+        if (processed.path.length > 1) {
+            processed.order = processed.path.split("/").length;
+        }
         var viewBaseComponent = route.component;
         if (viewBaseComponent.params) {
             for (var param in viewBaseComponent.params) {

package/dist/Views/ViewModelBase.d.ts

@@ -5,7 +5,7 @@ import { AxiosPromise } from 'axios';
 import { WaitForTaskRunnerOptions } from '@singularsystems/neo-core/dist/Components/TaskRunner/TaskRunner';
 import { BindableBase } from '@singularsystems/neo-core/dist/Model/BindableBase';
 type VMConstructor<T> = (new (taskRunner?: ITaskRunner) => T);
-export type valueOrLazy<T> = T | (() => T) | (new () => T);
+export type valueOrLazy<T> = T | (() => T) | VMConstructor<T>;
 export default abstract class ViewModelBase extends ModelBase implements IViewModel {
     taskRunner: ITaskRunner;
     private disposeHelper;

package/dist/Views/ViewModelBase.js

@@ -1,5 +1,5 @@
 import { __awaiter, __extends, __generator } from "tslib";
-import { ModelBase, Misc } from '@singularsystems/neo-core';
+import { ModelBase, Misc, AppServices } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
 var ViewModelBase = /** @class */ (function (_super) {
     __extends(ViewModelBase, _super);
@@ -106,7 +106,11 @@ var ViewModelBase = /** @class */ (function (_super) {
         }
         else if (viewModel.neo) {
             // Constructor
-            return new viewModel(taskRunner);
+            var instance = new viewModel(taskRunner);
+            if (taskRunner && instance.taskRunner !== taskRunner) {
+                AppServices.ConfigService.tryShowError("".concat(viewModel.name, " must pass the task runner parameter to the base constructor."));
+            }
+            return instance;
         }
         else {
             // Callback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
     "@testing-library/react": "16.2.0",
     "@types/jest": "29.5.14",
     "@types/memoize-one": "5.1.2",
-    "@types/node": "22.13.4",
+    "@types/node": "22.15.30",
     "@types/react": "19.0.10",
     "@types/react-custom-scrollbars": "4.0.13",
     "@types/react-dom": "19.0.4",
@@ -44,7 +44,7 @@
     "tslib": "2.8.1"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.2.0",
+    "@singularsystems/neo-core": ">=1.3.0",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/Card.scss

@@ -26,4 +26,15 @@
             }
         }
     }
+
+    .card-footer {
+        border-top: 0;
+        background-color: inherit;
+    }
+    
+    .card-body {
+        &:has(+ .card-footer) {
+            border-bottom: 0;
+        }
+    }
 }

package/styles/Grid.scss

@@ -21,6 +21,18 @@ table.neo-grid {
             right: 5px;
         }
     }
+
+    tr.neo-item-deleting {
+        td {
+            text-decoration: line-through;
+            opacity: 0.5;
+
+            .form-control {
+                text-decoration: line-through;
+            }
+        }
+    }
+
     .number-col {
         text-align: right;
     }