@unicef/material-ui 0.9.1 → 0.10.0

package/lib/dev.js

@@ -40088,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,
@@ -40103,7 +40104,8 @@ function PositiveNumberFormat(_ref) {
     thousandSeparator: thousandSeparator,
     isNumericString: isNumericString,
     allowNegative: allowNegative,
-    decimalScale: decimalScale
+    decimalScale: decimalScale,
+    fixedDecimalScale: fixedDecimalScale
   }));
 }
 
@@ -40119,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) {
@@ -53585,32 +53590,22 @@ UPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
-var useStyles$n = makeStyles$1(function (theme) {
-  return {
-    startAdornmentContainer: {
-      marginRight: theme.spacing(0.5)
-    }
-  };
-});
-
 function UCurrencyField(_ref) {
   var inputPrefix = _ref.inputPrefix,
       decimalScale = _ref.decimalScale,
-      InputProps = _ref.InputProps,
+      fixedDecimalScale = _ref.fixedDecimalScale,
+      textAlign = _ref.textAlign,
       inputProps = _ref.inputProps,
-      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'InputProps', 'inputProps']);
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'fixedDecimalScale', 'textAlign', 'inputProps']);
 
-  var classes = useStyles$n(props);
   return React__default.createElement(UPositiveInteger, _extends$1({
     variant: 'outlined',
-    InputProps: _extends$1({
-      startAdornment: React__default.createElement(
-        'span',
-        { className: classes.startAdornmentContainer },
-        inputPrefix
-      )
-    }, InputProps),
-    inputProps: _extends$1({ decimalScale: decimalScale }, inputProps)
+    inputProps: _extends$1({
+      decimalScale: decimalScale,
+      fixedDecimalScale: fixedDecimalScale,
+      prefix: inputPrefix,
+      style: { textAlign: textAlign }
+    }, inputProps)
   }, props));
 }
 
@@ -53642,12 +53637,18 @@ UCurrencyField.propTypes = {
   /** To make the content readOnly */
   readOnly: PropTypes__default.bool,
   /** Name of input. */
-  name: PropTypes__default.string
+  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
+  inputPrefix: '$ ',
+  decimalScale: 2,
+  fixedDecimalScale: true,
+  textAlign: 'right'
 };
 
 function ActiveFormPositiveInteger(_ref) {
@@ -53698,32 +53699,22 @@ ActiveFormPositiveInteger.propTypes = {
   withRequiredValidator: PropTypes__default.bool
 };
 
-var useStyles$o = makeStyles$1(function (theme) {
-  return {
-    startAdornmentContainer: {
-      marginRight: theme.spacing(0.5)
-    }
-  };
-});
-
 function ActiveCurrencyField(_ref) {
   var inputPrefix = _ref.inputPrefix,
       decimalScale = _ref.decimalScale,
-      InputProps = _ref.InputProps,
+      fixedDecimalScale = _ref.fixedDecimalScale,
+      textAlign = _ref.textAlign,
       inputProps = _ref.inputProps,
-      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'InputProps', 'inputProps']);
+      props = objectWithoutProperties(_ref, ['inputPrefix', 'decimalScale', 'fixedDecimalScale', 'textAlign', 'inputProps']);
 
-  var classes = useStyles$o(props);
   return React__default.createElement(ActiveFormPositiveInteger, _extends$1({
     variant: 'outlined',
-    InputProps: _extends$1({
-      startAdornment: React__default.createElement(
-        'span',
-        { className: classes.startAdornmentContainer },
-        inputPrefix
-      )
-    }, InputProps),
-    inputProps: _extends$1({ decimalScale: decimalScale }, inputProps)
+    inputProps: _extends$1({
+      decimalScale: decimalScale,
+      fixedDecimalScale: fixedDecimalScale,
+      prefix: inputPrefix,
+      style: { textAlign: textAlign }
+    }, inputProps)
   }, props));
 }
 
@@ -53765,12 +53756,16 @@ ActiveCurrencyField.propTypes = {
   /** 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
+  withRequiredValidator: PropTypes__default.bool,
+  /** Input text align */
+  textAlign: PropTypes__default.string
 };
 
 ActiveCurrencyField.defaultProps = {
-  inputPrefix: '$',
-  decimalScale: 2
+  inputPrefix: '$ ',
+  decimalScale: 2,
+  fixedDecimalScale: true,
+  textAlign: 'right'
 };
 
 var DeleteOutlined = createCommonjsModule(function (module, exports) {
@@ -53797,7 +53792,7 @@ exports.default = _default;
 
 var DeleteOutlinedIcon = unwrapExports(DeleteOutlined);
 
-var useStyles$p = makeStyles$1(function (theme) {
+var useStyles$n = makeStyles$1(function (theme) {
   return {
     menuDelete: {
       width: '500px'
@@ -53817,7 +53812,7 @@ var useStyles$p = makeStyles$1(function (theme) {
  * It has two varint icon/menu item
  */
 function UConfirmationButton(props) {
-  var classes = useStyles$p();
+  var classes = useStyles$n();
   var onConfirm = props.onConfirm,
       id = props.id,
       buttonText = props.buttonText,
@@ -53932,7 +53927,7 @@ UConfirmationButton.defaultProps = {
 /**
  * displays radio buttons
  */
-var useStyles$q = makeStyles$1(function (theme) {
+var useStyles$o = makeStyles$1(function (theme) {
   return {
     padding: {
       paddingLeft: theme.spacing(3)
@@ -53953,7 +53948,7 @@ function URadioButtons(_ref) {
       optionLabels = _ref.optionLabels,
       optionValues = _ref.optionValues;
 
-  var classes = useStyles$q();
+  var classes = useStyles$o();
   var handleOnChange = function handleOnChange(event) {
     onChange && onChange(event);
   };
@@ -54057,7 +54052,7 @@ exports.default = _default;
 
 var DoneIcon = unwrapExports(Done);
 
-var useStyles$r = makeStyles$1(function (theme) {
+var useStyles$p = makeStyles$1(function (theme) {
   return {
     root: {
       position: 'fixed',
@@ -54089,7 +54084,7 @@ function UAsyncBadge(_ref) {
       visible = _ref.visible,
       onReset = _ref.onReset;
 
-  var classes = useStyles$r();
+  var classes = useStyles$p();
 
   /**  If variant is success or error, after few seconds, it will set asyncResponse visible to false */
   React.useEffect(function () {
@@ -54128,7 +54123,7 @@ UAsyncBadge.propTypes = {
   onReset: PropTypes__default.func
 };
 
-var useStyles$s = makeStyles$1(function () {
+var useStyles$q = makeStyles$1(function () {
   return {
     pageLoadingProgress: {
       height: '50vh',
@@ -54143,7 +54138,7 @@ var useStyles$s = makeStyles$1(function () {
  * 2. Display text message
  */
 function UPageLoadingProgress(props) {
-  var classes = useStyles$s();
+  var classes = useStyles$q();
   var text = props.text;
 
   return React__default.createElement(
@@ -56526,7 +56521,7 @@ UErrorAlert.defaultProps = {
 
 var filter = createFilterOptions();
 
-var useStyles$t = makeStyles$1(function (theme) {
+var useStyles$r = makeStyles$1(function (theme) {
   return {
     controlStyle: {
       marginTop: theme.spacing(2),
@@ -56552,9 +56547,12 @@ 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$t();
+  var classes = useStyles$r();
   //const dispatch = useDispatch()
 
   var _useState = React.useState(value || null),
@@ -56612,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,
@@ -56652,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'],
@@ -56661,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
         }));
       }
     })
@@ -56693,17 +56699,24 @@ 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: []
 };
 
 /* eslint-disable no-nested-ternary */
 
-var useStyles$u = makeStyles$1(function (theme) {
+var useStyles$s = makeStyles$1(function (theme) {
   var _ref;
 
   return _ref = {
@@ -56735,7 +56748,7 @@ var useStyles$u = makeStyles$1(function (theme) {
  * Breadcrumbs is a component to implement current user path of the application
  */
 function UBreadcrumbs(props) {
-  var classes = useStyles$u();
+  var classes = useStyles$s();
   var breadcrumbLinks = props.breadcrumbLinks;
 
 
@@ -56812,7 +56825,7 @@ UInfiniteScroll.propTypes = {
   onEndOfScroll: PropTypes__default.func
 };
 
-var useStyles$v = makeStyles$1(function (theme) {
+var useStyles$t = makeStyles$1(function (theme) {
   return {
     small: {
       width: theme.spacing(4),
@@ -56857,7 +56870,7 @@ function UAvatarImage(_ref) {
       zIndexValue = _ref.zIndexValue,
       loadPhoto = _ref.loadPhoto;
 
-  var classes = useStyles$v();
+  var classes = useStyles$t();
 
   var _useState = React.useState(''),
       _useState2 = slicedToArray(_useState, 2),
@@ -57289,7 +57302,7 @@ exports.default = _default;
 
 var CloseIcon$1 = unwrapExports(Close);
 
-var useStyles$w = makeStyles$1(function (theme) {
+var useStyles$u = makeStyles$1(function (theme) {
   return {
     root: {
       width: '100%',
@@ -57329,7 +57342,7 @@ function USearchBox(_ref) {
       searchValue = _useState2[0],
       setSearch = _useState2[1];
 
-  var classes = useStyles$w();
+  var classes = useStyles$u();
 
   var handleChange = function handleChange(event) {
     setSearch(event.target.value);
@@ -57430,7 +57443,7 @@ var styles$16 = {
   }
 };
 
-var useStyles$x = makeStyles$1(function (theme) {
+var useStyles$v = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57473,7 +57486,7 @@ var useStyles$x = makeStyles$1(function (theme) {
  * ActiveKeyboardDatePicker is a customized [Material Ui KeyboardDatePicker]('https://material-ui-pickers.dev/api/KeyboardDatePicker') for more details
  */
 function ActiveKeyboardDatePicker(props) {
-  var classes = useStyles$x(props);
+  var classes = useStyles$v(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -57592,7 +57605,7 @@ var styles$17 = {
   }
 };
 
-var useStyles$y = makeStyles$1(function (theme) {
+var useStyles$w = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57631,7 +57644,7 @@ var useStyles$y = makeStyles$1(function (theme) {
  * Please have look at [Material Ui Date Picker]('https://material-ui-pickers.dev/api/DatePicker') for more details
  */
 function ActiveDatePicker(props) {
-  var classes = useStyles$y(props);
+  var classes = useStyles$w(props);
   var autoOk = props.autoOk,
       variant = props.variant,
       inputVariant = props.inputVariant,
@@ -57725,7 +57738,7 @@ var styles$18 = {
   }
 };
 
-var useStyles$z = makeStyles$1(function (theme) {
+var useStyles$x = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57764,7 +57777,7 @@ var useStyles$z = makeStyles$1(function (theme) {
  * Please have look at [Material Ui TimePicker]('https://material-ui-pickers.dev/api/TimePicker') for more details
  */
 function ActiveTimePicker(props) {
-  var classes = useStyles$z(props);
+  var classes = useStyles$x(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,
@@ -57849,7 +57862,7 @@ var styles$19 = {
   }
 };
 
-var useStyles$A = makeStyles$1(function (theme) {
+var useStyles$y = makeStyles$1(function (theme) {
   return {
     textField: {
       marginTop: theme.spacing(0.25),
@@ -57892,7 +57905,7 @@ var useStyles$A = makeStyles$1(function (theme) {
  * ActiveKeyboardTimePicker is customized [ Material Ui KeyboardTimePicker](https://material-ui-pickers.dev/api/KeyboardTimePicker)
  */
 function ActiveKeyboardTimePicker(props) {
-  var classes = useStyles$A(props);
+  var classes = useStyles$y(props);
   var inputVariant = props.inputVariant,
       readOnly = props.readOnly,
       interactiveMode = props.interactiveMode,
@@ -57994,6 +58007,207 @@ 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;