@hipay/hipay-material-ui 2.0.0-beta.56 → 2.0.0-beta.58

package/HiDatePicker/Overlays/MonthPickerOverlay.js

@@ -27,7 +27,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CustomOverlayLayout = _interopRequireDefault(require("./CustomOverlayLayout"));
+var _CustomOverlayLayoutWithoutFooter = _interopRequireDefault(require("./CustomOverlayLayoutWithoutFooter"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
@@ -43,7 +43,7 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(MonthPickerOverlay).call(this));
     _this.months = [];
     _this.handleMonthClick = _this.handleMonthClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.months = props.localeUtils ? props.localeUtils.getMonths() : props.children.props.localeUtils.getMonths();
+    _this.months = props.localeUtils ? props.localeUtils.getMonths(props.children.props.locale) : props.children.props.localeUtils.getMonths(props.children.props.locale);
     return _this;
   }
 
@@ -66,8 +66,8 @@ function (_React$Component) {
           translations = _this$props.translations,
           props = (0, _objectWithoutProperties2.default)(_this$props, ["value", "translations"]);
       var now = new Date();
-      var currentMonth = props.localeUtils ? props.localeUtils.getMonths()[now.getMonth()] : props.children.props.localeUtils.getMonths()[now.getMonth()];
-      return _react.default.createElement(_CustomOverlayLayout.default, (0, _extends2.default)({
+      var currentMonth = props.localeUtils ? props.localeUtils.getMonths(props.children.props.locale)[now.getMonth()] : props.children.props.localeUtils.getMonths(props.children.props.locale)[now.getMonth()];
+      return _react.default.createElement(_CustomOverlayLayoutWithoutFooter.default, (0, _extends2.default)({
         headerElement: translations.month
       }, props), _react.default.createElement(_ListPicker.default, {
         itemList: this.months,

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -27,7 +27,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CustomOverlayLayout = _interopRequireDefault(require("./CustomOverlayLayout"));
+var _CustomOverlayLayoutWithoutFooter = _interopRequireDefault(require("./CustomOverlayLayoutWithoutFooter"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
@@ -81,7 +81,7 @@ function (_React$Component) {
           value = _this$props.value,
           translations = _this$props.translations,
           props = (0, _objectWithoutProperties2.default)(_this$props, ["value", "translations"]);
-      return _react.default.createElement(_CustomOverlayLayout.default, (0, _extends2.default)({
+      return _react.default.createElement(_CustomOverlayLayoutWithoutFooter.default, (0, _extends2.default)({
         headerElement: translations.year
       }, props), _react.default.createElement(_ListPicker.default, {
         itemList: this.years,

package/HiDatePicker/hiLocaleUtils.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var WEEKDAYS_LONG = {
+  en_US: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+  fr_FR: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
+};
+var WEEKDAYS_SHORT = {
+  en_US: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+  fr_FR: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']
+};
+var MONTHS = {
+  en_US: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  fr_FR: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+};
+var FIRST_DAY = {
+  en_US: 0,
+  fr_FR: 1 // Use Monday as first day of the week
+
+};
+/**
+ * Format Date as day
+ *
+ * @param Date d
+ * @param string locale
+ *
+ * @returns string
+ */
+
+function formatDay(d) {
+  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return "".concat(WEEKDAYS_LONG[loc][d.getDay()], ", ").concat(d.getDate(), " ").concat(MONTHS[loc][d.getMonth()], " ").concat(d.getFullYear());
+}
+/**
+ * Format Date as month title
+ *
+ * @param Date d
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatMonthTitle(d) {
+  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return "".concat(MONTHS[loc][d.getMonth()], " ").concat(d.getFullYear());
+}
+/**
+ * Get the short version of a week day
+ *
+ * @param int i
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatWeekdayShort(i) {
+  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return WEEKDAYS_SHORT[loc][i];
+}
+/**
+ * Get the long version of a week day
+ *
+ * @param int i
+ * @param string locale
+ *
+ * @returns string
+ */
+
+
+function formatWeekdayLong(i) {
+  var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return WEEKDAYS_LONG[loc][i];
+}
+/**
+ * Get first day of the week
+ * @param string locale
+ *
+ * @returns integer
+ */
+
+
+function getFirstDayOfWeek() {
+  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return FIRST_DAY[loc];
+}
+/**
+ * Get List of Months
+ *
+ * @param string locale
+ *
+ * @returns array
+ */
+
+
+function getMonths() {
+  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'en_US';
+  var loc = this.formatLocale(locale);
+  return MONTHS[loc];
+}
+/**
+ * Format locale
+ *
+ * @param string locale
+ *
+ * @return string
+ */
+
+
+function formatLocale(locale) {
+  var loc = locale.split('-');
+
+  if (loc.length !== 2) {
+    loc = locale.split('_');
+
+    if (loc.length !== 2) {
+      return false;
+    }
+  }
+
+  loc[1] = loc[1].toUpperCase();
+  return loc.join('_');
+}
+
+var HiLocaleUtils = {
+  formatDay: formatDay,
+  formatMonthTitle: formatMonthTitle,
+  formatWeekdayShort: formatWeekdayShort,
+  formatWeekdayLong: formatWeekdayLong,
+  getFirstDayOfWeek: getFirstDayOfWeek,
+  getMonths: getMonths,
+  formatLocale: formatLocale
+};
+var _default = HiLocaleUtils;
+exports.default = _default;

package/HiDatePicker/stylesheet.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _colorManipulator = require("../styles/colorManipulator");
+
 var _default = function _default(theme) {
   return {
     root: {
@@ -151,31 +153,54 @@ var _default = function _default(theme) {
     footer: {
       marginTop: 12,
       borderTop: '1px solid',
-      borderTopColor: theme.palette.divider
+      borderTopColor: theme.palette.divider,
+      padding: '5px',
+      width: '100%'
     },
     // The today button (only with todayButton prop)
     todayButton: (0, _extends2.default)({
-      width: '100%',
+      display: 'table',
+      minWidth: 230,
+      margin: '0 auto',
       border: 'none',
       backgroundImage: 'none',
       backgroundColor: 'transparent',
       boxShadow: 'none',
       cursor: 'pointer',
-      height: 40
+      height: 30
     }, theme.typography.body2, {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightMedium,
-      textTransform: 'uppercase'
+      textTransform: 'uppercase',
+      '&:hover': {
+        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.dark, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      borderRadius: 4
     }),
 
     /* default modifiers */
     // Added to the day's cell for the current day
     today: {
       // color: theme.palette.primary.light,
-      boxShadow: 'inset 0 0 0 2px #8b9898',
+      position: 'relative',
       borderRadius: '50%',
       color: "".concat(theme.palette.neutral.dark, " !important"),
-      fontWeight: theme.typography.fontWeightMedium
+      fontWeight: theme.typography.fontWeightMedium,
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        boxShadow: "inset 0 0 0 2px ".concat(theme.palette.neutral.main)
+      }
     },
     // Added to the day's cell outside the current month
     outside: {

package/HiForm/HiFormControl.js

@@ -64,6 +64,8 @@ var styles = function styles(theme) {
       cursor: 'pointer',
       zIndex: 1,
       top: '-5px',
+      height: 24,
+      width: 24,
       '&$iconButtonError': {
         color: theme.palette.negative.main
       },
@@ -250,14 +252,12 @@ function (_React$PureComponent) {
         focused: !disabled && (focused || hovered)
       }, InputLabelProps), error && errorText && _react.default.createElement(_HiIconButton.default, {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonError),
-        onClick: this.handleHelperClick,
-        onKeyDown: this.handleKeyDown
+        onClick: this.handleHelperClick
       }, _react.default.createElement(_Warning.default, {
         className: (0, _classnames.default)(classes.icon)
       })), helperIcon && helperText && !error && _react.default.createElement(_HiIconButton.default, {
         className: (0, _classnames.default)(classes.iconButton, classes.iconButtonInfo, (0, _defineProperty2.default)({}, classes.iconButtonInfoActive, helperOpen)),
-        onClick: this.handleHelperClick,
-        onKeyDown: this.handleKeyDown
+        onClick: this.handleHelperClick
       }, _react.default.createElement(_Info.default, {
         className: (0, _classnames.default)(classes.icon)
       }))), _react.default.createElement("div", {

package/HiForm/HiInput.js

@@ -121,10 +121,10 @@ var styles = function styles(theme) {
       padding: 0
     }),
     inputText: {
-      height: 39
+      height: 40
     },
     inputTextArea: {
-      minHeight: 39,
+      minHeight: 40,
       paddingTop: 8
     },
     iconPointer: {
@@ -132,7 +132,7 @@ var styles = function styles(theme) {
       cursor: 'pointer'
     },
     eraseButton: {
-      height: 39,
+      height: 40,
       width: 40,
       display: 'inline-block'
     },
@@ -215,10 +215,15 @@ function (_React$PureComponent) {
       // Si on click sur un élément de HiInput, on garde le focus
       // Par exemple sur l'icone reset
       if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
-        if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
+        // If blur came from erase icon => stay focused and don't call onBlur props
+        if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
           this.props.onBlur(event);
         }
 
+        event.preventDefault();
         event.stopPropagation();
       } else {
         this.setState({
@@ -240,9 +245,13 @@ function (_React$PureComponent) {
           this.setState({
             focused: true
           });
-        }
+        } // If focus came from erase icon => stay focused and don't call onFocus props
+
 
-        if (this.props.onFocus) {
+        if (this.eraseIconNode && this.eraseIconNode.contains(event.relatedTarget)) {
+          event.preventDefault();
+          event.stopPropagation();
+        } else if (this.props.onFocus) {
           this.props.onFocus(event);
         }
       }
@@ -342,7 +351,10 @@ function (_React$PureComponent) {
           label: classes.eraseButtonLabel
         },
         onClick: this.handleReset,
-        onBlur: this.handleBlur
+        onBlur: this.handleBlur,
+        buttonRef: function buttonRef(el) {
+          _this2.eraseIconNode = el;
+        }
       }, _ref);
 
       var endAdornment = endAdornmentProps;

package/HiForm/HiUploadField.js

@@ -49,7 +49,8 @@ var styles = function styles(theme) {
       fontSize: '80px'
     },
     inputContainer: {
-      flex: '1'
+      flex: '1',
+      width: 'calc(100% - 88px)'
     },
     empty: {
       border: "1px solid ".concat(theme.palette.input.bottomLine),

package/HiNotice/HiKPI.js

@@ -175,7 +175,7 @@ HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
   active: _propTypes.default.bool,
 
   /**
-   * KPI id
+   * Corps du KPI
    */
   body: _propTypes.default.any.isRequired,
 
@@ -200,9 +200,9 @@ HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
   disable: _propTypes.default.bool,
 
   /**
-   * Corps du KPI
+   * KPI id
    */
-  id: _propTypes.default.number.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
 
   /**
    * Corps minifié du KPI si nécessaire

package/HiNotice/HiKPINotice.js

@@ -30,15 +30,16 @@ var styles = function styles() {
 var HiKPINotice = function HiKPINotice(_ref) {
   var classes = _ref.classes,
       kpis = _ref.kpis,
-      activeKpis = _ref.activeKpis,
+      activeKpi = _ref.activeKpi,
       minify = _ref.minify,
       onClickOnKPI = _ref.onClickOnKPI;
   return _react.default.createElement("div", {
     className: classes.container
-  }, kpis.map(function (kpi) {
+  }, Object.keys(kpis).map(function (key) {
+    var kpi = kpis[key];
     return _react.default.createElement(_HiKPI.default, {
-      key: kpi.id,
-      id: kpi.id,
+      key: key,
+      id: key,
       type: kpi.type,
       color: kpi.color,
       title: kpi.title,
@@ -46,8 +47,10 @@ var HiKPINotice = function HiKPINotice(_ref) {
       bodyMinify: kpi.bodyMinify,
       subtitle: kpi.subtitle,
       tooltip: kpi.tooltip,
-      onClick: onClickOnKPI,
-      active: !!activeKpis.includes(kpi.id),
+      onClick: function onClick() {
+        return onClickOnKPI(key);
+      },
+      active: activeKpi === key,
       minify: minify,
       disable: kpi.disable
     });
@@ -58,7 +61,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Extension du style appliqué au composant
    */
-  activeKpis: _propTypes.default.array,
+  activeKpi: _propTypes.default.string,
 
   /**
    * Liste des KPIs
@@ -68,7 +71,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Fonction appelée au clic sur un KPI
    */
-  kpis: _propTypes.default.array.isRequired,
+  kpis: _propTypes.default.object.isRequired,
 
   /**
    * Liste des KPIS actifs
@@ -81,7 +84,7 @@ HiKPINotice.propTypes = process.env.NODE_ENV !== "production" ? {
   onClickOnKPI: _propTypes.default.func
 } : {};
 HiKPINotice.defaultProps = {
-  activeKpis: [],
+  activeKpi: null,
   minify: false
 };
 

package/HiPin/HiPin.js

@@ -23,7 +23,7 @@ var styles = function styles(theme) {
   return {
     root: {
       display: 'inline-block',
-      padding: '0 9px',
+      padding: '1px 9px',
       height: 16,
       lineHeight: '16px',
       minWidth: 25,

package/HiSelect/HiSelect.js

@@ -249,17 +249,13 @@ function (_React$PureComponent) {
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
       } else if (event.key === 'ArrowUp') {
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
         /* if (!this.props.staticPosition) {
             document.body.style.overflow = 'auto';
         } */
         _this.setState({
           open: false
         });
-      } else if (event.key === 'Escape') {
-        _this.setState({
-          open: false
-        });
       }
 
       if (nextItem) {
@@ -272,6 +268,10 @@ function (_React$PureComponent) {
         _this.focusOnSelectedItem();
       } else if (event.key === 'Enter' && _this.props.onSubmit) {
         _this.props.onSubmit(event);
+      } else if (event.key === 'Tab' || event.key === 'Escape') {
+        _this.setState({
+          open: false
+        });
       }
     };
 
@@ -750,6 +750,7 @@ function (_React$PureComponent) {
         onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onKeyDown: this.handleKeyDown,
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave,
         refElement: function refElement(el) {

package/HiSelect/HiSuggestSelect.js

@@ -62,7 +62,8 @@ var styles = function styles(theme) {
       width: '100% !important',
       transform: 'none !important',
       zIndex: '9 !important',
-      top: '100% !important'
+      top: '100% !important',
+      textOverflow: 'ellipsis'
     },
     paper: {
       borderRadius: '0px 2px',
@@ -185,10 +186,14 @@ function (_React$PureComponent) {
     }
   }, {
     key: "handleFocus",
-    value: function handleFocus() {
+    value: function handleFocus(event) {
       this.setState({
         focused: true
       });
+
+      if (this.props.onFocusInput) {
+        this.props.onFocusInput(event);
+      }
     }
   }, {
     key: "handleBlur",
@@ -201,6 +206,10 @@ function (_React$PureComponent) {
           focused: false
         });
       }
+
+      if (this.props.onBlurInput) {
+        this.props.onBlurInput(event);
+      }
     }
   }, {
     key: "render",
@@ -320,6 +329,16 @@ HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   loading: _propTypes.default.bool,
 
+  /**
+   * Fonction de callback appelée lorsqu'on blur le champ de recherche
+   */
+  onBlurInput: _propTypes.default.func,
+
+  /**
+   * Fonction de callback appelée lorsqu'on focus le champs de recherche
+   */
+  onFocusInput: _propTypes.default.func,
+
   /**
    * Fonction de callback appelée lorsqu'on écrit dans le champ
    */

package/HiSelect/SelectInput.js

@@ -45,7 +45,10 @@ var styles = function styles(theme) {
       maxWidth: 500,
       display: 'flex',
       justifyContent: 'center',
-      padding: 8,
+      paddingTop: 7,
+      paddingBottom: 9,
+      paddingRight: 8,
+      paddingLeft: 8,
       cursor: 'pointer'
     },
     underline: {
@@ -226,6 +229,7 @@ function (_React$PureComponent) {
         className: iconClass,
         icon: "arrow_drop_down"
       })) : _react.default.createElement(_ButtonBase.default, {
+        component: "div",
         id: id,
         classes: {
           root: rootClass