@hipay/hipay-material-ui 2.0.0-beta.75 → 2.1.0-RC1

package/HiDatePicker/stylesheet.js

@@ -20,6 +20,22 @@ var _default = function _default(theme) {
       minWidth: 252,
       maxWidth: 500
     },
+    rootMobile: (0, _extends2.default)({}, theme.typography.b1, {
+      backgroundColor: theme.palette.background2,
+      borderBottom: '1px solid #E0E0E0',
+      borderLeft: 'none',
+      borderRight: 'none',
+      borderTop: 'none',
+      height: 40,
+      paddingLeft: 8,
+      paddingTop: 10,
+      position: 'absolute',
+      marginTop: -40,
+      opacity: 0
+    }),
+    mobileRangeRoot: {
+      minWidth: '100%'
+    },
     fromInput: {
       position: 'relative',
       display: 'inline-block',

package/HiNotice/HiKPI.js

@@ -47,6 +47,9 @@ var styles = function styles(theme) {
       alignItems: 'center',
       fontFamily: theme.typography.fontFamily
     },
+    rootDisable: {
+      cursor: 'default'
+    },
     error: {
       boxShadow: '0px 2px 4px 0px rgba(213, 0, 0, 0.24)',
       '&:hover': {
@@ -149,7 +152,7 @@ function (_React$Component) {
           id = _this$props.id,
           tooltip = _this$props.tooltip,
           disable = _this$props.disable;
-      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit' && !disable), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), _classNames));
+      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit' && !disable), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), (0, _defineProperty2.default)(_classNames, classes.rootDisable, disable), _classNames));
       return _react.default.createElement(_Collapse.default, {
         in: !minify,
         timeout: "auto",
@@ -157,7 +160,8 @@ function (_React$Component) {
       }, _react.default.createElement(_ButtonBase.default, {
         className: rootclass,
         onClick: !disable ? this.handleClick(id) : undefined,
-        title: tooltip
+        title: tooltip,
+        disableRipple: disable
       }, title && _react.default.createElement("h3", {
         className: classes.title
       }, title), _react.default.createElement("div", {

package/HiPaymentMeans/HiPaymentMeans.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -301,6 +303,8 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.buildPaymentLayoutByType = function () {
+      var _classNames;
+
       var _this$props = _this.props,
           businessName = _this$props.businessName,
           cardNumber = _this$props.cardNumber,
@@ -317,7 +321,8 @@ function (_React$Component) {
           theme = _this$props.theme,
           translations = _this$props.translations,
           type = _this$props.type,
-          yearMember = _this$props.yearMember;
+          yearMember = _this$props.yearMember,
+          fallbackImage = _this$props.fallbackImage;
       var formatNumber;
 
       if (type === 'credit-card' || type === 'debit-card' || type === 'prepaid-card') {
@@ -348,7 +353,25 @@ function (_React$Component) {
         username = "".concat(translations.gender_male, " ").concat(cardUser);
       }
 
-      var creditDebit = translations.credit && translations.debit && (credit ? translations.credit : translations.debit).toUpperCase();
+      var creditDebit = null;
+
+      if (translations.credit && translations.debit) {
+        creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
+      }
+
+      var imgComponent = _react.default.createElement("img", {
+        src: brandLogo,
+        alt: '',
+        className: (0, _classnames.default)(classes.logo, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.logoLeft, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0), (0, _defineProperty2.default)(_classNames, classes.logoRight, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0), _classNames)),
+        onError: function onError(e) {
+          if (fallbackImage) {
+            e.target.src = "".concat(fallbackImage);
+          } else {
+            e.target.style.display = 'none';
+          }
+        }
+      });
+
       var cardLayout;
 
       switch (type) {
@@ -368,11 +391,7 @@ function (_React$Component) {
             className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
           }, username), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
           })));
           break;
@@ -386,11 +405,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.cardNumber)
@@ -413,11 +428,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, _react.default.createElement("div", {
             className: classes.corporateLabel,
@@ -454,11 +465,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoLeft)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
           }), cardNumber && _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
@@ -479,11 +486,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }, _react.default.createElement("img", {
             src: logoMerchant,
@@ -506,11 +509,7 @@ function (_React$Component) {
             }
           }, _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
-          }, _react.default.createElement("img", {
-            src: brandLogo,
-            alt: '',
-            className: (0, _classnames.default)(classes.logo, classes.logoRight)
-          })), _react.default.createElement("span", {
+          }, imgComponent), _react.default.createElement("span", {
             className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
           }), _react.default.createElement("div", {
             className: (0, _classnames.default)(classes.number, classes.cardNumber)
@@ -622,6 +621,11 @@ HiPaymentMeans.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   credit: _propTypes.default.bool,
 
+  /**
+   * Chemin vers l'image à afficher par défaut si le logo n'est pas trouvé
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * Logo du moyen de paiement
    */

package/HiSelect/HiSelect.js

@@ -55,6 +55,14 @@ var _keycode = _interopRequireDefault(require("keycode"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _HiAlertModal = _interopRequireDefault(require("../HiAlertModal"));
+
+var _reactDeviceDetect = require("react-device-detect");
+
+var _HiSelectMobile = _interopRequireDefault(require("./HiSelectMobile"));
+
+var _reactDom = require("react-dom");
+
 var styles = function styles(theme) {
   return {
     root: {
@@ -260,30 +268,48 @@ function (_React$PureComponent) {
     _this.handleClick = function () {
       if (_this.state.open) {
         _this.handleClose();
+      } else if (_this.props.alert && !_this.state.alertOpen) {
+        _this.setState({
+          open: false,
+          alertOpen: true
+        });
       } else {
         _this.setState({
-          open: true
+          open: true,
+          alertOpen: false
         });
 
         _this.handleSuggestions(_this.props.options);
 
         if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
 
-        if (!_this.props.searchable) {
-          setTimeout(function () {
+        setTimeout(function () {
+          if (!_this.props.searchable) {
             // Sinon focus sur l'élément sélectionné
             _this.focusOnSelectedItem(_this.props.value);
-          }, 1);
-        } else {
-          if (_this.searchField) {
-            setTimeout(function () {
-              _this.searchField.focus();
-            }, 1);
           }
-        }
+        }, 1);
+      }
+    };
+
+    _this.handleSubmitAlert = function () {
+      _this.handleClick();
+    };
+
+    _this.handleCancelAlert = function () {
+      _this.handleClose();
+    };
+
+    _this.handleExitedAlert = function () {
+      if (_this.searchField) {
+        _this.searchField.focus();
       }
     };
 
+    _this.handleCloseAlert = function () {
+      _this.handleClose();
+    };
+
     _this.focusOnSelectedItem = function (selectedValue) {
       if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
         setTimeout(function () {
@@ -316,7 +342,8 @@ function (_React$PureComponent) {
       _this.handleSearchReset();
 
       _this.setState({
-        open: false
+        open: false,
+        alertOpen: false
       });
 
       if (_this.props.onClose) {
@@ -351,32 +378,24 @@ function (_React$PureComponent) {
     _this.handleKeyDown = function (event) {
       var key = (0, _keycode.default)(event);
 
-      if (key === 'esc') {
-        event.preventDefault();
+      if (!_this.state.alertOpen) {
+        if (key === 'esc') {
+          event.preventDefault();
 
-        _this.handleClose();
-      } else if (key === 'enter') {
-        if (_this.state.open) {
-          if (_this.props.multiple) {
-            _this.handleClose();
+          _this.handleClose();
+        } else if (key === 'enter') {
+          if (_this.state.open) {
+            if (_this.props.multiple) {
+              _this.handleClose();
+            }
           }
-        }
-      } else if (key === 'space' && event.target !== _this.searchField) {
-        event.preventDefault();
+        } else if (key === 'space' && event.target !== _this.searchField) {
+          event.preventDefault();
 
-        if (_this.state.open) {
-          if (!_this.props.multiple) {
-            _this.setState({
-              open: false
-            });
-          }
-        } else {
-          _this.setState({
-            open: true
-          });
+          _this.handleClick();
+        } else if (key === 'tab') {
+          _this.handleClose();
         }
-      } else if (key === 'tab') {
-        _this.handleClose();
       }
     };
 
@@ -425,6 +444,11 @@ function (_React$PureComponent) {
             return option.id;
           }), item);
         }
+      } else if (_reactDeviceDetect.isMobile && multiple) {
+        // Array of selected values
+        onChange(event, item.map(function (option) {
+          return option.id;
+        }), item);
       } else if (value.includes(item.id)) {
         // unselect item
         onChange(event, value.filter(function (id) {
@@ -489,11 +513,13 @@ function (_React$PureComponent) {
     };
 
     _this.state = {
+      alertOpen: false,
       open: false,
       focused: false,
       searchValue: props.searchValue ? undefined : '',
       suggestions: props.options,
-      openDown: true
+      openDown: true,
+      overlayWidth: 0
     };
     _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)(_this));
     _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
@@ -514,6 +540,12 @@ function (_React$PureComponent) {
       if (this.props.autoFocus) {
         this.inputEl.focus();
       }
+
+      if (this.overlay) {
+        this.setState({
+          overlayWidth: (0, _reactDom.findDOMNode)(this.overlay).clientWidth
+        });
+      }
     }
   }, {
     key: "getLengthItemList",
@@ -539,6 +571,7 @@ function (_React$PureComponent) {
           _this3 = this;
 
       var _this$props4 = this.props,
+          alert = _this$props4.alert,
           classes = _this$props4.classes,
           disabled = _this$props4.disabled,
           error = _this$props4.error,
@@ -564,6 +597,7 @@ function (_React$PureComponent) {
           _this$props4$buildSel = _this$props4.buildSelectProps,
           buildSelectProps = _this$props4$buildSel === void 0 ? this.buildSelectProps : _this$props4$buildSel;
       var _this$state = this.state,
+          alertOpen = _this$state.alertOpen,
           open = _this$state.open,
           focused = _this$state.focused;
 
@@ -664,14 +698,24 @@ function (_React$PureComponent) {
         }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
       };
 
-      return _react.default.createElement("div", {
+      return !_reactDeviceDetect.isMobile ? _react.default.createElement("div", {
         className: classes.root,
         ref: function ref(el) {
           _this3.overlay = el;
         },
         onKeyDown: this.handleKeyDown,
         onKeyDownCapture: this.handleKeyDownCapture
-      }, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
+      }, alert && _react.default.createElement(_HiAlertModal.default, {
+        open: alertOpen,
+        title: alert.title,
+        content: alert.content,
+        onSubmitClick: this.handleSubmitAlert,
+        onCancelClick: this.handleCancelAlert,
+        onClose: this.handleCloseAlert,
+        onExited: this.handleExitedAlert,
+        labelSubmitButton: alert.submitButton,
+        labelCancelButton: alert.cancelButton
+      }), _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
         id: id,
         value: inputValue,
         open: open,
@@ -702,7 +746,37 @@ function (_React$PureComponent) {
         className: popperClass,
         disablePortal: true,
         style: popperStyle
-      }, content));
+      }, content)) : _react.default.createElement("div", {
+        ref: function ref(el) {
+          _this3.overlay = el;
+        }
+      }, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
+        id: id,
+        value: inputValue,
+        open: open,
+        focused: focused,
+        type: type,
+        disabled: disabled,
+        noButton: displayAsChip,
+        error: error,
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onMouseEnter: this.props.onMouseEnter,
+        onMouseLeave: this.props.onMouseLeave,
+        onReset: this.props.onReset,
+        placeholder: placeholder
+      }, hiSelectInputProps, {
+        refElement: function refElement(el) {
+          _this3.inputEl = el;
+        }
+      })), _react.default.createElement(_HiSelectMobile.default, {
+        onChange: this.handleSelect,
+        multiple: multiple,
+        id: id,
+        itemList: itemList,
+        value: value,
+        width: this.state.overlayWidth
+      }));
     }
   }], [{
     key: "getDerivedStateFromProps",
@@ -755,6 +829,10 @@ HiSelect.defaultProps = {
   filterFunc: filterValue
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Affiche une alerte à l'ouverture de la liste
+   */
+  alert: _propTypes.default.object,
   align: _propTypes.default.oneOf(['left', 'right']),
 
   /**

package/HiSelect/HiSelectInput.js

@@ -41,6 +41,8 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _reactDeviceDetect = require("react-device-detect");
+
 var styles = function styles(theme) {
   return {
     root: {
@@ -52,6 +54,9 @@ var styles = function styles(theme) {
       padding: 8,
       cursor: 'pointer'
     },
+    rootMobile: {
+      backgroundColor: theme.palette.background2
+    },
     underline: {
       '&:before': {
         backgroundColor: theme.palette.input.bottomLine,
@@ -257,7 +262,7 @@ function (_React$PureComponent) {
           id = _this$props.id,
           placeholder = _this$props.placeholder; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
-      var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), _classNames));
+      var rootClass = (0, _classnames.default)(classes.root, classes.inkbar, classes.underline, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focused, focused), (0, _defineProperty2.default)(_classNames, classes.error, error && !focused), (0, _defineProperty2.default)(_classNames, classes.rootMobile, _reactDeviceDetect.isMobile), _classNames));
       var iconClass = (0, _classnames.default)(classes.icon, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.iconOpen, open), (0, _defineProperty2.default)(_classNames2, classes.iconClose, !open), _classNames2));
       return noButton ? _react.default.createElement("div", {
         id: id,

package/HiSelect/HiSelectMobile.js

@@ -0,0 +1,198 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _getPrototypeOf3 = _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 styles = function styles(theme) {
+  return {
+    root: {
+      position: 'absolute',
+      opacity: '0',
+      marginTop: -40,
+      height: 40
+    }
+  };
+};
+
+exports.styles = styles;
+
+var HiSelectMobile =
+/*#__PURE__*/
+function (_React$Component) {
+  (0, _inherits2.default)(HiSelectMobile, _React$Component);
+
+  function HiSelectMobile() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2.default)(this, HiSelectMobile);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiSelectMobile)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+    _this.buildOptionList = function (itemList) {
+      var optionList = [];
+
+      if (itemList.length) {
+        var parentId;
+        var groupList = [];
+        itemList.forEach(function (item) {
+          if (item.id !== '_all' && item.displayed !== false) {
+            if (item.hasChildren) {
+              if (groupList.length) {
+                optionList.push(_this.buildChildrenList(groupList));
+                groupList = [];
+              }
+
+              parentId = item.id;
+              groupList.push(item);
+            } else if (parentId) {
+              groupList.push(item);
+            } else if (item.children) {
+              optionList.push(_this.buildChildrenList([item].concat((0, _toConsumableArray2.default)(item.children))));
+            } else {
+              optionList.push(_react.default.createElement("option", {
+                key: item.id,
+                "data-item": JSON.stringify(item),
+                value: item.id
+              }, item.label));
+            }
+          }
+        });
+
+        if (groupList.length) {
+          optionList.push(_this.buildChildrenList(groupList));
+        }
+      }
+
+      return optionList;
+    };
+
+    _this.buildChildrenList = function (itemList) {
+      var group = itemList.shift();
+      return _react.default.createElement("optgroup", {
+        key: group.id,
+        label: group.label
+      }, itemList.map(function (item) {
+        return _react.default.createElement("option", {
+          key: item.id,
+          "data-item": JSON.stringify(item),
+          value: item.id
+        }, item.label);
+      }));
+    };
+
+    _this.handleChange = function (event) {
+      if (!_this.props.multiple) {
+        var itemSelected = event.target[event.target.selectedIndex];
+
+        _this.props.onChange(event, JSON.parse(itemSelected.getAttribute('data-item')));
+      } else {
+        // Multiple on mobile trigger on change with all selected items
+        var optionsSelected = [];
+        Array.prototype.forEach.call(event.target.options, function (option) {
+          if (option.selected) {
+            optionsSelected.push(JSON.parse(option.getAttribute('data-item')));
+          }
+        });
+
+        _this.props.onChange(event, optionsSelected);
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(HiSelectMobile, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          id = _this$props.id,
+          itemList = _this$props.itemList,
+          multiple = _this$props.multiple,
+          value = _this$props.value;
+      var additionalProps = (0, _extends2.default)({}, multiple && {
+        multiple: 'multiple'
+      });
+      return _react.default.createElement("select", (0, _extends2.default)({
+        value: value,
+        style: {
+          width: this.props.width
+        },
+        onChange: this.handleChange,
+        className: classes.root,
+        name: id,
+        id: id
+      }, additionalProps), this.buildOptionList(itemList));
+    }
+  }]);
+  return HiSelectMobile;
+}(_react.default.Component);
+
+HiSelectMobile.defaultProps = {
+  itemList: []
+};
+HiSelectMobile.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Identifiant du select
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Liste des options du select
+   */
+  itemList: _propTypes.default.array.isRequired,
+
+  /**
+   * True s'il est possible de sélectionner plusieurs options
+   */
+  multiple: _propTypes.default.bool,
+
+  /**
+   * Fonction appelée lors de la sélection/désélection
+   */
+  onChange: _propTypes.default.func.isRequired,
+
+  /**
+   * Valeur(s) sélectionnée(s)
+   */
+  value: _propTypes.default.any,
+
+  /**
+   * Largeur du select
+   */
+  width: _propTypes.default.number
+} : {};
+
+var _default = (0, _withStyles.default)(styles)(HiSelectMobile);
+
+exports.default = _default;