@unicef/material-ui 0.11.5 → 0.11.7

package/lib/dev.js

@@ -35128,6 +35128,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: {
@@ -37207,6 +37231,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:
@@ -37237,7 +37266,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),
@@ -37283,11 +37313,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;
 
@@ -37378,7 +37414,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 = {
@@ -37394,7 +37432,8 @@ USelectPicker.defaultProps = {
   isSearchable: true,
   isDisabled: false,
   menuIsOpen: undefined,
-  lineByLineOption: false
+  lineByLineOption: false,
+  iconVariant: ICON_VARIANTS.light
 };
 
 /**
@@ -49363,9 +49402,14 @@ var useStyles$n = makeStyles$1(function (theme) {
 });
 
 var CONTROL_VARIANTS = {
-  popup: 'popup',
   menuItem: 'menuItem',
-  icon: 'icon'
+  icon: 'icon',
+  button: 'button'
+};
+
+var CONFIRMATION_VARIANTS = {
+  menu: 'menu',
+  popup: 'popup'
 
   /**
    * UConfirmationButton is a component to get confirmation from the user before processing it.
@@ -49382,7 +49426,9 @@ var CONTROL_VARIANTS = {
       icon = props.icon,
       confirmText = props.confirmText,
       confirmActionText = props.confirmActionText,
-      cancelText = props.cancelText;
+      cancelText = props.cancelText,
+      buttonVariant = props.buttonVariant,
+      confirmVariant = props.confirmVariant;
 
   var _useState = React.useState(null),
       _useState2 = slicedToArray(_useState, 2),
@@ -49396,7 +49442,11 @@ var CONTROL_VARIANTS = {
 
   var handleConfirm = function handleConfirm(e) {
     onConfirm && onConfirm(e, id);
-    if (variant !== CONTROL_VARIANTS.popup) handleDeleteOptionClicked();
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(false);
+    } else {
+      handleDeleteOptionClicked();
+    }
   };
 
   var handleDeleteOptionClicked = function handleDeleteOptionClicked(e) {
@@ -49404,7 +49454,11 @@ var CONTROL_VARIANTS = {
   };
 
   var handleClick = function handleClick(e) {
-    if (variant !== CONTROL_VARIANTS.popup) setDeleteAnchorEl(e.currentTarget);else setOpenDialog(true);
+    if (confirmVariant === CONFIRMATION_VARIANTS.popup) {
+      setOpenDialog(true);
+    } else {
+      setDeleteAnchorEl(e.currentTarget);
+    }
   };
 
   var handleCancelPopup = function handleCancelPopup(e) {
@@ -49419,10 +49473,20 @@ var CONTROL_VARIANTS = {
       { onClick: handleClick, className: classes.menuLabel },
       icon,
       React__default.createElement(
-        'span',
-        { className: classes.span },
+        Box,
+        { component: 'span', className: icon ? classes.span : '' },
         buttonText
       )
+    ) : variant === CONTROL_VARIANTS.button ? React__default.createElement(
+      UButton,
+      {
+        startIcon: icon,
+        onClick: handleClick,
+        'aria-controls': 'delete-confirmation-menu-' + id,
+        'aria-haspopup': 'true',
+        variant: buttonVariant
+      },
+      buttonText
     ) : React__default.createElement(
       Tooltip$1,
       { title: buttonText, placement: 'top' },
@@ -49438,7 +49502,7 @@ var CONTROL_VARIANTS = {
         icon
       )
     ),
-    variant === CONTROL_VARIANTS.popup ? React__default.createElement(
+    confirmVariant === CONFIRMATION_VARIANTS.popup ? React__default.createElement(
       Dialog$1,
       { id: 'delete-confirmation-menu-' + id, open: openDialog },
       React__default.createElement(
@@ -49497,8 +49561,10 @@ UConfirmationButton.propTypes = {
   buttonText: PropTypes__default.string,
   /** trigger confirmation function */
   onConfirm: PropTypes__default.func.isRequired,
-  /** variant: menu or icon */
-  variant: PropTypes__default.oneOf([CONTROL_VARIANTS.popup, CONTROL_VARIANTS.menuItem, CONTROL_VARIANTS.icon]),
+  /** variant: menuItem or icon or button */
+  variant: PropTypes__default.oneOf([CONTROL_VARIANTS.menuItem, CONTROL_VARIANTS.icon, CONTROL_VARIANTS.button]),
+  /** Confirm variant: popup or menu */
+  confirmVariant: PropTypes__default.oneOf([CONFIRMATION_VARIANTS.popup, CONFIRMATION_VARIANTS.menu]),
   /** if the variant is menuitem, this prop make sure the item enable or not */
   enabled: PropTypes__default.bool,
   /** button cancel text for popup variant */
@@ -49508,7 +49574,9 @@ UConfirmationButton.propTypes = {
   /** confirm action text */
   confirmActionText: PropTypes__default.string,
   /** custom icon */
-  icon: PropTypes__default.element
+  icon: PropTypes__default.element,
+  /** Button variant applied to menuItem button */
+  buttonVariant: PropTypes__default.string
 };
 
 UConfirmationButton.defaultProps = {
@@ -49518,7 +49586,9 @@ UConfirmationButton.defaultProps = {
   confirmText: 'Confirm deletion?',
   confirmActionText: 'Yes, delete',
   cancelText: 'No',
-  icon: React__default.createElement(DeleteOutlinedIcon, null)
+  icon: React__default.createElement(DeleteOutlinedIcon, null),
+  buttonVariant: 'text',
+  confirmVariant: 'menu'
 };
 
 /**
@@ -50095,7 +50165,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"
 }), 'ArrowDropDown');
 
@@ -51421,7 +51491,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 */