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

package/lib/Components/Text/LabelRenderer.js

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

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

@@ -1,13 +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 ISingleValueDropdownInputProps extends ISingleValueInputElementProps<string>, IOperativeProps<IBaseInputElementProps>, IDynamicProps<IDropdownInputProps & IFluentUiDropdownInputProps> {
-    consistencyErrorMessage?: FormText;
+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/DropdownInput.js

@@ -9,8 +9,13 @@ 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 { dynamicProps, operativeProps, styles: stylePreferences } = props;
     const normalizedOptions = react_2.useMemo(() => Utilities_1.DropdownHelper.getNormalizedOptions(dynamicProps.defaultOption, dynamicProps.options), [dynamicProps.defaultOption, dynamicProps.options]);
+    const styles = react_2.useMemo(() => {
+        if (!(stylePreferences === null || stylePreferences === void 0 ? void 0 : stylePreferences.automaticHeight))
+            return undefined;
+        return { dropdownItem: { height: 'auto' } };
+    }, [stylePreferences]);
     react_2.useEffect(() => {
         if (!props.value || normalizedOptions.some((o) => o.key === props.value))
             return;
@@ -18,11 +23,17 @@ const DropdownInputComponent = (props) => {
         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]);
+    const onChange = react_2.useCallback((_event, option) => !!props.onChange && props.onChange(option.id), [props.onChange]);
+    const onRenderOption = react_2.useCallback((option, defaultRender) => {
+        if (!dynamicProps.renderOption)
+            return defaultRender(option);
+        return dynamicProps.renderOption(option.id);
+    }, []);
     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, 
+        React.createElement(DropdownComponent, { "data-automationid": "dropdown-input", options: normalizedOptions, onChange: onChange, onRenderOption: onRenderOption, 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 }),
+            selectedKey: props.value || ((_a = dynamicProps.defaultOption) === null || _a === void 0 ? void 0 : _a.key) || null, disabled: dynamicProps.isDisabled, styles: styles }),
         React.createElement(Components_1.ErrorRenderer, { error: props.errorMessage, messageBarType: react_1.MessageBarType.error })));
 };
 exports.DropdownInput = React.memo(DropdownInputComponent);

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/IDropdownInputProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { IBaseInputElementDynamicProps } from '../IBaseInputElementDynamicProps';
 import { IDropdownInputOption } from './IDropdownInputOption';
 export interface IDropdownInputProps extends IBaseInputElementDynamicProps {
@@ -6,4 +7,5 @@ export interface IDropdownInputProps extends IBaseInputElementDynamicProps {
      * The default option for the dropdown.
      */
     defaultOption: IDropdownInputOption;
+    renderOption?: (optionId: string) => JSX.Element;
 }

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.js

@@ -25,7 +25,7 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         };
         this.invalidateInput = (options) => {
             this._isInvalidated = true;
-            if (options.errorMessage)
+            if (options === null || options === void 0 ? void 0 : options.errorMessage)
                 this.setError(options.errorMessage);
             this.updateInternally();
             this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
@@ -63,15 +63,16 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         var _a;
         if (this._isInvalidated)
             this._isInvalidated = false;
+        const previousValue = this.value;
         this.value = value;
         if ((_a = this._componentRef) === null || _a === void 0 ? void 0 : _a.current)
             this._componentRef.current.update(value);
         this.validate();
         if (this.isValid) {
             if (isInitial)
-                this.initialValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value));
+                this.initialValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value, previousValue));
             else
-                this.valueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value));
+                this.valueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x(this.value, previousValue));
         }
         else
             this.invalidValueChangeSubscriptions.forEach((x) => x === null || x === void 0 ? void 0 : x());
@@ -85,11 +86,7 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
     }
     /** @inheritdoc */
     get isValid() {
-        if (this._isInvalidated)
-            return false;
-        if (this.isLoading)
-            return false;
-        if (this.errorMessage && this.errorMessage.length > 0)
+        if (this._isInvalidated || this.isLoading || this.errorMessage)
             return false;
         return (!!this._configuration && !this._configuration.isRequired) || this._valueIsSet || this._initialValueIsSet;
     }
@@ -126,17 +123,20 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
         var _a, _b, _c, _d, _e;
         if (!!((_a = this._configuration) === null || _a === void 0 ? void 0 : _a.shouldExecuteValidation) && this._configuration.shouldExecuteValidation() === false)
             return;
-        let errorMessage = null;
+        let errorMessage = undefined;
         if (((_b = this._configuration) === null || _b === void 0 ? void 0 : _b.isRequired) && !this.valueIsValid()) {
             // If a value is required but the input field is empty.
             errorMessage = ((_c = this._configuration) === null || _c === void 0 ? void 0 : _c.requiredValidationMessage) || `The field is required`;
         }
         else if (((_d = this._configuration) === null || _d === void 0 ? void 0 : _d.isRequired) || this.value || ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.executeAllValidations)) {
             // If a value is provided.
-            this.validationRules.forEach((rule) => {
-                if (!errorMessage)
-                    errorMessage = rule(this.value);
-            });
+            for (const validationRule of this.validationRules) {
+                const currentError = validationRule(this.value);
+                if (currentError) {
+                    errorMessage = currentError;
+                    break;
+                }
+            }
         }
         this.setError(errorMessage);
     }

package/lib/Subscriptions/ValueChangeSubscription.d.ts

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

package/lib/Utilities/DropdownHelper.js

@@ -53,6 +53,7 @@ DropdownHelper.toNormalizedDropdownOption = (inputOption) => {
     return {
         text: inputOption.text,
         key: inputOption.key,
+        id: inputOption.key,
         itemType: itemType,
         disabled: !!inputOption.disabled
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@try-at-software/input-elements",
-    "version": "1.2.0-beta.1",
+    "version": "1.2.0-beta.10",
     "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",