@singularsystems/neo-react 1.0.21 → 1.1.0

package/CHANGELOG.md

@@ -1,4 +1,18 @@
-# Version 1.x
+# Version 1.1
+
+Version 1.1 removes the `react-router` dependency. This requires updates to your project which are explained in [this guide](./docs/RemoveReactRouter.md).
+
+It also fixes some issues preventing projects from upgrading to `mobx-react` v9.x.
+
+## Version 1.0.22
+
+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:
+
+```json
+"react-select": "5.8.1",
+```
+
+# Version 1.0
 
 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.
 

package/README.md

@@ -4,7 +4,7 @@ This project contains the react/mobx implementation of the neo client library.
 
 It also contains UI components built for react.
 
-## Changelog
+## Changelog / Breaking changes
 
 View the changelog [here](./CHANGELOG.md).
 

package/dist/Modules/NeoReactModule.js

@@ -16,7 +16,7 @@ var neoReactModule = new AppServices.Module("neo-react", function (container) {
     container.bind(AppServices.NeoTypes.Core.ModelCreator).to(ReactModelCreator).inTransientScope();
     container.bind(AppServices.NeoTypes.UI.ErrorHandler).to(ErrorHandler).inSingletonScope();
     container.bind(AppServices.NeoTypes.UI.GlobalContextMenuState).toConstantValue(new ContextMenuState());
-    container.bind(AppServices.NeoTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();
+    container.bind(NeoReactTypes.Routing.PageLeaveHandler).to(PageLeaveHandler).inSingletonScope();
     container.bind(NeoReactTypes.Components.IconFactory).to(IconFactory).inSingletonScope();
     container.bind(NeoReactTypes.Routing.GlobalRoutingState).to(RoutingState).inSingletonScope();
     container.bind(NeoReactTypes.Routing.NavigationHelper).to(NavigationHelper).inSingletonScope();

package/dist/Modules/ReactSetup.js

@@ -1,7 +1,6 @@
-import { AppServices, Utils } from '@singularsystems/neo-core';
+import { Utils } from '@singularsystems/neo-core';
 import { configure, isObservableArray, runInAction, untracked } from 'mobx';
 import React from 'react';
-import { NeoReactTypes } from './Types';
 export function runReactSetup(container) {
     Utils.peek = function (target, propertyName) {
         return untracked(function () { return target[propertyName]; });
@@ -16,8 +15,5 @@ export function runReactSetup(container) {
         }
         return array;
     };
-    window.addEventListener("beforeunload", function (e) {
-        container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(container.get(NeoReactTypes.Routing.GlobalRoutingState).currentView, e);
-    });
     configure({ enforceActions: "never", useProxies: "never" });
 }

package/dist/Modules/Types.d.ts

@@ -9,6 +9,7 @@ import { AxiosStatic } from 'axios';
 import type Select from 'react-select';
 import { IDisposeHelper } from '../Services/IDisposeHelper';
 import { IIconFactory } from '../ReactComponents/Icons/IIconFactory';
+import { IPageLeaveHandler } from "../Routing/PageLeaveHandler";
 declare const NeoReactTypes: {
     Components: {
         Slider: AppServices.ServiceIdentifier<typeof Slider>;
@@ -27,16 +28,16 @@ declare const NeoReactTypes: {
         IconFactory: AppServices.ServiceIdentifier<IIconFactory>;
     };
     Routing: {
+        PageLeaveHandler: AppServices.ServiceIdentifier<IPageLeaveHandler>;
         NavigationHelper: AppServices.ServiceIdentifier<INavigationHelper>;
         GlobalRoutingState: AppServices.ServiceIdentifier<RoutingState>;
         MenuItemProvider: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IMenuItemProvider<import("@singularsystems/neo-core/dist/Routing").IMenuRoute>>;
-        PageLeaveHandler: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IPageLeaveHandler>;
         RouteSecurityService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Routing").IRouteSecurityService>;
     };
     Services: {
         DisposeHelper: AppServices.ServiceIdentifier<IDisposeHelper>;
     };
-    Axios: AppServices.ServiceIdentifier<AxiosStatic>;
+    Axios: AppServices.ServiceIdentifier<import("axios").AxiosStatic>;
     Config: {
         ConfigModel: AppServices.ServiceIdentifier<AppServices.IConfigModel>;
         ConfigService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/AppServices/Config/ConfigService").IConfigService>;

package/dist/Modules/Types.js

@@ -15,7 +15,7 @@ var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
         AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
         IconFactory: new AppServices.ServiceIdentifier("NeoReact.IconFactory")
-    }, Routing: __assign(__assign({}, AppServices.NeoTypes.Routing), { NavigationHelper: AppServices.NeoTypes.Routing.NavigationHelper.asType(), GlobalRoutingState: new AppServices.ServiceIdentifier("NeoReact.GlobalRoutingState") }), Services: {
+    }, Routing: __assign(__assign({}, AppServices.NeoTypes.Routing), { PageLeaveHandler: new AppServices.ServiceIdentifier("NeoReact.PageLeaveHandler"), NavigationHelper: AppServices.NeoTypes.Routing.NavigationHelper.asType(), GlobalRoutingState: new AppServices.ServiceIdentifier("NeoReact.GlobalRoutingState") }), Services: {
         DisposeHelper: new AppServices.ServiceIdentifier("NeoReact.DisposeHelper")
     } });
 export { NeoReactTypes };

package/dist/React/ReactModelCreator.js

@@ -63,7 +63,7 @@ var ReactModelCreator = /** @class */ (function (_super) {
             }
         }
         // Run mobx's setup for this instance.
-        makeObservable(object, annotations, { proxy: false });
+        makeObservable(object, annotations);
         // Setup once properties have been converted to observables.
         for (var propertyKey in observables) {
             try {

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/FileManager/FileInput.js

@@ -4,10 +4,12 @@ import { Components, Utils, Misc, Validation } from '@singularsystems/neo-core';
 import { observer } from 'mobx-react';
 import FileUploadButton from './FileUploadButton';
 import { FileContext } from './FileContext';
-import { ProgressBar, Button, FileDropArea } from '../_Exports';
 import ComponentBase from '../ComponentBase';
 import { BindPropsHelper } from '../PropTypes';
 import { makeObservable, observable } from 'mobx';
+import ProgressBar from "../ProgressBar";
+import FileDropArea from "./FileDropArea";
+import Button from "../Button";
 /**
  * The file manager component manages uploading, and binding of files to a model.
  */

package/dist/ReactComponents/Form.js

@@ -80,11 +80,9 @@ var Form = /** @class */ (function (_super) {
                         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 });
+                        codeModal_1 = ModalUtils.showModal(_this.props.invalidSummaryTitle || "Invalid data", React.createElement("div", null,
+                            _this.props.invalidSummaryText || "Cannot continue due to the following issues:",
+                            React.createElement(Observer, null, function () { return 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.

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/Grid.js

@@ -1,7 +1,7 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import * as React from 'react';
 import { Data, Utils, Misc } from '@singularsystems/neo-core';
-import { observer, Observer } from 'mobx-react';
+import { observer } from 'mobx-react';
 import NeoButton from '../Button';
 import { DataViewContext } from '../../React/DataView';
 import { StickyTableHeader } from './StickyTableHeader';
@@ -103,14 +103,12 @@ var Grid = /** @class */ (function (_super) {
             React.createElement(GridContext.Provider, { value: this.gridContext },
                 React.createElement(TableSection, { type: "header" }, this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true, -1)),
                 React.createElement(TableSection, { type: "body" }, this.gridContext.dataView.getItems().map(function (item, index) { return (React.createElement(ItemGroup, { index: enableRowIndexes ? index : 0, item: item, key: keyProperty ? item[keyProperty] : item.entityIdentifier, template: _this.props.children })); })),
-                React.createElement(Observer, null, function () {
-                    return React.createElement(React.Fragment, null, (showAddButton || addButton || footerButtons || _this.gridContext.hasSummaries || footerContent !== undefined) &&
-                        React.createElement(TableSection, { type: "footer" },
-                            _this.gridContext.hasSummaries && _this.headerItem && _this.props.children(_this.headerItem, _this.headerItem.meta, true, -1),
-                            footerContent !== undefined && footerContent(_this.gridContext.dataView.getItems()),
-                            (showAddButton || addButton || footerButtons) &&
-                                React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })));
-                }))));
+                (showAddButton || addButton || footerButtons || this.gridContext.hasSummaries || footerContent !== undefined) &&
+                    React.createElement(TableSection, { type: "footer" },
+                        this.gridContext.hasSummaries && this.headerItem && this.props.children(this.headerItem, this.headerItem.meta, true, -1),
+                        footerContent !== undefined && footerContent(this.gridContext.dataView.getItems()),
+                        (showAddButton || addButton || footerButtons) &&
+                            React.createElement(AddButtonRow, { addButton: addButton, showAddButton: showAddButton, additionalContent: footerButtons })))));
     };
     Grid.prototype.setInitialSort = function (initialSort, initialSortAscending) {
         var _a;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface ColorPickerProps {
     color: string;
     onChange: (newColor: string) => void;

package/dist/ReactComponents/Icons/IIconFactory.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IconStyle {
     /** True if the icon should be fixed width */
     fixedWidth?: boolean;

package/dist/ReactComponents/Icons/Icon.js

@@ -1,7 +1,7 @@
 import { __extends, __rest } from "tslib";
 import { Misc } from "@singularsystems/neo-core";
 import React from "react";
-import { NeoReactTypes } from "../..";
+import { NeoReactTypes } from "../../Modules/Types";
 /** Renders an icon using the icon factory specified at startup. */
 var Icon = /** @class */ (function (_super) {
     __extends(Icon, _super);

package/dist/ReactComponents/Link.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 interface ILinkProps extends React.HTMLProps<HTMLAnchorElement> {
+    /** Internal path to navigate to. */
+    to?: string;
+    /** Indicates that this link is part of a navigation structure, and will be active if it matches the current url. */
+    isNav?: boolean;
+    /** If `isNav` is set, then this will cause the url to match exactly instead of using startswith. */
+    exact?: boolean;
 }
 /**
  * Renders an anchor tag with an href of '/' unless otherwise specified.
  * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
  */
 export default class Link extends React.Component<ILinkProps> {
+    private basePath;
     constructor(props: ILinkProps);
     private onClick;
     render(): React.JSX.Element;

package/dist/ReactComponents/Link.js

@@ -1,5 +1,8 @@
-import { __assign, __extends } from "tslib";
+import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
+import { AppServices, Misc, Utils } from "@singularsystems/neo-core";
 import React from 'react';
+import { NeoReactTypes } from "../Modules/Types";
+import { observer } from "mobx-react";
 /**
  * Renders an anchor tag with an href of '/' unless otherwise specified.
  * The onClick event will call preventDefault() so that the anchor acts like a button instead of a link to a url.
@@ -9,20 +12,50 @@ var Link = /** @class */ (function (_super) {
     function Link(props) {
         var _this = _super.call(this, props) || this;
         _this.onClick = _this.onClick.bind(_this);
+        _this.basePath = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState).basePath;
         return _this;
     }
     Link.prototype.onClick = function (e) {
-        e.preventDefault();
         if (this.props.onClick) {
             this.props.onClick(e);
         }
+        if (!e.defaultPrevented) {
+            e.preventDefault();
+            if (this.props.to) {
+                Misc.Globals.appService.get(AppServices.NeoTypes.Routing.NavigationHelper).navigateInternal(this.props.to);
+            }
+        }
     };
     Link.prototype.render = function () {
-        var _a;
-        var props = this.props;
-        var href = (_a = props.href) !== null && _a !== void 0 ? _a : "/";
-        return React.createElement("a", __assign({}, props, { href: href, onClick: this.onClick }), this.props.children);
+        var _a = this.props, to = _a.to, href = _a.href, isNav = _a.isNav, exact = _a.exact, rest = __rest(_a, ["to", "href", "isNav", "exact"]);
+        href !== null && href !== void 0 ? href : (href = "/");
+        if (to) {
+            if (to.startsWith("/") && !to.startsWith(this.basePath)) {
+                to = this.basePath + to;
+            }
+            href = to;
+            if (isNav) {
+                // Cause re-render if current route changes.
+                void Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState).currentRoute;
+                var path = window.location.pathname.toLowerCase();
+                var toLc = to.toLowerCase();
+                if (path.endsWith("/")) {
+                    path = path.substring(0, path.length - 1);
+                }
+                var isMatch = exact === true ?
+                    toLc === path :
+                    path.startsWith(toLc);
+                if (isMatch) {
+                    rest.className = Utils.joinWithSpaces(rest.className, "active");
+                }
+            }
+        }
+        return React.createElement("a", __assign({}, rest, { href: href, onClick: this.onClick }), this.props.children);
     };
+    Link = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
+    ], Link);
     return Link;
 }(React.Component));
 export default Link;

package/dist/ReactComponents/Modal/Modal.js

@@ -4,9 +4,9 @@ import ModalPortal from './ModalPortal';
 import { Misc, Utils } from '@singularsystems/neo-core';
 import Button from '../Button';
 import { Settings } from '@singularsystems/neo-core/dist/Settings';
-import { Neo } from '../..';
 import { observer } from 'mobx-react';
 import BootstrapUtils from "../BootstrapUtils";
+import Form from "../Form";
 var Modal = /** @class */ (function (_super) {
     __extends(Modal, _super);
     function Modal() {
@@ -114,7 +114,7 @@ var Modal = /** @class */ (function (_super) {
             container = React.createElement(React.Fragment, null, content);
         }
         else {
-            container = React.createElement(Neo.Form, __assign({}, formProps, { onSubmit: function (e) { _this.onSubmit && _this.onSubmit(e); } }), content);
+            container = React.createElement(Form, __assign({}, formProps, { onSubmit: function (e) { _this.onSubmit && _this.onSubmit(e); } }), content);
         }
         return (this.visible &&
             React.createElement(ModalPortal, { show: show, onDismiss: onClose, options: this.props },

package/dist/ReactComponents/StateObserver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Watches all observables accessed during the getState callback.
  * When any of the value of these observables change, forceUpdate is called on the component.

package/dist/ReactComponents/Tabs/Tab.js

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import { TabContext } from "./TabContainer";
 import { Misc } from "@singularsystems/neo-core";
 import { NeoReactTypes } from "../../Modules/Types";
+import TransitionPanel from "../Transitions/TransitionPanel";
 var Tab = /** @class */ (function (_super) {
     __extends(Tab, _super);
     function Tab(props) {
@@ -58,7 +59,10 @@ var Tab = /** @class */ (function (_super) {
         if (isSelected) {
             this.hasRenderedContents = true;
         }
-        return ((isSelected || forceRender) && React.createElement("div", { className: "tab-pane" + (isSelected ? " show active" : "") }, this.props.children));
+        var tabPane = React.createElement("div", { className: "tab-pane" + (isSelected ? " show active" : "") }, this.props.children);
+        return this.context.animate ?
+            React.createElement(TransitionPanel, { isVisible: isSelected }, tabPane) :
+            (isSelected || forceRender) && tabPane;
     };
     Tab.contextType = TabContext;
     Tab = __decorate([

package/dist/ReactComponents/Tabs/TabContainer.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { Components } from "@singularsystems/neo-core";
 import { IObservableValue } from "@singularsystems/neo-core/dist/Model/ObservableValue";
-import { TabManager, ITabManagerInternal } from './TabManager';
+import { TabManager } from './TabManager';
+import { Transition } from "../Transitions/Transition";
 export interface ITabContainerProps {
     /**
      * Optional tab manager for managing selected tab / tab change events.
@@ -23,15 +24,18 @@ export interface ITabContainerProps {
      * Use this if you want ui state e.g. scroll positions to remain on switch of tabs.
      */
     keepMounted?: boolean;
+    /** True if switching tabs should animate. */
+    animate?: boolean | Transition;
 }
 export declare class TabContextParams {
-    tabManager: ITabManagerInternal;
+    tabManager: TabManager;
     /**
      * True if the tab manager was passed in to the tab container.
      */
     isUserTabManager: boolean;
     inHeader: boolean;
     keepMounted?: boolean;
+    animate?: boolean;
 }
 export declare const TabContext: React.Context<TabContextParams>;
 export default class TabContainer extends React.Component<ITabContainerProps & React.HTMLProps<HTMLDivElement>> {

package/dist/ReactComponents/Tabs/TabContainer.js

@@ -1,7 +1,9 @@
 import { __assign, __extends, __rest } from "tslib";
 import React from "react";
-import { Components, Utils } from "@singularsystems/neo-core";
+import { Components, Misc, Utils } from "@singularsystems/neo-core";
 import { TabManager } from './TabManager';
+import { TransitionContainer } from "../_Exports";
+import { Transition } from "../Transitions/Transition";
 var TabContextParams = /** @class */ (function () {
     function TabContextParams() {
         /**
@@ -19,15 +21,13 @@ var TabContainer = /** @class */ (function (_super) {
     function TabContainer(props) {
         var _this = _super.call(this, props) || this;
         _this.tabContext = new TabContextParams();
-        var tabManager;
         if (_this.props.tabManager) {
-            tabManager = _this.props.tabManager;
+            _this.tabManager = _this.props.tabManager;
             _this.tabContext.isUserTabManager = true;
         }
         else {
-            tabManager = new TabManager("", true, _this.props.selectedTab);
+            _this.tabManager = new TabManager("", true, _this.props.selectedTab);
         }
-        _this.tabManager = tabManager;
         _this.tabContext.tabManager = _this.tabManager;
         return _this;
     }
@@ -38,24 +38,22 @@ var TabContainer = /** @class */ (function (_super) {
         this.tabManager.onUnmount();
     };
     TabContainer.prototype.render = function () {
-        var _a = this.props, tabManager = _a.tabManager, selectedTab = _a.selectedTab, variant = _a.variant, fillMode = _a.fillMode, align = _a.align, verticalSizes = _a.verticalSizes, keepMounted = _a.keepMounted, domProps = __rest(_a, ["tabManager", "selectedTab", "variant", "fillMode", "align", "verticalSizes", "keepMounted"]);
+        var _a = this.props, tabManager = _a.tabManager, selectedTab = _a.selectedTab, variant = _a.variant, fillMode = _a.fillMode, align = _a.align, verticalSizes = _a.verticalSizes, keepMounted = _a.keepMounted, animate = _a.animate, domProps = __rest(_a, ["tabManager", "selectedTab", "variant", "fillMode", "align", "verticalSizes", "keepMounted", "animate"]);
         this.tabContext.keepMounted = keepMounted;
+        this.tabContext.animate = (animate !== null && animate !== void 0 ? animate : Misc.Settings.tabs.animate) !== false;
         if (!verticalSizes)
             verticalSizes = {};
         if (!verticalSizes.xs)
             verticalSizes.xs = 12;
         var isCardMode = (variant === "tabs" || !variant);
-        if (variant === "flat") {
-            variant = "tabs";
-        }
         var _b = Components.BootstrapHelpers.getInverseBreakpointClasses(verticalSizes), cols = _b.cols, inverseCols = _b.inverseCols;
         domProps.className = Utils.joinWithSpaces(domProps.className, "row neo-tab-container", isCardMode ? "neo-tab-card-mode" : undefined);
         return (React.createElement(TabContext.Provider, { value: this.tabContext },
             React.createElement("div", __assign({}, domProps),
                 React.createElement("div", { className: "tabs-header " + cols },
-                    React.createElement(TabSection, { isHeader: true, containerProps: { verticalSizes: verticalSizes, variant: variant, fillMode: fillMode, align: align } }, this.props.children)),
+                    React.createElement(TabSection, { isHeader: true, containerProps: this.props }, this.props.children)),
                 React.createElement("div", { className: inverseCols },
-                    React.createElement(TabSection, { isHeader: false }, this.props.children)))));
+                    React.createElement(TabSection, { isHeader: false, containerProps: this.props }, this.props.children)))));
     };
     return TabContainer;
 }(React.Component));
@@ -66,17 +64,21 @@ var TabSection = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     TabSection.prototype.render = function () {
-        this.context.inHeader = this.props.isHeader;
-        var headerClassName = "nav ";
+        var _a = this.props, isHeader = _a.isHeader, containerProps = _a.containerProps;
+        this.context.inHeader = isHeader;
+        var headerClassName = "nav";
         if (this.props.isHeader) {
-            var containerProps = this.props.containerProps;
+            var variant = containerProps.variant;
+            if (variant === "flat") {
+                variant = "tabs";
+            }
             if (containerProps.verticalSizes) {
                 var breakpoint = Components.BootstrapHelpers.getFirstBreakpoint(containerProps.verticalSizes);
                 if (breakpoint)
                     headerClassName += " flex-" + breakpoint + "-column";
             }
-            if (containerProps.variant !== "none") {
-                headerClassName += " nav-" + (containerProps.variant || "tabs");
+            if (variant !== "none") {
+                headerClassName += " nav-" + (variant || "tabs");
             }
             if (containerProps.fillMode) {
                 headerClassName += " nav-" + containerProps.fillMode;
@@ -85,9 +87,15 @@ var TabSection = /** @class */ (function (_super) {
                 headerClassName += " justify-content-" + containerProps.align;
             }
         }
+        var transition = typeof containerProps.animate === "object" ? containerProps.animate : undefined;
+        if (!transition && containerProps.verticalSizes) {
+            transition = Transition.upDown;
+        }
         return (this.props.isHeader ?
             React.createElement("ul", { className: headerClassName }, this.props.children) :
-            React.createElement("div", { className: "tab-content" }, this.props.children));
+            React.createElement("div", { className: "tab-content" }, this.context.animate ?
+                React.createElement(TransitionContainer, { transition: transition }, this.props.children) :
+                this.props.children));
     };
     TabSection.contextType = TabContext;
     return TabSection;

package/dist/ReactComponents/Tabs/TabManager.d.ts

@@ -1,5 +1,4 @@
 import { Misc, Model } from '@singularsystems/neo-core';
-import { ICancellableEvent } from '../Misc';
 export interface ITabManager {
     selectedTab: string;
     /**
@@ -11,11 +10,6 @@ export interface ITabManager {
      */
     onTabDisplayed(tabKey: string, callback: () => void): ITabManager;
 }
-export interface ITabManagerInternal extends ITabManager {
-    initialise(): void;
-    tabMounted(tabKey: string, onLeave?: (e: ICancellableEvent) => void): void;
-    onUnmount(): void;
-}
 /**
  * Tab manager used to manage a tab component.
  * @param T string union type of tab names.
@@ -30,10 +24,6 @@ export declare class TabManager<T extends string = string> implements Misc.IDisp
      * @param autoSelectFirstTab Set to true if the first child tab should become selected.
      */
     constructor(selectedTab?: T, autoSelectFirstTab?: boolean, observable?: Model.IObservableValue<T>);
-    /** Called by tab container. */
-    private initialise;
-    /** Called by tab container. */
-    private onUnmount;
     get selectedTab(): T;
     set selectedTab(value: T);
     /**
@@ -44,8 +34,6 @@ export declare class TabManager<T extends string = string> implements Misc.IDisp
      * Registers a callback to run whenever the tab with this tab key is displayed.
      */
     onTabDisplayed(tabKey: T, callback: () => void): this;
-    /** Called by tab container. */
-    private tabMounted;
     private getTab;
     /**
      * Marks the tab as 'initial'.