@unicef/material-ui 0.10.1 → 0.11.0

package/lib/prod.js

@@ -32458,13 +32458,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: {
@@ -34668,6 +34668,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;
@@ -51110,6 +51189,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;