@singularsystems/neo-react 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.5.0 (28 May 2026)
+
+- Fixed routes with the same prefix, but different parameter counts not being registered.
+    - E.g. a products list view with path `/products`, and product item view with path `/products/{itemId}` were previously seen as a duplicate route. 
+    - A url of `/products/123` would have matched against the first route.
+- ViewBase - allow `viewParamsUpdated` to be called on initialise even if all the parameters have default values.
+
+## Version 1.4.3 (22 April 2026)
+
+- Fix variable usage in neo-react styles.
+    - Now uses bootstrap variable names instead of legacy custom variable names defined in end project.
+    - This change is to allow simplification of the variables file in the end project.
+    - Existing projects do not need to make changes to their variables files.
+
 ## Version 1.4.2 (20 April 2026)
 
 - Navigation helper

package/dist/Modules/Types.d.ts

@@ -42,7 +42,7 @@ declare const NeoReactTypes: {
     };
     Core: {
         AutoRunnerFactory: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IAutoRunner").IAutoRunnerFactory>;
-        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/ConnectionManager").IConnectionManager>;
+        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Network").IConnectionManager>;
         DecimalService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Numeric").IDecimalService<import("@singularsystems/neo-core/dist/Numeric").IDecimal>>;
         ModelCreator: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Model/IModelCreatorBase").default>;
     };
@@ -50,9 +50,13 @@ declare const NeoReactTypes: {
         LocalisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Localisation").ILocalisationService>;
     };
     Messaging: {
-        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/ConnectionManager").IConnectionManager>;
+        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Network").IConnectionManager>;
         ServerMessageSubscriber: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/SignalR").IServerMessageSubscriber>;
     };
+    Network: {
+        AppConnectionMonitor: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Network/IAppConnectionMonitor").IAppConnectionMonitor>;
+        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Network").IConnectionManager>;
+    };
     Security: {
         AuthenticationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthenticationService>;
         AuthorisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthorisationService>;

package/dist/ReactComponents/ColorPicker.js

@@ -58,7 +58,7 @@ var ColorPicker = /** @class */ (function (_super) {
                                 ColorPicker_1.render(this.state.selectedColor, this.handleChange),
                                 React.createElement("div", { className: "action-container" },
                                     React.createElement("div", { className: "btn btn-primary btn-sm", onClick: function () { return _this.accept(); } }, "Accept"),
-                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
+                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1 ms-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
     };
     /** Renders the inner color picker components without the modal */
     ColorPicker.render = function (color, onChange) {

package/dist/ReactComponents/ContextMenu/ContextMenu.js

@@ -74,7 +74,7 @@ var ContextMenu = /** @class */ (function (_super) {
                     item.icon && _this.iconFactory.getIconComponent(item.icon, { fixedWidth: true }),
                     item.text && React.createElement("span", { className: "neo-context-menu-text" }, item.text),
                     item.header && React.createElement("span", { className: "neo-context-menu-text" }, item.header),
-                    item.items && React.createElement("i", { className: "fa-fw fa fa-angle-right child-indicator" }),
+                    item.items && React.createElement("i", { className: "fa-fw fa fa-angle-right child-indicator neo-icon" }),
                     item.items && _this.hoverItem === item && React.createElement(ContextMenu_1, { menuItems: item.items, show: _this.hoverItem === item, onClick: _this.props.onClick })))); })));
     };
     var ContextMenu_1;

package/dist/Routing/RouteProvider.d.ts

@@ -5,7 +5,6 @@ interface INamedRouteParameter extends IRouteParameter {
     name: string;
 }
 export interface IProcessedRoute extends Routing.IRoute {
-    key: number;
     /** Lower case base path without trailing / */
     path: string;
     /** Route params in order, excluding query parameters. */
@@ -29,8 +28,6 @@ export default class RouteProvider {
     menuRoutes: Routing.IMenuRoute[];
     pureRoutes?: Routing.IRoute[] | undefined;
     notFoundComponent?: React.ComponentType | undefined;
-    private key;
-    private routeIndex;
     private staticRoutes;
     private parameterisedRoutes;
     readonly allRoutes: IProcessedRoute[];
@@ -46,7 +43,7 @@ export default class RouteProvider {
     private flatten;
     /**
      * Create a copy of the route info, and process it.
-     * Adds a unique key, and adds route parameters extracted from the component static params object.
+     * Adds route parameters extracted from the component static params object.
      */
     private processRoute;
 }

package/dist/Routing/RouteProvider.js

@@ -10,14 +10,12 @@ var RouteProvider = /** @class */ (function () {
         this.menuRoutes = menuRoutes;
         this.pureRoutes = pureRoutes;
         this.notFoundComponent = notFoundComponent;
-        this.key = 1;
-        this.routeIndex = {};
         this.staticRoutes = [];
         this.parameterisedRoutes = [];
         this.allRoutes = [];
-        this.flatten(this.allRoutes, menuRoutes);
+        this.flatten(menuRoutes);
         if (pureRoutes)
-            this.flatten(this.allRoutes, pureRoutes);
+            this.flatten(pureRoutes);
         this.staticRoutes = this.allRoutes.filter(function (c) { return c.params.length === 0; });
         this.parameterisedRoutes = this.allRoutes
             .filter(function (c) { return c.params.length > 0; })
@@ -84,7 +82,7 @@ var RouteProvider = /** @class */ (function () {
         }
         return null;
     };
-    RouteProvider.prototype.flatten = function (into, routes, parent) {
+    RouteProvider.prototype.flatten = function (routes, parent) {
         var _a, _b;
         for (var _i = 0, routes_1 = routes; _i < routes_1.length; _i++) {
             var route = routes_1[_i];
@@ -93,20 +91,20 @@ var RouteProvider = /** @class */ (function () {
                 if (parent && !route.breadCrumbParent) {
                     route.breadCrumbParent = parent;
                 }
-                this.processRoute(into, route);
+                this.processRoute(route);
             }
             var menuRoute = route;
             var children = __spreadArray(__spreadArray([], ((_a = route.routeChildren) !== null && _a !== void 0 ? _a : []), true), ((_b = menuRoute.children) !== null && _b !== void 0 ? _b : []), true);
-            this.flatten(into, children, (hasComponent && menuRoute.showInBreadCrumb !== false) ? menuRoute : undefined);
+            this.flatten(children, (hasComponent && menuRoute.showInBreadCrumb !== false) ? menuRoute : undefined);
         }
     };
     /**
      * Create a copy of the route info, and process it.
-     * Adds a unique key, and adds route parameters extracted from the component static params object.
+     * Adds route parameters extracted from the component static params object.
      */
-    RouteProvider.prototype.processRoute = function (into, route) {
+    RouteProvider.prototype.processRoute = function (route) {
         var _a;
-        var processed = __assign(__assign({}, route), { path: route.path, params: [], key: this.key++, order: 0 });
+        var processed = __assign(__assign({}, route), { path: route.path, params: [], order: 0 });
         processed.path = (_a = route.basePath) !== null && _a !== void 0 ? _a : route.path;
         processed.path = processed.path.toLowerCase();
         if (processed.path.length > 1 && processed.path.endsWith("/")) {
@@ -124,10 +122,7 @@ var RouteProvider = /** @class */ (function () {
                 }
             }
         }
-        if (!this.routeIndex[processed.path]) {
-            this.routeIndex[processed.path] = true;
-            into.push(processed);
-        }
+        this.allRoutes.push(processed);
     };
     return RouteProvider;
 }());

package/dist/Views/ViewBase.d.ts

@@ -32,6 +32,8 @@ export default abstract class ViewBase<TViewModel extends IViewModel = EmptyView
     navigation: import("../Routing").INavigationHelper;
     private breadCrumbStartItems?;
     protected viewState: ViewState<TViewModel, TParams>;
+    /** If true, viewParamsUpdated() will be called on initialisation even if all parameters have default values. */
+    protected callViewParamsUpdatedOnInitialise: boolean;
     /**
      * Creates a view
      * @param props React props.

package/dist/Views/ViewBase.js

@@ -24,6 +24,8 @@ var ViewBase = /** @class */ (function (_super) {
         _this.hasInitialised = false;
         _this.routingState = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState);
         _this.navigation = Misc.Globals.appService.get(NeoReactTypes.Routing.NavigationHelper);
+        /** If true, viewParamsUpdated() will be called on initialisation even if all parameters have default values. */
+        _this.callViewParamsUpdatedOnInitialise = false;
         if (typeof viewName !== "string") {
             throw "Error: When inheriting ViewBase, you must pass the view name into the base constructor.";
         }
@@ -85,7 +87,7 @@ var ViewBase = /** @class */ (function (_super) {
                         _a.sent();
                         _a.label = 2;
                     case 2:
-                        if (!paramsUpdated) return [3 /*break*/, 4];
+                        if (!(paramsUpdated || this.callViewParamsUpdatedOnInitialise)) return [3 /*break*/, 4];
                         return [4 /*yield*/, this.viewParamsUpdated()];
                     case 3:
                         _a.sent();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/styles/Button.scss

@@ -26,7 +26,7 @@ div.dropdown-menu {
 
         .dropdown-subtext {
             font-size: 13px;
-            color: #888;
+            color: $body-secondary-color;
             max-width: 250px;
             white-space: wrap;
         }

package/styles/ColorPicker.scss

@@ -4,7 +4,7 @@ div.color-picker {
     div.block-button {
         width: 20px;
         height: 20px;
-        border: 1px solid $bs-secondary;
+        border: 1px solid $secondary;
         cursor: pointer;
     }
 
@@ -17,9 +17,8 @@ div.color-picker {
 
     div.picker-block {
         padding: 5px;
-        background-color: $offGrey;
+        background-color: white;
         border-radius: 5px;
-        border: 1px solid $concrete;
 
         div.action-container {
             text-align: right;
@@ -38,7 +37,7 @@ div.color-picker {
         top: 0;
         left: 0;
         z-index: 5000;
-        background-color: $lightBlack;
+        background-color: $modal-backdrop-bg;
         opacity: 0.2;
         cursor: pointer;
     }

package/styles/ContextMenu.scss

@@ -1,9 +1,9 @@
 .neo-context-menu {
     position: absolute;
     z-index: 1100;
-    border: 1px solid #ccc;
+    border: 1px solid $dropdown-border-color;
     background: #fff;
-    color: #212529;
+    color: initial;
     padding: 5px;
     border-radius: 2px;
     left: 100%;
@@ -32,8 +32,8 @@
             padding-right: 15px;
         }
 
-        > i {
-            color: #666;
+        > .neo-icon {
+            color: $body-secondary-color;
             font-size: 12px;
         }
 
@@ -51,17 +51,17 @@
             cursor: pointer;
 
             &:hover {
-                background: transparentize($bs-primary, 0.75);
+                background: transparentize($primary, 0.75);
             }
         }
 
         &.header {
             background: rgba(0,0,0,0.65);
-            color: #fff;
+            color: white;
             padding: 5px 4px;
 
-            > i {
-                color: #eee;
+            > .neo-icon {
+                color: white;
             }
         }
 
@@ -72,8 +72,9 @@
         }
 
         hr {
-            border-top: 1px dashed #ddd;
+            border-top: 1px dashed $dropdown-border-color;
             margin: 1px 4px 1px 28px;
+            opacity: 1;
         }
     }
 }

package/styles/DatePicker.scss

@@ -125,15 +125,16 @@ $neo-include-datepicker: true !default;
       
             &.selectable:hover {
               cursor: pointer;
-              background-color: adjust-color($form-focused-border, $lightness: 15%);
+              background-color: adjust-color($primary, $lightness: 15%);
+              color: #fff;
             }
       
             &.today {
-              border: 1px solid $form-focused-border;
+              border: 1px solid $primary;
             }
       
             &.selected, &.selected:hover {
-              background-color: $form-focused-border;
+              background-color: $primary;
               color: #fff;
             }
           }

package/styles/Forms.scss

@@ -39,7 +39,7 @@ div.neo-form-group-floating {
         color: #495057;
         border: none;
         outline: none;
-        border-bottom: 1px solid $form-border;
+        border-bottom: 1px solid $input-border-color;
         transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
         width: 100%;
         padding: 5px 0 3px 0;
@@ -56,7 +56,7 @@ div.neo-form-group-floating {
         position: absolute;
         transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
         width: 100%;
-        border-bottom: 3px solid $form-focused-shadow-color;
+        border-bottom: 3px solid rgba($input-focus-border-color, 0.15);
         transform: scale(0);
     }    
 
@@ -65,10 +65,10 @@ div.neo-form-group-floating {
             transform: scale(1);
         }
         label.neo-floating-label {
-            color: color.adjust($form-focused-border, $lightness: -15%);
+            color: color.adjust($input-focus-border-color, $lightness: -15%);
         }
         .neo-forms-editor {
-            border-bottom: 1px solid $form-focused-border;
+            border-bottom: 1px solid $input-focus-border-color;
         }
     }
 
@@ -109,7 +109,7 @@ div.neo-form-group-floating {
 
 .input-group.file-editor {
     .file-placeholder {
-        color: $lightGrey;
+        color: $input-placeholder-color;
         user-select: none;
         padding: 0;
 

package/styles/Loader.scss

@@ -34,7 +34,7 @@ div.loader-container {
             z-index: 1;
 
             div.loader-inner {
-                background: $bs-light;
+                background: $light;
                 width: 100%;
                 text-align: center;
                 padding: 20px 15px;

package/styles/Misc.scss

@@ -44,7 +44,7 @@ div.collapsable {
     position: absolute;
     top: -1000px;
     left: -1000px;
-    background-color: $bs-dark;
+    background-color: $dark;
     color: #fff;
     z-index: 1060;
     font-size: 0.8rem;
@@ -118,11 +118,11 @@ div.tabs-header {
 
 /* File drop */
 .neo-file-drop {
-    border: 2px dashed $concrete;
+    border: 2px dashed $input-border-color;
     padding: 15px;
 
     &.dragging {
-        border-color: $bs-primary;
+        border-color: $primary;
     }
 
     button {

package/styles/Neo.scss

@@ -1,3 +1,4 @@
+@import './Variables.scss';
 @import './Badge.scss';
 @import './Button.scss';
 @import './Card.scss';

package/styles/Validation.scss

@@ -158,7 +158,7 @@ select.form-control.is-invalid {
         padding-right: 10px;
     }
     i {
-        color: $bs-danger;
+        color: $danger;
     }
     ul {
         padding-left: 0;

package/styles/Variables.scss

@@ -0,0 +1,8 @@
+// Legacy mappings:
+$body-secondary-color: #6c757d !default;
+
+$modal-backdrop-bg: black !default;
+$dropdown-border-color: #ccc !default;
+$input-border-color: $form-border !default;
+$input-focus-border-color: $form-focused-border !default;
+$input-placeholder-color: #dddddd !default;