@try-at-software/input-elements 1.2.0-aplha.4 → 1.2.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Try at software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/ChangingInputElement.d.ts

@@ -0,0 +1,16 @@
+import { IChangingInputElement } from './IChangingInputElement';
+import { UpdateCallback } from './IInputElement';
+import { InputElement } from './InputElement';
+export declare abstract class ChangingInputElement<TValue> extends InputElement implements IChangingInputElement<TValue> {
+    protected initialValue: TValue;
+    protected _valueIsSet: boolean;
+    protected _initialValueIsSet: boolean;
+    protected constructor(update: UpdateCallback);
+    /** @inheritdoc */
+    setInitialValue(value: TValue): void;
+    /** @inheritdoc */
+    setValue(value: TValue): void;
+    /** @inheritdoc */
+    resetValue(): void;
+    protected abstract setInternalValue(value: TValue, isInitial: boolean): void;
+}

package/lib/ChangingInputElement.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangingInputElement = void 0;
+const InputElement_1 = require("./InputElement");
+class ChangingInputElement extends InputElement_1.InputElement {
+    constructor(update) {
+        super(update);
+        this._valueIsSet = false;
+        this._initialValueIsSet = false;
+    }
+    /** @inheritdoc */
+    setInitialValue(value) {
+        if (this._valueIsSet || this._initialValueIsSet)
+            return;
+        this._initialValueIsSet = true;
+        this.initialValue = value;
+        this.setInternalValue(value, true);
+        this.updateInternally();
+    }
+    /** @inheritdoc */
+    setValue(value) {
+        this._valueIsSet = true;
+        this.setInternalValue(value, false);
+        this.updateInternally();
+    }
+    /** @inheritdoc */
+    resetValue() {
+        if (!this._valueIsSet && !this._initialValueIsSet)
+            return;
+        this.setInternalValue(undefined, false);
+        this.updateInternally();
+    }
+}
+exports.ChangingInputElement = ChangingInputElement;

package/lib/Components/Buttons/ClearButton.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IClearButtonProps {
+    className?: string;
+    isDisabled?: boolean;
+    onClick: () => void;
+}
+export declare class ClearButton extends React.Component<IClearButtonProps> {
+    render(): JSX.Element;
+}
+export {};

package/lib/Components/Buttons/ClearButton.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+const React = require("react");
+const react_1 = require("@fluentui/react");
+class ClearButton extends React.Component {
+    render() {
+        const { className, isDisabled, onClick } = this.props;
+        return React.createElement(react_1.DefaultButton, { className: className, disabled: isDisabled, iconProps: { iconName: 'Clear' }, onClick: onClick });
+    }
+}
+exports.ClearButton = ClearButton;

package/lib/Components/Buttons/index.d.ts

@@ -0,0 +1 @@
+export * from './ClearButton';

package/lib/Components/Buttons/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ClearButton"), exports);

package/lib/Components/Text/ErrorRenderer.d.ts

@@ -0,0 +1,9 @@
+import { MessageBarType } from '@fluentui/react';
+import * as React from 'react';
+import { FormText } from './Types';
+interface IErrorRendererProps {
+    error: FormText;
+    messageBarType: MessageBarType;
+}
+export declare const ErrorRenderer: React.MemoExoticComponent<(props: IErrorRendererProps) => JSX.Element>;
+export {};

package/lib/Components/Text/ErrorRenderer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorRenderer = void 0;
+const react_1 = require("@fluentui/react");
+const React = require("react");
+const FormTextRenderer_1 = require("./FormTextRenderer");
+const ErrorRendererComponent = (props) => {
+    const { error } = props;
+    if (!error)
+        return null;
+    return (React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.warning },
+        React.createElement(FormTextRenderer_1.FormTextRenderer, { text: error })));
+};
+exports.ErrorRenderer = React.memo(ErrorRendererComponent);

package/lib/Components/Text/FormTextRenderer.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormText } from './Types';
+interface IFormTextRendererProps {
+    text: FormText;
+}
+export declare const FormTextRenderer: React.MemoExoticComponent<(props: IFormTextRendererProps) => JSX.Element>;
+export declare function materializeErrorMessage(error: FormText): JSX.Element;
+export {};

package/lib/Components/Text/FormTextRenderer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.materializeErrorMessage = exports.FormTextRenderer = void 0;
+const React = require("react");
+const FormTextRendererComponent = (props) => {
+    const { text: TextValue } = props;
+    if (!TextValue)
+        return null;
+    if (typeof TextValue === 'string')
+        return React.createElement(React.Fragment, null, TextValue);
+    return React.createElement(TextValue, null);
+};
+exports.FormTextRenderer = React.memo(FormTextRendererComponent);
+function materializeErrorMessage(error) {
+    if (!error)
+        return null;
+    return React.createElement(exports.FormTextRenderer, { text: error });
+}
+exports.materializeErrorMessage = materializeErrorMessage;

package/lib/Components/Text/LabelRenderer.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FormText } from './Types';
+interface ILabelRendererProps {
+    label: FormText;
+    required: boolean;
+}
+export declare const LabelRenderer: React.MemoExoticComponent<(props: ILabelRendererProps) => JSX.Element>;
+export {};

package/lib/Components/Text/LabelRenderer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelRenderer = void 0;
+const React = require("react");
+const react_1 = require("@fluentui/react");
+const LabelRendererComponent = (props) => {
+    if (!props)
+        return null;
+    const { label, required } = props;
+    if (!label)
+        return null;
+    return React.createElement(react_1.Label, { required: required }, label);
+};
+exports.LabelRenderer = React.memo(LabelRendererComponent);

package/lib/Components/Text/Types.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare type FormText = string | React.ComponentType;

package/lib/Components/Text/Types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/Components/Text/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ErrorRenderer';
+export * from './FormTextRenderer';
+export * from './LabelRenderer';
+export * from './Types';

package/lib/Components/Text/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ErrorRenderer"), exports);
+__exportStar(require("./FormTextRenderer"), exports);
+__exportStar(require("./LabelRenderer"), exports);
+__exportStar(require("./Types"), exports);

package/lib/Components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Buttons';
+export * from './Text';

package/lib/Components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Buttons"), exports);
+__exportStar(require("./Text"), exports);

package/lib/DynamicListInputElement/DynamicListInputElement.d.ts

@@ -10,7 +10,7 @@ export interface IInputInformation<TValue> {
     uniqueId: number;
     input: InternalDynamicInput<TValue>;
 }
-export declare class DynamicListInputElement<TValue, TComponentProps> extends ExtendedInputElement<IDynamicValueChange<TValue>[], DynamicListInputElementWrapper<TValue>> implements IDynamicListInputElement<TValue> {
+export declare class DynamicListInputElement<TValue> extends ExtendedInputElement<IDynamicValueChange<TValue>[], DynamicListInputElementWrapper<TValue>> implements IDynamicListInputElement<TValue> {
     private static counter;
     private readonly _configuration;
     private _inputs;

package/lib/DynamicListInputElement/DynamicListInputElement.js

@@ -76,7 +76,7 @@ class DynamicListInputElement extends ExtendedInputElement_1.ExtendedInputElemen
     /** @inheritdoc */
     renderComponent() {
         var _a, _b;
-        return (React.createElement(DynamicListInputElementWrapper_1.DynamicListInputElementWrapper, { className: this._configuration.className, inputs: this.filterInputs(), onDragEnd: this.onDragEnd, renderMenu: this.renderMenu, renderFooterMenu: this.renderFooterMenu, renderLoadingIndicator: (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.renderLoadingComponent, renderMoveGripper: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderMoveGripper, ref: this._componentRef }));
+        return (React.createElement(DynamicListInputElementWrapper_1.DynamicListInputElementWrapper, { className: this._configuration.className, inputs: this.filterInputs(), onDragEnd: this.onDragEnd, renderMenu: this.renderMenu, renderFooterMenu: this.renderFooterMenu, loadingComponent: (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.loadingComponent, renderMoveGripper: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderMoveGripper, ref: this._componentRef }));
     }
     reorder(startIndex, endIndex) {
         const [removed] = this._inputs.splice(startIndex, 1);

package/lib/DynamicListInputElement/IBasicMenuButtonConfiguration.d.ts

@@ -1,5 +1,6 @@
+import { FormText } from '../Components';
 export interface IBasicMenuButtonConfiguration {
     className?: string;
-    label?: string;
+    label?: FormText;
     iconName?: string;
 }

package/lib/DynamicListInputElement/IMenuButtonConfiguration.d.ts

@@ -1,8 +1,5 @@
 import { IBasicMenuButtonConfiguration } from './IBasicMenuButtonConfiguration';
 export interface IMenuButtonConfiguration extends IBasicMenuButtonConfiguration {
-    className?: string;
-    label?: string;
-    iconName?: string;
     show?: boolean;
     isEnabled?: boolean;
 }

package/lib/DynamicListInputElement/InternalPresentationComponents/DynamicListInputElementWrapper.d.ts

@@ -8,7 +8,7 @@ interface IDynamicListInputElementWrapperState<TValue> {
     inputElements: IInputInformation<TValue>[];
 }
 export interface ICommonInputBehaviorConfiguration {
-    renderLoadingIndicator(): JSX.Element;
+    loadingComponent?: React.ComponentType;
 }
 export declare class DynamicListInputElementWrapper<TValue> extends React.Component<IDynamicInputListProps<TValue> & ICommonInputBehaviorConfiguration, IDynamicListInputElementWrapperState<TValue>> implements IChangingPresentation<IInputInformation<TValue>[]> {
     constructor(props: IDynamicInputListProps<TValue> & ICommonInputBehaviorConfiguration);

package/lib/DynamicListInputElement/InternalPresentationComponents/DynamicListInputElementWrapper.js

@@ -32,7 +32,7 @@ class DynamicListInputElementWrapper extends React.Component {
             this.setState({ inputElements: newValue });
         };
         this.render = () => {
-            return (React.createElement(Presentations_1.PresentationRenderer, { isVisible: this.state.isVisible, isLoading: this.state.isLoading, renderInternalContent: this.renderInternalContent, renderLoadingIndicator: this.props.renderLoadingIndicator }));
+            return (React.createElement(Presentations_1.PresentationRenderer, { isVisible: this.state.isVisible, isLoading: this.state.isLoading, renderInternalContent: this.renderInternalContent, loadingIndicator: this.props.loadingComponent }));
         };
         this.renderInternalContent = () => {
             return React.createElement(DynamicInputsList_1.DynamicInputsList, Object.assign({}, this.props, { inputs: this.state.inputElements }));

package/lib/DynamicListInputElement/Menu/DynamicListMenu.js

@@ -2,34 +2,40 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicListMenu = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
+const Components_1 = require("../../Components");
 class DynamicListMenu extends React.Component {
     render() {
-        var _a, _b, _c, _d;
+        var _a, _b;
+        if (!this.props)
+            return null;
         return (React.createElement("div", { className: "tas-dynamic-list-menu" },
-            ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.insertButtonConfig) === null || _b === void 0 ? void 0 : _b.show) && this.renderInsertButton(),
-            ((_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.removeButtonConfig) === null || _d === void 0 ? void 0 : _d.show) && this.renderRemoveButton()));
+            ((_a = this.props.insertButtonConfig) === null || _a === void 0 ? void 0 : _a.show) && this.renderInsertButton(),
+            ((_b = this.props.removeButtonConfig) === null || _b === void 0 ? void 0 : _b.show) && this.renderRemoveButton()));
     }
     renderInsertButton() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const addOptions = this.getItems();
+        const buttonText = ((_a = this.props.insertButtonConfig) === null || _a === void 0 ? void 0 : _a.label) || 'Insert';
         const commonProps = {
-            iconProps: { iconName: ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.insertButtonConfig) === null || _b === void 0 ? void 0 : _b.iconName) || 'Add' },
-            text: ((_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.insertButtonConfig) === null || _d === void 0 ? void 0 : _d.label) || 'Insert'
+            iconProps: { iconName: ((_b = this.props.insertButtonConfig) === null || _b === void 0 ? void 0 : _b.iconName) || 'Add' },
+            children: React.createElement(Components_1.FormTextRenderer, { text: buttonText })
         };
         if (!(addOptions === null || addOptions === void 0 ? void 0 : addOptions.items) || addOptions.items.length <= 0)
-            return React.createElement(office_ui_fabric_react_1.PrimaryButton, Object.assign({}, commonProps, { disabled: true }));
+            return React.createElement(react_1.PrimaryButton, Object.assign({}, commonProps, { disabled: true }));
         else if (addOptions.items.length === 1) {
-            return (React.createElement(office_ui_fabric_react_1.CommandButton, Object.assign({}, commonProps, { disabled: false, onClick: () => {
+            return (React.createElement(react_1.CommandButton, Object.assign({}, commonProps, { disabled: false, onClick: () => {
                     addOptions.items[0].onClick();
                 } })));
         }
         else
-            return React.createElement(office_ui_fabric_react_1.CommandButton, Object.assign({}, commonProps, { menuProps: addOptions, disabled: false }));
+            return React.createElement(react_1.CommandButton, Object.assign({}, commonProps, { menuProps: addOptions, disabled: false }));
     }
     renderRemoveButton() {
-        var _a, _b, _c, _d, _e;
-        return (React.createElement(office_ui_fabric_react_1.CommandButton, { iconProps: { iconName: ((_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.removeButtonConfig) === null || _b === void 0 ? void 0 : _b.iconName) || 'Remove' }, text: ((_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.removeButtonConfig) === null || _d === void 0 ? void 0 : _d.label) || 'Remove', disabled: !((_e = this.props.removeButtonConfig) === null || _e === void 0 ? void 0 : _e.isEnabled), onClick: () => !!this.props.onRemoveClicked && this.props.onRemoveClicked() }));
+        var _a, _b, _c;
+        const buttonText = ((_a = this.props.removeButtonConfig) === null || _a === void 0 ? void 0 : _a.label) || 'Remove';
+        return (React.createElement(react_1.CommandButton, { iconProps: { iconName: ((_b = this.props.removeButtonConfig) === null || _b === void 0 ? void 0 : _b.iconName) || 'Remove' }, disabled: !((_c = this.props.removeButtonConfig) === null || _c === void 0 ? void 0 : _c.isEnabled), onClick: () => !!this.props.onRemoveClicked && this.props.onRemoveClicked() },
+            React.createElement(Components_1.FormTextRenderer, { text: buttonText })));
     }
     getItems() {
         return {

package/lib/DynamicListInputElement/Menu/index.js

@@ -7,7 +7,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DynamicListMenu"), exports);

package/lib/DynamicListInputElement/index.js

@@ -7,7 +7,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DynamicListInputElement"), exports);

package/lib/ExtendedInputElement.d.ts

@@ -1,26 +1,15 @@
 import * as React from 'react';
-import { IChangingInputElement } from './IChangingInputElement';
+import { ChangingInputElement } from './ChangingInputElement';
 import { IHidingInputElement } from './IHidingInputElement';
 import { UpdateCallback } from './IInputElement';
 import { ILoadingInputElement } from './ILoadingInputElement';
-import { InputElement } from './InputElement';
 import { IPresentation } from './Presentations';
-export declare abstract class ExtendedInputElement<TValue, TPresentation extends IPresentation> extends InputElement implements IHidingInputElement, ILoadingInputElement, IChangingInputElement<TValue> {
-    protected initialValue: TValue;
-    protected _valueIsSet: boolean;
-    protected _initialValueIsSet: boolean;
+export declare abstract class ExtendedInputElement<TValue, TPresentation extends IPresentation> extends ChangingInputElement<TValue> implements IHidingInputElement, ILoadingInputElement {
     protected _componentRef: React.RefObject<TPresentation>;
     private _isVisible;
     private _isLoading;
     protected constructor(update: UpdateCallback);
     /** @inheritdoc */
-    setInitialValue(value: TValue): void;
-    /** @inheritdoc */
-    setValue(value: TValue): void;
-    /** @inheritdoc */
-    resetValue(): void;
-    protected abstract setInternalValue(value: TValue, isInitial: boolean): void;
-    /** @inheritdoc */
     get isVisible(): boolean;
     /** @inheritdoc */
     hide(): void;

package/lib/ExtendedInputElement.js

@@ -2,39 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExtendedInputElement = void 0;
 const React = require("react");
-const InputElement_1 = require("./InputElement");
-class ExtendedInputElement extends InputElement_1.InputElement {
+const ChangingInputElement_1 = require("./ChangingInputElement");
+class ExtendedInputElement extends ChangingInputElement_1.ChangingInputElement {
     constructor(update) {
         super(update);
-        this._valueIsSet = false;
-        this._initialValueIsSet = false;
         this._isVisible = true;
         this._isLoading = false;
         this._componentRef = React.createRef();
     }
     /** @inheritdoc */
-    setInitialValue(value) {
-        if (this._valueIsSet || this._initialValueIsSet)
-            return;
-        this._initialValueIsSet = true;
-        this.initialValue = value;
-        this.setInternalValue(value, true);
-        this.updateInternally();
-    }
-    /** @inheritdoc */
-    setValue(value) {
-        this._valueIsSet = true;
-        this.setInternalValue(value, false);
-        this.updateInternally();
-    }
-    /** @inheritdoc */
-    resetValue() {
-        if (!this._valueIsSet)
-            return;
-        this.setInternalValue(undefined, false);
-        this.updateInternally();
-    }
-    /** @inheritdoc */
     get isVisible() {
         return this._isVisible;
     }

package/lib/IInputElement.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FormText } from './Components';
 export interface IInputElement {
     /**
      * A boolean indicating if the entered value is valid (all validation rules pass).
@@ -7,7 +8,7 @@ export interface IInputElement {
     /**
      * The message of the first validation error that occurred if any.
      */
-    errorMessage: string;
+    errorMessage: FormText;
     /**
      * Gets or sets a value indicating whether the input element has any changes made.
      */

package/lib/IInputElementConfiguration.d.ts

@@ -1,10 +1,11 @@
+import { FormText } from './Components';
 export interface IInputElementConfiguration {
     /**
      * The label associated with the input element.
      * It should not be too long and should give enough information for the end user.
      * Some input elements may not use this value if tey should not.
      */
-    label?: string;
+    label?: FormText;
     /**
      * A class name that should be used while rendering the input element.
      */
@@ -19,5 +20,5 @@ export interface IInputElementConfiguration {
     /**
      * A message that should be rendered instead of the default one whenever a required input element is empty.
      */
-    requiredValidationMessage?: string;
+    requiredValidationMessage?: FormText;
 }

package/lib/ILoadingInputElementConfiguration.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 export interface ILoadingInputElementConfiguration {
     /**
      * This function can be used to customize the default loading UI of any loading input element.
      */
-    renderLoadingComponent?: () => JSX.Element;
+    loadingComponent?: React.ComponentType;
 }

package/lib/IValueInputElement.d.ts

@@ -1,3 +1,4 @@
+import { FormText } from './Components';
 import { IInputElement } from './IInputElement';
 export interface IValueInputElement<TValue> extends IInputElement {
     /**
@@ -16,4 +17,4 @@ export interface IValueInputElement<TValue> extends IInputElement {
      */
     validate(): void;
 }
-export declare type ValidationRule<TValue> = (value: TValue) => string;
+export declare type ValidationRule<TValue> = (value: TValue) => FormText;

package/lib/InputElement.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { FormText } from './Components';
 import { IInputElement, UpdateCallback } from './IInputElement';
 export declare abstract class InputElement implements IInputElement {
     private _isRendered;
@@ -6,7 +7,7 @@ export declare abstract class InputElement implements IInputElement {
     /** @inheritdoc */
     abstract isValid: boolean;
     /** @inheritdoc */
-    errorMessage: string;
+    errorMessage: FormText;
     /** @inheritdoc */
     abstract hasChanges: boolean;
     /** @inheritdoc */

package/lib/InputElement.js

@@ -7,7 +7,7 @@ class InputElement {
         /** @inheritdoc */
         this.update = () => {
             // This function should never ever be called in such a manner.
-            // Instead a custom function should be passed to the constructor and immediately after that - assigned to this property.
+            // Instead, a custom function should be passed to the constructor and immediately after that - assigned to this property.
             throw new Error('This function should never be called!');
         };
         if (!update)

package/lib/Presentations/IPresentation.d.ts

@@ -1,3 +1,4 @@
+import { FormText } from '../Components';
 export interface IPresentation {
     startLoading(): void;
     stopLoading(): void;
@@ -8,7 +9,7 @@ export interface IChangingPresentation<TValue> {
     update(newValue: TValue): void;
 }
 export interface IRestrictedPresentation {
-    setError(errorMessage: string): void;
+    setError(errorMessage: FormText): void;
 }
 export interface IDynamicPresentation<TDynamicProps> {
     changeDynamicProps(dynamicProps: TDynamicProps): void;

package/lib/Presentations/PresentationRenderers.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 interface IPresentationRendererProps {
     isVisible: boolean;
     isLoading: boolean;
-    renderLoadingIndicator?: () => JSX.Element;
+    loadingIndicator?: React.ComponentType;
     renderInternalContent: () => JSX.Element;
 }
 export declare class PresentationRenderer extends React.Component<IPresentationRendererProps> {

package/lib/Presentations/PresentationRenderers.js

@@ -1,21 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PresentationRenderer = void 0;
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const React = require("react");
 class PresentationRenderer extends React.Component {
     render() {
-        var _a;
-        if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.isVisible))
+        const { isVisible } = this.props;
+        if (!isVisible)
             return null;
-        if (this.props.isLoading) {
-            if (this.props.renderLoadingIndicator)
-                return this.props.renderLoadingIndicator();
-            return React.createElement(office_ui_fabric_react_1.Spinner, { size: office_ui_fabric_react_1.SpinnerSize.medium });
+        const { isLoading } = this.props;
+        if (isLoading) {
+            const { loadingIndicator: LoadingIndicator } = this.props;
+            if (LoadingIndicator)
+                return React.createElement(LoadingIndicator, null);
+            return React.createElement(react_1.Spinner, { size: react_1.SpinnerSize.medium });
         }
-        if (!this.props.renderInternalContent)
+        const { renderInternalContent } = this.props;
+        if (!renderInternalContent)
             return null;
-        return this.props.renderInternalContent();
+        return renderInternalContent();
     }
 }
 exports.PresentationRenderer = PresentationRenderer;

package/lib/Presentations/index.js

@@ -7,7 +7,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./IPresentation"), exports);

package/lib/SingleValueInputElements/Comparators/ArrayComparator.d.ts

@@ -1,5 +1,8 @@
+import { IEqualityComparer } from './IEqualityComparer';
 import { IValueComparator } from './IValueComparator';
 export declare class ArrayComparator<T> implements IValueComparator<T[]> {
+    private readonly _equalityComparer;
+    constructor(equalityComparer?: IEqualityComparer<T>);
     /** @inheritdoc */
     areEqual(a: T[], b: T[]): boolean;
     /** @inheritdoc */