@unicef/material-ui 0.8.1 → 0.10.0

package/README.md

@@ -111,6 +111,25 @@ cd ..
 npm deploy
 ```
 
+## Release a new version in npm registry
+
+There is a Github action (pipeline) that automatically releases in npm whenever a release is created.
+To create a release, previously you need to ensure the version is changed in packages.json and then create a tag in the repository. These are the steps:
+
+1. Get the latest `master`
+2. Edit `packages.json` and increase the version number and save to origin/master.  
+    ```bash
+      # After editing packages.json
+      git commit -m "bump version x.y.z"
+      git push origin master
+      ```
+3.  Create a tag and push it to master:
+    ```bash
+      git tag releases/vX.Y.Z  # where X.Y.Z is a semver number such as 1.6.9
+      git push origin tags
+    ```
+4. Then in the GitHub web interface create the release. The action will be automatically triggered.
+    
 ## About UNICEF
 
 [UNICEF](https://www.unicef.org/) works in over 190 countries and territories to protect the rights of every child. UNICEF has spent more than 70 years working to improve the lives of children and their families. In UNICEF, **we believe all children have a right to survive, thrive and fulfill their potential – to the benefit of a better world**.

package/lib/dev.js

@@ -11503,6 +11503,65 @@ var debounce = function debounce(func, wait, immediate) {
   return debounced;
 };
 
+/**
+ *
+ * @param {String} value Value text to be validated
+ * @returns {Boolean} Whether the given value string is a phone number
+ */
+function isPhoneNumberText(value) {
+  var valueToTest = value || '';
+  var phoneRegexp = new RegExp(/^[0-9.,+-;()\/\extEXT+# ]*$/i);
+  if (!phoneRegexp.test(valueToTest)) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ *
+ * @param {String} value Value text to be validated
+ * @returns {Boolean} Whether the given value string contains safe text (no html tags)
+ */
+function isSafeText(value) {
+  var valueToTest = value || '';
+  var htmlRegexp = new RegExp(/<\/?[a-z][\s\S]*>/i);
+  if (htmlRegexp.test(valueToTest)) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ *
+ * @param {String} value Value text to be validated
+ * @returns {Boolean} Whether the given value string is an acceptable alphanumeric text in any language (also spaces are accepted)
+ */
+function isAlphanumericText(value) {
+  var valueToTest = value || '';
+  // With Unicode Property Escapes, we can match a letter from any language with the following simple regular expression (https://javascript.info/regexp-unicode) => /\p{Letter}/u
+  // Unicode Property Escapes can be transpiled down to ES5 with a tool called regexpu. OR it can be taken from the lib  Steve Levithan's XRegExp package with Unicode add-on (https://xregexp.com/plugins/)
+  // The following is transpiled code for all language char with space and numbers
+  // ( taken from https://stackoverflow.com/a/15861883/1874080 with some modifications) :
+
+  var wordsInAllLanguages = /^[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC\ \0|0-9\0|1-9]*$/;
+
+  return wordsInAllLanguages.test(valueToTest);
+}
+
+/**
+ *
+ * @param {String} value Value text to be validated
+ * @returns {Boolean} Whether the given value string is an acceptable url
+ */
+function isUrlText(value) {
+  var valueToTest = value || '';
+  var urlRegexp = new RegExp('^http(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6}(/[\\w\\s-\\w@\\+\\.~#\\?&/=%]*)?$');
+  if (valueToTest && !urlRegexp.test(valueToTest)) {
+    return false;
+  }
+  return true;
+}
+
 // It should to be noted that this function isn't equivalent to `text-transform: capitalize`.
 //
 // A strict capitalization should uppercase the first letter of each word a the sentence.
@@ -40029,7 +40088,8 @@ function PositiveNumberFormat(_ref) {
       isNumericString = _ref.isNumericString,
       allowNegative = _ref.allowNegative,
       decimalScale = _ref.decimalScale,
-      other = objectWithoutProperties(_ref, ['inputRef', 'name', 'onChange', 'thousandSeparator', 'isNumericString', 'allowNegative', 'decimalScale']);
+      fixedDecimalScale = _ref.fixedDecimalScale,
+      other = objectWithoutProperties(_ref, ['inputRef', 'name', 'onChange', 'thousandSeparator', 'isNumericString', 'allowNegative', 'decimalScale', 'fixedDecimalScale']);
 
   return React__default.createElement(NumberFormat, _extends$1({}, other, {
     getInputRef: inputRef,
@@ -40044,7 +40104,8 @@ function PositiveNumberFormat(_ref) {
     thousandSeparator: thousandSeparator,
     isNumericString: isNumericString,
     allowNegative: allowNegative,
-    decimalScale: decimalScale
+    decimalScale: decimalScale,
+    fixedDecimalScale: fixedDecimalScale
   }));
 }
 
@@ -40060,14 +40121,17 @@ PositiveNumberFormat.propTypes = {
   // Is allow negative numbers
   allowNegative: PropTypes__default.bool,
   // No of decimal digits
-  decimalScale: PropTypes__default.number
+  decimalScale: PropTypes__default.number,
+  //If true it add 0s to match given decimalScale.
+  fixedDecimalScale: PropTypes__default.bool
 };
 
 PositiveNumberFormat.defaultProps = {
   thousandSeparator: true,
   isNumericString: false,
   allowNegative: false,
-  decimalScale: 0
+  decimalScale: 0,
+  fixedDecimalScale: false
 };
 
 var HelpOutline = createCommonjsModule(function (module, exports) {
@@ -52907,7 +52971,10 @@ var defaultErrorMessages = {
   allowedExtensions: 'File type not allowed',
   isUrl: 'It should start with http:// or https://',
   isLatitude: 'It should be between -90 and 90',
-  isLongitude: 'It should be between -180 and 180'
+  isLongitude: 'It should be between -180 and 180',
+  isPhone: 'Only numbers,(,),-,.,# and (ext) are allowed',
+  isSafeText: 'HTML not allowed',
+  isAlphanumeric: 'Only letters and numbers are allowed'
 };
 
 /* eslint-disable */
@@ -52951,6 +53018,9 @@ var styles$13 = {
    * * isString
    * * maxFileSize
    * * allowedExtensions
+   * * isPhone
+   * * isAlphanumeric
+   * * isSafeText
    *
    * It accepts all the props of Material-ui [TextField](https://material-ui.com/api/text-field/#textfield-api)
    */
@@ -53180,11 +53250,7 @@ function ForwardRefForm(props, ref) {
   };
 
   lib_2.addValidationRule('isUrl', function (value) {
-    var urlRegexp = new RegExp('^http(s?)://[0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*?[a-z0-9][-a-z0-9]{0,61}[a-z0-9]\\.[a-z]{2,6}(/[\\w\\s-\\w@\\+\\.~#\\?&/=%]*)?$');
-    if (value != '' && !urlRegexp.test(value)) {
-      return false;
-    }
-    return true;
+    return isUrlText(value);
   });
 
   lib_2.addValidationRule('isLatitude', function (value) {
@@ -53200,6 +53266,18 @@ function ForwardRefForm(props, ref) {
     return true;
   });
 
+  lib_2.addValidationRule('isPhone', function (value) {
+    return isPhoneNumberText(value);
+  });
+
+  lib_2.addValidationRule('isSafeText', function (value) {
+    return isSafeText(value);
+  });
+
+  lib_2.addValidationRule('isAlphanumeric', function (value) {
+    return isAlphanumericText(value);
+  });
+
   return React__default.createElement(lib_2, _extends$1({}, props, { ref: ref }));
 }
 
@@ -53512,6 +53590,67 @@ UPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
+function UCurrencyField(_ref) {
+  var inputPrefix = _ref.inputPrefix,
+      decimalScale = _ref.decimalScale,
+      fixedDecimalScale = _ref.fixedDecimalScale,
+      textAlign = _ref.textAlign,
+      inputProps = _ref.inputProps,
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'fixedDecimalScale', 'textAlign', 'inputProps']);
+
+  return React__default.createElement(UPositiveInteger, _extends$1({
+    variant: 'outlined',
+    inputProps: _extends$1({
+      decimalScale: decimalScale,
+      fixedDecimalScale: fixedDecimalScale,
+      prefix: inputPrefix,
+      style: { textAlign: textAlign }
+    }, inputProps)
+  }, props));
+}
+
+UCurrencyField.propTypes = {
+  /** label */
+  label: PropTypes__default.string,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /**
+   * Array of validators.See list of default validators above.
+   *
+   * Ex: `validators={['required', 'isEmail']}`
+   */
+  validators: PropTypes__default.array,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Prefix string for the input. */
+  inputPrefix: PropTypes__default.string,
+  /** Decimal digit number to be used as default. */
+  decimalScale: PropTypes__default.number,
+  /**
+   * customErrorMessages is an object with key as validator and value as customised error message.
+   *
+   * Ex: `customErrorMessages={{required: 'This field is required'}`
+   */
+  customErrorMessages: PropTypes__default.object,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Name of input. */
+  name: PropTypes__default.string,
+  /** Input text align */
+  textAlign: PropTypes__default.string,
+  // If true it add 0s to match given decimalScale.
+  fixedDecimalScale: PropTypes__default.bool
+};
+
+UCurrencyField.defaultProps = {
+  inputPrefix: '$ ',
+  decimalScale: 2,
+  fixedDecimalScale: true,
+  textAlign: 'right'
+};
+
 function ActiveFormPositiveInteger(_ref) {
   var InputProps = _ref.InputProps,
       props = objectWithoutProperties(_ref, ['InputProps']);
@@ -53560,6 +53699,75 @@ ActiveFormPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
+function ActiveCurrencyField(_ref) {
+  var inputPrefix = _ref.inputPrefix,
+      decimalScale = _ref.decimalScale,
+      fixedDecimalScale = _ref.fixedDecimalScale,
+      textAlign = _ref.textAlign,
+      inputProps = _ref.inputProps,
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'fixedDecimalScale', 'textAlign', 'inputProps']);
+
+  return React__default.createElement(ActiveFormPositiveInteger, _extends$1({
+    variant: 'outlined',
+    inputProps: _extends$1({
+      decimalScale: decimalScale,
+      fixedDecimalScale: fixedDecimalScale,
+      prefix: inputPrefix,
+      style: { textAlign: textAlign }
+    }, inputProps)
+  }, props));
+}
+
+ActiveCurrencyField.propTypes = {
+  /** label */
+  label: PropTypes__default.string,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Typography for text inside the input (Ex: h1, div, etc.) */
+  typographyVariant: PropTypes__default.string,
+  /** Input has some default padding already, to make changes to it pass padding like `inputPadding='0px 2px'` */
+  inputPadding: PropTypes__default.string,
+  /** To hide or display the textfied border*/
+  showBorder: PropTypes__default.bool,
+  /**
+   * Array of validators.See list of default validators above.
+   *
+   * Ex: `validators={['required', 'isEmail']}`
+   */
+  validators: PropTypes__default.array,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Prefix string for the input. */
+  inputPrefix: PropTypes__default.string,
+  /** Decimal digit number to be used as default. */
+  decimalScale: PropTypes__default.number,
+  /**
+   * customErrorMessages is an object with key as validator and value as customised error message.
+   *
+   * Ex: `customErrorMessages={{required: 'This field is required'}`
+   */
+  customErrorMessages: PropTypes__default.object,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Name of input. */
+  name: PropTypes__default.string,
+  /** It triggers after each validation.It will return true or false. */
+  validatorListener: PropTypes__default.func,
+  /** Allow to use required validator in any validation trigger, not only form submit. */
+  withRequiredValidator: PropTypes__default.bool,
+  /** Input text align */
+  textAlign: PropTypes__default.string
+};
+
+ActiveCurrencyField.defaultProps = {
+  inputPrefix: '$ ',
+  decimalScale: 2,
+  fixedDecimalScale: true,
+  textAlign: 'right'
+};
+
 var DeleteOutlined = createCommonjsModule(function (module, exports) {
 
 
@@ -56339,6 +56547,9 @@ function UAutoComplete(_ref) {
       maxLength = _ref.maxLength,
       usedItemIds = _ref.usedItemIds,
       allowContextSpecific = _ref.allowContextSpecific,
+      counter = _ref.counter,
+      placeholder = _ref.placeholder,
+      InputLabelProps = _ref.InputLabelProps,
       props = _ref.props;
 
   var classes = useStyles$r();
@@ -56399,16 +56610,19 @@ function UAutoComplete(_ref) {
   var controlOptions = options && options.length > 0 ? options.filter(function (opt) {
     return !usedItemIds.includes(opt.id);
   }) : [];
-
   return React__default.createElement(
     React__default.Fragment,
     null,
     readOnly ? React__default.createElement(ActiveFormTextField, {
       multiline: true,
-      label: label + '*',
+      label: label,
+      InputLabelProps: _extends$1({}, InputLabelProps, {
+        required: isRequired
+      }),
       variant: 'outlined',
       fullWidth: true,
       readOnly: readOnly,
+      placeholder: placeholder,
       value: selectedValue && selectedValue.text
     }) : React__default.createElement(Autocomplete$1, {
       value: selectedValue,
@@ -56439,7 +56653,7 @@ function UAutoComplete(_ref) {
       renderInput: function renderInput(params) {
         return React__default.createElement(ActiveFormTextField, _extends$1({}, params, {
           multiline: true,
-          label: '' + label + (isRequired ? '*' : ''),
+          label: label,
           variant: 'outlined',
           value: selectedValue && selectedValue.text || '',
           validators: isRequired ? ['required', 'trim'] : ['trim'],
@@ -56448,8 +56662,13 @@ function UAutoComplete(_ref) {
             minLength: minLength,
             maxLength: maxLength
           }),
+          InputLabelProps: _extends$1({}, InputLabelProps, {
+            required: isRequired
+          }),
           maxLength: maxLength,
-          counter: true
+          counter: counter,
+          placeholder: placeholder,
+          readOnly: readOnly
         }));
       }
     })
@@ -56480,11 +56699,18 @@ UAutoComplete.propTypes = {
   /** can create context specific item or not */
   allowContextSpecific: PropTypes__default.bool,
   /** used item id's from the options */
-  usedItemIds: PropTypes__default.array
+  usedItemIds: PropTypes__default.array,
+  /** To enable character counter */
+  counter: PropTypes__default.bool,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Label props applied to input field*/
+  InputLabelProps: PropTypes__default.object
 };
 
 UAutoComplete.defaultProps = {
   allowContextSpecific: false,
+  counter: false,
   usedItemIds: []
 };
 
@@ -57781,6 +58007,208 @@ ActiveKeyboardTimePicker.defaultProps = {
   variant: 'inline'
 };
 
+var filter$1 = createFilterOptions();
+
+var useStyles$z = makeStyles$1(function (theme) {
+  return {
+    controlStyle: {
+      marginTop: theme.spacing(2),
+      width: '100%'
+    }
+  };
+});
+/**
+ * ActiveAutoComplete is an editable dropdown component with interactive.
+ * User can enter the text in order to find the value from the list of values
+ * User can also add new value to the list as well.
+ */
+function ActiveAutoComplete(_ref) {
+  var value = _ref.value,
+      label = _ref.label,
+      onChange = _ref.onChange,
+      isRequired = _ref.isRequired,
+      onBlur = _ref.onBlur,
+      name = _ref.name,
+      options = _ref.options,
+      readOnly = _ref.readOnly,
+      minLength = _ref.minLength,
+      maxLength = _ref.maxLength,
+      usedItemIds = _ref.usedItemIds,
+      allowContextSpecific = _ref.allowContextSpecific,
+      interactiveMode = _ref.interactiveMode,
+      counter = _ref.counter,
+      placeholder = _ref.placeholder,
+      InputLabelProps = _ref.InputLabelProps,
+      props = _ref.props;
+
+  var classes = useStyles$z();
+  //const dispatch = useDispatch()
+
+  var _useState = React.useState(value || null),
+      _useState2 = slicedToArray(_useState, 2),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1]; // for initialization: avoid the control to be a uncontrolled component with 'undefined'
+
+  var handleChange = function handleChange(event, newValue) {
+    // Create a new value from the user input
+    if (newValue && newValue.inputValue) {
+      setSelectedValue({
+        text: newValue.inputValue
+      });
+      onChange({
+        text: newValue.inputValue
+      });
+      return;
+    }
+    setSelectedValue(newValue);
+    onChange && onChange(newValue, name);
+  };
+
+  var handleFilter = function handleFilter(options, params) {
+    var filtered = filter$1(options, params);
+    var labelForMessage = label && label.toLowerCase();
+    // Suggest the creation of a new value
+    if (params.inputValue !== '' && allowContextSpecific) {
+      filtered.push({
+        inputValue: params.inputValue,
+        text: 'Use context-specific ' + (labelForMessage ? labelForMessage : '') + ' "' + params.inputValue + '"'
+      });
+    }
+    return filtered;
+  };
+
+  var handleGetOption = function handleGetOption(option) {
+    // Value selected with enter, right from the input
+    if (typeof option === 'string') {
+      return option;
+    }
+    // Add "new" option created dynamically
+    if (option.inputValue) {
+      return option.inputValue;
+    }
+    // Regular option
+    return option.text || '';
+  };
+
+  var handleOnBlur = function handleOnBlur(e) {
+    if (selectedValue && selectedValue.text && selectedValue.text.trim() !== '') {
+      onBlur && onBlur(e, name);
+    }
+  };
+
+  var controlOptions = options && options.length > 0 ? options.filter(function (opt) {
+    return !usedItemIds.includes(opt.id);
+  }) : [];
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    !interactiveMode && readOnly ? React__default.createElement(ActiveFormTextField, {
+      multiline: true,
+      label: label,
+      InputLabelProps: _extends$1({}, InputLabelProps, {
+        required: isRequired
+      }),
+      variant: 'outlined',
+      fullWidth: true,
+      readOnly: readOnly,
+      placeholder: placeholder,
+      value: selectedValue && selectedValue.text
+    }) : React__default.createElement(Autocomplete$1, {
+      value: selectedValue,
+      getOptionSelected: function getOptionSelected(option) {
+        return option.id === selectedValue.id;
+      },
+      onChange: function onChange(event, newValue) {
+        return handleChange(event, newValue);
+      },
+      filterOptions: function filterOptions(options, params) {
+        return handleFilter(options, params);
+      },
+      id: 'target-input',
+      name: name,
+      selectOnFocus: true,
+      clearOnBlur: true,
+      handleHomeEndKeys: true,
+      options: controlOptions,
+      getOptionLabel: function getOptionLabel(option) {
+        return handleGetOption(option);
+      },
+      renderOption: function renderOption(option) {
+        return option.text;
+      },
+      onBlur: handleOnBlur,
+      className: classes.controlStyle,
+      freeSolo: allowContextSpecific,
+      renderInput: function renderInput(params) {
+        return React__default.createElement(ActiveFormTextField, _extends$1({}, params, {
+          multiline: true,
+          label: label,
+          variant: 'outlined',
+          value: selectedValue && selectedValue.text || '',
+          validators: isRequired ? ['required', 'trim'] : ['trim'],
+          fullWidth: true,
+          inputProps: _extends$1({}, params.inputProps, {
+            minLength: minLength,
+            maxLength: maxLength
+          }),
+          InputLabelProps: _extends$1({}, InputLabelProps, {
+            required: isRequired
+          }),
+          maxLength: maxLength,
+          counter: counter,
+          interactiveMode: interactiveMode,
+          placeholder: placeholder,
+          readOnly: readOnly
+        }));
+      }
+    })
+  );
+}
+
+ActiveAutoComplete.propTypes = {
+  /** selected value of the dropdown */
+  value: PropTypes__default.object,
+  /** label */
+  label: PropTypes__default.string,
+  /** options to display */
+  options: PropTypes__default.array,
+  /** dropdown on change event */
+  onChange: PropTypes__default.func,
+  /** enable required validator */
+  isRequired: PropTypes__default.bool,
+  /** enable required error in dropdown */
+  hasError: PropTypes__default.bool,
+  /** onBlur event for dropdown  */
+  onBlur: PropTypes__default.func,
+  /** name of the dropdown */
+  name: PropTypes__default.string,
+  /** max length text */
+  maxLength: PropTypes__default.number,
+  /** min length text */
+  minLength: PropTypes__default.number,
+  /** can create context specific item or not */
+  allowContextSpecific: PropTypes__default.bool,
+  /** used item id's from the options */
+  usedItemIds: PropTypes__default.array,
+  /** Change to write mode by hiding text field border and displays border on hover*/
+  interactiveMode: PropTypes__default.bool,
+  /** To enable character counter */
+  counter: PropTypes__default.bool,
+  /** placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Label props applied to input field*/
+  InputLabelProps: PropTypes__default.object
+};
+
+ActiveAutoComplete.defaultProps = {
+  allowContextSpecific: false,
+  interactiveMode: false,
+  counter: false,
+  usedItemIds: []
+};
+
+exports.ActiveAutoComplete = ActiveAutoComplete;
+exports.ActiveCurrencyField = ActiveCurrencyField;
 exports.ActiveDatePicker = ActiveDatePicker;
 exports.ActiveFormCoordinateField = ActiveFormCoordinateField;
 exports.ActiveFormPositiveInteger = ActiveFormPositiveInteger;
@@ -57797,6 +58225,7 @@ exports.UButton = UButton;
 exports.UConfirmationButton = UConfirmationButton;
 exports.UContent = UContent;
 exports.UCoordinateField = UCoordinateField;
+exports.UCurrencyField = UCurrencyField;
 exports.UDatePicker = UDatePicker;
 exports.UDateTimePicker = UDateTimePicker;
 exports.UErrorAlert = UErrorAlert;