@unicef/material-ui 0.11.3 → 0.11.5

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.
@@ -49607,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: {
@@ -52901,6 +52949,10 @@ function USearchBox(_ref) {
 
   var classes = useStyles$u();
 
+  React.useEffect(function () {
+    setSearch(value);
+  }, [value]);
+
   var handleChange = function handleChange(event) {
     setSearch(event.target.value);
   };