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

package/HiRadio/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiRadio.default;
+  }
+});
+
+var _HiRadio = _interopRequireDefault(require("./HiRadio"));

package/HiSelect/HiSelect.js

@@ -23,8 +23,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -126,30 +124,6 @@ function (_React$PureComponent) {
     (0, _classCallCheck2.default)(this, HiSelect);
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, _props));
 
-    _this.handleClick = function () {
-      if (_this.state.open) {
-        _this.handleClose();
-      } else {
-        _this.setState({
-          open: true
-        });
-
-        var options = _this.props.options.slice();
-
-        _this.handleSuggestions(options);
-
-        if (_this.props.onClick) {
-          _this.props.onClick();
-        } // Gestion du focus
-
-
-        if (!_this.props.searchable) {
-          // sinon focus sur le dernier élément selectionné
-          _this.focusOnSelectedItem();
-        }
-      }
-    };
-
     _this.buildHierarchyTrees = function (props) {
       // Construct two associative arrays
       // hierarchy[parentId] => children
@@ -211,6 +185,63 @@ function (_React$PureComponent) {
       }, 1);
     };
 
+    _this.handleBlur = function () {
+      _this.setState({
+        focused: false
+      });
+    };
+
+    _this.handleClick = function () {
+      if (_this.state.open) {
+        _this.handleClose();
+      } else {
+        _this.setState({
+          open: true
+        });
+
+        var options = _this.props.options.slice();
+
+        _this.handleSuggestions(options);
+
+        if (_this.props.onClick) {
+          _this.props.onClick();
+        } // Gestion du focus
+
+
+        if (!_this.props.searchable) {
+          // sinon focus sur le dernier élément selectionné
+          _this.focusOnSelectedItem();
+        }
+      }
+    };
+
+    _this.handleClickAway = function (event) {
+      // Au clic sur le bouton, on laisse le handleClick fermer le select
+      if (!_this.selectInputElement.contains(event.target)) {
+        _this.handleClose(event);
+      }
+    };
+
+    _this.handleClose = function () {
+      if (_this.props.onClose) {
+        _this.props.onClose();
+      }
+
+      if (_this.selectInputElement) {
+        _this.selectInputElement.focus();
+      }
+
+      _this.setState({
+        open: false
+      });
+    };
+
+    _this.handleFocus = function () {
+      _this.setState({
+        focused: true
+      });
+    };
+
     _this.handleKeyDown = function (event) {
       var nextItem;
 
@@ -244,36 +275,29 @@ function (_React$PureComponent) {
       }
     };
 
-    _this.handleFocus = function () {
-      _this.setState({
-        focused: true
-      });
-    };
+    _this.handleRequestDelete = function (event) {
+      event.stopPropagation();
 
-    _this.handleBlur = function () {
-      _this.setState({
-        focused: false
-      });
+      _this.props.onChange(_this.props.name, []);
     };
 
-    _this.handleClose = function () {
-      if (_this.props.onClose) {
-        _this.props.onClose();
-      }
+    _this.handleReset = function (event) {
+      if (_this.props.onReset) {
+        event.stopPropagation();
 
-      if (_this.selectInputElement) {
-        _this.selectInputElement.focus();
+        _this.props.onReset(event);
       }
-
-      _this.setState({
-        open: false
-      });
     };
 
-    _this.handleClickAway = function (event) {
-      // Au clic sur le bouton, on laisse le handleClick fermer le select
-      if (!_this.selectInputElement.contains(event.target)) {
-        _this.handleClose(event);
+    _this.handleScroll = function (event) {
+      if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
+        _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
+
+        _this.setState(function (prevState) {
+          return {
+            resultsPageNumber: prevState.resultsPageNumber + 1
+          };
+        });
       }
     };
 
@@ -446,24 +470,6 @@ function (_React$PureComponent) {
       });
     };
 
-    _this.handleRequestDelete = function (evt) {
-      evt.stopPropagation();
-
-      _this.props.onChange(_this.props.name, []);
-    };
-
-    _this.handleScroll = function (event) {
-      if (!_this.props.loadingMoreResults && _this.props.hasMore && event.target.scrollHeight - event.target.clientHeight - event.target.scrollTop < 15) {
-        _this.props.loadMoreResults(_this.state.resultsPageNumber + 1);
-
-        _this.setState(function (prevState) {
-          return {
-            resultsPageNumber: prevState.resultsPageNumber + 1
-          };
-        });
-      }
-    };
-
     _this.state = {
       open: false,
       focused: false,
@@ -521,15 +527,6 @@ function (_React$PureComponent) {
       _this.state.dynamic = true;
     }
 
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClose = _this.handleClose.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleClickAway = _this.handleClickAway.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleRequestDelete = _this.handleRequestDelete.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleSuggestions = _this.handleSuggestions.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleFocus = _this.handleFocus.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleBlur = _this.handleBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
-    _this.handleScroll = _this.handleScroll.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
 
@@ -557,14 +554,6 @@ function (_React$PureComponent) {
         });
       }
     }
-  }, {
-    key: "handleReset",
-    value: function handleReset(event) {
-      if (this.props.onReset) {
-        event.stopPropagation();
-        this.props.onReset(event);
-      }
-    }
   }, {
     key: "render",
     value: function render() {

package/HiSelect/HiSuggestSelect.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +35,8 @@ var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 
 var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
 
 var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
@@ -43,6 +47,8 @@ var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 // @inheritedComponent HiInput
 var styles = function styles(theme) {
   return {
@@ -62,6 +68,9 @@ var styles = function styles(theme) {
       borderRadius: '0px 2px',
       maxHeight: 440,
       transition: 'none'
+    },
+    alignRight: {
+      right: 0
     }
   };
 };
@@ -108,13 +117,24 @@ function (_React$PureComponent) {
 
     _this.handleKeyDown = function (event) {
       var nextItem;
+      var key = (0, _keycode.default)(event);
 
-      if (event.key === 'ArrowDown') {
+      if (key === 'down') {
+        event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
-      } else if (event.key === 'ArrowUp') {
+      } else if (key === 'up') {
+        event.preventDefault();
         nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
-      } else if (event.key === 'Tab') {
+      } else if (key === 'tab') {
         document.body.style.overflow = 'auto';
+      } else if (key === 'escape' || 'enter') {
+        event.preventDefault();
+
+        var item = _this.props.options.find(function (elem) {
+          return String(elem.id) === event.target.id;
+        });
+
+        _this.handleSelect(null, item);
       }
 
       if (nextItem) {
@@ -195,7 +215,8 @@ function (_React$PureComponent) {
           showNoResults = _this$props.showNoResults,
           onSearch = _this$props.onSearch,
           translations = _this$props.translations,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
+          align = _this$props.align,
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
       var _this$state = this.state,
           focused = _this$state.focused,
           options = _this$state.options;
@@ -240,7 +261,7 @@ function (_React$PureComponent) {
         disablePortal: true,
         anchorEl: this.textInput,
         placement: "bottom-start",
-        className: classes.popper,
+        className: (0, _classnames.default)(classes.popper, (0, _defineProperty2.default)({}, classes.alignRight, align === 'right')),
         open: true
       }, _react.default.createElement(_Grow.default, {
         in: open,
@@ -264,6 +285,7 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 HiSuggestSelect.defaultProps = {
+  align: 'left',
   showMinLength: false,
   showNoResults: false,
   translations: {
@@ -273,6 +295,11 @@ HiSuggestSelect.defaultProps = {
   options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Align popper on right or left of container
+   */
+  align: _propTypes.default.oneOf(['left', 'right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/HiSelect/SelectInput.js

@@ -345,6 +345,11 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   refElement: _propTypes.default.func,
 
+  /**
+   * Theme object
+   */
+  theme: _propTypes.default.object,
+
   /**
    * Valeur à afficher (déjà formattée)
    */

package/HiSelectNew/HiNestedSelectContent.js

@@ -235,7 +235,6 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       var _this$props2 = _this.props,
-          classes = _this$props2.classes,
           disabledParent = _this$props2.disabledParent,
           hasAll = _this$props2.hasAll,
           iconAll = _this$props2.iconAll,
@@ -353,6 +352,11 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   hasAll: _propTypes.default.bool,
 
+  /**
+   * Propriétés du composant HiSelectableList
+   */
+  hiSelectableListProps: _propTypes.default.object,
+
   /**
    * id du select
    */