@singularsystems/neo-react 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/Modules/ReactSetup.js

@@ -1,7 +1,7 @@
 import { AppServices, Utils } from '@singularsystems/neo-core';
 import { configure, runInAction, untracked } from 'mobx';
-import ViewBase from '../Views/ViewBase';
 import React from 'react';
+import { NeoReactTypes } from './Types';
 export function runReactSetup(container) {
     Utils.peek = function (target, propertyName) {
         return untracked(function () { return target[propertyName]; });
@@ -11,7 +11,7 @@ export function runReactSetup(container) {
     };
     Utils.batchUpdate = runInAction;
     window.addEventListener("beforeunload", function (e) {
-        container.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onWindowUnload(ViewBase.currentView, 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

@@ -13,8 +13,8 @@ declare const NeoReactTypes: {
         Slider: AppServices.ServiceIdentifier<typeof Slider>;
         Range: AppServices.ServiceIdentifier<typeof Range>;
         SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
-        ReactSelect: AppServices.ServiceIdentifier<typeof Select>;
-        AsyncSelect: AppServices.ServiceIdentifier<typeof AsyncSelect>;
+        ReactSelect: AppServices.ServiceIdentifier<Select>;
+        AsyncSelect: AppServices.ServiceIdentifier<AsyncSelect>;
     };
     Routing: {
         NavigationHelper: AppServices.ServiceIdentifier<INavigationHelper>;

package/dist/ReactComponents/ContextMenu/ContextMenu.js

@@ -1,6 +1,6 @@
 import { __decorate, __extends, __metadata } from "tslib";
 import React from 'react';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Utils } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
@@ -11,6 +11,7 @@ var ContextMenu = /** @class */ (function (_super) {
         _this.menuRef = React.createRef();
         _this.hoverItem = null;
         _this.mouseEnter = _this.mouseEnter.bind(_this);
+        makeObservable(_this);
         return _this;
     }
     ContextMenu_1 = ContextMenu;

package/dist/ReactComponents/ContextMenu/ContextMenuState.d.ts

@@ -1,6 +1,7 @@
 import { Components } from "@singularsystems/neo-core";
 import { IPosition } from "@singularsystems/neo-core/dist/Components/ContextMenu/ContextMenu";
 export declare class ContextMenuState {
+    constructor();
     show: boolean;
     items: Components.IMenuItem[];
     position: IPosition | null;

package/dist/ReactComponents/ContextMenu/ContextMenuState.js

@@ -1,10 +1,11 @@
 import { __decorate, __metadata } from "tslib";
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 var ContextMenuState = /** @class */ (function () {
     function ContextMenuState() {
         this.show = false;
         this.items = [];
         this.position = null;
+        makeObservable(this);
     }
     __decorate([
         observable.ref,

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.d.ts

@@ -54,11 +54,11 @@ interface IAutoCompleteCommonProps<T> extends ICommonEditorProps, Props<IOption,
      */
     minCharacters?: number;
 }
-export interface IAutoCompleteProps<T> extends IAutoCompleteCommonProps<T> {
+export interface IAutoCompleteProps {
     bind: Model.IPropertyInstance;
     bindDisplay?: Model.IPropertyInstance;
 }
-export interface IAutoCompleteMultiSelectProps<T> extends IAutoCompleteCommonProps<T> {
+export interface IAutoCompleteMultiSelectProps {
     /**
      * A list of ids and labels to use as the selected list.
      */
@@ -68,12 +68,12 @@ export interface IAutoCompleteMultiSelectProps<T> extends IAutoCompleteCommonPro
      */
     bindIds?: (string | number)[];
 }
-export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>> {
+export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoCompleteCommonProps<T> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps)> {
     static contextType: React.Context<import("../FormContext").FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     private asyncSelectImplementation;
     private selectImplementation;
-    constructor(props: IAutoCompleteProps<T> | IAutoCompleteMultiSelectProps<T>);
+    constructor(props: IAutoCompleteCommonProps<T> & (IAutoCompleteProps | IAutoCompleteMultiSelectProps));
     private onKeyPress;
     private mapTArrayToOptions;
     private onItemSelected;

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -48,11 +48,11 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         return items.map(function (item) { return (__assign(__assign({}, item), { value: item[_this.valueMember], label: item[_this.displayMember] })); });
     };
     AutoCompleteDropDown.prototype.onItemSelected = function (args, action) {
-        var onItemSelected = this.props.onItemSelected;
-        if (this.props.bindItems) {
+        var onItemSelected = this.props.onItemSelected, singleProps = this.props, multiProps = this.props;
+        if (multiProps.bindItems) {
             // Multi select
-            var itemList = this.props.bindItems.value;
-            var bindIdsList = this.props.bindIds;
+            var itemList = multiProps.bindItems.value;
+            var bindIdsList = multiProps.bindIds;
             if (action.action === "select-option") {
                 itemList.push({ id: action.option.value, display: action.option.label });
                 if (bindIdsList) {
@@ -86,9 +86,9 @@ var AutoCompleteDropDown = /** @class */ (function (_super) {
         }
         else if (this.props.bind) {
             // Single select
-            this.props.bind.value = args ? args.value : null;
-            if (this.props.bindDisplay) {
-                this.props.bindDisplay.value = args ? args.label : "";
+            singleProps.bind.value = args ? args.value : null;
+            if (singleProps.bindDisplay) {
+                singleProps.bindDisplay.value = args ? args.label : "";
             }
             if (onItemSelected) {
                 onItemSelected(args);

package/dist/ReactComponents/ErrorHandler.d.ts

@@ -2,6 +2,7 @@ import { Components } from '@singularsystems/neo-core';
 export declare class ErrorHandler extends Components.ErrorHandler {
     private errorList;
     private hidingErrorList;
+    constructor(notifications: Components.INotificationHelper);
     protected displayError(displayType: Components.ErrorDisplayType, error: any, errorDisplay: Components.IErrorDisplay): void;
     protected displayModal(error: any, errorDisplay: Components.IErrorDisplay): void;
     private getIcon;

package/dist/ReactComponents/ErrorHandler.js

@@ -2,11 +2,12 @@ import { __decorate, __extends, __metadata } from "tslib";
 import React from 'react';
 import { Components, ModalUtils } from '@singularsystems/neo-core';
 import { Observer } from 'mobx-react';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 var ErrorGroup = /** @class */ (function () {
     function ErrorGroup(errorDisplay) {
         this.errorDisplay = errorDisplay;
         this.count = 1;
+        makeObservable(this);
     }
     __decorate([
         observable,
@@ -16,10 +17,11 @@ var ErrorGroup = /** @class */ (function () {
 }());
 var ErrorHandler = /** @class */ (function (_super) {
     __extends(ErrorHandler, _super);
-    function ErrorHandler() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ErrorHandler(notifications) {
+        var _this = _super.call(this, notifications) || this;
         _this.errorList = [];
         _this.hidingErrorList = null;
+        makeObservable(_this);
         return _this;
     }
     ErrorHandler.prototype.displayError = function (displayType, error, errorDisplay) {

package/dist/ReactComponents/FileManager/FileDropArea.d.ts

@@ -10,6 +10,7 @@ export default class FileDropArea extends React.Component<IFileDropAreaProps> {
     private fileManager;
     private isDragging;
     private dropDiv;
+    constructor(props: IFileDropAreaProps);
     private dragEnter;
     private dragLeave;
     private drop;

package/dist/ReactComponents/FileManager/FileDropArea.js

@@ -1,15 +1,16 @@
 import { __assign, __decorate, __extends, __metadata, __rest } from "tslib";
 import React from 'react';
 import { Utils } from '@singularsystems/neo-core';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FileContext } from './FileContext';
 var FileDropArea = /** @class */ (function (_super) {
     __extends(FileDropArea, _super);
-    function FileDropArea() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function FileDropArea(props) {
+        var _this = _super.call(this, props) || this;
         _this.isDragging = false;
         _this.dropDiv = React.createRef();
+        makeObservable(_this);
         return _this;
     }
     FileDropArea.prototype.dragEnter = function (e) {
@@ -57,7 +58,8 @@ var FileDropArea = /** @class */ (function (_super) {
         __metadata("design:type", Object)
     ], FileDropArea.prototype, "isDragging", void 0);
     FileDropArea = __decorate([
-        observer
+        observer,
+        __metadata("design:paramtypes", [Object])
     ], FileDropArea);
     return FileDropArea;
 }(React.Component));

package/dist/ReactComponents/FileManager/FileInput.d.ts

@@ -30,6 +30,7 @@ export default class FileInput extends ComponentBase<IFileEditorProps> {
     context: React.ContextType<typeof FileContext>;
     private fileManager;
     private gettingDownloadUrl;
+    constructor(props: IFileEditorProps);
     render(): JSX.Element;
     private getFileDisplayComponent;
     /** Renders when the file is busy uploading. */

package/dist/ReactComponents/FileManager/FileInput.js

@@ -7,15 +7,16 @@ import { FileContext } from './FileContext';
 import { ProgressBar, Button, FileDropArea } from '../_Exports';
 import ComponentBase from '../ComponentBase';
 import { BindPropsHelper } from '../PropTypes';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 /**
  * The file manager component manages uploading, and binding of files to a model.
  */
 var FileInput = /** @class */ (function (_super) {
     __extends(FileInput, _super);
-    function FileInput() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function FileInput(props) {
+        var _this = _super.call(this, props) || this;
         _this.gettingDownloadUrl = false;
+        makeObservable(_this);
         return _this;
     }
     FileInput.prototype.render = function () {
@@ -182,7 +183,8 @@ var FileInput = /** @class */ (function (_super) {
         __metadata("design:type", Boolean)
     ], FileInput.prototype, "gettingDownloadUrl", void 0);
     FileInput = __decorate([
-        observer
+        observer,
+        __metadata("design:paramtypes", [Object])
     ], FileInput);
     return FileInput;
 }(ComponentBase));

package/dist/ReactComponents/Form.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Components, Model } from '@singularsystems/neo-core';
-export interface IFormProps<T extends Model.IModelBase> extends React.FormHTMLAttributes<HTMLElement>, Components.IFormOptions<T> {
+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.
      */
     onInvalid?: (e: React.FormEvent, justValidated?: boolean) => void;
-    children: React.ReactNode;
+    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?;
@@ -16,3 +16,4 @@ export default class Form<T extends Model.IModelBase> extends React.Component<IF
     componentWillUnmount(): void;
     render(): JSX.Element;
 }
+export {};

package/dist/ReactComponents/FormContext.d.ts

@@ -24,7 +24,9 @@ export declare const FormContext: React.Context<FormContextParams>;
 /**
  * Allows the attributes of multiple child form controls to be set at a parent level.
  */
-export declare class FormContextProvider extends React.Component<Components.IFormContextOptions> {
+export declare class FormContextProvider extends React.Component<Components.IFormContextOptions & {
+    children: React.ReactNode;
+}> {
     static contextType: React.Context<FormContextParams>;
     context: React.ContextType<typeof FormContext>;
     render(): JSX.Element;

package/dist/ReactComponents/Grid/Column.js

@@ -186,9 +186,9 @@ var Column = /** @class */ (function (_super) {
             !containerProps.suppressDefaultContent && (editor !== undefined ?
                 editor :
                 editorProps.bind ? displayValue : undefined),
-            !containerProps.bindContext && (this.props.children instanceof Function ? this.props.children() : this.props.children),
+            !containerProps.bindContext && this.props.children,
             containerProps.bindContext &&
-                React.createElement(FormContext.Consumer, null, function (value) { return (React.createElement(FormContext.Provider, { value: __assign(__assign({}, value), { parentType: EditorParentType.Column, bindProperty: containerProps.bindContext }) }, _this.props.children instanceof Function ? _this.props.children() : _this.props.children)); })));
+                React.createElement(FormContext.Consumer, null, function (value) { return (React.createElement(FormContext.Provider, { value: __assign(__assign({}, value), { parentType: EditorParentType.Column, bindProperty: containerProps.bindContext }) }, _this.props.children)); })));
     };
     Column.prototype.renderFooter = function (props, domProps) {
         var _this = this;

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

@@ -17,7 +17,7 @@ export declare class GridContextParams<T> {
     get inBody(): boolean;
 }
 export declare const GridContext: React.Context<GridContextParams<unknown>>;
-interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
+interface IGridProps<T> extends Omit<React.HTMLProps<HTMLTableElement>, "children"> {
     /**
      * Datasource of the Grid. Usually a neo List, but can be a js array. This is not required if the grid is nested in
      * a DataViewProvider like a Pager or DataScroller
@@ -72,18 +72,15 @@ interface IGridProps<T> extends React.HTMLProps<HTMLTableElement> {
      * Set `showAddButton = false` if you don't want the default button.
      */
     footerButtons?: () => React.ReactNode;
-    children: any;
-}
-interface GridPropsWithChildren<T> extends IGridProps<T> {
     children: ItemCallback<T>;
 }
-export default class Grid<T> extends React.Component<GridPropsWithChildren<T>> {
+export default class Grid<T> extends React.Component<IGridProps<T>> {
     static contextType: React.Context<import("../../React/DataView").DataViewContextParams<unknown>>;
     context: React.ContextType<typeof DataViewContext>;
     private gridContext;
     private prevItems?;
     private headerItem;
-    constructor(props: GridPropsWithChildren<T>);
+    constructor(props: IGridProps<T>);
     render(): JSX.Element;
     private setInitialSort;
 }

package/dist/ReactComponents/Grid/Row.js

@@ -21,8 +21,9 @@ var Row = /** @class */ (function (_super) {
             this.context.doneStaticSetup = true;
             React.Children.forEach(this.props.children, function (child) {
                 if (child) {
-                    _this.context.columnCount += (child.props ? child.props.colSpan || 1 : 1);
-                    if (child.props && (child.props.sum || child.props.footerContent)) {
+                    var childProps = child.props;
+                    _this.context.columnCount += (childProps ? childProps.colSpan || 1 : 1);
+                    if (childProps && (childProps.sum || childProps.footerContent)) {
                         _this.context.hasSummaries = true;
                     }
                 }

package/dist/ReactComponents/Input.js

@@ -7,7 +7,7 @@ import { Misc, Utils } from '@singularsystems/neo-core';
 import ComponentBase from './ComponentBase';
 import { FormContext } from './FormContext';
 import { Button } from './_Exports';
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
@@ -15,6 +15,7 @@ var Input = /** @class */ (function (_super) {
         _this.domRef = React.createRef();
         _this.showPassword = false;
         _this.onChanged = _this.onChanged.bind(_this);
+        makeObservable(_this);
         return _this;
     }
     Input.prototype.determineType = function () {

package/dist/ReactComponents/InputHelpers.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ICommonEditorProps } from './PropTypes';
 export declare class InputHelpers {
-    static surroundWithInputGroup<T>(element: T, props: ICommonEditorProps): JSX.Element | T;
+    static surroundWithInputGroup<T extends React.ReactNode>(element: T, props: ICommonEditorProps): JSX.Element | T;
 }

package/dist/ReactComponents/Modal/ModalPortal.d.ts

@@ -4,6 +4,7 @@ export interface IModalPortalProps {
     show: boolean;
     onDismiss: (e: any) => void;
     options: IModalOptionsBase;
+    children: React.ReactNode;
 }
 export default class ModalPortal extends React.Component<IModalPortalProps> {
     private modalContainer;

package/dist/ReactComponents/Paging/Pager.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 import { Data, Model, ValueObject } from '@singularsystems/neo-core';
 import { IPagerControlsProps } from './BasicPagerControls';
 import { DataViewContextParams } from '../../React/DataView';
-export interface IPagerBaseProps<TCriteria extends ValueObject, TModel extends Model.IBindableBase> extends React.HTMLProps<HTMLDivElement> {
+export interface IPagerBaseProps<TCriteria extends ValueObject, TModel extends Model.IBindableBase> extends Omit<React.HTMLProps<HTMLDivElement>, "children"> {
     /** Page manager which controls this component. */
     pageManager: Data.PageManager<TCriteria, TModel>;
     /** Child can either be a component which works with a dataview (like Neo.Grid), or a callback which will be passed the items of the current page. */
-    children: React.ReactNode;
+    children: React.ReactNode | ((items: TModel[]) => React.ReactNode);
     /** Where to put the page controls? */
     pageControls?: "none" | "top" | "bottom" | "topAndBottom";
     /** True if the built in loader component should be hidden. */

package/dist/ReactComponents/Tooltip.d.ts

@@ -5,6 +5,7 @@ export interface ITooltipProps extends Components.Tooltip.ITooltipOptions<string
      * True if the div wrapping the content must display inline.
      */
     inline?: boolean;
+    children: React.ReactNode;
 }
 export default class Tooltip extends React.Component<ITooltipProps> {
     private divRef;

package/dist/Routing/PageLeaveHandler.js

@@ -1,6 +1,5 @@
 import { __awaiter, __decorate, __generator, __metadata, __param } from "tslib";
 import { Routing, ModalUtils, Misc, AppServices } from '@singularsystems/neo-core';
-import ViewBase from '../Views/ViewBase';
 import { inject, injectable } from 'inversify';
 import { NeoReactTypes } from '../Modules/Types';
 import { RoutingState } from './RoutingState';
@@ -13,10 +12,12 @@ var PageLeaveHandler = /** @class */ (function () {
      */
     PageLeaveHandler.showNavigationConfirmation = function (prompt, callback) {
         return __awaiter(this, void 0, void 0, function () {
-            var result;
+            var pageLeaveHandler, routingState, result;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, Misc.Globals.appService.get(AppServices.NeoTypes.Routing.PageLeaveHandler).onLeavePage(ViewBase.currentView, prompt, Routing.NavigateLocation.Internal)];
+                    case 0:
+                        pageLeaveHandler = Misc.Globals.appService.get(AppServices.NeoTypes.Routing.PageLeaveHandler), routingState = Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState);
+                        return [4 /*yield*/, pageLeaveHandler.onLeavePage(routingState.currentView, prompt, Routing.NavigateLocation.Internal)];
                     case 1:
                         result = _a.sent();
                         callback(result);

package/dist/Routing/RouteView.js

@@ -2,7 +2,6 @@ import { __extends } from "tslib";
 import * as React from 'react';
 import { matchPath } from 'react-router';
 import { AppServices, Misc } from '@singularsystems/neo-core';
-import ViewBase from '../Views/ViewBase';
 import { NeoReactTypes } from '../Modules/Types';
 import { Observer } from 'mobx-react';
 var RouteView = /** @class */ (function (_super) {
@@ -49,14 +48,14 @@ var RouteView = /** @class */ (function (_super) {
         var changeProps = {
             isNewView: !currentRoute || !match || match.route !== currentRoute,
             isUnload: isUnload !== null && isUnload !== void 0 ? isUnload : false,
-            currentView: (_a = ViewBase.currentView) !== null && _a !== void 0 ? _a : undefined,
+            currentView: (_a = this.routingState.currentView) !== null && _a !== void 0 ? _a : undefined,
             newRoute: match === null || match === void 0 ? void 0 : match.route,
             match: match === null || match === void 0 ? void 0 : match.match
         };
-        if (ViewBase.currentView) {
-            ViewBase.currentView.beforeRouteChanged(changeProps);
+        if (this.routingState.currentView) {
+            this.routingState.currentView.beforeRouteChanged(changeProps);
             if (changeProps.leavePrompt === undefined && (changeProps.isNewView || changeProps.isUnload)) {
-                changeProps.leavePrompt = ViewBase.currentView.onLeave();
+                changeProps.leavePrompt = this.routingState.currentView.onLeave();
             }
         }
         this.beforeRouteChanged(changeProps);

package/dist/Routing/RoutingState.d.ts

@@ -1,5 +1,6 @@
 import { Misc } from '@singularsystems/neo-core';
 import { RouteComponentProps } from 'react-router-dom';
+import { IViewBase } from '../Views/ViewBase';
 import RouteProvider, { IProcessedRoute } from './RouteProvider';
 import RouteView from './RouteView';
 export declare class RoutingState {
@@ -9,6 +10,8 @@ export declare class RoutingState {
     currentRouteView?: RouteView;
     leavePromise?: Promise<boolean> | Promise<Misc.ModalResult> | Promise<void>;
     observableRoute: IProcessedRoute | null;
+    currentView: IViewBase | null;
+    constructor();
     setCurrentRoute(routeProps: RouteComponentProps, route: IProcessedRoute): void;
     private previousRoute?;
     onRouteChanged(): void;

package/dist/Routing/RoutingState.js

@@ -1,10 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import { injectable } from 'inversify';
-import { observable } from 'mobx';
-import { ViewBase } from '../Views';
+import { makeObservable, observable } from 'mobx';
 var RoutingState = /** @class */ (function () {
     function RoutingState() {
         this.observableRoute = null;
+        this.currentView = null;
+        makeObservable(this);
     }
     RoutingState.prototype.setCurrentRoute = function (routeProps, route) {
         this.currentRouteProps = routeProps;
@@ -15,16 +16,16 @@ var RoutingState = /** @class */ (function () {
         if (this.previousRoute !== this.currentRoute) {
             this.previousRoute = this.currentRoute;
             this.observableRoute = (_a = this.currentRoute) !== null && _a !== void 0 ? _a : null;
-            if (((_b = ViewBase.currentView) === null || _b === void 0 ? void 0 : _b.constructor) !== this.currentRoute.component) {
-                ViewBase.currentView = null;
+            if (((_b = this.currentView) === null || _b === void 0 ? void 0 : _b.constructor) !== this.currentRoute.component) {
+                this.currentView = null;
             }
             // Scroll back to top as if the browser had actually loaded a new page.
             window.scrollTo(0, 0);
         }
         else {
             // Same route, but parameters must have changed.
-            if (ViewBase.currentView) {
-                ViewBase.currentView.updateViewParams(this.currentRouteProps.match);
+            if (this.currentView) {
+                this.currentView.updateViewParams(this.currentRouteProps.match);
             }
         }
     };
@@ -32,8 +33,13 @@ var RoutingState = /** @class */ (function () {
         observable.ref,
         __metadata("design:type", Object)
     ], RoutingState.prototype, "observableRoute", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Object)
+    ], RoutingState.prototype, "currentView", void 0);
     RoutingState = __decorate([
-        injectable()
+        injectable(),
+        __metadata("design:paramtypes", [])
     ], RoutingState);
     return RoutingState;
 }());

package/dist/Routing/ViewParameter.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 var ViewParameter = /** @class */ (function () {
     function ViewParameter(parent, name, routeParameter) {
         this.parent = parent;
@@ -9,6 +9,7 @@ var ViewParameter = /** @class */ (function () {
         this.pendingValue = null;
         this._value = null;
         this.description = "";
+        makeObservable(this);
     }
     ViewParameter.prototype.bindTo = function (propertyOrCallback) {
         var _this = this;

package/dist/Views/ViewBase.d.ts

@@ -21,9 +21,8 @@ export interface IViewBaseConstructor {
     params?: RouteParameterObject<any>;
 }
 export default abstract class ViewBase<TViewModel extends IViewModel = EmptyViewModel, TParams extends RouteParameterObject<TParams> = {}> extends React.Component implements IViewBase {
-    /** Represents the view that is currently being displayed */
-    static currentView: IViewBase | null;
     viewName: string;
+    static get currentView(): IViewBase | null;
     private routingState;
     navigation: import("../Routing").INavigationHelper;
     private breadCrumbStartItems?;

package/dist/Views/ViewBase.js

@@ -25,9 +25,17 @@ var ViewBase = /** @class */ (function (_super) {
         }
         _this.viewName = viewName;
         _this.viewState = _this.getStoredViewState(viewModel);
-        ViewBase.currentView = _this;
+        _this.routingState.currentView = _this;
         return _this;
     }
+    Object.defineProperty(ViewBase, "currentView", {
+        // For backwards compatibility
+        get: function () {
+            return Misc.Globals.appService.get(NeoReactTypes.Routing.GlobalRoutingState).currentView;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ViewBase.prototype, "viewModel", {
         get: function () {
             return this.viewState.viewModel;
@@ -138,16 +146,10 @@ var ViewBase = /** @class */ (function (_super) {
      */
     ViewBase.prototype.beforeRouteChanged = function (props) {
     };
-    /** Represents the view that is currently being displayed */
-    ViewBase.currentView = null;
     __decorate([
         observable.ref,
         __metadata("design:type", String)
     ], ViewBase.prototype, "viewName", void 0);
-    __decorate([
-        observable.ref,
-        __metadata("design:type", Object)
-    ], ViewBase, "currentView", void 0);
     return ViewBase;
 }(React.Component));
 export default ViewBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@singularsystems/neo-react",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "React application logic and components for the Neo client library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,11 +20,11 @@
     "@types/jest": "^28.1.1",
     "@types/memoize-one": "5.1.2",
     "@types/node": "17.0.15",
-    "@types/react": "17.0.39",
+    "@types/react": "18.0.15",
     "@types/react-custom-scrollbars": "^4.0.6",
-    "@types/react-dom": "17.0.11",
-    "@types/react-router": "^5.1.17",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/react-dom": "18.0.6",
+    "@types/react-router": "5.1.18",
+    "@types/react-router-dom": "5.3.3",
     "jest": "28.1.1",
     "react-scripts": "5.0.1",
     "ts-jest": "28.0.4",
@@ -34,7 +34,6 @@
     "@singularsystems/neo-core": "^1.0.0-alpha.2",
     "@types/rc-slider": "^8.6.5",
     "@types/react-color": "^3.0.1",
-    "@types/react-select": "3.1.0",
     "axios": "^0.27.2",
     "decimal.js-light": "^2.5.1",
     "history": "4.10.1",
@@ -42,19 +41,22 @@
     "memoize-one": "6.0.0",
     "mobx": "6.6.1",
     "mobx-react": "7.5.2",
-    "react": "^17.0.2",
+    "react": "18.2.0",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^17.0.2",
-    "react-router": "^5.2.1",
-    "react-router-dom": "^5.3.0",
+    "react-dom": "18.2.0",
+    "react-router": "5.3.3",
+    "react-router-dom": "5.3.3",
+    "react-select": "5.4.0",
     "tslib": "2.3.1"
   },
   "peerDependencies": {
     "@singularsystems/neo-core": ">=1.0.0",
     "axios": ">=0.21.1",
     "inversify": ">=5.0.1",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
+    "mobx": ">=6.6.1",
+    "mobx-react": ">=7.5.2",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0"
   },