@unicef/material-ui 0.12.0 → 0.12.2

package/lib/dev.js

@@ -35424,7 +35424,12 @@ function InputComponent(_ref) {
   var inputRef = _ref.inputRef,
       props = objectWithoutProperties(_ref, ['inputRef']);
 
-  return React__default.createElement('div', _extends$1({ ref: inputRef }, props));
+  return React__default.createElement('div', _extends$1({
+    ref: inputRef
+  }, props, {
+    required: undefined // Remove required from div element
+    , 'aria-invalid': undefined // Remove aria-invalid from div element
+  }));
 }
 
 InputComponent.propTypes = {
@@ -37249,7 +37254,10 @@ function Input$3(props) {
     describedBy = describedBy || customDescribedBy ? '' + (describedBy ? describedBy : '') + (customDescribedBy ? ' ' + customDescribedBy : '') : undefined;
   }
 
-  return React__default.createElement(components.Input, _extends$1({}, props, { 'aria-describedby': describedBy }));
+  return React__default.createElement(components.Input, _extends$1({}, props, {
+    'aria-describedby': describedBy,
+    required: props && props.selectProps && props.selectProps.required || undefined
+  }));
 }
 
 Input$3.propTypes = {
@@ -53258,7 +53266,8 @@ function ActiveKeyboardDatePicker(props) {
       showLabelHelp = props.showLabelHelp,
       InputLabelHelpProps = props.InputLabelHelpProps,
       label = props.label,
-      others = objectWithoutProperties(props, ['autoOk', 'variant', 'inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label']);
+      KeyboardButtonProps = props.KeyboardButtonProps,
+      others = objectWithoutProperties(props, ['autoOk', 'variant', 'inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label', 'KeyboardButtonProps']);
 
   var _React$useState = React__default.useState(classes.icon),
       _React$useState2 = slicedToArray(_React$useState, 2),
@@ -53299,11 +53308,11 @@ function ActiveKeyboardDatePicker(props) {
         disabled: Boolean(readOnly)
       }, inputProps),
       readOnly: readOnly,
-      KeyboardButtonProps: {
+      KeyboardButtonProps: _extends$1({}, KeyboardButtonProps, {
         classes: {
           root: '' + (!interactiveMode && !readOnly ? '' : hideIcon)
         }
-      },
+      }),
       InputProps: _extends$1({
         classes: {
           root: classes.input + ' ' + (readOnly && classes.inputHover),
@@ -53345,14 +53354,17 @@ ActiveKeyboardDatePicker.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,
+  /** Keyboard button props */
+  KeyboardButtonProps: PropTypes__default.object
 };
 
 ActiveKeyboardDatePicker.defaultProps = {
   inputVariant: 'outlined',
   autoOk: true,
   variant: 'inline',
-  format: 'dd/MM/yyyy'
+  format: 'dd/MM/yyyy',
+  KeyboardButtonProps: {}
 };
 
 var styles$17 = {
@@ -53675,7 +53687,8 @@ function ActiveKeyboardTimePicker(props) {
       showLabelHelp = props.showLabelHelp,
       InputLabelHelpProps = props.InputLabelHelpProps,
       label = props.label,
-      others = objectWithoutProperties(props, ['inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label']);
+      KeyboardButtonProps = props.KeyboardButtonProps,
+      others = objectWithoutProperties(props, ['inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label', 'KeyboardButtonProps']);
 
   var _React$useState = React__default.useState(classes.icon),
       _React$useState2 = slicedToArray(_React$useState, 2),
@@ -53714,11 +53727,11 @@ function ActiveKeyboardTimePicker(props) {
         disabled: Boolean(readOnly)
       }, inputProps),
       readOnly: readOnly,
-      KeyboardButtonProps: {
+      KeyboardButtonProps: _extends$1({}, KeyboardButtonProps, {
         classes: {
           root: '' + (!interactiveMode && !readOnly ? '' : hideIcon)
         }
-      },
+      }),
       InputProps: _extends$1({
         classes: {
           root: classes.input + ' ' + (readOnly && classes.inputHover),
@@ -53756,13 +53769,16 @@ ActiveKeyboardTimePicker.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,
+  /** Keyboard button props */
+  KeyboardButtonProps: PropTypes__default.object
 };
 
 ActiveKeyboardTimePicker.defaultProps = {
   inputVariant: 'outlined',
   autoOk: true,
-  variant: 'inline'
+  variant: 'inline',
+  KeyboardButtonProps: {}
 };
 
 var filter$1 = createFilterOptions();
@@ -53983,6 +53999,172 @@ ActiveAutoComplete.defaultProps = {
   usedItemIds: []
 };
 
+var styles$1a = {
+  labelRoot: {
+    pointerEvents: 'auto',
+    display: 'flex',
+    alignItems: 'center'
+  }
+};
+
+var useStyles$A = makeStyles$1(function (theme) {
+  return {
+    textField: {
+      marginTop: theme.spacing(0.25),
+      marginBottom: theme.spacing(0.25)
+    },
+    notchedOutline: {
+      borderRadius: 2,
+      borderColor: 'transparent'
+    },
+    inputPaddingWithoutLabel: function inputPaddingWithoutLabel(props) {
+      return {
+        padding: props.inputPadding ? props.inputPadding : '2px 2px 2px 2px',
+        height: 'auto'
+      };
+    },
+    inputPaddingWithLabel: function inputPaddingWithLabel(props) {
+      return {
+        padding: props.inputPadding ? props.inputPadding : '18.5px 14px',
+        height: 'auto'
+      };
+    },
+    input: function input(props) {
+      return _extends$1({}, theme.typography[props.typographyVariant]);
+    },
+    inputHover: {
+      '&:hover $notchedOutline': {
+        borderColor: 'transparent'
+      }
+    },
+    icon: {
+      display: 'none'
+    },
+    showIcon: {
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * ActiveKeyboardDateTimePicker is a customized [Material Ui KeyboardDateTimePicker]('https://material-ui-pickers.dev/api/KeyboardDateTimePicker') for more details
+ */
+function ActiveKeyboardDateTimePicker(props) {
+  var classes = useStyles$A(props);
+  var autoOk = props.autoOk,
+      variant = props.variant,
+      inputVariant = props.inputVariant,
+      readOnly = props.readOnly,
+      interactiveMode = props.interactiveMode,
+      InputLabelProps = props.InputLabelProps,
+      className = props.className,
+      inputProps = props.inputProps,
+      InputProps = props.InputProps,
+      placeholder = props.placeholder,
+      showLabelHelp = props.showLabelHelp,
+      InputLabelHelpProps = props.InputLabelHelpProps,
+      label = props.label,
+      KeyboardButtonProps = props.KeyboardButtonProps,
+      others = objectWithoutProperties(props, ['autoOk', 'variant', 'inputVariant', 'readOnly', 'interactiveMode', 'InputLabelProps', 'className', 'inputProps', 'InputProps', 'placeholder', 'showLabelHelp', 'InputLabelHelpProps', 'label', 'KeyboardButtonProps']);
+
+  var _React$useState = React__default.useState(classes.icon),
+      _React$useState2 = slicedToArray(_React$useState, 2),
+      hideIcon = _React$useState2[0],
+      setHideIcon = _React$useState2[1];
+
+  var inputPaddingClass = props.label ? classes.inputPaddingWithLabel : classes.inputPaddingWithoutLabel;
+  var finalPlaceholder = readOnly ? null : placeholder;
+
+  var onMouseOver = function onMouseOver() {
+    if (!readOnly) {
+      setHideIcon(classes.showIcon);
+    }
+    return props.onMouseOver && props.onMouseOver;
+  };
+
+  var handleBlur = function handleBlur(event) {
+    event.preventDefault();
+    setHideIcon(classes.icon);
+    return props.onBlur && props.onBlur;
+  };
+
+  return React__default.createElement(
+    MuiPickersUtilsProvider,
+    { utils: DateFnsUtils },
+    React__default.createElement(KeyboardDateTimePicker, _extends$1({
+      autoOk: autoOk,
+      variant: variant,
+      inputVariant: inputVariant,
+      placeholder: finalPlaceholder,
+      className: classes.textField + ' ' + (className && className),
+      InputLabelProps: _extends$1({
+        shrink: true,
+        style: _extends$1({}, styles$1a.labelRoot)
+      }, InputLabelProps),
+      inputProps: _extends$1({
+        readOnly: Boolean(readOnly),
+        disabled: Boolean(readOnly)
+      }, inputProps),
+      readOnly: readOnly,
+      KeyboardButtonProps: _extends$1({}, KeyboardButtonProps, {
+        classes: {
+          root: '' + (!interactiveMode && !readOnly ? '' : hideIcon)
+        }
+      }),
+      InputProps: _extends$1({
+        classes: {
+          root: classes.input + ' ' + (readOnly && classes.inputHover),
+          notchedOutline: '' + (!interactiveMode && !readOnly ? '' : classes.notchedOutline),
+          input: inputPaddingClass
+        }
+      }, InputProps),
+      label: showLabelHelp ? React__default.createElement(InputLabelHelp, _extends$1({ inputLabel: label }, InputLabelHelpProps)) : label,
+      onMouseOver: onMouseOver,
+      onMouseLeave: handleBlur,
+      onBlur: handleBlur
+    }, others))
+  );
+}
+
+ActiveKeyboardDateTimePicker.propTypes = {
+  /** AutoOk on date select */
+  autoOk: PropTypes__default.bool,
+  /** Picker container option variant : 'dialog' | 'inline' | 'static' */
+  variant: PropTypes__default.string,
+  /** Material ui textfield variant */
+  inputVariant: PropTypes__default.string,
+  /** Date format */
+  format: PropTypes__default.string,
+  /** To make the content readOnly */
+  readOnly: PropTypes__default.bool,
+  /** Change to write mode by hiding text field border and displays border on hover*/
+  interactiveMode: PropTypes__default.bool,
+  /** Props applied to the InputLabel element.*/
+  InputLabelProps: PropTypes__default.object,
+  /** Attributes applied to the input element. */
+  inputProps: PropTypes__default.object,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes__default.object,
+  /** Placeholder text*/
+  placeholder: PropTypes__default.string,
+  /** Label text */
+  label: PropTypes__default.string,
+  /** 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,
+  /** Keyboard button props */
+  KeyboardButtonProps: PropTypes__default.object
+};
+
+ActiveKeyboardDateTimePicker.defaultProps = {
+  inputVariant: 'outlined',
+  autoOk: true,
+  variant: 'inline',
+  format: 'dd/MM/yyyy hh:mm a',
+  KeyboardButtonProps: {}
+};
+
 exports.ActiveAutoComplete = ActiveAutoComplete;
 exports.ActiveCurrencyField = ActiveCurrencyField;
 exports.ActiveDatePicker = ActiveDatePicker;
@@ -53991,6 +54173,7 @@ exports.ActiveFormPositiveInteger = ActiveFormPositiveInteger;
 exports.ActiveFormSelect = ActiveFormSelect;
 exports.ActiveFormTextField = ActiveFormTextField;
 exports.ActiveKeyboardDatePicker = ActiveKeyboardDatePicker;
+exports.ActiveKeyboardDateTimePicker = ActiveKeyboardDateTimePicker;
 exports.ActiveKeyboardTimePicker = ActiveKeyboardTimePicker;
 exports.ActiveTimePicker = ActiveTimePicker;
 exports.UAsyncBadge = UAsyncBadge;