@try-at-software/input-elements 1.2.0-aplha.5 → 1.2.0-beta.2

package/lib/SingleValueInputElements/Comparators/ArrayComparator.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArrayComparator = void 0;
+const DefaultEqualityComparer_1 = require("./DefaultEqualityComparer");
 class ArrayComparator {
+    constructor(equalityComparer = null) {
+        this._equalityComparer = equalityComparer !== null && equalityComparer !== void 0 ? equalityComparer : new DefaultEqualityComparer_1.DefaultEqualityComparer();
+    }
     /** @inheritdoc */
     areEqual(a, b) {
         if (a === b)
@@ -11,7 +15,7 @@ class ArrayComparator {
         if (a.length !== b.length)
             return false;
         for (let i = 0; i < a.length; ++i) {
-            if (a[i] !== b[i])
+            if (!this._equalityComparer.areEqual(a[i], b[i]))
                 return false;
         }
         return true;

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

@@ -0,0 +1,4 @@
+import { IEqualityComparer } from './IEqualityComparer';
+export declare class DefaultEqualityComparer<T> implements IEqualityComparer<T> {
+    areEqual(a: T, b: T): boolean;
+}

package/lib/SingleValueInputElements/Comparators/DefaultEqualityComparer.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultEqualityComparer = void 0;
+class DefaultEqualityComparer {
+    areEqual(a, b) {
+        return a === b;
+    }
+}
+exports.DefaultEqualityComparer = DefaultEqualityComparer;

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

@@ -0,0 +1,3 @@
+export interface IEqualityComparer<T> {
+    areEqual(a: T, b: T): boolean;
+}

package/lib/SingleValueInputElements/Comparators/IEqualityComparer.js

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

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

@@ -1,3 +1,5 @@
 export * from './IValueComparator';
+export * from './DefaultEqualityComparer';
+export * from './IEqualityComparer';
 export * from './ArrayComparator';
 export * from './ZeroIsValidComparator';

package/lib/SingleValueInputElements/Comparators/index.js

@@ -7,9 +7,11 @@ 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("./IValueComparator"), exports);
+__exportStar(require("./DefaultEqualityComparer"), exports);
+__exportStar(require("./IEqualityComparer"), exports);
 __exportStar(require("./ArrayComparator"), exports);
 __exportStar(require("./ZeroIsValidComparator"), exports);

package/lib/SingleValueInputElements/DropdownInputElement/ConsistencyValidationRules.d.ts

@@ -1,2 +1,3 @@
+import { FormText } from '../../Components';
 import { ValidationRule } from '../../IValueInputElement';
-export declare function ensureConsistency(errorMessage?: string): ValidationRule<string>;
+export declare function ensureConsistency(errorMessage?: FormText): ValidationRule<string>;

package/lib/SingleValueInputElements/DropdownInputElement/DropdownInput.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { FormText } from '../../Components';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-import { IDropdownInputProps } from './IDropdownInputProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
-export declare class DropdownInput extends React.Component<ISingleValueInputElementProps<string> & IBaseInputElementProps & IDropdownInputProps> {
-    render(): JSX.Element;
-    private getNormalizedOptions;
+import { IDropdownInputProps } from './IDropdownInputProps';
+import { IFluentUiDropdownInputProps } from './IFluentUiDropdownInputProps';
+interface ISingleValueDropdownInputProps extends ISingleValueInputElementProps<string>, IOperativeProps<IBaseInputElementProps>, IDynamicProps<IDropdownInputProps & IFluentUiDropdownInputProps> {
+    consistencyErrorMessage?: FormText;
 }
+export declare const DropdownInput: React.MemoExoticComponent<(props: ISingleValueDropdownInputProps) => JSX.Element>;
+export {};

package/lib/SingleValueInputElements/DropdownInputElement/DropdownInput.js

@@ -1,34 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownInput = void 0;
+const react_1 = require("@fluentui/react");
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
-class DropdownInput extends React.Component {
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const normalizedOptions = this.getNormalizedOptions();
-        return (React.createElement(React.Fragment, null,
-            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.label) && React.createElement(office_ui_fabric_react_1.Label, { required: !!this.props.renderRequiredIndicator }, this.props.label),
-            React.createElement(office_ui_fabric_react_1.Dropdown, { options: normalizedOptions, onChange: (_event, option) => { var _a; return !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange) && this.props.onChange(option.key); }, errorMessage: (_b = this.props) === null || _b === void 0 ? void 0 : _b.errorMessage, placeholder: (_c = this.props) === null || _c === void 0 ? void 0 : _c.placeholder, 
-                // This value should never be `undefined`.
-                defaultSelectedKey: ((_d = this.props) === null || _d === void 0 ? void 0 : _d.value) || ((_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.defaultOption) === null || _f === void 0 ? void 0 : _f.key) || null, disabled: (_g = this.props) === null || _g === void 0 ? void 0 : _g.isDisabled })));
-    }
-    getNormalizedOptions() {
-        var _a, _b;
-        const options = [];
-        if (!!((_a = this.props) === null || _a === void 0 ? void 0 : _a.defaultOption)) {
-            const defaultOption = Object.assign(Object.assign({}, this.props.defaultOption), { selected: true });
-            options.push(defaultOption);
-        }
-        if (!((_b = this.props) === null || _b === void 0 ? void 0 : _b.options) || !Array.isArray(this.props.options))
-            return options;
-        this.props.options.forEach((o) => {
-            if (!o)
-                return;
-            const newOption = Object.assign(Object.assign({}, o), { selected: false });
-            options.push(newOption);
-        });
-        return options;
-    }
-}
-exports.DropdownInput = DropdownInput;
+const react_2 = require("react");
+const Components_1 = require("../../Components");
+const Utilities_1 = require("../../Utilities");
+const ConsistencyErrorMessage = 'The value is not present within the specified options.';
+const DropdownInputComponent = (props) => {
+    var _a;
+    const { dynamicProps, operativeProps } = props;
+    const normalizedOptions = react_2.useMemo(() => Utilities_1.DropdownHelper.getNormalizedOptions(dynamicProps.defaultOption, dynamicProps.options), [dynamicProps.defaultOption, dynamicProps.options]);
+    react_2.useEffect(() => {
+        if (!props.value || normalizedOptions.some((o) => o.key === props.value))
+            return;
+        const invalidationOptions = { errorMessage: props.consistencyErrorMessage || ConsistencyErrorMessage };
+        props.invalidateInput(invalidationOptions);
+    }, [props.value, normalizedOptions, props.consistencyErrorMessage, props.invalidateInput]);
+    const DropdownComponent = react_2.useMemo(() => { var _a; return (_a = dynamicProps.dropdownComponent) !== null && _a !== void 0 ? _a : react_1.Dropdown; }, [dynamicProps.dropdownComponent]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Components_1.LabelRenderer, { label: props.label, required: !!props.renderRequiredIndicator }),
+        React.createElement(DropdownComponent, { "data-automationid": "dropdown-input", options: normalizedOptions, onChange: (_event, option) => !!props.onChange && props.onChange(option.key), placeholder: operativeProps.placeholder, 
+            // This value should never be `undefined`.
+            defaultSelectedKey: props.value || ((_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key) || null, disabled: dynamicProps.isDisabled }),
+        React.createElement(Components_1.ErrorRenderer, { error: props.errorMessage, messageBarType: react_1.MessageBarType.error })));
+};
+exports.DropdownInput = React.memo(DropdownInputComponent);

package/lib/SingleValueInputElements/DropdownInputElement/IDropdownInputProps.d.ts

@@ -1,9 +1,9 @@
 import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IDropdownInputOption } from './IDropdownInputOption';
 export interface IDropdownInputProps extends IBaseInputElementDynamicProps {
-    options?: IDropdownInputOption[];
+    options: IDropdownInputOption[];
     /**
      * The default option for the dropdown.
      */
-    defaultOption?: IDropdownInputOption;
+    defaultOption: IDropdownInputOption;
 }

package/lib/SingleValueInputElements/DropdownInputElement/IFluentUiDropdownInputProps.d.ts

@@ -0,0 +1,5 @@
+import { IDropdownProps } from '@fluentui/react';
+import * as React from 'react';
+export interface IFluentUiDropdownInputProps {
+    dropdownComponent: React.ComponentType<IDropdownProps>;
+}

package/lib/SingleValueInputElements/DropdownInputElement/IFluentUiDropdownInputProps.js

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

package/lib/SingleValueInputElements/DropdownInputElement/MultiValueDropdownInput.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-import { IDropdownInputProps } from './IDropdownInputProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
-export declare class MultiValueDropdownInput extends React.Component<ISingleValueInputElementProps<string[]> & IBaseInputElementProps & IDropdownInputProps> {
+import { IDropdownInputProps } from './IDropdownInputProps';
+export declare class MultiValueDropdownInput extends React.Component<ISingleValueInputElementProps<string[]> & IOperativeProps<IBaseInputElementProps> & IDynamicProps<IDropdownInputProps>> {
     render(): JSX.Element;
 }

package/lib/SingleValueInputElements/DropdownInputElement/MultiValueDropdownInput.js

@@ -1,29 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiValueDropdownInput = void 0;
+const react_1 = require("@fluentui/react");
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const Components_1 = require("../../Components");
 const Utilities_1 = require("../../Utilities");
 class MultiValueDropdownInput extends React.Component {
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const normalizedOptions = Utilities_1.DropdownHelper.getNormalizedOptions((_a = this.props) === null || _a === void 0 ? void 0 : _a.defaultOption, (_b = this.props) === null || _b === void 0 ? void 0 : _b.options);
-        return (React.createElement(office_ui_fabric_react_1.Dropdown, { label: (_c = this.props) === null || _c === void 0 ? void 0 : _c.label, options: normalizedOptions, onChange: (_event, option) => {
-                var _a, _b, _c, _d;
-                const optionKey = (_a = option === null || option === void 0 ? void 0 : option.key) === null || _a === void 0 ? void 0 : _a.toString();
-                if (!optionKey)
-                    return;
-                let currentValues = (_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : [];
-                // If the current option is selected, add it to the list.
-                // Else, remove it.
-                if (option.selected)
-                    currentValues.push(optionKey);
-                else
-                    currentValues = currentValues.filter((x) => x !== optionKey);
-                !!((_d = this.props) === null || _d === void 0 ? void 0 : _d.onChange) && this.props.onChange(currentValues);
-            }, errorMessage: (_d = this.props) === null || _d === void 0 ? void 0 : _d.errorMessage, required: !!((_e = this.props) === null || _e === void 0 ? void 0 : _e.renderRequiredIndicator), placeholder: (_f = this.props) === null || _f === void 0 ? void 0 : _f.placeholder, 
-            // This value should never be `undefined`.
-            defaultSelectedKeys: ((_g = this.props) === null || _g === void 0 ? void 0 : _g.value) || [(_j = (_h = this.props) === null || _h === void 0 ? void 0 : _h.defaultOption) === null || _j === void 0 ? void 0 : _j.key] || null, disabled: (_k = this.props) === null || _k === void 0 ? void 0 : _k.isDisabled, multiSelect: true }));
+        var _a;
+        if (!this.props)
+            return null;
+        const { dynamicProps, operativeProps } = this.props;
+        const normalizedOptions = Utilities_1.DropdownHelper.getNormalizedOptions(dynamicProps.defaultOption, dynamicProps.options);
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement(react_1.Dropdown, { "data-automationid": "multi-value-dropdown-input", options: normalizedOptions, onChange: (_event, option) => {
+                    var _a, _b, _c;
+                    const optionKey = (_a = option === null || option === void 0 ? void 0 : option.key) === null || _a === void 0 ? void 0 : _a.toString();
+                    if (!optionKey)
+                        return;
+                    // We have to re-iterate the passed collection of values here in order to detect changes between the initial and the current values.
+                    let currentValues = [];
+                    if (this.props.value)
+                        currentValues.push(...this.props.value);
+                    // If the current option is selected, add it to the list.
+                    // Else, remove it.
+                    if (option.selected)
+                        currentValues.push(optionKey);
+                    else
+                        currentValues = currentValues.filter((x) => x !== optionKey);
+                    (_c = (_b = this.props).onChange) === null || _c === void 0 ? void 0 : _c.call(_b, currentValues);
+                }, required: !!this.props.renderRequiredIndicator, placeholder: operativeProps.placeholder, 
+                // This value should never be `undefined`.
+                defaultSelectedKeys: this.props.value || [(_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key] || null, disabled: dynamicProps.isDisabled, multiSelect: true }),
+            React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.error })));
     }
 }
 exports.MultiValueDropdownInput = MultiValueDropdownInput;

package/lib/SingleValueInputElements/DropdownInputElement/index.d.ts

@@ -1,5 +1,5 @@
 export * from './DropdownInput';
-export * from './DropdownInputElement';
 export * from './IDropdownInputOption';
 export * from './IDropdownInputProps';
+export * from './IFluentUiDropdownInputProps';
 export * from './MultiValueDropdownInput';

package/lib/SingleValueInputElements/DropdownInputElement/index.js

@@ -7,11 +7,11 @@ 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("./DropdownInput"), exports);
-__exportStar(require("./DropdownInputElement"), exports);
 __exportStar(require("./IDropdownInputOption"), exports);
 __exportStar(require("./IDropdownInputProps"), exports);
+__exportStar(require("./IFluentUiDropdownInputProps"), exports);
 __exportStar(require("./MultiValueDropdownInput"), exports);

package/lib/SingleValueInputElements/IBaseInputElementDynamicProps.d.ts

@@ -1,3 +1,3 @@
 export interface IBaseInputElementDynamicProps {
-    isDisabled?: boolean;
+    isDisabled: boolean;
 }

package/lib/SingleValueInputElements/IDynamicProps.d.ts

@@ -0,0 +1,3 @@
+export interface IDynamicProps<TDynamicProps> {
+    dynamicProps: Partial<TDynamicProps>;
+}

package/lib/SingleValueInputElements/IDynamicProps.js

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

package/lib/SingleValueInputElements/IOperativeProps.d.ts

@@ -0,0 +1,3 @@
+export interface IOperativeProps<TComponentProps> {
+    operativeProps: TComponentProps;
+}

package/lib/SingleValueInputElements/IOperativeProps.js

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

package/lib/SingleValueInputElements/ISingleValueInputElement.d.ts

@@ -4,6 +4,8 @@ import { IHidingInputElement } from '../IHidingInputElement';
 import { ILoadingInputElement } from '../ILoadingInputElement';
 import { IValueInputElement } from '../IValueInputElement';
 import { InvalidValueChangeSubscription, ValueChangeSubscription } from '../Subscriptions';
+import { IDynamicProps } from './IDynamicProps';
+import { IOperativeProps } from './IOperativeProps';
 import { ISingleValueInputElementProps } from './ISingleValueInputElementProps';
 export interface ISingleValueInputElement<TValue, TComponentProps = unknown, TDynamicProps = unknown> extends IValueInputElement<TValue>, IChangingInputElement<TValue>, IHidingInputElement, ILoadingInputElement {
     /**
@@ -13,7 +15,7 @@ export interface ISingleValueInputElement<TValue, TComponentProps = unknown, TDy
      *
      * @see React.Component
      */
-    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & TComponentProps & TDynamicProps>;
+    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>;
     /**
      * A property containing all additional props that the rendered component needs.
      * They should be initialized before the 'render' method is ever called (the best way of doing that is by passing them into the constructor).
@@ -22,5 +24,6 @@ export interface ISingleValueInputElement<TValue, TComponentProps = unknown, TDy
     getDynamicProps(): TDynamicProps;
     changeDynamicProps<K extends keyof TDynamicProps>(dynamicProps: Pick<TDynamicProps, K>): void;
     subscribeToValueChange(subscription: ValueChangeSubscription<TValue>): void;
-    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription<TValue>): void;
+    subscribeToInitialValueChange(subscription: ValueChangeSubscription<TValue>): void;
+    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription): void;
 }

package/lib/SingleValueInputElements/ISingleValueInputElementProps.d.ts

@@ -1,8 +1,12 @@
+import { FormText } from '../Components';
+export interface IInvalidationOptions {
+    errorMessage: FormText;
+}
 export interface ISingleValueInputElementProps<TValue> {
     value: TValue;
-    label: string;
+    label: FormText;
     renderRequiredIndicator: boolean;
-    errorMessage: string;
+    errorMessage: FormText;
     onChange: (newValue: TValue) => void;
-    invalidateInput: () => void;
+    invalidateInput: (options?: IInvalidationOptions) => void;
 }

package/lib/SingleValueInputElements/IdentityPickerInputElement/IIdentityPickerProps.d.ts

@@ -1,7 +1,6 @@
-import { IBasePickerSuggestionsProps, IPersonaProps } from 'office-ui-fabric-react';
-import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IBasePickerSuggestionsProps, IPersonaProps } from '@fluentui/react';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-export interface IIdentityPickerProps<TIdentity extends IPersonaProps = IPersonaProps> extends IBaseInputElementProps, IBaseInputElementDynamicProps {
+export interface IIdentityPickerProps<TIdentity extends IPersonaProps = IPersonaProps> extends IBaseInputElementProps {
     onResolveSuggestions: (query: string, selectedItems?: TIdentity[]) => Promise<TIdentity[]>;
     getTextFromItem?: (item: TIdentity, currentValue?: string) => string;
     onEmptyResolveSuggestions?: (currentPersonas?: TIdentity[]) => Promise<TIdentity[]>;

package/lib/SingleValueInputElements/IdentityPickerInputElement/IdentityPicker.d.ts

@@ -1,7 +1,10 @@
+import { IPersonaProps } from '@fluentui/react';
 import * as React from 'react';
-import { IPersonaProps } from 'office-ui-fabric-react';
-import { IIdentityPickerProps } from './IIdentityPickerProps';
+import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
-export declare class IdentityPicker<TIdentity extends IPersonaProps = IPersonaProps> extends React.Component<IIdentityPickerProps<TIdentity> & ISingleValueInputElementProps<TIdentity[]>> {
+import { IIdentityPickerProps } from './IIdentityPickerProps';
+export declare class IdentityPicker<TIdentity extends IPersonaProps = IPersonaProps> extends React.Component<ISingleValueInputElementProps<TIdentity[]> & IOperativeProps<IIdentityPickerProps<TIdentity>> & IDynamicProps<IBaseInputElementDynamicProps>> {
     render(): JSX.Element;
 }

package/lib/SingleValueInputElements/IdentityPickerInputElement/IdentityPicker.js

@@ -1,22 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdentityPicker = void 0;
+const react_1 = require("@fluentui/react");
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const Components_1 = require("../../Components");
 class IdentityPicker extends React.Component {
     render() {
-        var _a;
         if (!this.props)
             return null;
+        const { dynamicProps, operativeProps } = this.props;
         return (React.createElement(React.Fragment, null,
-            this.props.label && React.createElement(office_ui_fabric_react_1.Label, { required: this.props.renderRequiredIndicator }, this.props.label),
-            React.createElement(office_ui_fabric_react_1.NormalPeoplePicker, { onResolveSuggestions: this.props.onResolveSuggestions, onEmptyResolveSuggestions: this.props.onEmptyResolveSuggestions, getTextFromItem: this.props.getTextFromItem, pickerSuggestionsProps: this.props.suggestionProps, onRemoveSuggestion: this.props.onRemoveSuggestion, onInputChange: this.props.onInputChange, resolveDelay: this.props.resolveDelay, itemLimit: this.props.itemLimit, disabled: this.props.isDisabled, defaultSelectedItems: this.props.value, inputProps: {
-                    required: this.props.renderRequiredIndicator,
-                    placeholder: !!this.props.value && this.props.value.length > 0 ? '' : this.props.placeholder
-                }, onChange: (items) => {
-                    this.props.onChange(items);
-                } }),
-            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.errorMessage) && React.createElement(office_ui_fabric_react_1.MessageBar, { messageBarType: office_ui_fabric_react_1.MessageBarType.warning }, this.props.errorMessage)));
+            React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement("div", { "data-automationid": "identity-picker" },
+                React.createElement(react_1.NormalPeoplePicker, { onResolveSuggestions: operativeProps.onResolveSuggestions, onEmptyResolveSuggestions: operativeProps.onEmptyResolveSuggestions, getTextFromItem: operativeProps.getTextFromItem, pickerSuggestionsProps: operativeProps.suggestionProps, onRemoveSuggestion: operativeProps.onRemoveSuggestion, onInputChange: operativeProps.onInputChange, resolveDelay: operativeProps.resolveDelay, itemLimit: operativeProps.itemLimit, disabled: dynamicProps.isDisabled, defaultSelectedItems: this.props.value, inputProps: {
+                        required: this.props.renderRequiredIndicator,
+                        placeholder: !!this.props.value && this.props.value.length > 0 ? '' : operativeProps.placeholder
+                    }, onChange: (items) => {
+                        this.props.onChange(items);
+                    } })),
+            React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.warning })));
     }
 }
 exports.IdentityPicker = IdentityPicker;

package/lib/SingleValueInputElements/IdentityPickerInputElement/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("./IIdentityPickerProps"), exports);

package/lib/SingleValueInputElements/InternalPresentationComponents/SingleValueInputElementWrapper.d.ts

@@ -1,29 +1,34 @@
 import * as React from 'react';
+import { FormText } from '../../Components';
 import { IChangingPresentation, IDynamicPresentation, IPresentation, IRestrictedPresentation } from '../../Presentations';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
 interface ISingleValueInputElementWrapperState<TValue, TDynamicProps> {
     value: TValue;
-    errorMessage: string;
+    errorMessage: FormText;
     isLoading: boolean;
     isVisible: boolean;
     dynamicProps: TDynamicProps;
 }
-export interface ISingleValueInputElementWrapperProps<TValue, TComponentProps extends ISingleValueInputElementProps<TValue>, TDynamicProps> {
-    internalComponent: React.ComponentType<TComponentProps & TDynamicProps>;
-    componentProps: TComponentProps;
+export interface ISingleValueInputElementWrapperProps<TValue, TComponentProps, TDynamicProps> {
+    internalComponent: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>;
+    inputProps: ISingleValueInputElementProps<TValue>;
+    operativeProps: TComponentProps;
     initialDynamicProps: TDynamicProps;
     isInitiallyLoading: boolean;
     isInitiallyVisible: boolean;
-    renderLoadingIndicator(): JSX.Element;
+    loadingIndicator: React.ComponentType;
+    renderErrors: boolean;
 }
-export declare class SingleValueInputElementWrapper<TValue, TComponentProps extends ISingleValueInputElementProps<TValue>, TDynamicProps = unknown> extends React.Component<ISingleValueInputElementWrapperProps<TValue, TComponentProps, TDynamicProps>, ISingleValueInputElementWrapperState<TValue, TDynamicProps>> implements IPresentation, IChangingPresentation<TValue>, IRestrictedPresentation, IDynamicPresentation<TDynamicProps> {
-    constructor(props: ISingleValueInputElementWrapperProps<TValue, TComponentProps, TDynamicProps>);
+export declare class SingleValueInputElementWrapper<TValue, TComponentProps, TDynamicProps> extends React.Component<ISingleValueInputElementWrapperProps<TValue, TComponentProps, TDynamicProps>, ISingleValueInputElementWrapperState<TValue, TDynamicProps>> implements IPresentation, IChangingPresentation<TValue>, IRestrictedPresentation, IDynamicPresentation<TDynamicProps> {
+    constructor(props: ISingleValueInputElementWrapperProps<TValue, ISingleValueInputElementProps<TValue> & TComponentProps, TDynamicProps>);
     startLoading: () => void;
     stopLoading: () => void;
     hide: () => void;
     show: () => void;
     update: (newValue: TValue) => void;
-    setError: (errorMessage: string) => void;
+    setError: (errorMessage: FormText) => void;
     changeDynamicProps: (dynamicProps: TDynamicProps) => void;
     render: () => JSX.Element;
     private renderInternalContent;

package/lib/SingleValueInputElements/InternalPresentationComponents/SingleValueInputElementWrapper.js

@@ -37,19 +37,24 @@ class SingleValueInputElementWrapper extends React.Component {
             this.setState({ dynamicProps: dynamicProps });
         };
         this.render = () => {
-            return (React.createElement(Presentations_1.PresentationRenderer, { isVisible: this.state.isVisible, isLoading: this.state.isLoading, renderInternalContent: this.renderInternalContent, renderLoadingIndicator: this.props.renderLoadingIndicator }));
+            const { isVisible, isLoading } = this.state;
+            const { loadingIndicator } = this.props;
+            return (React.createElement(Presentations_1.PresentationRenderer, { isVisible: isVisible, isLoading: isLoading, renderInternalContent: this.renderInternalContent, loadingIndicator: loadingIndicator }));
         };
         this.renderInternalContent = () => {
-            const { internalComponent: Component, componentProps } = this.props;
+            var _a;
+            const { internalComponent: Component, inputProps, operativeProps } = this.props;
             if (!Component)
                 return null;
-            return (React.createElement(Component, Object.assign({}, this.state.dynamicProps, componentProps, { value: this.state.value, errorMessage: this.state.errorMessage })));
+            const { renderErrors } = this.props;
+            const errorMessages = renderErrors ? this.state.errorMessage : null;
+            return (React.createElement(Component, Object.assign({ dynamicProps: (_a = this.state.dynamicProps) !== null && _a !== void 0 ? _a : {}, operativeProps: operativeProps }, inputProps, { value: this.state.value, errorMessage: errorMessages })));
         };
         this.state = {
             isLoading: props.isInitiallyLoading,
             isVisible: props.isInitiallyVisible,
-            errorMessage: (_a = props.componentProps) === null || _a === void 0 ? void 0 : _a.errorMessage,
-            value: (_b = props.componentProps) === null || _b === void 0 ? void 0 : _b.value,
+            errorMessage: (_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.errorMessage,
+            value: (_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.value,
             dynamicProps: props.initialDynamicProps
         };
     }

package/lib/SingleValueInputElements/NumberInputElement/INumberInputProps.d.ts

@@ -1,6 +1,5 @@
-import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-export interface INumberInputProps extends IBaseInputElementProps, IBaseInputElementDynamicProps {
+export interface INumberInputProps extends IBaseInputElementProps {
     handleDecimalValues?: boolean;
     min?: number;
     max?: number;

package/lib/SingleValueInputElements/NumberInputElement/NumberInput.d.ts

@@ -1,11 +1,15 @@
 import * as React from 'react';
+import { FormText } from '../../Components';
+import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
 import { INumberInputProps } from './INumberInputProps';
 interface INumberInputState {
     intermediateValue: string;
-    customWarning: string;
+    customWarning: FormText;
 }
-export declare class NumberInput extends React.Component<ISingleValueInputElementProps<number> & INumberInputProps, INumberInputState> {
+export declare class NumberInput extends React.Component<ISingleValueInputElementProps<number> & IOperativeProps<INumberInputProps> & IDynamicProps<IBaseInputElementDynamicProps>, INumberInputState> {
     state: INumberInputState;
     render(): JSX.Element;
     private handleUserInput;