@hipay/hipay-material-ui 2.0.0-beta.61 → 2.0.0-beta.62

package/{HiSelectNew → HiSelect}/HiSelectContent.js

@@ -179,7 +179,7 @@ function (_React$PureComponent) {
           return id !== item.id;
         }), item);
       } else {
-        onChange(event, (0, _toConsumableArray2.default)(value).concat([item.id]), item);
+        onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
       }
     };
 
@@ -209,13 +209,13 @@ function (_React$PureComponent) {
         });
       } else {
         _this.setState({
-          suggestions: (0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
+          suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _extends2.default)({
             id: '_all',
             label: translations.all
           }, iconAll && {
             type: 'icon',
             icon: iconAll
-          })] : []).concat((0, _toConsumableArray2.default)(suggestions))
+          })] : []), (0, _toConsumableArray2.default)(suggestions))
         });
       }
     };
@@ -251,22 +251,22 @@ function (_React$PureComponent) {
       var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
       var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       // build item list
-      var itemList = (0, _toConsumableArray2.default)(loading ? [{
+      var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
         id: '_loading',
         type: 'loader',
         disabled: true,
         centered: true,
         hideCheckbox: true,
         label: 'loading'
-      }] : []).concat((0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
+      }] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
         return item.label && _this.props.filterFunc(item, search);
-      })) : (0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
+      })) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _extends2.default)({
         id: '_all',
         label: _this.props.translations.all
       }, _this.props.iconAll && {
         type: 'icon',
         icon: _this.props.iconAll
-      })] : []).concat((0, _toConsumableArray2.default)(options))));
+      })] : []), (0, _toConsumableArray2.default)(options))));
       return {
         itemList: itemList
       };

package/HiSelect/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -11,16 +13,46 @@ Object.defineProperty(exports, "default", {
     return _HiSelect.default;
   }
 });
+Object.defineProperty(exports, "HiNestedSelect", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelect.default;
+  }
+});
 Object.defineProperty(exports, "HiSelectField", {
   enumerable: true,
   get: function get() {
     return _HiSelectField.default;
   }
 });
-Object.defineProperty(exports, "SelectInput", {
+Object.defineProperty(exports, "HiSelectInput", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectInput.default;
+  }
+});
+Object.defineProperty(exports, "HiSelectContent", {
+  enumerable: true,
+  get: function get() {
+    return _HiSelectContent.default;
+  }
+});
+Object.defineProperty(exports, "HiNestedSelectContent", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelectContent.default;
+  }
+});
+Object.defineProperty(exports, "findFinalItemRecursively", {
+  enumerable: true,
+  get: function get() {
+    return _HiNestedSelectContent.findFinalItemRecursively;
+  }
+});
+Object.defineProperty(exports, "getRecursiveFinalItemIdList", {
   enumerable: true,
   get: function get() {
-    return _SelectInput.default;
+    return _HiNestedSelectContent.getRecursiveFinalItemIdList;
   }
 });
 Object.defineProperty(exports, "HiSuggestSelect", {
@@ -38,9 +70,15 @@ Object.defineProperty(exports, "HiSuggestSelectField", {
 
 var _HiSelect = _interopRequireDefault(require("./HiSelect"));
 
+var _HiNestedSelect = _interopRequireDefault(require("./HiNestedSelect"));
+
 var _HiSelectField = _interopRequireDefault(require("./HiSelectField"));
 
-var _SelectInput = _interopRequireDefault(require("./SelectInput"));
+var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
+
+var _HiSelectContent = _interopRequireDefault(require("./HiSelectContent"));
+
+var _HiNestedSelectContent = _interopRequireWildcard(require("./HiNestedSelectContent"));
 
 var _HiSuggestSelect = _interopRequireDefault(require("./HiSuggestSelect"));
 

package/HiSelectableList/HiSelectableList.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +35,8 @@ var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListIt
 
 var _helpers = require("../utils/helpers");
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var styles = function styles() {
   return {
     root: {
@@ -42,6 +46,8 @@ var styles = function styles() {
 };
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)
+ * - la navigation au clavier est gérée par l'event KeyDown
+ * - le premier focus est géré sur le DidMount
  */
 
 
@@ -71,6 +77,23 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (event) {
+      var nextItem;
+      var key = (0, _keycode.default)(event);
+
+      if (key === 'down') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'down');
+      } else if (key === 'up') {
+        event.preventDefault();
+        nextItem = (0, _helpers.getNextItemSelectable)(document.activeElement, 'up');
+      }
+
+      if (nextItem) {
+        nextItem.focus();
+      }
+    };
+
     _this.buildRecursiveListItem = function (item) {
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var _this$props = _this.props,
@@ -103,7 +126,8 @@ function (_React$PureComponent) {
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         selected: selectedItemIdList.includes(item.id) // item props override upper props (disabled, hideCheckbox, icon, level...)
-
+        ,
+        item: item
       }, item)), item.children && item.children.length > 0 && item.children.filter(function (subItem) {
         return !(subItem.displayed === false);
       }).map(function (subItem) {
@@ -137,6 +161,24 @@ function (_React$PureComponent) {
   }
 
   (0, _createClass2.default)(HiSelectableList, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.overlay && this.props.overlay.getElementsByTagName('li')[0]) {
+        var item = this.props.overlay.getElementsByTagName('li')[0];
+        var value = (0, _typeof2.default)(this.props.value) === 'object' ? this.props.value[0] : this.props.value;
+
+        if (value) {
+          if (typeof this.props.value[0] === 'string') {
+            item = this.props.overlay.getElementsByTagName('li')[value];
+          } else if (typeof this.props.value[0] === 'number') {
+            item = this.props.overlay.getElementsByTagName('li')[value - 1];
+          }
+        }
+
+        item.focus();
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -151,7 +193,11 @@ function (_React$PureComponent) {
       }
 
       return _react.default.createElement(_List.default, {
-        className: classes.root
+        className: classes.root,
+        onKeyDown: this.handleKeyDown,
+        innerRef: function innerRef(el) {
+          _this2.el = el;
+        }
       }, itemList.filter(function (item) {
         return !(item.displayed === false);
       }) // don't remove if undefined
@@ -231,6 +277,11 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   onSelect: _propTypes.default.func.isRequired,
 
+  /**
+   * Overlay récupéré au niveau de la div précédant le HiSelectInput
+   */
+  overlay: _propTypes.default.object,
+
   /**
    * Liste des id des éléments sélectionnés
    */
@@ -244,7 +295,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Liste des éléments à placer en premier, peu import le tri
    */
-  sortAppendList: _propTypes.default.array
+  sortAppendList: _propTypes.default.array,
+
+  /**
+   * Value(s) du select
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiSelectableList/HiSelectableListItem.js

@@ -47,6 +47,8 @@ var _helpers = require("../utils/helpers");
 
 var _pure = _interopRequireDefault(require("recompose/pure"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
 var PureListItem = (0, _pure.default)(_ListItem.default);
 
@@ -98,9 +100,6 @@ var styles = function styles(theme) {
       cursor: 'default',
       opacity: 'inherit'
     },
-    selected: {
-      backgroundColor: theme.palette.action.selected
-    },
     pinned: {
       display: 'inherit',
       marginRight: 8,
@@ -198,6 +197,7 @@ var styles = function styles(theme) {
 };
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
+ * - la sélection/déséclection d'un item est géré avec KeyDown
  */
 
 
@@ -222,6 +222,20 @@ function (_React$PureComponent) {
       };
     };
 
+    _this.handleKeyDown = function (item) {
+      return function (event) {
+        var key = (0, _keycode.default)(event);
+
+        if (key === 'space' || key === 'enter') {
+          event.preventDefault();
+
+          if (item) {
+            _this.props.onSelect(null, item);
+          }
+        }
+      };
+    };
+
     _this.state = {
       hover: false
     };
@@ -292,8 +306,6 @@ function (_React$PureComponent) {
           fallbackImage = _this$props2.fallbackImage,
           hideCheckbox = _this$props2.hideCheckbox,
           onSelect = _this$props2.onSelect,
-          onKeyDown = _this$props2.onKeyDown,
-          onKeyUp = _this$props2.onKeyUp,
           indeterminate = _this$props2.indeterminate,
           indeterminateIcon = _this$props2.indeterminateIcon,
           icon = _this$props2.icon,
@@ -309,7 +321,8 @@ function (_React$PureComponent) {
           secondaryLabel = _this$props2.secondaryLabel,
           thin = _this$props2.thin,
           type = _this$props2.type,
-          color = _this$props2.color; // Return simple loader list item
+          color = _this$props2.color,
+          item = _this$props2.item; // Return simple loader list item
 
       if (type === 'loader') {
         return _react.default.createElement(_ListItem.default, null, _react.default.createElement(_HiLoader.default, {
@@ -335,14 +348,13 @@ function (_React$PureComponent) {
         classes: {
           root: classes.root
         },
-        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.selected, selected), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
+        className: (0, _classnames.default)(classes.listItem, classes.listItemHover, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.thin, thin), (0, _defineProperty2.default)(_classNames, classes.pinned, pinned), (0, _defineProperty2.default)(_classNames, classes.inline, secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemWithoutSecondaryInline, !secondaryInline), (0, _defineProperty2.default)(_classNames, classes.listItemInlineWithInfoWithoutSecondary, secondaryInline && info && !secondaryLabel), _classNames)),
         disabled: disabled
       }, disabled || {
         onClick: onSelect,
         onMouseEnter: this.setHover(true),
         onMouseLeave: this.setHover(false),
-        onKeyDown: onKeyDown,
-        onKeyUp: onKeyUp
+        onKeyDown: this.handleKeyDown(item)
       }, {
         style: {
           paddingLeft: "".concat(paddingLeft + level * 32, "px")
@@ -350,7 +362,7 @@ function (_React$PureComponent) {
       }), _react.default.createElement("div", {
         className: (0, _classnames.default)(classes.labelContent, (0, _defineProperty2.default)({}, classes.labelWithoutSecondaryInline, !secondaryInline || !secondaryLabel && !info))
       }, !hideCheckbox && !pinned && _react.default.createElement(_HiCheckbox.default, {
-        tabIndex: onKeyDown ? '-1' : 0,
+        tabIndex: 0,
         classes: {
           root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
         },

package/README.md

@@ -78,6 +78,18 @@ https://reactjs.org/docs/reconciliation.html
 - Attention aux refs et aux mutations
 ex: ne pas passer une arrow fonction directement dans les props d'un composant. Même pour y inclure un index ou une valeur contextuelle !
 
+#### Gestion des événements clavier
+
+- **Evénement capturé** : on part sur le _KeyDown_, c'est le seul à capturer toutes les touches du clavier ([source](https://www.w3schools.com/jsref/event_onkeypress.asp))
+
+- **Capturing** : il s'agit de la première phase par laquelle passe un événement lors de sa capture, durant celle-ci, il descend dans l’arborescence HTML en partant de l'élément racine (en React : Parent => Enfant, on peut le capturer avec _onKeyDownCapture_)
+
+- **Bubbling** : c'est la deuxième phase par laquelle passe un événement et celle capturée par défaut lorsque l'on fait un _onKeyDown_. A ce moment, l'événement remonte vers l'élément HTML racine (en React : Enfant => Parent)
+
+- **PreventDefault** : on l'utilisera à chaque fois qu'il faudra éviter un comportement par défaut du navigateur.
+
+- **StopPropagation** : il permet de stopper la capture dès qu'il est appelé. Couplé au Capturing on peut, par exemple, éviter qu'un événement soit capturé dans un composant enfant.
+
 ## Contribuer
 
 #### A savoir
@@ -300,3 +312,6 @@ au lieu de
 Attention aux index.js.
 La bonne syntaxe est :
 export { default as MyComponente } from './MyComponente';
+
+
+[source]: https://www.w3schools.com/jsref/event_onkeypress.asp

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -6,7 +6,7 @@ import moment from 'moment-timezone';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
-import HiSelectField from '../HiSelectNew/HiSelectField';
+import HiSelectField from '../HiSelect/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
 import HiFormControl from '../HiForm/HiFormControl';
 export function findSeparator(format) {

package/es/{HiSelectNew → HiSelect}/HiNestedSelect.js

@@ -46,7 +46,7 @@ function findFinalItemRecursively(itemList, searchId) {
   return foundItem;
 }
 
-export var filterValue = function (item, searchValue) {
+export const filterValue = function (item, searchValue) {
   return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
 };
 /**

package/es/{HiSelectNew → HiSelect}/HiNestedSelectContent.js

@@ -42,7 +42,7 @@ export function findFinalItemRecursively(itemList, searchId) {
   });
   return foundItem;
 }
-export var filterValue = function (item, searchValue) {
+export const filterValue = function (item, searchValue) {
   return searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1;
 };
 /**