@singularsystems/neo-react 1.0.22 → 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/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/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/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'.

package/dist/ReactComponents/Tabs/TabManager.js

@@ -26,13 +26,13 @@ var TabManager = /** @class */ (function () {
         this.onTabChanged = this.onTabChanged.bind(this);
         this.reactionDisposer = reaction(function () { return _this.observable.value; }, function () { return _this.onTabChanged(); });
     }
-    /** Called by tab container. */
+    /** @internal */
     TabManager.prototype.initialise = function () {
         if (this.selectedTab !== "") {
             this.onTabChanged();
         }
     };
-    /** Called by tab container. */
+    /** @internal */
     TabManager.prototype.onUnmount = function () {
     };
     Object.defineProperty(TabManager.prototype, "selectedTab", {
@@ -79,7 +79,7 @@ var TabManager = /** @class */ (function () {
         tab.onDisplayed = callback;
         return this;
     };
-    /** Called by tab container. */
+    /** @internal */
     TabManager.prototype.tabMounted = function (tabKey, onLeave) {
         var tab = this.getTab(tabKey, true);
         tab.onLeave = onLeave;

package/dist/ReactComponents/Transitions/Transition.d.ts

@@ -0,0 +1,10 @@
+export declare class Transition {
+    setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
+    setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void;
+    cleanup: (element: HTMLElement) => void;
+    constructor(setBeforeStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, setAfterStyles: (element: HTMLElement, out: boolean, toLeft: boolean) => void, cleanup: (element: HTMLElement) => void);
+    static leftRight: Transition;
+    static upDown: Transition;
+    static inOut: Transition;
+    static fadeOnly: Transition;
+}

package/dist/ReactComponents/Transitions/Transition.js

@@ -0,0 +1,13 @@
+var Transition = /** @class */ (function () {
+    function Transition(setBeforeStyles, setAfterStyles, cleanup) {
+        this.setBeforeStyles = setBeforeStyles;
+        this.setAfterStyles = setAfterStyles;
+        this.cleanup = cleanup;
+    }
+    Transition.leftRight = new Transition(function (element, out, toLeft) { return element.style.left = ((toLeft ? 1 : -1) * (out ? 0 : 150)) + "px"; }, function (element, out, toLeft) { return element.style.left = ((toLeft ? -1 : 1) * (out ? 150 : 0)) + "px"; }, function (element) { return element.style.left = ""; });
+    Transition.upDown = new Transition(function (element, out, toLeft) { return element.style.top = ((toLeft ? 1 : -1) * (out ? 0 : 100)) + "px"; }, function (element, out, toLeft) { return element.style.top = ((toLeft ? -1 : 1) * (out ? 100 : 0)) + "px"; }, function (element) { return element.style.top = ""; });
+    Transition.inOut = new Transition(function (element, out, toLeft) { return element.style.transform = out ? "scale(1)" : (toLeft ? "scale(0.8)" : "scale(1.2)"); }, function (element, out, toLeft) { return element.style.transform = out ? (toLeft ? "scale(1.2)" : "scale(0.8)") : "scale(1)"; }, function (element) { return element.style.transform = ""; });
+    Transition.fadeOnly = new Transition(function () { }, function () { }, function () { });
+    return Transition;
+}());
+export { Transition };

package/dist/ReactComponents/Transitions/TransitionContainer.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TransitionController } from "./TransitionController";
+import { Transition } from "./Transition";
+export interface ITransitionContextState {
+    controller: TransitionController;
+}
+export declare const TransitionContext: React.Context<ITransitionContextState>;
+interface ITransitionContainerProps {
+    controller?: TransitionController;
+    transition?: Transition;
+    children: React.ReactNode;
+}
+export default class TransitionContainer extends React.Component<ITransitionContainerProps> {
+    private controller;
+    private containerRef;
+    private contextState;
+    constructor(props: ITransitionContainerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/ReactComponents/Transitions/TransitionContainer.js

@@ -0,0 +1,34 @@
+import { __extends } from "tslib";
+import React from "react";
+import { TransitionController } from "./TransitionController";
+export var TransitionContext = React.createContext({ controller: new TransitionController() });
+var TransitionContainer = /** @class */ (function (_super) {
+    __extends(TransitionContainer, _super);
+    function TransitionContainer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.containerRef = React.createRef();
+        if (!_this.props.controller) {
+            _this.controller = new TransitionController(undefined, _this.props.transition);
+            _this.controller.wasAutoCreated = true;
+        }
+        else {
+            _this.controller = _this.props.controller;
+        }
+        _this.contextState = { controller: _this.controller };
+        return _this;
+    }
+    TransitionContainer.prototype.componentDidMount = function () {
+        if (this.containerRef.current) {
+            this.controller.registerContainer(this.containerRef.current);
+        }
+    };
+    TransitionContainer.prototype.componentWillUnmount = function () {
+        this.controller.disposeContainer();
+    };
+    TransitionContainer.prototype.render = function () {
+        return (React.createElement(TransitionContext.Provider, { value: this.contextState },
+            React.createElement("div", { className: "neo-transition-container", ref: this.containerRef }, this.props.children)));
+    };
+    return TransitionContainer;
+}(React.Component));
+export default TransitionContainer;