@singularsystems/neo-react 1.0.13 → 1.0.15

package/dist/ReactComponents/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ComponentBase from './ComponentBase';
 import { Components } from '@singularsystems/neo-core';
-type IButtonProps = Components.IButtonOptions & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<Button>;
+type IButtonProps = Components.IButtonOptions & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref" | "onClick"> & React.RefAttributes<Button>;
 interface IButtonState {
     isExpanded: boolean;
 }
@@ -13,12 +13,14 @@ export default class Button extends ComponentBase<IButtonProps, IButtonState> {
     menuDom: React.RefObject<HTMLDivElement>;
     private iconFactory;
     private windowClickHandler;
+    private positionHelper?;
     constructor(props: IButtonProps);
     showMenu(): void;
     hideMenu(): void;
     private menuItemClicked;
     private windowClicked;
     afterRender(): void;
+    componentWillUnmount(): void;
     render(): JSX.Element;
 }
 export {};

package/dist/ReactComponents/Button.js

@@ -25,10 +25,12 @@ var Button = /** @class */ (function (_super) {
         }
     };
     Button.prototype.hideMenu = function () {
+        var _a;
         if (this.state.isExpanded) {
             this.setState({ isExpanded: false });
         }
         window.removeEventListener("click", this.windowClickHandler);
+        (_a = this.positionHelper) === null || _a === void 0 ? void 0 : _a.dispose();
     };
     Button.prototype.menuItemClicked = function (e, data, userEvent) {
         this.hideMenu();
@@ -48,9 +50,14 @@ var Button = /** @class */ (function (_super) {
     };
     Button.prototype.afterRender = function () {
         if (this.btnGroupDom.current && this.menuDom.current) {
-            Components.PositionHelper.checkScreenBounds(this.btnGroupDom.current, this.menuDom.current, undefined, this.props.menuAlignment === "right");
+            this.menuDom.current.style.position = "fixed"; // override bootstrap style.
+            this.positionHelper = new Components.FixedPositionHelper(this.btnGroupDom.current, this.menuDom.current, this.props.menuAlignment === "right");
         }
     };
+    Button.prototype.componentWillUnmount = function () {
+        var _a;
+        (_a = this.positionHelper) === null || _a === void 0 ? void 0 : _a.dispose();
+    };
     Button.prototype.render = function () {
         var _this = this;
         var _a;

package/dist/ReactComponents/Form.d.ts

@@ -3,15 +3,17 @@ import { Components, Model } from '@singularsystems/neo-core';
 interface IFormProps<T extends Model.IModelBase> extends Omit<React.FormHTMLAttributes<HTMLElement>, "children">, Components.IFormOptions<T> {
     /**
      * Called when the form is submitted, but the model is not valid.
-     * The justValidated parameter will be true if the validationDisplayMode is 'AfterSubmit', and this is the first submit attempt.
+     * The firstSubmit parameter will be true if this is the first submit attempt for the model.
      */
-    onInvalid?: (e: React.FormEvent, justValidated?: boolean) => void;
+    onInvalid?: (e?: React.FormEvent, firstSubmit?: boolean) => void;
     children: React.ReactNode | ((item: T, meta: Model.TransformMetaType<T>) => React.ReactNode);
 }
 export default class Form<T extends Model.IModelBase> extends React.Component<IFormProps<T>> {
     private reactionDisposer?;
-    private firstSubmit;
+    private getModelOrModels;
     private onSubmit;
+    /** Checks if the model is valid, waiting for any async rules to complete. Returns true if the model is valid. */
+    validateAsync(): Promise<boolean>;
     private disposeReaction;
     componentWillUnmount(): void;
     render(): React.JSX.Element;

package/dist/ReactComponents/Form.js

@@ -1,4 +1,4 @@
-import { __assign, __decorate, __extends, __rest } from "tslib";
+import { __assign, __awaiter, __decorate, __extends, __generator, __rest } from "tslib";
 import * as React from 'react';
 import { observer, Observer } from 'mobx-react';
 import { Validation, Model, ModalUtils, Misc } from '@singularsystems/neo-core';
@@ -8,59 +8,100 @@ import { FormContextProvider } from './FormContext';
 var Form = /** @class */ (function (_super) {
     __extends(Form, _super);
     function Form() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.firstSubmit = true;
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-    Form.prototype.onSubmit = function (e, model) {
-        var _this = this;
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        this.disposeReaction();
-        var canSubmit = true;
-        // TODO: if the model and none of its children have blurred, justValidated should be true
-        var justValidated = this.props.validationDisplayMode === Validation.DisplayMode.AfterSubmit && this.firstSubmit;
-        this.firstSubmit = false;
+    Form.prototype.getModelOrModels = function () {
+        var model = this.props.model;
         if (model) {
-            if (!model.isValid) {
-                canSubmit = false;
-                var container = void 0;
-                if (model instanceof Array) {
-                    container = model;
-                }
-                else {
-                    container = [model];
+            // Allow binding to ObservableProperty
+            if (model.attachedTo && !(model instanceof Array)) {
+                return model.attachedTo;
+            }
+            else {
+                return model;
+            }
+        }
+        return undefined;
+    };
+    Form.prototype.onSubmit = function (e) {
+        return __awaiter(this, void 0, void 0, function () {
+            var models, isFirstSubmit, isValid;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        e.preventDefault();
+                        e.stopPropagation();
+                        models = this.getModelOrModels();
+                        isFirstSubmit = true;
+                        if (models) {
+                            Model.GraphTraverser.traverseItems(models, new Model.GraphTraverser.RecursionState(), function (item, state) {
+                                if (item.validator.forceShowErrors) {
+                                    isFirstSubmit = false;
+                                }
+                                else {
+                                    item.validator.forceShowErrors = true;
+                                }
+                            });
+                        }
+                        return [4 /*yield*/, this.validateAsync()];
+                    case 1:
+                        isValid = _a.sent();
+                        if (isValid) {
+                            if (this.props.onSubmit)
+                                this.props.onSubmit(e);
+                        }
+                        else {
+                            if (this.props.onInvalid)
+                                this.props.onInvalid(e, isFirstSubmit);
+                        }
+                        return [2 /*return*/];
                 }
-                Model.GraphTraverser.traverseItems(container, new Model.GraphTraverser.RecursionState(), function (item, state) {
-                    item.validator.forceShowErrors = true;
-                });
-                if (this.props.onInvalid)
-                    this.props.onInvalid(e, justValidated);
-                if (this.props.showSummaryModal || this.props.invalidSummaryText || this.props.invalidSummaryTitle) {
-                    var onClose = this.disposeReaction.bind(this);
-                    var closeButton = (_a = Misc.Settings.form.validationModalCloseButton) !== null && _a !== void 0 ? _a : { text: "Ok" };
-                    if (closeButton) {
-                        closeButton.onClick = onClose;
+            });
+        });
+    };
+    /** Checks if the model is valid, waiting for any async rules to complete. Returns true if the model is valid. */
+    Form.prototype.validateAsync = function () {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            var _a;
+            _this.disposeReaction();
+            var isValid = true;
+            var modelOrModels = _this.getModelOrModels();
+            var models = modelOrModels === undefined ? [] : (modelOrModels instanceof Array ? modelOrModels : [modelOrModels]);
+            if (models) {
+                var allValid_1 = function () { return models.every(function (c) { return c.isValid; }); };
+                var someBusy = function () { return models.some(function (c) { return c.validator.isBusy; }); };
+                if (!allValid_1()) {
+                    isValid = false;
+                    var codeModal_1 = null;
+                    if (_this.props.showSummaryModal || _this.props.invalidSummaryText || _this.props.invalidSummaryTitle) {
+                        var onClose = _this.disposeReaction.bind(_this);
+                        var closeButton = (_a = Misc.Settings.form.validationModalCloseButton) !== null && _a !== void 0 ? _a : { text: "Ok" };
+                        if (closeButton) {
+                            closeButton.onClick = onClose;
+                        }
+                        codeModal_1 = ModalUtils.showModal(_this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
+                            return React.createElement("div", null,
+                                _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
+                                React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(modelOrModels), hideTopLevelTitle: !(modelOrModels instanceof Array) }));
+                        }), { onClose: onClose, closeButton: closeButton });
+                    }
+                    if (someBusy()) {
+                        // Async rule is busy, listen for when isBusy changes to false.
+                        _this.reactionDisposer = reaction(someBusy, function () {
+                            _this.disposeReaction();
+                            isValid = allValid_1();
+                            if (codeModal_1 !== null && isValid) {
+                                codeModal_1.close();
+                            }
+                            resolve(isValid);
+                        });
+                        return;
                     }
-                    var codeModal_1 = ModalUtils.showModal(this.props.invalidSummaryTitle || "Invalid data", React.createElement(Observer, null, function () {
-                        return React.createElement("div", null,
-                            _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
-                            React.createElement(ValidationSummary, { graph: Validation.getValidationSummary(model), hideTopLevelTitle: !(model instanceof Array) }));
-                    }), { onClose: onClose, closeButton: closeButton });
-                    // Listen for when isValid changes to true, in case there is an async rule running.
-                    this.reactionDisposer = reaction(function () { return model.isValid; }, function () {
-                        _this.disposeReaction();
-                        codeModal_1.close();
-                        if (model.isValid && _this.props.onSubmit)
-                            _this.props.onSubmit(e);
-                    });
                 }
             }
-        }
-        if (canSubmit && this.props.onSubmit) {
-            this.props.onSubmit(e);
-        }
+            resolve(isValid);
+        });
     };
     Form.prototype.disposeReaction = function () {
         if (this.reactionDisposer) {
@@ -74,17 +115,7 @@ var Form = /** @class */ (function (_super) {
     Form.prototype.render = function () {
         var _this = this;
         var _a = this.props, validationDisplayMode = _a.validationDisplayMode, allReadOnly = _a.allReadOnly, allDisabled = _a.allDisabled, model = _a.model, showSummaryModal = _a.showSummaryModal, invalidSummaryTitle = _a.invalidSummaryTitle, invalidSummaryText = _a.invalidSummaryText, native = __rest(_a, ["validationDisplayMode", "allReadOnly", "allDisabled", "model", "showSummaryModal", "invalidSummaryTitle", "invalidSummaryText"]);
-        var formModel;
-        if (model) {
-            // Allow binding to ObservableProperty
-            if (model.attachedTo && !(model instanceof Array)) {
-                formModel = model.attachedTo;
-            }
-            else {
-                formModel = model;
-            }
-        }
-        return (React.createElement("form", __assign({}, native, { onSubmit: function (e) { return _this.onSubmit(e, formModel); } }),
+        return (React.createElement("form", __assign({}, native, { onSubmit: function (e) { return _this.onSubmit(e); } }),
             React.createElement(FormContextProvider, { validationDisplayMode: validationDisplayMode !== null && validationDisplayMode !== void 0 ? validationDisplayMode : Misc.Settings.form.validationDisplayMode, allReadOnly: allReadOnly, allDisabled: allDisabled }, (this.props.children instanceof Function) ? this.props.children(model, model.meta) : this.props.children)));
     };
     Form = __decorate([

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

@@ -11,7 +11,10 @@ export declare class StickyTableHeader {
      * @param fixedElement A fixed element at the top of the screen to use as an anchor, rather than the top of the screen itself.
      */
     constructor(table: HTMLTableElement, fixedElement?: HTMLElement | undefined);
-    private scrollParent?;
+    /** Parent element that may scroll, requiring a position update. */
+    private scrollElement?;
+    /** Fixed height parent element that the grid scrolls within. */
+    private relativeParent?;
     private header;
     private headerCopy?;
     private headerHeight;

package/dist/ReactComponents/Grid/StickyTableHeader.js

@@ -16,12 +16,17 @@ var StickyTableHeader = /** @class */ (function () {
             throw Error("Table must have a header section.");
         }
         this.header = table.tHead;
-        this.scrollParent = StickyTableHeader.getParentScrollElement(table);
+        this.scrollElement = StickyTableHeader.getParentScrollElement(table);
+        if (this.scrollElement) {
+            if (this.scrollElement.style.height || this.scrollElement.style.maxHeight) {
+                this.relativeParent = this.scrollElement;
+            }
+        }
         this.handleScroll = this.handleScroll.bind(this);
         this.onPossibleContentChange = this.onPossibleContentChange.bind(this);
         document.addEventListener("scroll", this.handleScroll);
-        if (this.scrollParent) {
-            this.scrollParent.addEventListener("scroll", this.handleScroll);
+        if (this.scrollElement) {
+            this.scrollElement.addEventListener("scroll", this.handleScroll);
         }
         table.addEventListener("keydown", this.onPossibleContentChange);
         table.addEventListener("mouseup", this.onPossibleContentChange);
@@ -31,10 +36,10 @@ var StickyTableHeader = /** @class */ (function () {
         //  otherwise if there is a fixed (non scrolling) element at the top of the page, then the headers must appear below that.
         //  otherwise the headers will stick to the top of the screen.
         var fixedElement = null;
-        if (!this.scrollParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
+        if (!this.relativeParent && this.fixedElement && getComputedStyle(this.fixedElement).position === "fixed") {
             fixedElement = this.fixedElement;
         }
-        var topBoundary = this.scrollParent ? this.scrollParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
+        var topBoundary = this.relativeParent ? this.relativeParent.getBoundingClientRect().top : (fixedElement ? fixedElement.getBoundingClientRect().bottom : 0);
         var tableBounds = this.table.getBoundingClientRect();
         var tbodyBounds = this.table.tBodies[this.table.tBodies.length - 1].getBoundingClientRect();
         if (tableBounds.top < topBoundary && tbodyBounds.bottom - this.headerHeight > topBoundary) {
@@ -50,6 +55,11 @@ var StickyTableHeader = /** @class */ (function () {
             }
             this.header.style.left = tableBounds.left + "px";
             this.header.style.top = topBoundary + "px";
+            if (this.scrollElement) {
+                var left = this.scrollElement.scrollLeft;
+                var width = this.scrollElement.clientWidth + left;
+                this.header.style.clipPath = "rect(0px ".concat(width, "px 100% ").concat(left, "px)");
+            }
         }
         else {
             this.setColumnWidths(true);
@@ -59,6 +69,7 @@ var StickyTableHeader = /** @class */ (function () {
     StickyTableHeader.prototype.removeCopy = function () {
         if (this.headerCopy) {
             this.header.classList.remove("neo-grid-fixed-header");
+            this.header.style.clipPath = "";
             this.table.removeChild(this.headerCopy);
             this.headerCopy = undefined;
         }
@@ -81,8 +92,8 @@ var StickyTableHeader = /** @class */ (function () {
     };
     StickyTableHeader.prototype.dispose = function () {
         document.removeEventListener("scroll", this.handleScroll);
-        if (this.scrollParent) {
-            this.scrollParent.removeEventListener("scroll", this.handleScroll);
+        if (this.scrollElement) {
+            this.scrollElement.removeEventListener("scroll", this.handleScroll);
         }
         this.table.removeEventListener("keydown", this.onPossibleContentChange);
         this.table.removeEventListener("mouseup", this.onPossibleContentChange);
@@ -92,10 +103,11 @@ var StickyTableHeader = /** @class */ (function () {
      * Returns the first parent element that has a scrollbar.
      */
     StickyTableHeader.getParentScrollElement = function (element) {
-        var current = element;
-        while (current) {
-            if ((current.style.height || current.style.maxHeight) &&
-                (current.style.overflow === "scroll" || current.style.overflow === "auto" || current.style.overflowY === "scroll" || current.style.overflowY === "auto")) {
+        var current = element.parentElement;
+        var depth = 0;
+        while (current && depth < 5) {
+            var computedStyle = window.getComputedStyle(current);
+            if (computedStyle.overflowX === "auto" || computedStyle.overflowX === "scroll" || computedStyle.overflowY === "auto" || computedStyle.overflowY === "scroll") {
                 return current;
             }
             current = current.parentElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "typescript": "5.4.2"
   },
   "dependencies": {
-    "@singularsystems/neo-core": "1.0.10",
+    "@singularsystems/neo-core": "1.0.12",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
     "axios": "1.6.7",
@@ -49,7 +49,7 @@
     "tslib": "2.5.0"
   },
   "peerDependencies": {
-    "@singularsystems/neo-core": ">=1.0.10",
+    "@singularsystems/neo-core": ">=1.0.12",
     "axios": ">=1.6.2",
     "inversify": ">=5.0.1",
     "mobx": ">=6.9.0",