@singularsystems/neo-react 1.0.20 → 1.0.22

package/dist/ReactComponents/Badge.js

@@ -2,17 +2,19 @@ import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Utils } from '@singularsystems/neo-core';
+import BootstrapUtils from "./BootstrapUtils";
 var Badge = /** @class */ (function (_super) {
     __extends(Badge, _super);
     function Badge(props) {
         return _super.call(this, props) || this;
     }
     Badge.prototype.render = function () {
-        var _a;
-        var _b = this.props, text = _b.text, variant = _b.variant, customVariant = _b.customVariant, isLarge = _b.isLarge, isPill = _b.isPill, children = _b.children, domProps = __rest(_b, ["text", "variant", "customVariant", "isLarge", "isPill", "children"]);
-        var variantClassName = "badge badge-".concat(((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary"));
+        var _a, _b;
+        var _c = this.props, text = _c.text, variant = _c.variant, customVariant = _c.customVariant, isLarge = _c.isLarge, isPill = _c.isPill, children = _c.children, domProps = __rest(_c, ["text", "variant", "customVariant", "isLarge", "isPill", "children"]);
+        var isBsPre5 = BootstrapUtils.isPre5;
+        var variantClassName = isBsPre5 ? "badge badge-".concat(((_a = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _a !== void 0 ? _a : "primary")) : "badge bg-".concat(((_b = customVariant !== null && customVariant !== void 0 ? customVariant : variant) !== null && _b !== void 0 ? _b : "primary"));
         var largeBadgeClassName = isLarge ? "badge-lg" : "";
-        var pillClassName = isPill ? "badge-pill" : "";
+        var pillClassName = isPill ? (isBsPre5 ? "badge-pill" : "rounded-pill") : "";
         domProps.className = Utils.joinWithSpaces(domProps.className, variantClassName, pillClassName, largeBadgeClassName);
         return (React.createElement("div", __assign({}, domProps), children !== null && children !== void 0 ? children : text));
     };

package/dist/ReactComponents/Button.js

@@ -121,7 +121,9 @@ var Button = /** @class */ (function (_super) {
                     : React.createElement("div", { key: index, className: Utils.joinWithSpaces("dropdown-item", item.disabled ? " disabled" : "", item.className), onClick: function (e) { return !item.disabled ? _this.menuItemClicked(e, item.data, item.onClick) : undefined; } },
                         _this.iconFactory.getIconComponent(item.icon, { fixedWidth: true }),
                         "  ",
-                        item.text)); }));
+                        item.text,
+                        " ",
+                        item.subText && React.createElement("div", { className: "dropdown-subtext" }, item.subText))); }));
             root =
                 React.createElement("div", { className: buttonGroupClasses, ref: this.btnGroupDom },
                     mainButton,

package/dist/ReactComponents/Card.js

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import Scrollbar from 'react-custom-scrollbars';
 import Collapsable from './Collapsable';
 import { NeoReactTypes } from '../Modules/Types';
+import { Icon } from "./_Exports";
 var Card = /** @class */ (function (_super) {
     __extends(Card, _super);
     function Card() {
@@ -21,7 +22,8 @@ var Card = /** @class */ (function (_super) {
         var expandState = isExpanded !== null && isExpanded !== void 0 ? isExpanded : this.expandState;
         var expandIndicator = undefined;
         if (isCollapsible) {
-            expandIndicator = React.createElement("i", { onClick: function (e) { return expandState.value = !expandState.value; }, className: "card-expand-indicator fa fa-fw fa-angle-".concat(expandState.value ? "up" : "down") });
+            expandIndicator = React.createElement("span", { className: "card-expand-indicator", onClick: function (e) { expandState.value = !expandState.value; e.stopPropagation(); } },
+                React.createElement(Icon, { fixedWidth: true, name: "fa-angle-".concat(expandState.value ? "up" : "down") }));
             if (expandIconPosition === "right") {
                 if (headerElements) {
                     headerElements = React.createElement(React.Fragment, null,

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

@@ -11,8 +11,8 @@ export interface INeoColumnProps<TData> extends INeoCommonColumnProps, IEditorCo
     headerTooltip?: string;
     /** Tooltip to show in cells. If you want the tooltip to show on the cells as well, use 'data-tip'. */
     cellTooltip?: string;
-    /** Allows you to disable sorting on a column, or make clicking a column heading sort a specific property. */
-    sort?: Model.IPropertyInstance | false;
+    /** 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;
     /** True if this column must have a total cell. */
     sum?: boolean;
     /** Content callback to show in the footer. The filtered list of the grid is passed into the callback. */

package/dist/ReactComponents/Grid/Column.js

@@ -35,8 +35,9 @@ var Column = /** @class */ (function (_super) {
         this.isFooter = this.context.section === "footer";
     };
     Column.prototype.getSortProperty = function () {
-        if (this.props.sort !== false && this.context.dataView.allowSort) {
-            if (this.props.sort) {
+        var _a, _b;
+        if ((_b = (_a = this.props.sort) !== null && _a !== void 0 ? _a : this.context.dataView.allowSort) !== null && _b !== void 0 ? _b : true) {
+            if (typeof this.props.sort === "object") {
                 return this.props.sort;
             }
             else {

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -79,6 +79,8 @@ var StickyTableHeader = /** @class */ (function () {
             this.restoreColumnWidths();
             this.header.classList.remove("neo-grid-fixed-header");
             this.header.style.clipPath = "";
+            this.header.style.left = "";
+            this.header.style.top = "";
             this.table.removeChild(this.headerCopy);
             this.headerCopy = undefined;
         }
@@ -99,6 +101,8 @@ var StickyTableHeader = /** @class */ (function () {
                 for (var j = 0; j < originalRow.cells.length; j++) {
                     var originalCell = originalRow.cells[j], copyCell = copyRow.cells[j];
                     originalCell.style.width = window.getComputedStyle(copyCell).width;
+                    originalCell.style.minWidth = originalCell.style.width;
+                    originalCell.style.maxWidth = originalCell.style.width;
                 }
             }
         }

package/dist/ReactComponents/GridLayout.d.ts

@@ -7,7 +7,10 @@ interface ILayoutGridProps extends Components.IColumnCountBreakpoints {
     verticalSpace?: string;
     /** Sets verticalSpace to "1rem" for convenience. */
     withGaps?: boolean;
+    /** Alignment of items vertically */
     alignItems?: Components.flexItemAlign;
+    /** Sets dynamic horizontal spacing. If this is set, normal column spacing is ignored.  */
+    justifyContent?: Components.flexJustifyContent;
     formGroupProps?: Components.IColumnWidthBreakpoints;
 }
 export declare class FormGroupLayoutContextParams {

package/dist/ReactComponents/GridLayout.js

@@ -15,25 +15,38 @@ 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, 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", "formGroupProps", "xs", "sm", "md", "lg", "xl", "xxl"]);
+        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 isBsPre5 = BootstrapUtils.isPre5;
-        var columnClassName = Utils.joinWithSpaces((gutterSize !== undefined && isBsPre5) ? "px-" + gutterSize : undefined, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
-        if (!(xs || sm || md || lg || xl || xxl)) {
-            columnClassName = Utils.joinWithSpaces(columnClassName, "col-md-6");
+        var hasColumns = (xs || sm || md || lg || xl || xxl);
+        var columnClassName = undefined;
+        var isJustifyBetween = justifyContent === "between";
+        var baseRowClassName = "row";
+        if (!justifyContent) {
+            columnClassName = Utils.joinWithSpaces((gutterSize !== undefined && isBsPre5) ? "px-" + gutterSize : undefined, xs && "col-" + 12 / xs, sm && "col-sm-" + 12 / sm, md && "col-md-" + 12 / md, lg && "col-lg-" + 12 / lg, xl && "col-xl-" + 12 / xl, xxl && "col-xxl-" + 12 / xxl);
+            if (!hasColumns) {
+                columnClassName = Utils.joinWithSpaces(columnClassName, "col-md-6");
+            }
         }
-        var rowClassName = Utils.joinWithSpaces(domProps.className, "row", gutterSize && (isBsPre5 ? "mx-n" : "gx-") + this.props.gutterSize, alignItems && "align-items-" + this.props.alignItems);
+        else {
+            if (hasColumns) {
+                console.error("GridLayout: Columns should not be specified if justifyContent is specified.");
+            }
+            baseRowClassName = "d-flex justify-content-" + justifyContent;
+        }
+        var rowClassName = Utils.joinWithSpaces(domProps.className, baseRowClassName, gutterSize && (isBsPre5 ? "mx-n" : "gx-") + gutterSize, alignItems && "align-items-" + alignItems);
         var containerStyle = domProps.style;
-        var columnStyle = undefined;
+        var columnStyle = { marginLeft: "auto" };
         if (withGaps && !verticalSpace) {
             verticalSpace = "1rem";
         }
         if (verticalSpace) {
             containerStyle = containerStyle || {};
             containerStyle.marginTop = "-" + verticalSpace;
-            columnStyle = { marginTop: verticalSpace };
+            columnStyle = { marginTop: verticalSpace, marginLeft: "auto" };
         }
-        return (React.createElement(FormGroupLayoutContext.Provider, { value: { formGroupProps: this.props.formGroupProps } },
-            React.createElement("div", __assign({}, domProps, { className: rowClassName, style: containerStyle }), React.Children.map(this.props.children, function (child) { return (child && React.createElement("div", { className: columnClassName, style: columnStyle }, child)); }))));
+        var childCount = React.Children.count(this.props.children);
+        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)); }))));
     };
     return GridLayout;
 }(React.Component));

package/dist/ReactComponents/Icons/MaterialSymbolsFontFactory.js

@@ -81,6 +81,8 @@ var neoFontAwesomeMappings = [
     ["minus-square", "indeterminate_check_box"],
     ["arrow-left", "arrow_back"],
     ["angle-left", "chevron_left"],
+    ["angle-up", "keyboard_arrow_up"],
+    ["angle-down", "keyboard_arrow_down"],
     ["caret-left", "arrow_left"],
     ["trash", "delete"],
     ["user", "person"],

package/dist/ReactComponents/InputHelpers.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Misc } from '@singularsystems/neo-core';
 import { NeoReactTypes } from '../Modules/Types';
-import BootstrapUtils from "./BootstrapUtils";
 var InputHelpers = /** @class */ (function () {
     function InputHelpers() {
     }
@@ -10,26 +9,24 @@ var InputHelpers = /** @class */ (function () {
             this.iconFactory = Misc.Globals.appService.get(NeoReactTypes.Components.IconFactory);
         }
         if (props.requiresGroup) {
-            var isBsPre5 = BootstrapUtils.isPre5, isDisabled = domProps.disabled || domProps.readOnly;
+            var isDisabled = domProps.disabled || domProps.readOnly;
             return (React.createElement("div", { className: "input-group" + (isDisabled ? " input-group-disabled" : "") },
-                this.getElement(isBsPre5, "input-group-prepend", inputRef, props.prependText, props.prependIcon, props.prepend),
+                this.getElement("input-group-prepend", inputRef, props.prependText, props.prependIcon, props.prepend),
                 element,
-                this.getElement(isBsPre5, "input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));
+                this.getElement("input-group-append", inputRef, props.appendText, props.appendIcon, props.append)));
         }
         else {
             return element;
         }
     };
-    InputHelpers.getElement = function (isBsPre5, className, inputRef, text, icon, element) {
+    InputHelpers.getElement = function (className, inputRef, text, icon, element) {
         if (!text && !icon && !element) {
             return undefined;
         }
         var innerElement = element ?
             (element instanceof Function ? element() : element) :
             React.createElement("span", { className: "input-group-text", onClick: function () { var _a; return (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } }, text ? this.iconFactory.textOrIcon(text) : this.iconFactory.getIconComponent(icon));
-        return isBsPre5 ?
-            React.createElement("div", { className: className }, innerElement) :
-            innerElement;
+        return React.createElement("div", { className: className }, innerElement);
     };
     return InputHelpers;
 }());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,10 +31,10 @@
     "typescript": "5.4.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.14",
+    "@singularsystems/neo-core": "1.0.18",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
-    "axios": "1.7.5",
+    "axios": "1.7.7",
     "history": "4.10.1",
     "inversify": "^6.0.2",
     "memoize-one": "6.0.0",
@@ -45,11 +45,11 @@
     "react-dom": "18.2.0",
     "react-router": "5.3.3",
     "react-router-dom": "5.3.3",
-    "react-select": "5.7.3",
+    "react-select": "5.8.1",
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.14",
+    "@singularsystems/neo-core": ">=1.0.18",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",

package/styles/Button.scss

@@ -23,5 +23,12 @@ div.dropdown-menu {
 
     div.dropdown-item {
         cursor: pointer;
+
+        .dropdown-subtext {
+            font-size: 13px;
+            color: #888;
+            max-width: 250px;
+            white-space: wrap;
+        }
     }
 }

package/styles/Card.scss

@@ -4,8 +4,8 @@
         justify-content: space-between;
         align-items: center;
 
-        .card-header-title i {
-            margin-right: 10px;
+        .card-header-title .neo-icon {
+            margin-right: 0.5rem;
         }
 
         .card-header-right-section {
@@ -15,8 +15,6 @@
 
             .card-expand-indicator {
                 margin-left: 0.5rem;
-                padding-top: 0.5rem;
-                padding-bottom: 0.5rem;
             }
         }
     }

package/styles/Misc.scss

@@ -112,7 +112,6 @@ div.tabs-header {
     select.form-control {
         display: inline;
         width: auto;
-        padding: 0;
         border-radius: 3px;
     }
 }