@unicef/material-ui 1.0.6 → 1.0.7

package/lib/dev.js

@@ -33417,17 +33417,23 @@ var StyledAppBar = styled$1(AppBar$1, {
  */
 
 function UHeader(props) {
-  var position = props.position,
+  var _props$position = props.position,
+    position = _props$position === void 0 ? 'fixed' : _props$position,
     applicationName = props.applicationName,
-    showHamburgerMenu = props.showHamburgerMenu,
-    hideLogo = props.hideLogo,
+    _props$showHamburgerM = props.showHamburgerMenu,
+    showHamburgerMenu = _props$showHamburgerM === void 0 ? true : _props$showHamburgerM,
+    _props$hideLogo = props.hideLogo,
+    hideLogo = _props$hideLogo === void 0 ? false : _props$hideLogo,
     logo = props.logo,
-    hideLogoBorderLine = props.hideLogoBorderLine,
-    logoUrl = props.logoUrl,
+    _props$hideLogoBorder = props.hideLogoBorderLine,
+    hideLogoBorderLine = _props$hideLogoBorder === void 0 ? true : _props$hideLogoBorder,
+    _props$logoUrl = props.logoUrl,
+    logoUrl = _props$logoUrl === void 0 ? '/' : _props$logoUrl,
     onLogoClick = props.onLogoClick,
     openDrawer = props.openDrawer,
     toggleDrawer = props.toggleDrawer,
-    elevation = props.elevation,
+    _props$elevation = props.elevation,
+    elevation = _props$elevation === void 0 ? 4 : _props$elevation,
     bgColor = props.bgColor;
   var handleUrlClick = function handleUrlClick(e) {
     if (onLogoClick) {
@@ -33550,14 +33556,6 @@ UHeader.propTypes = {
   /** AppBar elevation value to handle the box shadow effect */
   elevation: PropTypes.number
 };
-UHeader.defaultProps = {
-  position: 'fixed',
-  showHamburgerMenu: true,
-  hideLogo: false,
-  logoUrl: '/',
-  hideLogoBorderLine: true,
-  elevation: 4
-};
 
 var PREFIX$u = 'ULayout';
 var classes$u = {
@@ -33584,7 +33582,7 @@ function ULayout(props) {
   }, props.children);
 }
 
-var _excluded$14 = ["headerHeight", "width"];
+var _excluded$14 = ["headerHeight", "width", "children"];
 var PREFIX$t = 'USideBar';
 var classes$t = {
   drawer: "".concat(PREFIX$t, "-drawer"),
@@ -33609,10 +33607,13 @@ var StyledBox$k = styled$1(Box$1)(function (props) {
  *
  * USideBar must be wrapped inside the ULayout(Parent Component).
  */
-function USideBar(props) {
-  var headerHeight = props.headerHeight,
-    width = props.width,
-    others = _objectWithoutProperties$2(props, _excluded$14);
+function USideBar(_ref2) {
+  var _ref2$headerHeight = _ref2.headerHeight,
+    headerHeight = _ref2$headerHeight === void 0 ? 64 : _ref2$headerHeight,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 300 : _ref2$width,
+    children = _ref2.children,
+    others = _objectWithoutProperties$2(_ref2, _excluded$14);
   return /*#__PURE__*/React$1.createElement(StyledBox$k, {
     display: {
       xs: 'none',
@@ -33629,7 +33630,7 @@ function USideBar(props) {
     style: {
       minHeight: headerHeight
     }
-  }), props.children));
+  }), children));
 }
 USideBar.propTypes = {
   /** Height of the header including MainMenu */
@@ -33639,10 +33640,6 @@ USideBar.propTypes = {
    */
   width: PropTypes.number
 };
-USideBar.defaultProps = {
-  headerHeight: 64,
-  width: 300
-};
 
 var PREFIX$s = 'UContent';
 var classes$s = {
@@ -33662,7 +33659,8 @@ var Root$5 = styled$1('main')(function (_ref) {
  * * UContent must be wrapped inside the ULayout.
  */
 function UContent(_ref3) {
-  var headerHeight = _ref3.headerHeight,
+  var _ref3$headerHeight = _ref3.headerHeight,
+    headerHeight = _ref3$headerHeight === void 0 ? 64 : _ref3$headerHeight,
     children = _ref3.children;
   return /*#__PURE__*/React$1.createElement(Root$5, {
     className: classes$s.content
@@ -33676,9 +33674,6 @@ UContent.propTypes = {
   /** Height of the header including MainMenu */
   headerHeight: PropTypes.number
 };
-UContent.defaultProps = {
-  headerHeight: 64
-};
 
 var _excluded$13 = ["spinButton", "loading", "variant", "color"];
 var PREFIX$r = 'UButton';
@@ -33707,12 +33702,16 @@ var StyledBox$j = styled$1(Box$1)(function (_ref) {
  * Custom advanced button with unicef colors and also it has spinning effect in the button
  *
  * */
-function UButton(props) {
-  var spinButton = props.spinButton,
-    loading = props.loading,
-    variant = props.variant,
-    color = props.color,
-    others = _objectWithoutProperties$2(props, _excluded$13);
+function UButton(_ref3) {
+  var _ref3$spinButton = _ref3.spinButton,
+    spinButton = _ref3$spinButton === void 0 ? false : _ref3$spinButton,
+    _ref3$loading = _ref3.loading,
+    loading = _ref3$loading === void 0 ? false : _ref3$loading,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'contained' : _ref3$variant,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    others = _objectWithoutProperties$2(_ref3, _excluded$13);
   function getVariant(variant) {
     switch (variant) {
       case 'uDefault':
@@ -33759,12 +33758,6 @@ UButton.propTypes = {
   /**  color of the button */
   color: PropTypes.string
 };
-UButton.defaultProps = {
-  color: 'primary',
-  variant: 'contained',
-  spinButton: false,
-  loading: false
-};
 
 function _defineProperty(obj, key, value) {
   key = toPropertyKey(key);
@@ -39680,19 +39673,35 @@ var NumberFormat = /*@__PURE__*/(function (superclass) {
 
 NumberFormat.defaultProps = defaultProps;
 
-var _excluded$Y = ["inputRef", "name", "onChange", "thousandSeparator", "isNumericString", "allowNegative", "decimalScale", "fixedDecimalScale"];
+var _excluded$Y = ["inputRef", "name", "value", "onChange", "onBlur", "thousandSeparator", "isNumericString", "allowNegative", "decimalScale", "fixedDecimalScale"];
 function PositiveNumberFormat(_ref) {
   var inputRef = _ref.inputRef,
     name = _ref.name,
+    value = _ref.value,
     onChange = _ref.onChange,
-    thousandSeparator = _ref.thousandSeparator,
-    isNumericString = _ref.isNumericString,
-    allowNegative = _ref.allowNegative,
-    decimalScale = _ref.decimalScale,
-    fixedDecimalScale = _ref.fixedDecimalScale,
+    _onBlur = _ref.onBlur,
+    _ref$thousandSeparato = _ref.thousandSeparator,
+    thousandSeparator = _ref$thousandSeparato === void 0 ? true : _ref$thousandSeparato,
+    _ref$isNumericString = _ref.isNumericString,
+    isNumericString = _ref$isNumericString === void 0 ? false : _ref$isNumericString,
+    _ref$allowNegative = _ref.allowNegative,
+    allowNegative = _ref$allowNegative === void 0 ? false : _ref$allowNegative,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 0 : _ref$decimalScale,
+    _ref$fixedDecimalScal = _ref.fixedDecimalScale,
+    fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? false : _ref$fixedDecimalScal,
     other = _objectWithoutProperties$2(_ref, _excluded$Y);
   return /*#__PURE__*/React$1.createElement(NumberFormat, _extends$1({}, other, {
+    value: value,
     getInputRef: inputRef,
+    onBlur: function onBlur() {
+      return _onBlur && _onBlur({
+        target: {
+          name: name,
+          value: value
+        }
+      });
+    },
     onValueChange: function onValueChange(values, sourceInfo) {
       onChange({
         target: {
@@ -39710,10 +39719,14 @@ function PositiveNumberFormat(_ref) {
   }));
 }
 PositiveNumberFormat.propTypes = {
+  // field value
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   // Input ref
   inputRef: PropTypes.func.isRequired,
   // On each onChange value will be formatted
   onChange: PropTypes.func.isRequired,
+  // callback function to be called on blur
+  onBlur: PropTypes.func,
   // Thousand separator
   thousandSeparator: PropTypes.bool,
   // Is numeric string
@@ -39725,13 +39738,6 @@ PositiveNumberFormat.propTypes = {
   //If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool
 };
-PositiveNumberFormat.defaultProps = {
-  thousandSeparator: true,
-  isNumericString: false,
-  allowNegative: false,
-  decimalScale: 0,
-  fixedDecimalScale: false
-};
 
 var HelpOutline = {};
 
@@ -39791,12 +39797,16 @@ var StyledBox$i = styled$1(Box$1)(function (_ref) {
 });
 function InputLabelHelp(_ref3) {
   var inputLabel = _ref3.inputLabel,
-    type = _ref3.type,
-    label = _ref3.label,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'tooltip' : _ref3$type,
+    _ref3$label = _ref3.label,
+    label = _ref3$label === void 0 ? 'Help' : _ref3$label,
     link = _ref3.link,
-    icon = _ref3.icon,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? null : _ref3$icon,
     tooltipTitle = _ref3.tooltipTitle,
-    tooltipPlacement = _ref3.tooltipPlacement;
+    _ref3$tooltipPlacemen = _ref3.tooltipPlacement,
+    tooltipPlacement = _ref3$tooltipPlacemen === void 0 ? 'top' : _ref3$tooltipPlacemen;
   return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("span", null, inputLabel), /*#__PURE__*/React$1.createElement(StyledBox$i, {
     className: classes$n.root
   }, type === 'tooltip' ? /*#__PURE__*/React$1.createElement(Tooltip$1, {
@@ -39840,12 +39850,6 @@ InputLabelHelp.propTypes = {
   // Tooltip placement
   tooltipPlacement: PropTypes.string
 };
-InputLabelHelp.defaultProps = {
-  label: 'Help',
-  type: 'tooltip',
-  icon: null,
-  tooltipPlacement: 'top'
-};
 
 var _excluded$X = ["showLabelHelp", "InputLabelHelpProps", "lineByLineOption", "hideAvatar"];
 var styles$1 = {
@@ -61253,10 +61257,14 @@ var _excluded$d = ["inputPrefix", "decimalScale", "fixedDecimalScale", "textAlig
  * The ActiveCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc. The cool feature with ActiveCurrencyField is you can read and write at the same place.
  */
 function ActiveCurrencyField(_ref) {
-  var inputPrefix = _ref.inputPrefix,
-    decimalScale = _ref.decimalScale,
-    fixedDecimalScale = _ref.fixedDecimalScale,
-    textAlign = _ref.textAlign,
+  var _ref$inputPrefix = _ref.inputPrefix,
+    inputPrefix = _ref$inputPrefix === void 0 ? '$ ' : _ref$inputPrefix,
+    _ref$decimalScale = _ref.decimalScale,
+    decimalScale = _ref$decimalScale === void 0 ? 2 : _ref$decimalScale,
+    _ref$fixedDecimalScal = _ref.fixedDecimalScale,
+    fixedDecimalScale = _ref$fixedDecimalScal === void 0 ? true : _ref$fixedDecimalScal,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'right' : _ref$textAlign,
     inputProps = _ref.inputProps,
     props = _objectWithoutProperties$2(_ref, _excluded$d);
   return /*#__PURE__*/React$1.createElement(ActiveFormPositiveInteger, _extends$1({
@@ -61313,12 +61321,6 @@ ActiveCurrencyField.propTypes = {
   /** Input text align */
   textAlign: PropTypes.string
 };
-ActiveCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right'
-};
 
 var DeleteOutlined = {};
 
@@ -61364,18 +61366,27 @@ var CONFIRMATION_VARIANTS = {
  * This button displays the confirmation where user has clicked the button
  * It has two varint icon/menu item
  */
-function UConfirmationButton(props) {
-  var onConfirm = props.onConfirm,
-    id = props.id,
-    buttonText = props.buttonText,
-    enabled = props.enabled,
-    variant = props.variant,
-    icon = props.icon,
-    confirmText = props.confirmText,
-    confirmActionText = props.confirmActionText,
-    cancelText = props.cancelText,
-    buttonVariant = props.buttonVariant,
-    confirmVariant = props.confirmVariant;
+function UConfirmationButton(_ref3) {
+  var onConfirm = _ref3.onConfirm,
+    id = _ref3.id,
+    _ref3$buttonText = _ref3.buttonText,
+    buttonText = _ref3$buttonText === void 0 ? 'Delete' : _ref3$buttonText,
+    _ref3$enabled = _ref3.enabled,
+    enabled = _ref3$enabled === void 0 ? true : _ref3$enabled,
+    _ref3$variant = _ref3.variant,
+    variant = _ref3$variant === void 0 ? 'icon' : _ref3$variant,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? /*#__PURE__*/React$1.createElement(default_1$4, null) : _ref3$icon,
+    _ref3$confirmText = _ref3.confirmText,
+    confirmText = _ref3$confirmText === void 0 ? 'Confirm deletion?' : _ref3$confirmText,
+    _ref3$confirmActionTe = _ref3.confirmActionText,
+    confirmActionText = _ref3$confirmActionTe === void 0 ? 'Yes, delete' : _ref3$confirmActionTe,
+    _ref3$cancelText = _ref3.cancelText,
+    cancelText = _ref3$cancelText === void 0 ? 'No' : _ref3$cancelText,
+    _ref3$buttonVariant = _ref3.buttonVariant,
+    buttonVariant = _ref3$buttonVariant === void 0 ? 'text' : _ref3$buttonVariant,
+    _ref3$confirmVariant = _ref3.confirmVariant,
+    confirmVariant = _ref3$confirmVariant === void 0 ? 'menu' : _ref3$confirmVariant;
   var _useState = React$1.useState(null),
     _useState2 = _slicedToArray$1(_useState, 2),
     deleteAnchorEl = _useState2[0],
@@ -61478,17 +61489,6 @@ UConfirmationButton.propTypes = {
   /** Button variant applied to menuItem button */
   buttonVariant: PropTypes.string
 };
-UConfirmationButton.defaultProps = {
-  buttonText: 'Delete',
-  variant: 'icon',
-  enabled: true,
-  confirmText: 'Confirm deletion?',
-  confirmActionText: 'Yes, delete',
-  cancelText: 'No',
-  icon: /*#__PURE__*/React$1.createElement(default_1$4, null),
-  buttonVariant: 'text',
-  confirmVariant: 'menu'
-};
 
 var PREFIX$g = 'URadioButtons';
 var classes$g = {
@@ -61617,8 +61617,10 @@ function UAsyncBadge(_ref3) {
   var variant = _ref3.variant,
     text = _ref3.text,
     visible = _ref3.visible,
-    ariaRole = _ref3.ariaRole,
-    ariaLive = _ref3.ariaLive,
+    _ref3$ariaRole = _ref3.ariaRole,
+    ariaRole = _ref3$ariaRole === void 0 ? 'alert' : _ref3$ariaRole,
+    _ref3$ariaLive = _ref3.ariaLive,
+    ariaLive = _ref3$ariaLive === void 0 ? 'assertive' : _ref3$ariaLive,
     onReset = _ref3.onReset;
   var chipRef = React$1.useRef();
 
@@ -61669,10 +61671,6 @@ UAsyncBadge.propTypes = {
   /** Aria live of the badge */
   ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off'])
 };
-UAsyncBadge.defaultProps = {
-  ariaRole: 'alert',
-  ariaLive: 'assertive'
-};
 
 var PREFIX$e = 'UPageLoadingProgress';
 var classes$e = {
@@ -61691,8 +61689,9 @@ var StyledBox$c = styled$1(Box$1)(function () {
  * 1. Display circular progress
  * 2. Display text message
  */
-function UPageLoadingProgress(props) {
-  var text = props.text;
+function UPageLoadingProgress(_ref2) {
+  var _ref2$text = _ref2.text,
+    text = _ref2$text === void 0 ? '' : _ref2$text;
   return /*#__PURE__*/React$1.createElement(StyledBox$c, {
     display: "flex",
     justifyContent: "center",
@@ -61707,9 +61706,6 @@ UPageLoadingProgress.propTypes = {
   /** text to display instead of circular progress */
   text: PropTypes.string
 };
-UPageLoadingProgress.defaultProps = {
-  text: ''
-};
 
 /**
  * UErrorAlert is a component to display error message to the user
@@ -62065,12 +62061,18 @@ var StyledBox$b = styled$1(Box$1)(function (_ref) {
  * If no image url from source app first letter of the user email will be displayed
  */
 function UAvatarImage(_ref3) {
-  var userEmail = _ref3.userEmail,
-    size = _ref3.size,
-    mode = _ref3.mode,
-    tooltipText = _ref3.tooltipText,
-    count = _ref3.count,
-    zIndexValue = _ref3.zIndexValue,
+  var _ref3$userEmail = _ref3.userEmail,
+    userEmail = _ref3$userEmail === void 0 ? '' : _ref3$userEmail,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'default' : _ref3$size,
+    _ref3$mode = _ref3.mode,
+    mode = _ref3$mode === void 0 ? '' : _ref3$mode,
+    _ref3$tooltipText = _ref3.tooltipText,
+    tooltipText = _ref3$tooltipText === void 0 ? '' : _ref3$tooltipText,
+    _ref3$count = _ref3.count,
+    count = _ref3$count === void 0 ? 0 : _ref3$count,
+    _ref3$zIndexValue = _ref3.zIndexValue,
+    zIndexValue = _ref3$zIndexValue === void 0 ? 0 : _ref3$zIndexValue,
     loadPhoto = _ref3.loadPhoto;
   var _useState = React$1.useState(''),
     _useState2 = _slicedToArray$1(_useState, 2),
@@ -62114,15 +62116,6 @@ UAvatarImage.propTypes = {
   /** get photo url from the respective application */
   loadPhoto: PropTypes.func
 };
-UAvatarImage.defaultProps = {
-  userEmail: '',
-  size: 'default',
-  // image displays default size
-  mode: '',
-  tooltipText: '',
-  count: 0,
-  zIndexValue: 0
-};
 
 var _excluded$c = ["id", "type", "label", "options", "onBlur", "helpText", "isMultiple", "searchUsers", "components"];
 var getOptions = function getOptions(options) {
@@ -62611,14 +62604,19 @@ var StyledBox$a = styled$1(Box$1, {
  * Please have look at [Material UI Date Picker](https://mui.com/x/api/date-pickers/date-picker/) for more details
  */
 function ActiveDatePicker(_ref5) {
-  var inputFormat = _ref5.inputFormat,
+  var _ref5$inputFormat = _ref5.inputFormat,
+    inputFormat = _ref5$inputFormat === void 0 ? 'dd/MM/yyyy' : _ref5$inputFormat,
     label = _ref5.label,
     onChange = _ref5.onChange,
     value = _ref5.value,
     showLabelHelp = _ref5.showLabelHelp,
-    InputLabelProps = _ref5.InputLabelProps,
+    _ref5$InputLabelProps = _ref5.InputLabelProps,
+    InputLabelProps = _ref5$InputLabelProps === void 0 ? {
+      shrink: true
+    } : _ref5$InputLabelProps,
     InputLabelHelpProps = _ref5.InputLabelHelpProps,
-    inputVariant = _ref5.inputVariant,
+    _ref5$inputVariant = _ref5.inputVariant,
+    inputVariant = _ref5$inputVariant === void 0 ? 'outlined' : _ref5$inputVariant,
     interactiveMode = _ref5.interactiveMode,
     readOnly = _ref5.readOnly,
     others = _objectWithoutProperties$2(_ref5, _excluded$8);
@@ -62668,13 +62666,6 @@ ActiveDatePicker.propTypes = {
   /** 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.object
 };
-ActiveDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true
-  },
-  inputFormat: 'dd/MM/yyyy'
-};
 
 var _excluded$7 = ["inputFormat", "label", "onChange", "value", "showLabelHelp", "InputLabelProps", "InputLabelHelpProps", "inputVariant", "interactiveMode", "readOnly"];
 var PREFIX$8 = 'ActiveTimePicker';
@@ -63472,10 +63463,14 @@ function ActiveAutoComplete(_ref3) {
     readOnly = _ref3.readOnly,
     minLength = _ref3.minLength,
     maxLength = _ref3.maxLength,
-    usedItemIds = _ref3.usedItemIds,
-    allowContextSpecific = _ref3.allowContextSpecific,
-    interactiveMode = _ref3.interactiveMode,
-    counter = _ref3.counter,
+    _ref3$usedItemIds = _ref3.usedItemIds,
+    usedItemIds = _ref3$usedItemIds === void 0 ? [] : _ref3$usedItemIds,
+    _ref3$allowContextSpe = _ref3.allowContextSpecific,
+    allowContextSpecific = _ref3$allowContextSpe === void 0 ? false : _ref3$allowContextSpe,
+    _ref3$interactiveMode = _ref3.interactiveMode,
+    interactiveMode = _ref3$interactiveMode === void 0 ? false : _ref3$interactiveMode,
+    _ref3$counter = _ref3.counter,
+    counter = _ref3$counter === void 0 ? false : _ref3$counter,
     placeholder = _ref3.placeholder,
     InputLabelProps = _ref3.InputLabelProps;
     _ref3.props;
@@ -63630,12 +63625,6 @@ ActiveAutoComplete.propTypes = {
   /** Label props applied to input field*/
   InputLabelProps: PropTypes.object
 };
-ActiveAutoComplete.defaultProps = {
-  allowContextSpecific: false,
-  interactiveMode: false,
-  counter: false,
-  usedItemIds: []
-};
 
 var StyledBox$1 = styled$1(Box$1)(function () {
   return {
@@ -63656,9 +63645,12 @@ var StyledBox$1 = styled$1(Box$1)(function () {
  */
 function UAriaLive(_ref) {
   var text = _ref.text,
-    type = _ref.type,
-    role = _ref.role,
-    ariaAtomic = _ref.ariaAtomic;
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'polite' : _ref$type,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'log' : _ref$role,
+    _ref$ariaAtomic = _ref.ariaAtomic,
+    ariaAtomic = _ref$ariaAtomic === void 0 ? false : _ref$ariaAtomic;
   return /*#__PURE__*/React$1.createElement(StyledBox$1, {
     "aria-live": type,
     "aria-atomic": ariaAtomic,
@@ -63676,11 +63668,6 @@ UAriaLive.propTypes = {
   /** Aria role */
   role: PropTypes.string
 };
-UAriaLive.defaultProps = {
-  type: 'polite',
-  role: 'log',
-  ariaAtomic: false
-};
 
 var StyledBox = styled$1(Box$1)(function () {
   return {