@hipay/hipay-material-ui 2.0.0-beta.55 → 2.0.0-beta.57

package/HiDatePicker/Overlays/Overlay.js

@@ -61,13 +61,15 @@ var Overlay = function Overlay(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "children", "side", "staticPosition"]);
   var paperClass = (0, _classnames.default)(classes.paper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty2.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty2.default)(_classNames, classes.relative, staticPosition === true), _classNames));
   var paperProps = (0, _extends2.default)({}, props);
-  return _react.default.createElement(_Paper.default, {
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus,
-    className: paperClass
-  }, _react.default.createElement("div", {
-    className: classes.overlay
-  }, children));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    _react.default.createElement(_Paper.default, {
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus,
+      className: paperClass
+    }, _react.default.createElement("div", {
+      className: classes.overlay
+    }, children))
+  );
 };
 
 Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -102,7 +104,12 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: _propTypes.default.string
+  side: _propTypes.default.string,
+
+  /**
+   * Display overlay with position static
+   */
+  staticPosition: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiDatePicker/Overlays/Overlay.spec.js

@@ -10,6 +10,7 @@ var _index = require("../../test-utils/index");
 
 var _Overlay = _interopRequireDefault(require("./Overlay"));
 
+/* eslint-disable */
 var _ref = _react.default.createElement(_Overlay.default, null);
 
 var _ref2 = _react.default.createElement(_Overlay.default, null, _react.default.createElement("span", null, "children"));

package/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -111,7 +111,7 @@ var styles = function styles(theme) {
       bottom: 0,
       height: 32,
       width: 32,
-      margin: '0px 24px'
+      margin: '4px 24px'
     },
     calendarButton: {
       fontWeight: theme.typography.fontWeightMedium
@@ -132,7 +132,7 @@ function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, TimePickerOverlay);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TimePickerOverlay).call(this));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TimePickerOverlay).call(this, props));
     _this.hours = Array.from(Array(24).keys());
     _this.minutes = Array.from(Array(60).keys());
     _this.handleHourClick = _this.handleHourClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));

package/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -14,6 +14,7 @@ var _TimePickerOverlay = _interopRequireDefault(require("./TimePickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
+/* eslint-disable */
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

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"));
 
@@ -40,7 +40,7 @@ function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, YearPickerOverlay);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this, props));
     _this.years = [];
     _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     var currentYear = new Date().getFullYear();
@@ -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,
@@ -95,8 +95,6 @@ function (_React$Component) {
 }(_react.default.Component);
 
 YearPickerOverlay.defaultProps = {
-  // disableFutureDays: true,
-  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -132,7 +130,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: _propTypes.default.instanceOf(Date).isRequired,
+  minimumDate: _propTypes.default.instanceOf(Date),
 
   /**
    * Fonction de callback

package/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -14,6 +14,7 @@ var _YearPickerOverlay = _interopRequireDefault(require("./YearPickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
+/* eslint-disable */
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

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,36 +153,60 @@ 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,
-      border: '2px solid #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: {
       backgroundColor: '#F8F9FB',
-      color: theme.palette.neutral.main
+      color: theme.palette.neutral.main,
+      cursor: 'default'
     },
     // Added to the day's cell specified in the "disabledDays" prop
     disabled: {

package/HiDotsStepper/HiDot.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var styles = function styles() {
+  return {
+    dot: {
+      padding: 4,
+      '&:hover': {
+        backgroundColor: 'transparent !important'
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiIcon.default, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = _react.default.createElement(_HiIcon.default, {
+  size: 12
+}, "lens");
+
+var HiDot =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDot, _React$PureComponent);
+
+  function HiDot() {
+    (0, _classCallCheck2.default)(this, HiDot);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDot).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiDot, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          status = _this$props.status,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["active", "status", "classes", "onClick"]);
+      var dotColor;
+
+      if (!status || status === 'unreviewed') {
+        dotColor = 'default';
+      } else {
+        dotColor = status === 'refused' ? 'negative' : 'positive';
+      }
+
+      return _react.default.createElement(_HiIconButton.default, (0, _extends2.default)({
+        className: classes.dot,
+        color: dotColor,
+        onClick: onClick
+      }, props), active ? _ref : _ref2);
+    }
+  }]);
+  return HiDot;
+}(_react.default.PureComponent);
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
+  classes: _propTypes.default.object,
+  onClick: _propTypes.default.func,
+  status: _propTypes.default.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);
+
+exports.default = _default;

package/HiDotsStepper/HiDotsStepper.js

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiDot = _interopRequireDefault(require("./HiDot"));
+
+var styles = function styles() {
+  return {
+    dotStepper: {
+      width: '100%',
+      maxWidth: 200,
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'nowrap',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiDotsStepper =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDotsStepper, _React$PureComponent);
+
+  function HiDotsStepper(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiDotsStepper);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDotsStepper).call(this, props));
+
+    _this.handleClick = function (activeStep) {
+      return function () {
+        _this.props.onChange(activeStep);
+      };
+    };
+
+    _this.handleNavigation = function (e) {
+      var _this$props = _this.props,
+          activeStep = _this$props.activeStep,
+          steps = _this$props.steps;
+      var nextStep = activeStep;
+      if (e.key === 'ArrowLeft') nextStep -= 1;
+      if (e.key === 'ArrowRight') nextStep += 1;
+      nextStep = (nextStep + steps.length) % steps.length; // Permet la navigation d'un Dot au suivant / précédent
+
+      document.querySelector("button[tabIndex=\"".concat(nextStep, "\"]")).focus();
+
+      _this.props.onChange(nextStep);
+    };
+
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.handleNavigation = _this.handleNavigation.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiDotsStepper, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          activeStep = _this$props2.activeStep,
+          steps = _this$props2.steps;
+      return _react.default.createElement("div", {
+        role: "presentation",
+        className: classes.dotStepper,
+        onKeyDown: this.handleNavigation
+      }, steps.map(function (step, idx) {
+        return _react.default.createElement(_HiDot.default, {
+          key: step.id,
+          tabIndex: step.id,
+          status: step.status,
+          active: idx === activeStep,
+          onClick: _this2.handleClick(idx)
+        });
+      }));
+    }
+  }]);
+  return HiDotsStepper;
+}(_react.default.PureComponent);
+
+HiDotsStepper.propTypes = process.env.NODE_ENV !== "production" ? {
+  activeStep: _propTypes.default.number.isRequired,
+  classes: _propTypes.default.object,
+  onChange: _propTypes.default.func,
+  steps: _propTypes.default.array.isRequired
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDotsStepper'
+})(HiDotsStepper);
+
+exports.default = _default;

package/HiExpansionPanel/HiExpansionPanel.js

@@ -154,7 +154,7 @@ HiExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Titre principal du panel
    */
-  heading: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.any,
 
   /**
    * Titre secondaire du panel