@unicef/material-ui 0.11.6 → 0.11.8

package/lib/prod.js

@@ -28569,6 +28569,30 @@ exports.default = _default;
 
 var CancelIcon$1 = unwrapExports(Cancel);
 
+var ArrowDropDown = createCommonjsModule(function (module, exports) {
+
+
+
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = interopRequireWildcard(React__default);
+
+var _createSvgIcon = interopRequireDefault(createSvgIcon$1);
+
+var _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement("path", {
+  d: "M7 10l5 5 5-5z"
+}), 'ArrowDropDown');
+
+exports.default = _default;
+});
+
+var ArrowDropDownIcon$1 = unwrapExports(ArrowDropDown);
+
 var useStyles$5 = makeStyles$1(function (theme) {
   return {
     chip: {
@@ -30648,6 +30672,11 @@ var defaultComponents$1 = {
   MultiValueRemove: function MultiValueRemove(removeProps) {
     return React__default.createElement(CancelIcon$1, removeProps);
   }
+};
+
+var ICON_VARIANTS = {
+  dark: 'dark',
+  light: 'light'
 
   /**
    * USelectPicker is a control for selecting a option from a list. Has the features below:
@@ -30678,7 +30707,8 @@ var defaultComponents$1 = {
       isDisabled = props.isDisabled,
       menuIsOpen = props.menuIsOpen,
       placeholder = props.placeholder,
-      others = objectWithoutProperties(props, ['label', 'variant', 'TextFieldProps', 'showNoOptionsWithEmptyTextField', 'onInputChange', 'components', 'showLabelHelp', 'InputLabelProps', 'InputLabelHelpProps', 'hideAvatar', 'readOnly', 'lineByLineOption', 'isClearable', 'isSearchable', 'isDisabled', 'menuIsOpen', 'placeholder']);
+      iconVariant = props.iconVariant,
+      others = objectWithoutProperties(props, ['label', 'variant', 'TextFieldProps', 'showNoOptionsWithEmptyTextField', 'onInputChange', 'components', 'showLabelHelp', 'InputLabelProps', 'InputLabelHelpProps', 'hideAvatar', 'readOnly', 'lineByLineOption', 'isClearable', 'isSearchable', 'isDisabled', 'menuIsOpen', 'placeholder', 'iconVariant']);
 
   var _useState = React.useState(true),
       _useState2 = slicedToArray(_useState, 2),
@@ -30688,6 +30718,7 @@ var defaultComponents$1 = {
   var selectStyles = {
     input: function input(base) {
       return _extends$1({}, base, {
+        height: iconVariant === ICON_VARIANTS.dark ? theme.spacing(4) : 'inherit', // if dark variant, then match height with material ui controls
         color: theme.palette.text.primary,
         '& input': {
           font: 'inherit'
@@ -30724,11 +30755,17 @@ var defaultComponents$1 = {
     onInputChange && onInputChange(value);
   };
 
-  var extraComponents = readOnly ? {
-    DropdownIndicator: function DropdownIndicator() {
-      return null;
-    }
-  } : {};
+  var extraComponents = {};
+  if (iconVariant === ICON_VARIANTS.dark) extraComponents.DropdownIndicator = function () {
+    return React__default.createElement(
+      'span',
+      { style: { color: theme.palette.text.secondary } },
+      React__default.createElement(ArrowDropDownIcon$1, null)
+    );
+  };
+  if (readOnly) extraComponents.DropdownIndicator = function () {
+    return null;
+  };
 
   var selectPlaceholder = readOnly ? '' : placeholder;
 
@@ -30819,7 +30856,9 @@ USelectPicker.propTypes = {
   /** Whether the input is disabled */
   isDisabled: PropTypes__default.bool,
   /** Whether the menu is open */
-  menuIsOpen: PropTypes__default.bool
+  menuIsOpen: PropTypes__default.bool,
+  /** Down arrow variant */
+  iconVariant: PropTypes__default.oneOf([ICON_VARIANTS.dark, ICON_VARIANTS.light])
 };
 
 USelectPicker.defaultProps = {
@@ -30835,7 +30874,8 @@ USelectPicker.defaultProps = {
   isSearchable: true,
   isDisabled: false,
   menuIsOpen: undefined,
-  lineByLineOption: false
+  lineByLineOption: false,
+  iconVariant: ICON_VARIANTS.light
 };
 
 /**
@@ -43414,7 +43454,7 @@ var Alert$1 = withStyles$1(styles$14, {
  * @ignore - internal component.
  */
 
-var ArrowDropDownIcon$1 = createSvgIcon( /*#__PURE__*/React.createElement("path", {
+var ArrowDropDownIcon$2 = createSvgIcon( /*#__PURE__*/React.createElement("path", {
   d: "M7 10l5 5 5-5z"
 }));
 
@@ -44692,7 +44732,7 @@ var _ref$4 = /*#__PURE__*/React.createElement(CloseIcon, {
   fontSize: "small"
 });
 
-var _ref2$3 = /*#__PURE__*/React.createElement(ArrowDropDownIcon$1, null);
+var _ref2$3 = /*#__PURE__*/React.createElement(ArrowDropDownIcon$2, null);
 
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(props, ref) {
   /* eslint-disable no-unused-vars */