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

package/lib/SingleValueInputElements/NumberInputElement/NumberInput.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const React = require("react");
+const Components_1 = require("../../Components");
 const delimiter = '.';
 class NumberInput extends React.Component {
     constructor() {
@@ -14,34 +15,28 @@ class NumberInput extends React.Component {
         };
     }
     render() {
-        var _a, _b;
+        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.SpinButton, { styles: {
-                    input: {
-                        fontFamily: '"Segoe UI", "Segoe UI Web (West European)"',
-                        fontSize: 14,
-                        fontWeight: 400
-                    }
-                }, inputProps: {
-                    autoFocus: this.props.autoFocus,
-                    placeholder: this.props.placeholder,
-                    disabled: this.props.isDisabled
-                }, value: (_a = this.state.intermediateValue) !== null && _a !== void 0 ? _a : '', onChange: (event) => {
-                    var _a;
-                    const value = NumberInput.normalizeData((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
-                    if (!value || isNaN(Number(value))) {
-                        this.setState({ intermediateValue: value });
-                        this.props.invalidateInput();
-                        return;
+            React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement(react_1.SpinButton, { "data-automationid": "number-input", inputProps: {
+                    autoFocus: !!operativeProps.autoFocus,
+                    placeholder: operativeProps.placeholder,
+                    disabled: !!dynamicProps.isDisabled,
+                    onChange: (event) => {
+                        const newValue = event.target.value;
+                        const value = NumberInput.normalizeData(newValue);
+                        if (!value || isNaN(Number(value))) {
+                            this.setState({ intermediateValue: value, customWarning: 'The provided value is not a valid number.' });
+                            this.props.invalidateInput();
+                            return;
+                        }
+                        const numericValue = NumberInput.getNumericValue(value);
+                        this.handleUserInput(numericValue, value);
                     }
-                    const numericValue = NumberInput.getNumericValue(value);
-                    this.handleUserInput(numericValue, value);
-                }, 
-                // We should obligatorily define this function, because there will be a problem with incrementing/decrementing a newly typed value.
-                onValidate: () => this.state.intermediateValue, onIncrement: (value) => {
+                }, value: (_a = this.state.intermediateValue) !== null && _a !== void 0 ? _a : '', onIncrement: (value) => {
                     let numericValue = NumberInput.getNumericValue(value);
                     numericValue += this.getStep();
                     this.handleUserInput(numericValue, numericValue.toString());
@@ -50,8 +45,8 @@ class NumberInput extends React.Component {
                     numericValue -= this.getStep();
                     this.handleUserInput(numericValue, numericValue.toString());
                 } }),
-            !!((_b = this.props) === null || _b === void 0 ? void 0 : _b.errorMessage) && React.createElement(office_ui_fabric_react_1.MessageBar, { messageBarType: office_ui_fabric_react_1.MessageBarType.warning }, this.props.errorMessage),
-            !!this.state.customWarning && React.createElement(office_ui_fabric_react_1.MessageBar, { messageBarType: office_ui_fabric_react_1.MessageBarType.warning }, this.state.customWarning)));
+            React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.warning }),
+            React.createElement(Components_1.ErrorRenderer, { error: this.state.customWarning, messageBarType: react_1.MessageBarType.warning })));
     }
     handleUserInput(value, intermediateValue) {
         const changeResult = this.ensureValueConsistency(value);
@@ -67,8 +62,9 @@ class NumberInput extends React.Component {
             return { warning: `The maximum value is ${maxValue}`, newValue: undefined };
         const minValue = this.getMinValue();
         if (value < minValue)
-            return { warning: `The minimum value is ${maxValue}`, newValue: undefined };
-        if (!this.props.handleDecimalValues && value % 1 !== 0)
+            return { warning: `The minimum value is ${minValue}`, newValue: undefined };
+        const { operativeProps } = this.props;
+        if (!operativeProps.handleDecimalValues && value % 1 !== 0)
             return {
                 warning: 'Decimal values are not allowed',
                 newValue: undefined
@@ -76,16 +72,19 @@ class NumberInput extends React.Component {
         return { warning: '', newValue: value };
     }
     getMaxValue() {
-        var _a, _b;
-        return (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.max) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER;
+        var _a;
+        const { operativeProps } = this.props;
+        return (_a = operativeProps.max) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER;
     }
     getMinValue() {
-        var _a, _b;
-        return (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : Number.MIN_SAFE_INTEGER;
+        var _a;
+        const { operativeProps } = this.props;
+        return (_a = operativeProps.min) !== null && _a !== void 0 ? _a : Number.MIN_SAFE_INTEGER;
     }
     getStep() {
-        var _a, _b;
-        return (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.step) !== null && _b !== void 0 ? _b : 1;
+        var _a;
+        const { operativeProps } = this.props;
+        return (_a = operativeProps.step) !== null && _a !== void 0 ? _a : 1;
     }
     static getNumericValue(value) {
         const number = Number(NumberInput.normalizeData(value));

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

package/lib/SingleValueInputElements/SingleValueInputElement.d.ts

@@ -3,24 +3,28 @@ import { ExtendedInputElement } from '../ExtendedInputElement';
 import { UpdateCallback } from '../IInputElement';
 import { ValidationRule } from '../IValueInputElement';
 import { InvalidValueChangeSubscription, ValueChangeSubscription } from '../Subscriptions';
+import { IDynamicProps } from './IDynamicProps';
 import { SingleValueInputElementWrapper } from './InternalPresentationComponents/SingleValueInputElementWrapper';
+import { IOperativeProps } from './IOperativeProps';
 import { ISingleValueInputElementConfiguration } from './ISingleInputElementConfiguration';
 import { ISingleValueInputElement } from './ISingleValueInputElement';
 import { ISingleValueInputElementProps } from './ISingleValueInputElementProps';
-declare type WrapperType<TValue, TComponentProps, TRenderProps> = SingleValueInputElementWrapper<TValue, ISingleValueInputElementProps<TValue> & TComponentProps & TRenderProps>;
-export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicProps = unknown> extends ExtendedInputElement<TValue, WrapperType<TValue, TComponentProps, TDynamicProps>> implements ISingleValueInputElement<TValue, TComponentProps, TDynamicProps> {
+export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicProps = unknown> extends ExtendedInputElement<TValue, SingleValueInputElementWrapper<TValue, TComponentProps, TDynamicProps>> implements ISingleValueInputElement<TValue, TComponentProps, TDynamicProps> {
     private readonly _configuration;
     private readonly valueChangeSubscriptions;
+    private readonly initialValueChangeSubscriptions;
     private readonly invalidValueChangeSubscriptions;
     private _dynamicProps;
     private _isInvalidated;
-    constructor(config: ISingleValueInputElementConfiguration<TValue>, component: React.ComponentType<ISingleValueInputElementProps<TValue> & TComponentProps & TDynamicProps>, props: TComponentProps, update: UpdateCallback, ...validationRules: ValidationRule<TValue>[]);
+    constructor(config: ISingleValueInputElementConfiguration<TValue>, component: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>, props: TComponentProps, update: UpdateCallback, ...validationRules: ValidationRule<TValue>[]);
     /** @inheritdoc */
     subscribeToValueChange(subscription: ValueChangeSubscription<TValue>): void;
     /** @inheritdoc */
-    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription<TValue>): void;
+    subscribeToInitialValueChange(subscription: ValueChangeSubscription<TValue>): void;
     /** @inheritdoc */
-    protected setInternalValue(value: TValue): void;
+    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription): void;
+    /** @inheritdoc */
+    protected setInternalValue(value: TValue, isInitial: boolean): void;
     /** @inheritdoc */
     get hasChanges(): boolean;
     /** @inheritdoc */
@@ -30,18 +34,18 @@ export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicPr
     /** @inheritdoc */
     get isValid(): boolean;
     /** @inheritdoc */
-    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & TComponentProps & TDynamicProps>;
+    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>;
     /** @inheritdoc */
     componentProps: TComponentProps;
     /** @inheritdoc */
     getDynamicProps(): TDynamicProps;
     /** @inheritdoc */
-    protected renderComponent(renderData?: TDynamicProps): JSX.Element;
+    protected renderComponent(): JSX.Element;
     /** @inheritdoc */
     changeDynamicProps<K extends keyof TDynamicProps>(dynamicProps: Pick<TDynamicProps, K>): void;
     /** @inheritdoc */
     validate(): void;
+    private setError;
     private valueIsValid;
     private invalidateInput;
 }
-export {};

package/lib/SingleValueInputElements/SingleValueInputElement.js

@@ -9,16 +9,24 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
     constructor(config, component, props, update, ...validationRules) {
         super(update);
         this.valueChangeSubscriptions = [];
+        this.initialValueChangeSubscriptions = [];
         this.invalidValueChangeSubscriptions = [];
         this._isInvalidated = false;
+        this.setError = (errorMessage) => {
+            this.errorMessage = errorMessage;
+            if (this._componentRef.current)
+                this._componentRef.current.setError(errorMessage);
+        };
         this.valueIsValid = () => {
             var _a;
             if (!!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.comparator))
                 return this._configuration.comparator.isValid(this.value);
             return !!this.value;
         };
-        this.invalidateInput = () => {
+        this.invalidateInput = (options) => {
             this._isInvalidated = true;
+            if (options.errorMessage)
+                this.setError(options.errorMessage);
             this.updateInternally();
             this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
         };
@@ -39,13 +47,19 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         this.valueChangeSubscriptions.push(subscription);
     }
     /** @inheritdoc */
+    subscribeToInitialValueChange(subscription) {
+        if (!subscription)
+            return;
+        this.initialValueChangeSubscriptions.push(subscription);
+    }
+    /** @inheritdoc */
     subscribeToInvalidValueChange(subscription) {
         if (!subscription)
             return;
         this.invalidValueChangeSubscriptions.push(subscription);
     }
     /** @inheritdoc */
-    setInternalValue(value) {
+    setInternalValue(value, isInitial) {
         var _a;
         if (this._isInvalidated)
             this._isInvalidated = false;
@@ -53,8 +67,12 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         if ((_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.current)
             this._componentRef.current.update(value);
         this.validate();
-        if (this.isValid)
-            this.valueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value));
+        if (this.isValid) {
+            if (isInitial)
+                this.initialValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value));
+            else
+                this.valueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value));
+        }
         else
             this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
     }
@@ -69,6 +87,8 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
     get isValid() {
         if (this._isInvalidated)
             return false;
+        if (this.isLoading)
+            return false;
         if (this.errorMessage && this.errorMessage.length > 0)
             return false;
         return (!!this._configuration && !this._configuration.isRequired) || this._valueIsSet || this._initialValueIsSet;
@@ -78,11 +98,18 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         return this._dynamicProps;
     }
     /** @inheritdoc */
-    renderComponent(renderData) {
+    renderComponent() {
         var _a, _b, _c, _d, _e, _f;
         return (React.createElement("div", { className: Utilities_1.combineClasses('tas-input-element', (_a = this._configuration) === null || _a === void 0 ? void 0 : _a.className) },
             React.createElement("div", { className: "tas-input-element-content" },
-                React.createElement(SingleValueInputElementWrapper_1.SingleValueInputElementWrapper, { internalComponent: this.componentToRender, renderLoadingIndicator: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderLoadingComponent, componentProps: Object.assign(Object.assign(Object.assign({}, this.componentProps), renderData), { label: (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.label, value: this.value, renderRequiredIndicator: ((_d = this._configuration) === null || _d === void 0 ? void 0 : _d.renderRequiredIndicator) && ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.isRequired), errorMessage: ((_f = this._configuration) === null || _f === void 0 ? void 0 : _f.renderErrors) && this.errorMessage, onChange: (newValue) => this.setValue(newValue), invalidateInput: this.invalidateInput }), initialDynamicProps: this._dynamicProps, isInitiallyLoading: this.isLoading, isInitiallyVisible: this.isVisible, ref: this._componentRef }))));
+                React.createElement(SingleValueInputElementWrapper_1.SingleValueInputElementWrapper, { internalComponent: this.componentToRender, renderErrors: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderErrors, loadingIndicator: (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.loadingComponent, inputProps: {
+                        label: (_d = this._configuration) === null || _d === void 0 ? void 0 : _d.label,
+                        value: this.value,
+                        renderRequiredIndicator: ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.renderRequiredIndicator) && ((_f = this._configuration) === null || _f === void 0 ? void 0 : _f.isRequired),
+                        errorMessage: this.errorMessage,
+                        onChange: (newValue) => this.setValue(newValue),
+                        invalidateInput: this.invalidateInput
+                    }, operativeProps: this.componentProps, initialDynamicProps: this._dynamicProps, isInitiallyLoading: this.isLoading, isInitiallyVisible: this.isVisible, ref: this._componentRef }))));
     }
     /** @inheritdoc */
     changeDynamicProps(dynamicProps) {
@@ -111,9 +138,7 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
                     errorMessage = rule(this.value);
             });
         }
-        this.errorMessage = errorMessage;
-        if (this._componentRef.current)
-            this._componentRef.current.setError(errorMessage);
+        this.setError(errorMessage);
     }
 }
 exports.SingleValueInputElement = SingleValueInputElement;

package/lib/SingleValueInputElements/TextInputElement/EmptyValidationRules.d.ts

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

package/lib/SingleValueInputElements/TextInputElement/ITextInputProps.d.ts

@@ -1,5 +1,4 @@
-import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-export interface ITextInputProps extends IBaseInputElementProps, IBaseInputElementDynamicProps {
+export interface ITextInputProps extends IBaseInputElementProps {
     contentType?: string;
 }

package/lib/SingleValueInputElements/TextInputElement/LengthValidationRules.d.ts

@@ -1,3 +1,4 @@
+import { FormText } from '../../Components';
 import { ValidationRule } from '../../IValueInputElement';
-export declare function restrictMinimumLength(minLength: number, errorMessage?: string): ValidationRule<string>;
-export declare function restrictMaximumLength(maxLength: number, errorMessage?: string): ValidationRule<string>;
+export declare function restrictMinimumLength(minLength: number, errorMessage?: FormText): ValidationRule<string>;
+export declare function restrictMaximumLength(maxLength: number, errorMessage?: FormText): ValidationRule<string>;

package/lib/SingleValueInputElements/TextInputElement/LongTextInput.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
 import { ITextInputProps } from './ITextInputProps';
 export interface ILongTextInputState {
     isMultiline: boolean;
 }
-export declare class LongTextInput extends React.Component<ISingleValueInputElementProps<string> & ITextInputProps, ILongTextInputState> {
+export declare class LongTextInput extends React.Component<ISingleValueInputElementProps<string> & IOperativeProps<ITextInputProps> & IDynamicProps<IBaseInputElementDynamicProps>, ILongTextInputState> {
     /**
      * The number of characters after which the text input is changed to a multiline textbox.
      */

package/lib/SingleValueInputElements/TextInputElement/LongTextInput.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongTextInput = 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 Components_2 = require("../../Components");
 class LongTextInput extends React.Component {
     constructor() {
         super(...arguments);
@@ -15,19 +17,21 @@ class LongTextInput extends React.Component {
         };
     }
     render() {
-        var _a;
         if (!this.props)
             return null;
+        const { dynamicProps, operativeProps } = this.props;
+        const { isDisabled } = dynamicProps;
+        const { autoFocus, contentType, placeholder } = operativeProps;
         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.TextField, { value: this.props.value || '', onChange: (_event, newValue) => {
+            React.createElement(Components_2.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement(react_1.TextField, { "data-automationid": "long-text-input", value: this.props.value || '', onChange: (_event, newValue) => {
                     // Dynamically change the 'isMultiline' state property.
                     const isMultiline = newValue.length > this.multilineThreshold;
                     if (this.state.isMultiline !== isMultiline) {
                         this.setState({ isMultiline: isMultiline });
                     }
                     this.props.onChange(newValue);
-                }, errorMessage: this.props.errorMessage, type: this.props.contentType, placeholder: this.props.placeholder, multiline: this.state.isMultiline, autoAdjustHeight: this.state.isMultiline, validateOnFocusOut: true, disabled: this.props.isDisabled })));
+                }, errorMessage: Components_1.materializeErrorMessage(this.props.errorMessage), type: contentType, placeholder: placeholder, multiline: this.state.isMultiline, autoAdjustHeight: this.state.isMultiline, validateOnFocusOut: true, disabled: isDisabled, autoFocus: autoFocus })));
     }
 }
 exports.LongTextInput = LongTextInput;

package/lib/SingleValueInputElements/TextInputElement/PathValidationRules.d.ts

@@ -1,3 +1,4 @@
+import { FormText } from '../../Components';
 import { ValidationRule } from '../../IValueInputElement';
 export declare const invalidCharacters: string[];
-export declare function restrictValidPath(errorMessage?: string): ValidationRule<string>;
+export declare function restrictValidPath(errorMessage?: FormText): ValidationRule<string>;

package/lib/SingleValueInputElements/TextInputElement/TextInput.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
+import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
 import { ITextInputProps } from './ITextInputProps';
-export declare class TextInput extends React.Component<ISingleValueInputElementProps<string> & ITextInputProps> {
+export declare class TextInput extends React.Component<ISingleValueInputElementProps<string> & IOperativeProps<ITextInputProps> & IDynamicProps<IBaseInputElementDynamicProps>> {
     render(): JSX.Element;
 }

package/lib/SingleValueInputElements/TextInputElement/TextInput.js

@@ -1,18 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = 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 TextInput extends React.Component {
     render() {
-        var _a;
         if (!this.props)
             return null;
+        const { dynamicProps, operativeProps } = this.props;
+        const { isDisabled } = dynamicProps;
+        const { autoFocus, contentType, placeholder } = operativeProps;
         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.TextField, { value: this.props.value || '', onChange: (_event, newValue) => {
+            React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement(react_1.TextField, { "data-automationid": "text-input", value: this.props.value || '', onChange: (_event, newValue) => {
                     this.props.onChange(newValue);
-                }, errorMessage: this.props.errorMessage, type: this.props.contentType, placeholder: this.props.placeholder, validateOnFocusOut: true, disabled: this.props.isDisabled, autoFocus: this.props.autoFocus })));
+                }, errorMessage: Components_1.materializeErrorMessage(this.props.errorMessage), type: contentType, placeholder: placeholder, validateOnFocusOut: true, disabled: isDisabled, autoFocus: autoFocus })));
     }
 }
 exports.TextInput = TextInput;

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

package/lib/SingleValueInputElements/TimePickerInputElement/ITimePickerProps.d.ts

@@ -1,6 +1,7 @@
-import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
-export interface ITimePickerProps extends IBaseInputElementProps, IBaseInputElementDynamicProps {
+export interface ITimePickerProps extends IBaseInputElementProps {
+    inputClassName?: string;
+    clearButtonClassName?: string;
     formatDate?: (date: Date) => string;
     showGoToToday?: boolean;
     showMonthPicker?: boolean;

package/lib/SingleValueInputElements/TimePickerInputElement/TimePicker.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
+import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
+import { IDynamicProps } from '../IDynamicProps';
+import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
 import { ITimePickerProps } from './ITimePickerProps';
-export declare class TimePicker extends React.Component<ISingleValueInputElementProps<Date> & ITimePickerProps> {
+import './TimePicker.less';
+export declare class TimePicker extends React.Component<ISingleValueInputElementProps<Date> & IOperativeProps<ITimePickerProps> & IDynamicProps<IBaseInputElementDynamicProps>> {
     render(): JSX.Element;
     private onChange;
+    private clearDate;
 }

package/lib/SingleValueInputElements/TimePickerInputElement/TimePicker.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = 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");
+require("./TimePicker.less");
 class TimePicker extends React.Component {
     constructor() {
         super(...arguments);
@@ -10,17 +13,23 @@ class TimePicker extends React.Component {
             var _a;
             (_a = this.props) === null || _a === void 0 ? void 0 : _a.onChange(newValue);
         };
+        this.clearDate = () => {
+            this.onChange(null);
+        };
     }
     render() {
-        var _a;
         if (!this.props)
             return null;
+        const { dynamicProps, operativeProps } = this.props;
+        const clearButtonClassName = Utilities_1.combineClasses('q-clear-button', operativeProps.clearButtonClassName);
         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.DatePicker, { placeholder: this.props.placeholder, onSelectDate: this.onChange, textField: {
-                    errorMessage: this.props.errorMessage,
-                    disabled: this.props.isDisabled
-                }, showGoToToday: !!this.props.showGoToToday, formatDate: this.props.formatDate, firstDayOfWeek: this.props.startWeekOnSunday ? office_ui_fabric_react_1.DayOfWeek.Sunday : office_ui_fabric_react_1.DayOfWeek.Monday, isMonthPickerVisible: !!this.props.showMonthPicker, highlightSelectedMonth: !!this.props.showMonthPicker, value: this.props.value })));
+            React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
+            React.createElement(react_1.DatePicker, { "data-automationid": "time-input", placeholder: operativeProps.placeholder, onSelectDate: this.onChange, textField: {
+                    onRenderSuffix: () => React.createElement(Components_1.ClearButton, { onClick: this.clearDate, className: clearButtonClassName }),
+                    inputClassName: operativeProps.inputClassName,
+                    errorMessage: Components_1.materializeErrorMessage(this.props.errorMessage),
+                    disabled: dynamicProps.isDisabled
+                }, showGoToToday: !!operativeProps.showGoToToday, formatDate: operativeProps.formatDate, firstDayOfWeek: !!operativeProps.startWeekOnSunday ? react_1.DayOfWeek.Sunday : react_1.DayOfWeek.Monday, isMonthPickerVisible: !!operativeProps.showMonthPicker, highlightSelectedMonth: !!operativeProps.showMonthPicker, value: this.props.value })));
     }
 }
 exports.TimePicker = TimePicker;

package/lib/SingleValueInputElements/TimePickerInputElement/TimePicker.less

@@ -0,0 +1,28 @@
+.ms-TextField-suffix {
+    padding: 0;
+    background: none;
+}
+
+button.q-clear-button i {
+    font-size: 12px;
+    color: rgb(96, 94, 92);
+}
+
+.q-clear-button {
+    padding: 0.16em 0.3em 0 0;
+    min-width: 1.2em;
+    border: none;
+    height: 1.8em;
+    margin: 0 auto;
+}
+
+.q-clear-button:hover {
+    background-color: white;
+}
+
+// This is required because we need to display the calendar icon
+// in the date input elements right before any other icon on the right.
+div[data-automationid='time-input'] i[data-icon-name='Calendar'] {
+    position: relative;
+    right: 0;
+}

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

package/lib/SingleValueInputElements/index.d.ts

@@ -2,6 +2,8 @@ export * from './ISingleInputElementConfiguration';
 export * from './ISingleValueInputElement';
 export * from './ISingleValueInputElementProps';
 export * from './IBaseInputElementProps';
+export * from './IDynamicProps';
+export * from './IOperativeProps';
 export * from './IBaseInputElementDynamicProps';
 export * from './SingleValueInputElement';
 export * from './Comparators/index';

package/lib/SingleValueInputElements/index.js

@@ -7,13 +7,15 @@ 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("./ISingleInputElementConfiguration"), exports);
 __exportStar(require("./ISingleValueInputElement"), exports);
 __exportStar(require("./ISingleValueInputElementProps"), exports);
 __exportStar(require("./IBaseInputElementProps"), exports);
+__exportStar(require("./IDynamicProps"), exports);
+__exportStar(require("./IOperativeProps"), exports);
 __exportStar(require("./IBaseInputElementDynamicProps"), exports);
 __exportStar(require("./SingleValueInputElement"), exports);
 __exportStar(require("./Comparators/index"), exports);

package/lib/Subscriptions/ValueChangeSubscription.d.ts

@@ -1,2 +1,2 @@
 export declare type ValueChangeSubscription<TValue> = (newValue: TValue) => void;
-export declare type InvalidValueChangeSubscription<TValue> = () => void;
+export declare type InvalidValueChangeSubscription = () => void;

package/lib/Subscriptions/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("./ValueChangeSubscription"), exports);

package/lib/Utilities/DropdownHelper.d.ts

@@ -1,4 +1,4 @@
-import { IDropdownOption } from 'office-ui-fabric-react';
+import { IDropdownOption } from '@fluentui/react';
 import { IDropdownInputOption } from '../SingleValueInputElements';
 export declare class DropdownHelper {
     static getNormalizedOptions(defaultOption: IDropdownInputOption, allOptions: IDropdownInputOption[]): IDropdownOption[];

package/lib/Utilities/DropdownHelper.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownHelper = void 0;
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const SingleValueInputElements_1 = require("../SingleValueInputElements");
 class DropdownHelper {
     static getNormalizedOptions(defaultOption, allOptions) {
@@ -14,7 +14,7 @@ class DropdownHelper {
             allOptions.forEach((o) => {
                 if (!o)
                     return;
-                const newOption = Object.assign(Object.assign({}, DropdownHelper.toNormalizedDropdownOption(o)), { selected: false });
+                const newOption = this.toNormalizedDropdownOption(o);
                 options.push(newOption);
             });
         return options;
@@ -40,19 +40,20 @@ DropdownHelper.toNormalizedDropdownOption = (inputOption) => {
     if (inputOption.type !== undefined) {
         switch (inputOption.type) {
             case SingleValueInputElements_1.DropdownOptionType.Normal:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Normal;
+                itemType = react_1.SelectableOptionMenuItemType.Normal;
                 break;
             case SingleValueInputElements_1.DropdownOptionType.Divider:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Divider;
+                itemType = react_1.SelectableOptionMenuItemType.Divider;
                 break;
             case SingleValueInputElements_1.DropdownOptionType.Header:
-                itemType = office_ui_fabric_react_1.SelectableOptionMenuItemType.Header;
+                itemType = react_1.SelectableOptionMenuItemType.Header;
                 break;
         }
     }
     return {
         text: inputOption.text,
         key: inputOption.key,
-        itemType: itemType
+        itemType: itemType,
+        disabled: !!inputOption.disabled
     };
 };