@unicef/material-ui 0.11.2 → 0.11.4

package/lib/dev.js

@@ -48532,6 +48532,18 @@ var UTextField = function (_ValidatorComponent) {
       }
     };
 
+    _this.handleSelectOpen = function () {
+      _this.setState({
+        isSelectOpen: true
+      });
+    };
+
+    _this.handleSelectClose = function () {
+      _this.setState({
+        isSelectOpen: false
+      });
+    };
+
     return _this;
   }
 
@@ -48560,8 +48572,13 @@ var UTextField = function (_ValidatorComponent) {
           InputLabelProps = _props.InputLabelProps,
           showLabelHelp = _props.showLabelHelp,
           InputLabelHelpProps = _props.InputLabelHelpProps,
-          rest = objectWithoutProperties(_props, ['variant', 'error', 'customErrorMessages', 'validators', 'requiredError', 'helperText', 'validatorListener', 'withRequiredValidator', 'onBlur', 'maxLength', 'counter', 'counterClassName', 'readOnly', 'label', 'InputProps', 'InputLabelProps', 'showLabelHelp', 'InputLabelHelpProps']);
-      var isValid = this.state.isValid;
+          select = _props.select,
+          id = _props.id,
+          SelectProps = _props.SelectProps,
+          rest = objectWithoutProperties(_props, ['variant', 'error', 'customErrorMessages', 'validators', 'requiredError', 'helperText', 'validatorListener', 'withRequiredValidator', 'onBlur', 'maxLength', 'counter', 'counterClassName', 'readOnly', 'label', 'InputProps', 'InputLabelProps', 'showLabelHelp', 'InputLabelHelpProps', 'select', 'id', 'SelectProps']);
+      var _state = this.state,
+          isValid = _state.isValid,
+          isSelectOpen = _state.isSelectOpen;
 
       var length = this.props.value ? this.props.value.length : 0;
       var counterError = maxLength && maxLength < length;
@@ -48583,8 +48600,32 @@ var UTextField = function (_ValidatorComponent) {
           InputLabelProps: _extends$1({}, InputLabelProps, {
             style: _extends$1({}, styles$13.labelRoot)
           }),
-          label: showLabelHelp ? React__default.createElement(InputLabelHelp, _extends$1({ inputLabel: label }, InputLabelHelpProps)) : label
-        })),
+          label: showLabelHelp ? React__default.createElement(InputLabelHelp, _extends$1({ inputLabel: label }, InputLabelHelpProps)) : label,
+          select: select,
+          id: id
+          /** Accessibility fixes for select field */
+        }, select ? {
+          inputProps: _extends$1({}, this.props.inputProps ? this.props.inputProps : {}, {
+            'aria-describedby': null
+          }),
+          SelectProps: _extends$1({}, SelectProps ? SelectProps : {}, {
+            open: isSelectOpen ? true : false,
+            onClose: this.handleSelectClose,
+            onOpen: this.handleSelectOpen,
+            MenuProps: {
+              MenuListProps: {
+                id: id + '-select-menu',
+                'aria-labelledby': null
+              }
+            },
+            SelectDisplayProps: {
+              role: 'combobox',
+              'aria-controls': id + '-select-menu',
+              'aria-expanded': isSelectOpen ? true : false,
+              'aria-describedby': id + '-helper-text'
+            }
+          })
+        } : {})),
         counter && React__default.createElement(
           Box,
           { display: 'block' },
@@ -48637,7 +48678,11 @@ UTextField.propTypes = {
   /** 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
+  InputLabelHelpProps: PropTypes__default.object,
+  /** Id of the field */
+  id: PropTypes__default.string,
+  /** Props applied to the Select element. */
+  SelectProps: PropTypes__default.object
 };
 
 UTextField.defaultProps = {
@@ -48645,7 +48690,9 @@ UTextField.defaultProps = {
   readOnly: false,
   validatorListener: function validatorListener() {},
   showLabelHelp: false,
-  InputLabelHelpProps: {}
+  InputLabelHelpProps: {},
+  select: false,
+  SelectProps: {}
 };
 
 //Extending the ValidatorComponent using class component, so taking an exclusion from our rule: functional components only.
@@ -49315,12 +49362,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 +49382,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 +49431,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 +49498,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 +49517,7 @@ UConfirmationButton.defaultProps = {
   enabled: true,
   confirmText: 'Confirm deletion?',
   confirmActionText: 'Yes, delete',
+  cancelText: 'No',
   icon: React__default.createElement(DeleteOutlinedIcon, null)
 };
 
@@ -49566,7 +49654,8 @@ var useStyles$p = makeStyles$1(function (theme) {
     root: {
       position: 'fixed',
       top: 16,
-      left: '40%',
+      left: '50%',
+      transform: 'translate(-50%, 0)',
       zIndex: 5000
     },
     chip: {
@@ -49609,21 +49698,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',
@@ -52867,6 +52949,10 @@ function USearchBox(_ref) {
 
   var classes = useStyles$u();
 
+  useEffect(function () {
+    setSearch(value);
+  }, [value]);
+
   var handleChange = function handleChange(event) {
     setSearch(event.target.value);
   };