@unicef/material-ui 0.10.0 → 0.11.1

package/lib/dev.js

@@ -38610,13 +38610,13 @@ var useStyles$6 = makeStyles$1(function (theme) {
       display: 'inline-flex',
       marginRight: theme.spacing(1),
       '& .MuiAvatar-root': {
-        height: 24,
-        width: 24
+        height: 32,
+        width: 32
       }
     },
     avatar: {
-      height: 24,
-      width: 24,
+      height: 32,
+      width: 32,
       marginRight: theme.spacing(1)
     },
     optionLabel: {
@@ -40199,6 +40199,11 @@ var useStyles$8 = makeStyles$1(function (theme) {
     },
     linkHelpLabel: {
       paddingLeft: theme.spacing(0.5)
+    },
+    tooltipPopper: {
+      '& a': {
+        color: theme.palette.common.white
+      }
     }
   };
 });
@@ -40223,7 +40228,12 @@ function InputLabelHelp(_ref) {
     ),
     type === 'tooltip' ? React__default.createElement(
       Tooltip$1,
-      { title: tooltipTitle, placement: tooltipPlacement },
+      {
+        interactive: true,
+        title: React__default.createElement('div', { dangerouslySetInnerHTML: { __html: tooltipTitle } }),
+        placement: tooltipPlacement,
+        classes: { popper: classes.tooltipPopper }
+      },
       React__default.createElement(
         'span',
         { className: classes.root },
@@ -40820,6 +40830,85 @@ UPeoplePicker.defaultProps = {
   InputLabelHelpProps: {}
 };
 
+/**
+ * UIconPicker is a control for selecting icon from a list. Has the features below:
+ *
+ * * Select a single icon from a list.
+ * * Select multiple icon from a list.
+ * * Autocomplete.
+ * * Clear current selection.
+ *
+ */
+function UIconPicker(props) {
+  return React__default.createElement(USelectPicker, _extends$1({}, props, { hideAvatar: false }));
+}
+
+UIconPicker.propTypes = {
+  /** Text to display when nothing is selected. */
+  placeholder: PropTypes__default.string,
+  /** Enables the multiple select. Default is false. */
+  isMulti: PropTypes__default.bool,
+  /** Label of the picker. */
+  label: PropTypes__default.string,
+  /** Variant of TextField to use. Default is outlined.*/
+  variant: PropTypes__default.oneOf(['outlined', 'standard', 'filled']),
+  /** Id to assign to the input element */
+  inputId: PropTypes__default.string,
+  /** Callback fired when the value is changed.
+   *
+   * `event`:
+   * The event source of the callback. You can pull out the new value by accessing "event.target.value".
+   */
+  onChange: PropTypes__default.func,
+  /** Array of to display select on the dropdown.
+   * Each option is an object with the following attributes:
+   *
+   * ```
+   * {
+   * value: 1,
+   * label: 'Sample 1', //First line, typically the name
+   * image: 'svg', // image svg string
+   * avatar: (  //Avatar object to display.
+   *   <Avatar
+   *     src={'blob:http://...'} // SVG Icon
+   *   />
+   *  ),
+   *   }
+   *```
+   *
+   */
+  options: PropTypes__default.array,
+  /** Props passed to the TextField used in the picker. Use any value of Material UI TextField API.
+   *
+   * `TextFieldProps={{helperText:"text", onChange: {textFieldTargetValue}, inputProps:{className: classes.textField}}}`
+   *
+   */
+  TextFieldProps: PropTypes__default.object,
+  /**
+   * To show or hide the no options message on empty texfield value
+   */
+  showNoOptionsWithEmptyTextField: PropTypes__default.bool,
+  /**
+   *  To display error message on loading options
+   */
+  errorLoadingOptions: PropTypes__default.string,
+  /** To customize the components of select */
+  components: PropTypes__default.object,
+  /** Show label help */
+  showLabelHelp: PropTypes__default.bool,
+  /** Props applied to the input label help element. E.g.  InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
+  InputLabelHelpProps: PropTypes__default.object
+};
+
+UIconPicker.defaultProps = {
+  isMulti: false,
+  placeholder: 'Select...',
+  variant: 'outlined',
+  showNoOptionsWithEmptyTextField: true,
+  showLabelHelp: false,
+  InputLabelHelpProps: {}
+};
+
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
     return NaN;
@@ -58011,9 +58100,22 @@ var filter$1 = createFilterOptions();
 
 var useStyles$z = makeStyles$1(function (theme) {
   return {
-    controlStyle: {
+    root: {
       marginTop: theme.spacing(2),
-      width: '100%'
+      width: '100%',
+      '& .UPopupIndicator': {
+        visibility: 'hidden'
+      },
+      '&:hover': {
+        '& .UPopupIndicator': {
+          visibility: 'visible'
+        }
+      }
+    },
+    focused: {
+      '& .UPopupIndicator': {
+        visibility: 'visible'
+      }
     }
   };
 });
@@ -58137,7 +58239,11 @@ function ActiveAutoComplete(_ref) {
         return option.text;
       },
       onBlur: handleOnBlur,
-      className: classes.controlStyle,
+      classes: {
+        root: classes.root,
+        focused: classes.focused,
+        popupIndicator: 'UPopupIndicator'
+      },
       freeSolo: allowContextSpecific,
       renderInput: function renderInput(params) {
         return React__default.createElement(ActiveFormTextField, _extends$1({}, params, {
@@ -58234,6 +58340,7 @@ exports.UHeader = UHeader;
 exports.UHeaderLeftMenu = UHeaderLeftMenu;
 exports.UHeaderMainMenu = UHeaderMainMenu;
 exports.UHeaderRightButtons = UHeaderRightButtons;
+exports.UIconPicker = UIconPicker;
 exports.UInfiniteScroll = UInfiniteScroll;
 exports.UKeyboardDatePicker = UKeyboardDatePicker;
 exports.UKeyboardDateTimePicker = UKeyboardDateTimePicker;