@try-at-software/input-elements 1.2.0-alpha.26 → 1.2.0-alpha.30

package/lib/DynamicListInputElement/Menu/DynamicListMenu.js

@@ -2,7 +2,7 @@
 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");
 class DynamicListMenu extends React.Component {
     render() {
         var _a, _b, _c, _d;
@@ -18,18 +18,18 @@ class DynamicListMenu extends React.Component {
             text: ((_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.insertButtonConfig) === null || _d === void 0 ? void 0 : _d.label) || 'Insert'
         };
         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() }));
+        return (React.createElement(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() }));
     }
     getItems() {
         return {

package/lib/Presentations/PresentationRenderers.js

@@ -1,7 +1,7 @@
 "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() {
@@ -11,7 +11,7 @@ class PresentationRenderer extends React.Component {
         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 });
+            return React.createElement(react_1.Spinner, { size: react_1.SpinnerSize.medium });
         }
         if (!this.props.renderInternalContent)
             return null;

package/lib/SingleValueInputElements/DropdownInputElement/DropdownInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownInput = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const Utilities_1 = require("../../Utilities");
 class DropdownInput extends React.Component {
     render() {
@@ -11,8 +11,8 @@ class DropdownInput extends React.Component {
             return null;
         const normalizedOptions = Utilities_1.DropdownHelper.getNormalizedOptions(this.props.defaultOption, this.props.options);
         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, { "data-automationid": "dropdown-input", 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, 
+            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.label) && React.createElement(react_1.Label, { required: !!this.props.renderRequiredIndicator }, this.props.label),
+            React.createElement(react_1.Dropdown, { "data-automationid": "dropdown-input", 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 })));
     }

package/lib/SingleValueInputElements/DropdownInputElement/MultiValueDropdownInput.js

@@ -2,31 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiValueDropdownInput = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 const Utilities_1 = require("../../Utilities");
 class MultiValueDropdownInput extends React.Component {
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         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, { "data-automationid": "multi-value-dropdown-input", label: (_c = this.props) === null || _c === void 0 ? void 0 : _c.label, 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 ((_b = this.props) === null || _b === void 0 ? void 0 : _b.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 = this.props) === null || _c === void 0 ? void 0 : _c.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 }));
+        return (React.createElement(React.Fragment, null,
+            this.props.label && React.createElement(react_1.Label, { required: this.props.renderRequiredIndicator }, this.props.label),
+            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 ((_b = this.props) === null || _b === void 0 ? void 0 : _b.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 = this.props) === null || _c === void 0 ? void 0 : _c.onChange) && this.props.onChange(currentValues);
+                }, errorMessage: (_c = this.props) === null || _c === void 0 ? void 0 : _c.errorMessage, required: !!((_d = this.props) === null || _d === void 0 ? void 0 : _d.renderRequiredIndicator), placeholder: (_e = this.props) === null || _e === void 0 ? void 0 : _e.placeholder, 
+                // This value should never be `undefined`.
+                defaultSelectedKeys: ((_f = this.props) === null || _f === void 0 ? void 0 : _f.value) || [(_h = (_g = this.props) === null || _g === void 0 ? void 0 : _g.defaultOption) === null || _h === void 0 ? void 0 : _h.key] || null, disabled: (_j = this.props) === null || _j === void 0 ? void 0 : _j.isDisabled, multiSelect: true })));
     }
 }
 exports.MultiValueDropdownInput = MultiValueDropdownInput;

package/lib/SingleValueInputElements/ISingleValueInputElement.d.ts

@@ -23,5 +23,5 @@ export interface ISingleValueInputElement<TValue, TComponentProps = unknown, TDy
     changeDynamicProps<K extends keyof TDynamicProps>(dynamicProps: Pick<TDynamicProps, K>): void;
     subscribeToValueChange(subscription: ValueChangeSubscription<TValue>): void;
     subscribeToInitialValueChange(subscription: ValueChangeSubscription<TValue>): void;
-    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription<TValue>): void;
+    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription): void;
 }

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPersonaProps } from 'office-ui-fabric-react';
+import { IPersonaProps } from '@fluentui/react';
 import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IIdentityPickerProps } from './IIdentityPickerProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';

package/lib/SingleValueInputElements/IdentityPickerInputElement/IdentityPicker.js

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IdentityPicker = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 class IdentityPicker extends React.Component {
     render() {
         var _a;
         if (!this.props)
             return null;
         return (React.createElement(React.Fragment, null,
-            this.props.label && React.createElement(office_ui_fabric_react_1.Label, { required: this.props.renderRequiredIndicator }, this.props.label),
+            this.props.label && React.createElement(react_1.Label, { required: this.props.renderRequiredIndicator }, this.props.label),
             React.createElement("div", { "data-automationid": "identity-picker" },
-                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: {
+                React.createElement(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)));
+            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.errorMessage) && React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.warning }, this.props.errorMessage)));
     }
 }
 exports.IdentityPicker = IdentityPicker;

package/lib/SingleValueInputElements/NumberInputElement/NumberInput.js

@@ -1,7 +1,7 @@
 "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 delimiter = '.';
 class NumberInput extends React.Component {
@@ -18,30 +18,23 @@ class NumberInput extends React.Component {
         if (!this.props)
             return null;
         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, { "data-automationid": "number-input", styles: {
-                    input: {
-                        fontFamily: '"Segoe UI", "Segoe UI Web (West European)"',
-                        fontSize: 14,
-                        fontWeight: 400
-                    }
-                }, inputProps: {
+            this.props.label && React.createElement(react_1.Label, { required: this.props.renderRequiredIndicator }, this.props.label),
+            React.createElement(react_1.SpinButton, { "data-automationid": "number-input", 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;
+                    disabled: this.props.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 +43,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)));
+            !!((_b = this.props) === null || _b === void 0 ? void 0 : _b.errorMessage) && React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.warning }, this.props.errorMessage),
+            !!this.state.customWarning && React.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.warning }, this.state.customWarning)));
     }
     handleUserInput(value, intermediateValue) {
         const changeResult = this.ensureValueConsistency(value);
@@ -67,7 +60,7 @@ 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 };
+            return { warning: `The minimum value is ${minValue}`, newValue: undefined };
         if (!this.props.handleDecimalValues && value % 1 !== 0)
             return {
                 warning: 'Decimal values are not allowed',

package/lib/SingleValueInputElements/SingleValueInputElement.d.ts

@@ -21,7 +21,7 @@ export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicPr
     /** @inheritdoc */
     subscribeToInitialValueChange(subscription: ValueChangeSubscription<TValue>): void;
     /** @inheritdoc */
-    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription<TValue>): void;
+    subscribeToInvalidValueChange(subscription: InvalidValueChangeSubscription): void;
     /** @inheritdoc */
     protected setInternalValue(value: TValue, isInitial: boolean): void;
     /** @inheritdoc */

package/lib/SingleValueInputElements/TextInputElement/LongTextInput.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongTextInput = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 class LongTextInput extends React.Component {
     constructor() {
         super(...arguments);
@@ -19,8 +19,8 @@ class LongTextInput extends React.Component {
         if (!this.props)
             return null;
         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, { "data-automationid": "long-text-input", value: this.props.value || '', onChange: (_event, newValue) => {
+            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.label) && React.createElement(react_1.Label, { required: !!this.props.renderRequiredIndicator }, this.props.label),
+            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) {

package/lib/SingleValueInputElements/TextInputElement/TextInput.js

@@ -2,15 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 class TextInput extends React.Component {
     render() {
         var _a;
         if (!this.props)
             return null;
         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, { "data-automationid": "text-input", value: this.props.value || '', onChange: (_event, newValue) => {
+            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.label) && React.createElement(react_1.Label, { required: !!this.props.renderRequiredIndicator }, this.props.label),
+            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 })));
     }

package/lib/SingleValueInputElements/TimePickerInputElement/TimePicker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 const React = require("react");
-const office_ui_fabric_react_1 = require("office-ui-fabric-react");
+const react_1 = require("@fluentui/react");
 class TimePicker extends React.Component {
     constructor() {
         super(...arguments);
@@ -16,11 +16,11 @@ class TimePicker extends React.Component {
         if (!this.props)
             return null;
         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, { "data-automationid": "time-input", placeholder: this.props.placeholder, onSelectDate: this.onChange, textField: {
+            !!((_a = this.props) === null || _a === void 0 ? void 0 : _a.label) && React.createElement(react_1.Label, { required: !!this.props.renderRequiredIndicator }, this.props.label),
+            React.createElement(react_1.DatePicker, { "data-automationid": "time-input", 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 })));
+                }, showGoToToday: !!this.props.showGoToToday, formatDate: this.props.formatDate, firstDayOfWeek: this.props.startWeekOnSunday ? react_1.DayOfWeek.Sunday : react_1.DayOfWeek.Monday, isMonthPickerVisible: !!this.props.showMonthPicker, highlightSelectedMonth: !!this.props.showMonthPicker, value: this.props.value })));
     }
 }
 exports.TimePicker = TimePicker;

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/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) {
@@ -40,13 +40,13 @@ 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;
         }
     }

package/lib/Utilities/FormHelper.js

@@ -8,8 +8,14 @@ function getFormState(inputs) {
     let hasChanges = false;
     let index = 0;
     while ((isValid || !hasChanges) && index < inputs.length) {
-        isValid = isValid && inputs[index].isValid;
-        hasChanges = hasChanges || inputs[index].hasChanges;
+        const currentInput = inputs[index];
+        if (!currentInput) {
+            isValid = false;
+        }
+        else {
+            isValid = isValid && currentInput.isValid;
+            hasChanges = hasChanges || currentInput.hasChanges;
+        }
         index++;
     }
     return {

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@try-at-software/input-elements",
-    "version": "1.2.0-alpha.26",
+    "version": "1.2.0-alpha.30",
     "description": "A package providing different input elements that are extensible and easily configurable for your custom needs.",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "scripts": {
-        "start-dev": "npm run lint && webpack-dev-server --mode development --open",
+        "start-dev": "npm run lint && webpack serve --mode development --open",
         "lint": ".\\node_modules\\.bin\\eslint \"./src/**/*.{js,jsx,ts,tsx}\" && prettier --check \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
         "fix-code-style": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
         "test": "jest",
@@ -39,12 +39,11 @@
         "@types/enzyme": "3.10.8",
         "@types/enzyme-adapter-react-16": "1.0.6",
         "@types/jest": "26.0.23",
-        "@types/react": "17.0.8",
+        "@types/react": "17.0.34",
         "@types/react-beautiful-dnd": "13.0.0",
         "@types/react-dom": "17.0.5",
         "@typescript-eslint/eslint-plugin": "4.25.0",
         "@typescript-eslint/parser": "4.25.0",
-        "awesome-typescript-loader": "5.2.1",
         "copyfiles": "2.4.1",
         "css-loader": "5.2.6",
         "enzyme": "3.11.0",
@@ -57,25 +56,27 @@
         "html-webpack-plugin": "5.3.1",
         "jest": "27.0.1",
         "jest-each": "27.0.1",
+        "less": "4.1.2",
         "less-loader": "9.0.0",
+        "@fluentui/react": "8.41.0",
         "prettier": "2.3.0",
+        "react": "17.0.2",
         "react-dom": "17.0.2",
         "rimraf": "3.0.2",
         "source-map-loader": "3.0.0",
         "style-loader": "2.0.0",
         "ts-jest": "27.0.1",
+        "ts-loader": "9.2.6",
         "typescript": "4.3.2",
-        "webpack": "5.37.1",
-        "webpack-cli": "4.7.0",
-        "webpack-dev-server": "3.11.2",
-        "office-ui-fabric-react": "7.165.0",
-        "react": "16.13.1"
+        "webpack": "5.61.0",
+        "webpack-cli": "4.9.1",
+        "webpack-dev-server": "4.4.0"
     },
     "dependencies": {
         "react-beautiful-dnd": "13.1.0"
     },
     "peerDependencies": {
-        "office-ui-fabric-react": "7.x",
+        "@fluentui/react": ">=7.179.1",
         "react": ">=16.8.0"
     }
 }

package/lib/SingleValueInputElements/DependentInputElement/DependentInputElementInitializer.js

@@ -1,51 +0,0 @@
-// import { ISingleValueInputElement } from '../ISingleValueInputElement';
-// import { UpdateType } from '../../UpdateType';
-//
-// export class DependentInputElementInitializer {
-//     public static initializeDependency<TDependent, TPrincipal, TDependentProps = unknown, TPrincipalProps = unknown>(
-//         principal: ISingleValueInputElement<TPrincipal, TPrincipalProps>,
-//         dependent: ISingleValueInputElement<TDependent, TDependentProps>,
-//         onPrincipalValueChanged: (newValue: TPrincipal, doneCallback: () => void) => void,
-//         handleFalsyPrincipalValue?: () => void,
-//         handleInitialRender?: () => void
-//     ): void {
-//         if (!dependent || !principal || !onPrincipalValueChanged) return;
-//
-//         // If the dependent input element is required, this means that the principal should be required as well.
-//         if (!!dependent.configuration?.isRequired) {
-//             if (!principal.configuration) principal.configuration = { isRequired: true };
-//             else principal.configuration.isRequired = true;
-//         }
-//
-//         const originalUpdateFunction = principal.update;
-//         principal.update = (updateType: UpdateType): void => {
-//             if (!!originalUpdateFunction) originalUpdateFunction(updateType);
-//
-//             if (updateType === UpdateType.System) {
-//                 // Handle the system events - loading/ hiding an input element.
-//                 if (principal.isLoading || !principal.isVisible) dependent.hide();
-//                 else dependent.show();
-//             } else {
-//                 dependent.resetValue();
-//                 if (!!principal.value === false) {
-//                     // If the falsy value is handled explicitly, execute that callback.
-//                     // In every other case, hide the dependent component.
-//                     if (!!handleFalsyPrincipalValue) handleFalsyPrincipalValue();
-//                     else if (dependent.isVisible) dependent.hide();
-//                 } else {
-//                     // Ensure that the dependent input element is visible.
-//                     if (!dependent.isVisible) dependent.show();
-//
-//                     dependent.load((finish: () => void): void => {
-//                         onPrincipalValueChanged(principal.value, finish);
-//                     });
-//                 }
-//             }
-//         };
-//
-//         // If a callback to handle the initial render is passed, execute it.
-//         // Else, hide the input element.
-//         if (!!handleInitialRender) handleInitialRender();
-//         else dependent.hide();
-//     }
-// }

package/lib/SingleValueInputElements/DependentInputElement/index.js

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