@try-at-software/input-elements 1.2.0-beta.9 → 1.2.2

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

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import { FormText } from '../../Components';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
 import { IDynamicProps } from '../IDynamicProps';
 import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
+import { IDropdownInputConfiguration } from './IDropdownInputConfiguration';
 import { IDropdownInputProps } from './IDropdownInputProps';
 import { IFluentUiDropdownInputProps } from './IFluentUiDropdownInputProps';
-interface IDropdownInputStyles {
-    automaticHeight?: boolean;
-}
-interface ISingleValueDropdownInputProps extends ISingleValueInputElementProps<string>, IOperativeProps<IBaseInputElementProps>, IDynamicProps<IDropdownInputProps & IFluentUiDropdownInputProps> {
-    consistencyErrorMessage?: FormText;
-    styles?: IDropdownInputStyles;
+interface ISingleValueDropdownInputProps extends ISingleValueInputElementProps<string>, IDropdownInputConfiguration, IOperativeProps<IBaseInputElementProps>, IDynamicProps<IDropdownInputProps & IFluentUiDropdownInputProps> {
 }
 export declare const DropdownInput: React.MemoExoticComponent<(props: ISingleValueDropdownInputProps) => JSX.Element>;
 export {};

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

@@ -0,0 +1,8 @@
+import { FormText } from '../../Components';
+export interface IDropdownInputStyles {
+    automaticHeight?: boolean;
+}
+export interface IDropdownInputConfiguration {
+    consistencyErrorMessage?: FormText;
+    styles?: IDropdownInputStyles;
+}

package/lib/SingleValueInputElements/DropdownInputElement/IDropdownInputConfiguration.js

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

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

@@ -0,0 +1,4 @@
+import { IDropdownInputProps } from './IDropdownInputProps';
+export interface IMultiValueDropdownInputProps extends IDropdownInputProps {
+    multiSelectDelimiter?: string;
+}

package/lib/SingleValueInputElements/DropdownInputElement/IMultiValueDropdownInputProps.js

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

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

@@ -3,7 +3,8 @@ import { IBaseInputElementProps } from '../IBaseInputElementProps';
 import { IDynamicProps } from '../IDynamicProps';
 import { IOperativeProps } from '../IOperativeProps';
 import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps';
-import { IDropdownInputProps } from './IDropdownInputProps';
-export declare class MultiValueDropdownInput extends React.Component<ISingleValueInputElementProps<string[]> & IOperativeProps<IBaseInputElementProps> & IDynamicProps<IDropdownInputProps>> {
+import { IMultiValueDropdownInputProps } from './IMultiValueDropdownInputProps';
+export declare class MultiValueDropdownInput extends React.Component<ISingleValueInputElementProps<string[]> & IOperativeProps<IBaseInputElementProps> & IDynamicProps<IMultiValueDropdownInputProps>> {
     render(): JSX.Element;
+    private handleChange;
 }

package/lib/SingleValueInputElements/DropdownInputElement/MultiValueDropdownInput.js

@@ -6,6 +6,26 @@ const React = require("react");
 const Components_1 = require("../../Components");
 const Utilities_1 = require("../../Utilities");
 class MultiValueDropdownInput extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleChange = (_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);
+        };
+    }
     render() {
         var _a;
         if (!this.props)
@@ -14,25 +34,9 @@ class MultiValueDropdownInput extends React.Component {
         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, 
+            React.createElement(react_1.Dropdown, { "data-automationid": "multi-value-dropdown-input", options: normalizedOptions, onChange: this.handleChange, 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 }),
+                defaultSelectedKeys: this.props.value || [(_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key] || null, disabled: dynamicProps.isDisabled, multiSelect: true, multiSelectDelimiter: dynamicProps.multiSelectDelimiter }),
             React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.error })));
     }
 }

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

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

package/lib/SingleValueInputElements/DropdownInputElement/index.js

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./DropdownInput"), exports);
+__exportStar(require("./IDropdownInputConfiguration"), exports);
 __exportStar(require("./IDropdownInputOption"), exports);
 __exportStar(require("./IDropdownInputProps"), exports);
 __exportStar(require("./IFluentUiDropdownInputProps"), exports);

package/lib/SingleValueInputElements/SingleValueInputElement.d.ts

@@ -9,14 +9,14 @@ import { IOperativeProps } from './IOperativeProps';
 import { ISingleValueInputElementConfiguration } from './ISingleInputElementConfiguration';
 import { ISingleValueInputElement } from './ISingleValueInputElement';
 import { ISingleValueInputElementProps } from './ISingleValueInputElementProps';
-export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicProps = unknown> extends ExtendedInputElement<TValue, SingleValueInputElementWrapper<TValue, TComponentProps, TDynamicProps>> implements ISingleValueInputElement<TValue, TComponentProps, TDynamicProps> {
+export declare class SingleValueInputElement<TValue, TOperativeProps, TDynamicProps = unknown> extends ExtendedInputElement<TValue, SingleValueInputElementWrapper<TValue, TOperativeProps, TDynamicProps>> implements ISingleValueInputElement<TValue, TOperativeProps, 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> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>, props: TComponentProps, update: UpdateCallback, ...validationRules: ValidationRule<TValue>[]);
+    constructor(config: ISingleValueInputElementConfiguration<TValue>, component: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TOperativeProps> & IDynamicProps<TDynamicProps>>, props: TOperativeProps, update: UpdateCallback, ...validationRules: ValidationRule<TValue>[]);
     /** @inheritdoc */
     subscribeToValueChange(subscription: ValueChangeSubscription<TValue>): void;
     /** @inheritdoc */
@@ -34,9 +34,9 @@ export declare class SingleValueInputElement<TValue, TComponentProps, TDynamicPr
     /** @inheritdoc */
     get isValid(): boolean;
     /** @inheritdoc */
-    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TComponentProps> & IDynamicProps<TDynamicProps>>;
+    readonly componentToRender: React.ComponentType<ISingleValueInputElementProps<TValue> & IOperativeProps<TOperativeProps> & IDynamicProps<TDynamicProps>>;
     /** @inheritdoc */
-    componentProps: TComponentProps;
+    componentProps: TOperativeProps;
     /** @inheritdoc */
     getDynamicProps(): TDynamicProps;
     /** @inheritdoc */

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

@@ -0,0 +1,5 @@
+import { ITextInputProps } from './ITextInputProps';
+export interface ILongTextInputProps extends ITextInputProps {
+    autoAdjustHeight?: boolean;
+    resizable?: boolean;
+}

package/lib/SingleValueInputElements/TextInputElement/ILongTextInputProps.js

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

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

@@ -3,15 +3,8 @@ 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> & IOperativeProps<ITextInputProps> & IDynamicProps<IBaseInputElementDynamicProps>, ILongTextInputState> {
-    /**
-     * The number of characters after which the text input is changed to a multiline textbox.
-     */
-    private multilineThreshold;
-    state: ILongTextInputState;
+import { ILongTextInputProps } from './ILongTextInputProps';
+export declare class LongTextInput extends React.Component<ISingleValueInputElementProps<string> & IOperativeProps<ILongTextInputProps> & IDynamicProps<IBaseInputElementDynamicProps>> {
     render(): JSX.Element;
+    private handleChange;
 }

package/lib/SingleValueInputElements/TextInputElement/LongTextInput.js

@@ -8,12 +8,9 @@ const Components_2 = require("../../Components");
 class LongTextInput extends React.Component {
     constructor() {
         super(...arguments);
-        /**
-         * The number of characters after which the text input is changed to a multiline textbox.
-         */
-        this.multilineThreshold = 70;
-        this.state = {
-            isMultiline: false
+        this.handleChange = (_event, newValue) => {
+            const { onChange } = this.props;
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
         };
     }
     render() {
@@ -21,17 +18,10 @@ class LongTextInput extends React.Component {
             return null;
         const { dynamicProps, operativeProps } = this.props;
         const { isDisabled } = dynamicProps;
-        const { autoFocus, contentType, placeholder } = operativeProps;
+        const { autoAdjustHeight, autoFocus, contentType, placeholder, resizable } = operativeProps;
         return (React.createElement(React.Fragment, null,
             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: Components_1.materializeErrorMessage(this.props.errorMessage), type: contentType, placeholder: placeholder, multiline: this.state.isMultiline, autoAdjustHeight: this.state.isMultiline, validateOnFocusOut: true, disabled: isDisabled, autoFocus: autoFocus })));
+            React.createElement(react_1.TextField, { "data-automationid": "long-text-input", value: this.props.value || '', onChange: this.handleChange, errorMessage: Components_1.materializeErrorMessage(this.props.errorMessage), type: contentType, placeholder: placeholder, autoAdjustHeight: autoAdjustHeight, resizable: resizable, disabled: isDisabled, autoFocus: autoFocus, validateOnFocusOut: true, multiline: true })));
     }
 }
 exports.LongTextInput = LongTextInput;

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

@@ -6,4 +6,5 @@ import { ISingleValueInputElementProps } from '../ISingleValueInputElementProps'
 import { ITextInputProps } from './ITextInputProps';
 export declare class TextInput extends React.Component<ISingleValueInputElementProps<string> & IOperativeProps<ITextInputProps> & IDynamicProps<IBaseInputElementDynamicProps>> {
     render(): JSX.Element;
+    private handleChange;
 }

package/lib/SingleValueInputElements/TextInputElement/TextInput.js

@@ -5,6 +5,13 @@ const react_1 = require("@fluentui/react");
 const React = require("react");
 const Components_1 = require("../../Components");
 class TextInput extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.handleChange = (_event, newValue) => {
+            const { onChange } = this.props;
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        };
+    }
     render() {
         if (!this.props)
             return null;
@@ -13,9 +20,7 @@ class TextInput extends React.Component {
         const { autoFocus, contentType, placeholder } = operativeProps;
         return (React.createElement(React.Fragment, null,
             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: Components_1.materializeErrorMessage(this.props.errorMessage), type: contentType, placeholder: placeholder, validateOnFocusOut: true, disabled: isDisabled, autoFocus: autoFocus })));
+            React.createElement(react_1.TextField, { "data-automationid": "text-input", value: this.props.value || '', onChange: this.handleChange, 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.d.ts

@@ -1,4 +1,5 @@
 export * from './EmptyValidationRules';
+export * from './ILongTextInputProps';
 export * from './ITextInputProps';
 export * from './LengthValidationRules';
 export * from './LongTextInput';

package/lib/SingleValueInputElements/TextInputElement/index.js

@@ -11,6 +11,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./EmptyValidationRules"), exports);
+__exportStar(require("./ILongTextInputProps"), exports);
 __exportStar(require("./ITextInputProps"), exports);
 __exportStar(require("./LengthValidationRules"), exports);
 __exportStar(require("./LongTextInput"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@try-at-software/input-elements",
-    "version": "1.2.0-beta.9",
+    "version": "1.2.2",
     "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",
@@ -65,7 +65,7 @@
         "ts-jest": "27.1.4",
         "ts-loader": "9.2.8",
         "typescript": "4.3.2",
-        "webpack": "5.72.0",
+        "webpack": "5.76.0",
         "webpack-cli": "4.9.2",
         "webpack-dev-server": "4.8.1"
     },