@singularsystems/neo-react 1.0.0-beta.7 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,138 @@
+# Version 1.x
+
+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.
+
+## Testing
+
+In addition to requiring code / syntax changes, both React 18, and Mobx 6 behave differently enough to their previous versions that runtime bugs may be introduced into your project. You should only update to this version when you and the client have enough time to test the project thoroughly. If you find any issues, please report them so this document can be updated.
+
+The project changes required are detailed below:
+
+## Package changes:
+
+* Update all neo packages to the latest 1.x version.
+* Update the following packages to the latest version (these were the latest at time of writing):
+    * dependencies
+        * `"axios": "1.6.7"`,
+        * `"decimal.js-light": "2.5.1"`, - See below for alternative
+        * `"mobx": "6.11.0"`,
+        * `"mobx-react": "7.6.0"`,
+        * `"react": "18.2.0"`,
+        * `"react-dom": "18.2.0"`,
+        * `"react-router": "5.2.1"`, - Must be version 5.x
+        * `"react-router-dom": "5.3.0"`, - Must be version 5.x
+        * `"react-select": "5.7.3"`,
+        
+    * devDependencies
+        * `"@types/react": "18.2.37"`,
+        * `"@types/react-dom": "18.2.15"`,
+        * `"@types/react-router": "5.1.17"`, - Must be version 5.x
+        * `"@types/react-router-dom": "5.3.3"`, - Must be version 5.x
+    * resolutions
+        * remove all entries
+* delete yarn.lock, and run `yarn install`
+
+## Fix errors
+
+If any of your components allow children, React 18 requires to you have an explicit `children` prop. Add this to the props definition of the component:
+
+```typescript
+interface MyProps {
+    ...
+    children: React.ReactNode;
+}
+
+// or if the component has no other props:
+
+MyComponent extends React.Component<{ children: React.ReactNode }> {
+    ...
+}
+```
+
+The React root api has also changed in version 18. Make the following changes to your `index.tsx` file:
+
+Your existing code will look something like this:
+
+```typescript
+import ReactDOM from 'react-dom';
+...
+// React init
+ReactDOM.render(
+    renderComponent,
+    document.getElementById('root') as HTMLElement
+);
+```
+
+Change the `ReactDOM` import, and the react init code:
+
+```typescript
+import ReactDOM from 'react-dom/client';
+...
+// React init
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(renderComponent);
+```
+
+## Mobx
+
+Before mobx 6, you could mark a property as being observable by adding an `@observable` decorator to the property. In mobx 6 this no longer works ([read more](https://mobx.js.org/migrating-from-4-or-5.html)). 
+
+For any class that extends `ModelBase`, `ValueObject`, `ViewModelBase` etc, this change is handled by neo, and you will not need to change any code.
+
+For other classes, you will need to add initialisation code to the constructor.
+
+* Search for `@observable` in your project. (In most projects this will be in the Sidebar and AppLayout components)
+* In the constructor of the class that contains the property, add:
+
+```typescript
+makeObservable(this);
+```
+
+### Decorators on neo models
+
+If you try use mobx decorators on any models that extend `ModelBase`, `ValueObject` or `ViewModelBase`, you will receive this error:
+
+> [MobX] makeObservable second arg must be nullish when using decorators. Mixing @decorator syntax with annotations is not supported.
+
+This is most likely because you have used an `@action` decorator on a method. Neo now marks all methods as actions, so you can remove the `@action` decorator.
+
+* Search for `@action` in your project. Remove the decorator **only** if the class extends `ModelBase` (and its decendents e.g. `ValueObject`) or `ViewModelBase`.
+
+### Array sorting
+
+Mobx no longer allows you to call `sort` on an observable array. You first need to call `slice` to create a copy of the array. This change has been made in the neo `sortBy` method, but will cause unexpected behaviour if you relied on the list being sorted in-place, as this no longer happens.
+
+* Search for `.sort` in your project. Change to use the neo `sortBy` method.
+* Search for `.sortBy`. Ensure you use the array returned by this method, and not the array passed in.
+
+### Viewmodels
+
+You may receive errors such as:
+
+```
+Argument of type 'typeof MyVM' is not assignable to parameter of type 'VMConstructor<MyVM>'.
+```
+
+The `registerViewModel` method on the `ViewModelBase` class now requires the view model passed to it to have a `taskRunner` as the first argument. This task runner instance must be passed to the base constructor.
+
+## Decimals
+
+Neo no longer includes the `decimal.js-light` package by default. This is to allow for other decimal packages to be used. You will now need to manually register a decimal service in your app module.
+
+The easiest would be to continue using `decimal.js-light`:
+
+* Ensure your project references `decimal.js-light` directly.
+* In your main app module, add the following code:
+```typescript
+import Decimal from "decimal.js-light";
+...
+container.bind(Types.Neo.Core.DecimalService).toConstantValue(new Numeric.DecimalService(Decimal, Decimal.ROUND_HALF_UP, Decimal.ROUND_DOWN));
+```
+
+An alternative is to use `big.js`. This package is slightly smaller than the above, but has less features.
+
+```typescript
+import Big from "big.js";
+...
+container.bind(Types.Neo.Core.DecimalService).toConstantValue(new Numeric.DecimalService(Big, Big.roundHalfUp, Big.roundDown))
+```

package/dist/Modules/Types.d.ts

@@ -3,6 +3,7 @@ import { INavigationHelper } from '../Routing/NavigationHelper';
 import { RoutingState } from '../Routing/RoutingState';
 import Slider, { Range } from 'rc-slider';
 import { SketchPicker } from 'react-color';
+import { IColorPicker } from '../ReactComponents/IColorPicker';
 import AsyncSelect from 'react-select/async';
 import { AxiosStatic } from 'axios';
 import Select from 'react-select';
@@ -12,7 +13,15 @@ declare const NeoReactTypes: {
     Components: {
         Slider: AppServices.ServiceIdentifier<typeof Slider>;
         Range: AppServices.ServiceIdentifier<typeof Range>;
+        /**
+         * Sketchpicker (from 'react-color' package) component used by the color picker.
+         * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.
+         */
         SketchPicker: AppServices.ServiceIdentifier<typeof SketchPicker>;
+        /**
+         * Returns a component that renders a color picker that accepts a color input, and onChange event handler.
+         */
+        ColorPicker: AppServices.ServiceIdentifier<IColorPicker>;
         ReactSelect: AppServices.ServiceIdentifier<Select>;
         AsyncSelect: AppServices.ServiceIdentifier<AsyncSelect>;
         IconFactory: AppServices.ServiceIdentifier<IIconFactory>;
@@ -41,6 +50,10 @@ declare const NeoReactTypes: {
     Localisation: {
         LocalisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Localisation").ILocalisationService>;
     };
+    Messaging: {
+        ConnectionManager: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/ConnectionManager").IConnectionManager>;
+        ServerMessageSubscriber: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/SignalR").IServerMessageSubscriber>;
+    };
     Security: {
         AuthenticationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthenticationService>;
         AuthorisationService: AppServices.ServiceIdentifier<import("@singularsystems/neo-core/dist/Security").IAuthorisationService>;

package/dist/Modules/Types.js

@@ -3,7 +3,15 @@ import { AppServices } from '@singularsystems/neo-core';
 var NeoReactTypes = __assign(__assign({}, AppServices.NeoTypes), { Components: {
         Slider: new AppServices.ServiceIdentifier("NeoReact.Slider"),
         Range: new AppServices.ServiceIdentifier("NeoReact.Range"),
+        /**
+         * Sketchpicker (from 'react-color' package) component used by the color picker.
+         * It is recommended to use the `ColorPicker` type and bind to HexColorPicker from the 'react-colorful' package.
+         */
         SketchPicker: new AppServices.ServiceIdentifier("NeoReact.SketchPicker"),
+        /**
+         * Returns a component that renders a color picker that accepts a color input, and onChange event handler.
+         */
+        ColorPicker: new AppServices.ServiceIdentifier("NeoReact.ColorPicker"),
         ReactSelect: new AppServices.ServiceIdentifier("NeoReact.ReactSelect"),
         AsyncSelect: new AppServices.ServiceIdentifier("NeoReact.AsyncSelect"),
         IconFactory: new AppServices.ServiceIdentifier("NeoReact.IconFactory")

package/dist/React/AutoRunner.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { Misc, DebounceHelper } from '@singularsystems/neo-core';
 import { reaction } from 'mobx';
 import { injectable } from 'inversify';
-export var AutoRunnerFactory = /** @class */ (function () {
+var AutoRunnerFactory = /** @class */ (function () {
     function AutoRunnerFactory() {
     }
     AutoRunnerFactory.prototype.create = function (model, callback, options) {
@@ -13,6 +13,7 @@ export var AutoRunnerFactory = /** @class */ (function () {
     ], AutoRunnerFactory);
     return AutoRunnerFactory;
 }());
+export { AutoRunnerFactory };
 var AutoRunner = /** @class */ (function () {
     function AutoRunner(model, callback, options) {
         var _this = this;
@@ -82,15 +83,18 @@ var AutoRunner = /** @class */ (function () {
                             this.propertyMap[key] = useDelay;
                         }
                         if (useDelay === delayed) {
+                            //@ts-ignore
                             void instance[propertyInfo.propertyName];
                         }
                     }
                     else if (propertyInfo.relationType === Misc.RelationType.ValueObject ||
                         (propertyInfo.relationType === Misc.RelationType.ChildObject && this.options.includeChildObjects)) {
+                        //@ts-ignore
                         this.accessAllValues(instance[propertyInfo.propertyName], delayed, trackedInstances, path + propertyInfo.propertyName + ".");
                     }
                     else if (propertyInfo.relationType === Misc.RelationType.ChildList && this.options.includeChildLists) {
                         var index = 0;
+                        //@ts-ignore
                         for (var _c = 0, _d = instance[propertyInfo.propertyName]; _c < _d.length; _c++) {
                             var child = _d[_c];
                             this.accessAllValues(child, delayed, trackedInstances, "".concat(path).concat(propertyInfo.propertyName, "[").concat(index++, "]."));

package/dist/ReactComponents/Card.d.ts

@@ -19,6 +19,6 @@ interface ICardProps {
 export default class Card extends React.Component<ICardProps & React.HTMLProps<HTMLDivElement>> {
     private iconFactory;
     private expandState;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/ReactComponents/Collapsable.d.ts

@@ -16,7 +16,7 @@ interface ICollapsableProps extends React.HTMLProps<HTMLDivElement> {
 export default class Collapsable extends ComponentBase<ICollapsableProps> {
     protected containerRef: React.RefObject<HTMLDivElement>;
     protected animationHelper?: Components.CollapseAnimationHelper;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     afterRender(isInitial: boolean): void;
     componentWillUnmount(): void;
 }

package/dist/ReactComponents/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorResult, SketchPickerProps } from 'react-color';
+import { SketchPickerProps } from 'react-color';
 import { Model } from '@singularsystems/neo-core';
 interface IColorPickerProps extends SketchPickerProps {
     bind: Model.IPropertyInstance;
@@ -14,13 +14,15 @@ export default class ColorPicker extends React.Component<IColorPickerProps, ICol
         visible: boolean;
         selectedColor: any;
     };
-    private sketchPickerImplementation;
+    constructor(props: IColorPickerProps);
     componentWillReceiveProps(nextProps: IColorPickerProps): void;
     componentDidMount(): void;
-    handleChange: (color: ColorResult) => void;
+    handleChange: (color: string) => void;
     visibleToggle: () => void;
     cancel: () => void;
     accept: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
+    /** Renders the inner color picker components without the modal */
+    static render(color: string, onChange: (value: string) => void): JSX.Element;
 }
 export {};

package/dist/ReactComponents/ColorPicker.js

@@ -1,20 +1,19 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate, __extends, __metadata } from "tslib";
 import React from 'react';
 import { observer } from 'mobx-react';
 import { NeoReactTypes } from '../Modules/Types';
 import { Misc } from '@singularsystems/neo-core';
 var ColorPicker = /** @class */ (function (_super) {
     __extends(ColorPicker, _super);
-    function ColorPicker() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function ColorPicker(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
             visible: false,
             selectedColor: _this.props.bind.value
         };
-        _this.sketchPickerImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.SketchPicker);
         _this.handleChange = function (color) {
             // Set the color value
-            _this.setState({ selectedColor: color.hex });
+            _this.setState({ selectedColor: color });
         };
         _this.visibleToggle = function () {
             _this.setState({ visible: !_this.state.visible });
@@ -32,8 +31,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 _this.props.onChangeEvent();
             }
         };
+        _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
+    ColorPicker_1 = ColorPicker;
     ColorPicker.prototype.componentWillReceiveProps = function (nextProps) {
         if (nextProps.bind.value !== this.state.selectedColor) {
             // Update the state selectedColor if the color that was in the bind was changed
@@ -54,13 +55,27 @@ var ColorPicker = /** @class */ (function (_super) {
                         React.createElement("div", { className: "overlay-area", onClick: function () { return _this.cancel(); } }),
                         React.createElement("div", { className: "picker-container" },
                             React.createElement("div", { className: "picker-block" },
-                                React.createElement(this.sketchPickerImplementation, { color: this.state.selectedColor, onChange: this.handleChange }),
+                                ColorPicker_1.render(this.state.selectedColor, this.handleChange),
                                 React.createElement("div", { className: "action-container" },
                                     React.createElement("div", { className: "btn btn-primary btn-sm", onClick: function () { return _this.accept(); } }, "Accept"),
-                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1 mr-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
+                                    React.createElement("div", { className: "btn btn-secondary btn-sm ml-1", onClick: function () { return _this.cancel(); } }, "Cancel"))))))));
     };
-    ColorPicker = __decorate([
-        observer
+    /** Renders the inner color picker components without the modal */
+    ColorPicker.render = function (color, onChange) {
+        var sketchPicker = Misc.Globals.appService.tryGet(NeoReactTypes.Components.SketchPicker);
+        if (sketchPicker) {
+            return React.createElement(sketchPicker, { color: color, onChange: function (c) { return onChange(c.hex); } });
+        }
+        var colorPicker = Misc.Globals.appService.tryGet(NeoReactTypes.Components.ColorPicker);
+        if (colorPicker) {
+            return React.createElement(colorPicker, { color: color, onChange: onChange });
+        }
+        return React.createElement("input", { type: "color", value: color, onInput: function (e) { return onChange(e.target.value); } });
+    };
+    var ColorPicker_1;
+    ColorPicker = ColorPicker_1 = __decorate([
+        observer,
+        __metadata("design:paramtypes", [Object])
     ], ColorPicker);
     return ColorPicker;
 }(React.Component));

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

@@ -21,5 +21,5 @@ export default class ContextMenu extends ComponentBase<IContextMenuProps> {
     private hoverItem;
     mouseEnter(e: React.MouseEvent<HTMLDivElement>, item: Components.IMenuItem): void;
     afterRender(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -10,5 +10,5 @@ export default class ContextMenuContainer extends React.Component {
     componentWillUnmount(): void;
     onDocumentClick(e: MouseEvent): void;
     onMenuItemClick(): void;
-    render(): JSX.Element | null;
+    render(): React.JSX.Element | null;
 }

package/dist/ReactComponents/ContextMenu/ContextMenuState.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { makeObservable, observable } from "mobx";
-export var ContextMenuState = /** @class */ (function () {
+var ContextMenuState = /** @class */ (function () {
     function ContextMenuState() {
         this.show = false;
         this.items = [];
@@ -21,3 +21,4 @@ export var ContextMenuState = /** @class */ (function () {
     ], ContextMenuState.prototype, "position", void 0);
     return ContextMenuState;
 }());
+export { ContextMenuState };

package/dist/ReactComponents/DatePicker.d.ts

@@ -16,5 +16,5 @@ export default class DatePicker extends ComponentBase<INeoDatePickerProps> {
     constructor(props: INeoDatePickerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -92,7 +92,7 @@ export default class AutoCompleteDropDown<T> extends DropDownBase<T, IAutoComple
     private onKeyPress;
     private mapTArrayToOptions;
     private onItemSelected;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     private getOption;
 }
 export {};

package/dist/ReactComponents/DropDown/AutoCompleteDropDown.js

@@ -11,9 +11,8 @@ import { NeoReactTypes } from '../../Modules/Types';
 var AutoCompleteDropDown = /** @class */ (function (_super) {
     __extends(AutoCompleteDropDown, _super);
     function AutoCompleteDropDown(props) {
-        var _this = this;
         var _a;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.asyncSelectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.AsyncSelect);
         _this.selectImplementation = Misc.Globals.appService.get(NeoReactTypes.Components.ReactSelect);
         _this.onKeyPress = _this.onKeyPress.bind(_this);

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

@@ -43,5 +43,5 @@ export default class DropDown<T> extends DropDownBase<T, IDropDownProps<T>> {
     private createLookupIndex;
     private getSelectedOption;
     private onItemSelected;
-    render(): JSX.Element;
+    render(): React.JSX.Element | JSX.Element;
 }

package/dist/ReactComponents/DropDown/DropDown.js

@@ -36,9 +36,11 @@ var DropDown = /** @class */ (function (_super) {
     });
     DropDown.prototype.createLookupIndex = function (list) {
         var _this = this;
-        list[this.listIndexSymbol] = {};
-        var index = list[this.listIndexSymbol];
+        var index = {};
+        //@ts-ignore
+        list[this.listIndexSymbol] = index;
         list.forEach(function (item) { return index[item[_this.valueMember]] = item; });
+        return index;
     };
     DropDown.prototype.getSelectedOption = function (value) {
         if (!this.sortByValue) {
@@ -46,16 +48,18 @@ var DropDown = /** @class */ (function (_super) {
         }
         if (!this.selectedItem || this.selectedItem[this.valueMember] != value) {
             var list = this.items;
+            //@ts-ignore
+            var index = list[this.listIndexSymbol];
             var indexJustCreated = false;
-            if (!list[this.listIndexSymbol]) {
-                this.createLookupIndex(list);
+            if (!index) {
+                index = this.createLookupIndex(list);
                 indexJustCreated = true;
             }
-            this.selectedItem = list[this.listIndexSymbol][value];
+            this.selectedItem = index[value];
             if (value && !this.selectedItem && !indexJustCreated) {
                 // Index may be out of date.
-                this.createLookupIndex(list);
-                this.selectedItem = list[this.listIndexSymbol][value];
+                index = this.createLookupIndex(list);
+                this.selectedItem = index[value];
             }
             if (!this.selectedItem) {
                 // create default item.

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

@@ -2,8 +2,8 @@ import { Data, Model } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 export type ItemSource<T> = T[] | Promise<T[]> | Data.IAsyncDataSource<T[]> | Data.IArrayCacheEntry<T>;
 export declare abstract class DropDownBase<T, TProps> extends ComponentBase<TProps> {
-    protected valueMember: string;
-    protected displayMember: string;
+    protected valueMember: keyof T;
+    protected displayMember: keyof T;
     protected findMembers(item: any): void;
     protected isLoading: boolean;
     protected dataSource: Data.IAsyncDataSource<T[]> | null;

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

@@ -1,6 +1,6 @@
-export interface ILookupMembers {
-    valueMember: string;
-    displayMember: string;
+export interface ILookupMembers<T> {
+    valueMember: keyof T;
+    displayMember: keyof T;
 }
 export default class LookupHelper {
     /**
@@ -9,5 +9,5 @@ export default class LookupHelper {
      * @param item An object instance
      * @param booleanValuesAllowed True if boolean values are allowed in the value member.
      */
-    static findMembers(item: any, valueMember: string, displayMember: string, booleanValuesAllowed?: boolean): ILookupMembers;
+    static findMembers<T>(item: any, valueMember: keyof T, displayMember: keyof T, booleanValuesAllowed?: boolean): ILookupMembers<T>;
 }

package/dist/ReactComponents/ErrorHandler.js

@@ -15,7 +15,7 @@ var ErrorGroup = /** @class */ (function () {
     ], ErrorGroup.prototype, "count", void 0);
     return ErrorGroup;
 }());
-export var ErrorHandler = /** @class */ (function (_super) {
+var ErrorHandler = /** @class */ (function (_super) {
     __extends(ErrorHandler, _super);
     function ErrorHandler(notifications) {
         var _this = _super.call(this, notifications) || this;
@@ -90,3 +90,4 @@ export var ErrorHandler = /** @class */ (function (_super) {
     ], ErrorHandler.prototype, "hidingErrorList", void 0);
     return ErrorHandler;
 }(Components.ErrorHandler));
+export { ErrorHandler };

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

@@ -15,6 +15,6 @@ export default class FileBasicInput extends React.Component<IFileInputProps> {
     private fileManager;
     constructor(props: IFileInputProps);
     private onFileSelected;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/ReactComponents/FileManager/FileBasicInput.js

@@ -14,9 +14,9 @@ var FileBasicInput = /** @class */ (function (_super) {
         return _this;
     }
     FileBasicInput.prototype.onFileSelected = function (e) {
-        var _a, _b;
         return __awaiter(this, void 0, void 0, function () {
             var input;
+            var _a, _b;
             return __generator(this, function (_c) {
                 switch (_c.label) {
                     case 0:
@@ -55,6 +55,7 @@ var FileBasicInput = /** @class */ (function (_super) {
         }
         var bindProperty = this.fileManager.options.bind;
         if (bindProperty) {
+            // @ts-ignore
             native[BindPropsHelper.DataFieldName] = bindProperty.propertyInfo.propertyName;
         }
         var fileManagerProps = this.fileManager.getFileInputProps();

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

@@ -12,5 +12,5 @@ export interface IFileContextProps {
 }
 export declare const FileContext: React.Context<IFileContextProps>;
 export default class FileContextProvider extends React.Component<IFileComponentProps & (Partial<Components.IFileManagerOptions> | Partial<Components.IBoundFileManagerOptions>)> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -14,6 +14,6 @@ export default class FileDropArea extends React.Component<IFileDropAreaProps> {
     private dragEnter;
     private dragLeave;
     private drop;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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

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

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

@@ -12,6 +12,6 @@ export default class FileUploadButton extends React.Component<IFileUploadButtonP
     private fileInputRef;
     constructor(props: IFileUploadButtonProps & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>);
     private browseButtonClicked;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

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

@@ -10,5 +10,5 @@ export default class FileUploadProgress extends React.Component<IFileUploadProps
     static contextType: React.Context<import("./FileContext").IFileContextProps>;
     context: React.ContextType<typeof FileContext>;
     private fileManager;
-    render(): false | JSX.Element;
+    render(): false | React.JSX.Element;
 }

package/dist/ReactComponents/Form.d.ts

@@ -14,6 +14,6 @@ export default class Form<T extends Model.IModelBase> extends React.Component<IF
     private onSubmit;
     private disposeReaction;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/ReactComponents/FormContext.d.ts

@@ -29,5 +29,5 @@ export declare class FormContextProvider extends React.Component<Components.IFor
 }> {
     static contextType: React.Context<FormContextParams>;
     context: React.ContextType<typeof FormContext>;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/ReactComponents/FormContext.js

@@ -24,7 +24,7 @@ export var FormContext = React.createContext(new FormContextParams());
 /**
  * Allows the attributes of multiple child form controls to be set at a parent level.
  */
-export var FormContextProvider = /** @class */ (function (_super) {
+var FormContextProvider = /** @class */ (function (_super) {
     __extends(FormContextProvider, _super);
     function FormContextProvider() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -37,3 +37,4 @@ export var FormContextProvider = /** @class */ (function (_super) {
     FormContextProvider.contextType = FormContext;
     return FormContextProvider;
 }(React.Component));
+export { FormContextProvider };

package/dist/ReactComponents/FormGroup/FormGroup.d.ts

@@ -31,7 +31,7 @@ export declare class FormGroupBase<T extends IFormGroupProps<TData>, TData> exte
     context: React.ContextType<typeof FormContext>;
     protected getFormGroupClasses(domProps: React.HTMLProps<HTMLDivElement>, isCheckBox: boolean): IFormGroupClasses;
     protected hideLabelForCheckboxes(): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default class FormGroup<TData> extends FormGroupBase<IFormGroupProps<TData>, TData> {
 }

package/dist/ReactComponents/FormGroup/FormGroup.js

@@ -5,7 +5,7 @@ import { BindPropsHelper, CheckboxType } from '../PropTypes';
 import { Validation, Utils } from '@singularsystems/neo-core';
 import ComponentBase from '../ComponentBase';
 import { EditorParentType, FormContext } from '../FormContext';
-export var FormGroupBase = /** @class */ (function (_super) {
+var FormGroupBase = /** @class */ (function (_super) {
     __extends(FormGroupBase, _super);
     function FormGroupBase() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -70,6 +70,7 @@ export var FormGroupBase = /** @class */ (function (_super) {
     FormGroupBase.contextType = FormContext;
     return FormGroupBase;
 }(ComponentBase));
+export { FormGroupBase };
 var FormGroup = /** @class */ (function (_super) {
     __extends(FormGroup, _super);
     function FormGroup() {

package/dist/ReactComponents/FormGroup/FormGroupFloating.d.ts

@@ -15,5 +15,5 @@ export default class FloatingFormGroup<TData> extends ComponentBase<IEditorConta
     private onFocus;
     private onBlur;
     private labelClick;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/ReactComponents/FormGroup/FormGroupInline.d.ts

@@ -6,6 +6,6 @@ export default class FormGroupInline<TData> extends FormGroupBase<IInlineFormGro
     private contextProps?;
     protected hideLabelForCheckboxes(): boolean;
     protected getFormGroupClasses(domProps: React.HTMLProps<HTMLDivElement>, isCheckBox: boolean): IFormGroupClasses;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};