@unicef/material-ui 0.11.2 → 0.11.3

package/lib/dev.js

@@ -49315,12 +49315,17 @@ var useStyles$n = makeStyles$1(function (theme) {
   };
 });
 
-/**
- * UConfirmationButton is a component to get confirmation from the user before processing it.
- * This button displays the confirmation where user has clicked the button
- * It has two varint icon/menu item
- */
-function UConfirmationButton(props) {
+var CONTROL_VARIANTS = {
+  popup: 'popup',
+  menuItem: 'menuItem',
+  icon: 'icon'
+
+  /**
+   * UConfirmationButton is a component to get confirmation from the user before processing it.
+   * This button displays the confirmation where user has clicked the button
+   * It has two varint icon/menu item
+   */
+};function UConfirmationButton(props) {
   var classes = useStyles$n();
   var onConfirm = props.onConfirm,
       id = props.id,
@@ -49330,32 +49335,41 @@ function UConfirmationButton(props) {
       icon = props.icon,
       confirmText = props.confirmText,
       confirmActionText = props.confirmActionText,
-      others = objectWithoutProperties(props, ['onConfirm', 'id', 'buttonText', 'enabled', 'variant', 'icon', 'confirmText', 'confirmActionText']);
+      cancelText = props.cancelText;
 
   var _useState = React.useState(null),
       _useState2 = slicedToArray(_useState, 2),
       deleteAnchorEl = _useState2[0],
       setDeleteAnchorEl = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = slicedToArray(_useState3, 2),
+      openDialog = _useState4[0],
+      setOpenDialog = _useState4[1];
+
   var handleConfirm = function handleConfirm(e) {
-    onConfirm(e, id);
-    handleDeleteOptionClicked();
+    onConfirm && onConfirm(e, id);
+    if (variant !== CONTROL_VARIANTS.popup) handleDeleteOptionClicked();
   };
 
   var handleDeleteOptionClicked = function handleDeleteOptionClicked(e) {
     setDeleteAnchorEl(null);
   };
+
+  var handleClick = function handleClick(e) {
+    if (variant !== CONTROL_VARIANTS.popup) setDeleteAnchorEl(e.currentTarget);else setOpenDialog(true);
+  };
+
+  var handleCancelPopup = function handleCancelPopup(e) {
+    setOpenDialog(false);
+  };
+
   return React__default.createElement(
     React__default.Fragment,
     null,
-    variant === 'menuItem' ? React__default.createElement(
+    variant === CONTROL_VARIANTS.menuItem ? React__default.createElement(
       MenuItem$1,
-      {
-        onClick: function onClick(e) {
-          return setDeleteAnchorEl(e.currentTarget);
-        },
-        className: classes.menuLabel
-      },
+      { onClick: handleClick, className: classes.menuLabel },
       icon,
       React__default.createElement(
         'span',
@@ -49370,16 +49384,40 @@ function UConfirmationButton(props) {
         {
           'aria-controls': 'delete-confirmation-menu-' + id,
           'aria-haspopup': 'true',
-          onClick: function onClick(e) {
-            return setDeleteAnchorEl(e.currentTarget);
-          },
+          onClick: handleClick,
           disabled: !enabled,
           className: classes.menuLabel
         },
         icon
       )
     ),
-    React__default.createElement(
+    variant === CONTROL_VARIANTS.popup ? React__default.createElement(
+      Dialog$1,
+      { id: 'delete-confirmation-menu-' + id, open: openDialog },
+      React__default.createElement(
+        DialogContent$1,
+        null,
+        React__default.createElement(
+          Typography$1,
+          { variant: 'body1' },
+          confirmText || ''
+        )
+      ),
+      React__default.createElement(
+        DialogActions$1,
+        null,
+        React__default.createElement(
+          UButton,
+          { onClick: handleCancelPopup, variant: 'uDefault' },
+          cancelText || ''
+        ),
+        React__default.createElement(
+          UButton,
+          { onClick: handleConfirm, variant: 'uPrimary', color: 'primary' },
+          confirmActionText || ''
+        )
+      )
+    ) : React__default.createElement(
       Menu$1,
       {
         id: 'delete-confirmation-menu-' + id,
@@ -49413,9 +49451,11 @@ UConfirmationButton.propTypes = {
   /** trigger confirmation function */
   onConfirm: PropTypes__default.func.isRequired,
   /** variant: menu or icon */
-  variant: PropTypes__default.oneOf(['menuItem', 'icon']),
+  variant: PropTypes__default.oneOf([CONTROL_VARIANTS.popup, CONTROL_VARIANTS.menuItem, CONTROL_VARIANTS.icon]),
   /** if the variant is menuitem, this prop make sure the item enable or not */
   enabled: PropTypes__default.bool,
+  /** button cancel text for popup variant */
+  cancelText: PropTypes__default.string,
   /** button confirm text */
   confirmText: PropTypes__default.string,
   /** confirm action text */
@@ -49430,6 +49470,7 @@ UConfirmationButton.defaultProps = {
   enabled: true,
   confirmText: 'Confirm deletion?',
   confirmActionText: 'Yes, delete',
+  cancelText: 'No',
   icon: React__default.createElement(DeleteOutlinedIcon, null)
 };
 
@@ -49609,21 +49650,14 @@ function UAsyncBadge(_ref) {
     }
   }, [variant]);
 
-  React.useEffect(function () {
-    // When the badge becomes visible, set focus to it.
-    if (visible && variant) {
-      chipRef.current.focus();
-    }
-  }, [visible, variant]);
-
   return React__default.createElement(
     'span',
     { className: classes.root },
     visible && React__default.createElement(Chip$1, {
       ref: chipRef,
-      tabIndex: 0,
-      'aria-live': 'assertive' // Announce changes to screen readers
-      , className: classes.chip + ' ' + classes[variant],
+      role: 'status',
+      'aria-live': 'polite',
+      className: classes.chip + ' ' + classes[variant],
       avatar: variant === 'loading' ? React__default.createElement(CircularProgress$1, { size: 16 }) : variant === 'error' ? React__default.createElement(HighlightOffIcon, { size: 16 }) : variant === 'success' && React__default.createElement(DoneIcon, { size: 16 }),
       classes: { avatar: classes[variant] },
       size: 'medium',