@singularsystems/neo-react 1.4.1 → 1.4.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file details all new features and changes to functionality. If you only need to see changes that require updates to your project, see the [breaking changes](./Breaking.md) readme.
 
+## Version 1.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
+    - Changed `openWindow` and `readOpenerState` to store state as string.
+
 ## Version 1.4.1 (17 April 2026)
 
 - AutoCompleteDropDown

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/NavigationHelper.d.ts

@@ -36,12 +36,12 @@ export default class NavigationHelper implements INavigationHelper {
     navigateToView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): void;
     openWindow(path: string, state?: {
         name: string;
-        value: object;
+        value: any;
     }, options?: {
         target?: string;
         features?: string;
     }): Window | null;
-    readOpenerState(name: string, reset?: boolean): object | undefined;
+    readOpenerState(name: string, reset?: boolean): string | undefined;
     getPathForView<TParams extends RouteParameterObject<TParams>>(view: ViewConstructor<TParams>, paramValues?: ParamValues<TParams>): string;
     getCurrentViewPath(): string;
     private historyPopState;

package/dist/Routing/NavigationHelper.js

@@ -78,8 +78,12 @@ var NavigationHelper = /** @class */ (function () {
     NavigationHelper.prototype.openWindow = function (path, state, options) {
         var newWindow = window.open(this.routingState.basePath + path, options === null || options === void 0 ? void 0 : options.target, options === null || options === void 0 ? void 0 : options.features);
         if (newWindow && state) {
+            var value = state.value;
+            if (typeof value === "object") {
+                value = JSON.stringify(value);
+            }
             // @ts-ignore
-            newWindow["__neoOpenerState" + state.name] = state.value;
+            newWindow["__neoOpenerState" + state.name] = value;
         }
         return newWindow;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "typescript": "5.9.3"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.3.8",
+    "@singularsystems/neo-core": "1.4.1",
     "@types/react-color": "3.0.13",
     "axios": "1.13.5",
     "inversify": "6.0.2",

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;