@hipay/hipay-material-ui 2.0.0-beta.48 → 2.0.0-beta.50

package/HiButton/HiButton.js

@@ -28,7 +28,13 @@ var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 // @inheritedComponent Button
 var styles = function styles(theme) {
   return {
-    root: {},
+    root: {
+      '&$raisedDisabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
+      }
+    },
+    raisedDisabled: {},
     flatNeutral: {
       color: theme.palette.neutral.main,
       '&$disabled': {
@@ -193,7 +199,7 @@ function HiButton(props) {
   var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
   var fab = variant === 'fab' || variant === 'extendedFab';
   var contained = variant === 'contained' || variant === 'raised';
-  var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
+  var buttonClassNames = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.raisedDisabled, variant === 'raised' && disabled), (0, _defineProperty2.default)(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames));
   return _react.default.createElement(_Button.default, (0, _extends2.default)({
     className: className,
     classes: {

package/HiChip/HiChip.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var _HiIcon = _interopRequireDefault(require("../HiIcon"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
@@ -107,6 +109,13 @@ var styles = function styles(theme) {
 
 exports.styles = styles;
 
+var handleKeyDown = function handleKeyDown(e, fn) {
+  if ((0, _keycode.default)(e) === 'space' || (0, _keycode.default)(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
 function HiChip(props) {
   var _classNames;
 
@@ -138,7 +147,11 @@ function HiChip(props) {
     icon: icon,
     size: iconSize,
     onClick: onIconClick,
-    title: titleIcon
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onIconClick);
+    },
+    title: titleIcon,
+    tabIndex: onIconClick ? 0 : -1
   }), prefix && _react.default.createElement("span", {
     className: classes.prefix
   }, prefix), img && _react.default.createElement("img", {
@@ -157,24 +170,36 @@ function HiChip(props) {
     className: (0, _classnames.default)(classes.navigate),
     icon: "arrow_left",
     onClick: onPrevious,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onPrevious);
+    },
     size: iconSize,
-    title: titlePrevious
+    title: titlePrevious,
+    tabIndex: 0
   }), _react.default.createElement("span", {
     className: classes.label
   }, label), onNext && _react.default.createElement(_HiIcon.default, {
     className: (0, _classnames.default)(classes.navigate),
     icon: "arrow_right",
     onClick: onNext,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onNext);
+    },
     size: iconSize,
-    title: titleNext
+    title: titleNext,
+    tabIndex: 0
   }), onDelete && _react.default.createElement(_HiIcon.default, {
     classes: {
       root: classes.eraseIcon
     },
     icon: "cancel",
     onClick: onDelete,
+    onKeyDown: function onKeyDown(event) {
+      return handleKeyDown(event, onDelete);
+    },
     size: iconSize,
-    title: titleDelete
+    title: titleDelete,
+    tabIndex: 0
   }));
 }
 

package/HiColoredLabel/HiColoredLabel.js

@@ -35,7 +35,8 @@ var styles = function styles(theme) {
       borderRadius: 2,
       textOverflow: 'ellipsis',
       overflow: 'hidden',
-      whiteSpace: 'nowrap'
+      whiteSpace: 'nowrap',
+      lineHeight: 1
     }),
     color: {
       fontWeight: 400

package/HiSelect/HiSuggestSelect.js

@@ -236,7 +236,7 @@ function (_React$PureComponent) {
         onKeyDown: this.handleKeyDownSearch,
         onBlur: this.handleBlur,
         onFocus: this.handleFocus
-      })), _react.default.createElement(_Popper.default, {
+      })), open && _react.default.createElement(_Popper.default, {
         disablePortal: true,
         anchorEl: this.textInput,
         placement: "bottom-start",

package/HiSelectableList/HiSelectableList.js

@@ -31,6 +31,8 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _HiSelectableListItem = _interopRequireDefault(require("./HiSelectableListItem"));
 
+var _helpers = require("../utils/helpers");
+
 var styles = function styles() {
   return {
     root: {
@@ -110,7 +112,17 @@ function (_React$PureComponent) {
         return 0;
       }
 
-      return a.label.toString().toLowerCase() > b.label.toString().toLowerCase();
+      var sortAppendList = _this.props.sortAppendList;
+
+      if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
+        return 1;
+      }
+
+      if (sortAppendList.indexOf(a.id) > sortAppendList.indexOf(b.id)) {
+        return -1;
+      }
+
+      return (0, _helpers.foldAccents)(a.label.toString().toLowerCase()) > (0, _helpers.foldAccents)(b.label.toString().toLowerCase()) ? 1 : -1;
     };
 
     return _this;
@@ -151,7 +163,8 @@ HiSelectableList.defaultProps = {
   disabledItemIdList: [],
   hideCheckbox: false,
   selectedItemIdList: [],
-  sort: false
+  sort: false,
+  sortAppendList: ['_all']
 };
 HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -215,7 +228,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Tri des éléments selon leur label
    */
-  sort: _propTypes.default.bool
+  sort: _propTypes.default.bool,
+
+  /**
+   * Liste des éléments à placer en premier, peu import le tri
+   */
+  sortAppendList: _propTypes.default.array
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiTable/HiTableRow.js

@@ -25,6 +25,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _keycode = _interopRequireDefault(require("keycode"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
@@ -43,7 +45,7 @@ var styles = function styles(theme) {
       '&:first-child': {
         borderTop: 'solid 1px #E4E7E8'
       },
-      '&:hover': {
+      '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
     }
@@ -91,11 +93,18 @@ function (_React$PureComponent) {
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);
         },
+        onKeyDown: function onKeyDown(event) {
+          if ((0, _keycode.default)(event) === 'space' || (0, _keycode.default)(event) === 'enter') {
+            event.preventDefault();
+
+            _this2.handleClick(event, rowdata);
+          }
+        },
         key: key,
         style: {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
-        tabIndex: -1
+        tabIndex: 0
       }, Object.keys(columns).map(function (key) {
         return _react.default.createElement(_HiCellBuilder.default, {
           key: columns[key].colId,

package/es/HiButton/HiButton.js

@@ -8,7 +8,13 @@ import { withStyles } from '../styles';
 import { fade } from '../styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 export const styles = theme => ({
-  root: {},
+  root: {
+    '&$raisedDisabled': {
+      color: theme.palette.neutral.contrastText,
+      backgroundColor: theme.palette.neutral.main
+    }
+  },
+  raisedDisabled: {},
   flatNeutral: {
     color: theme.palette.neutral.main,
     '&$disabled': {
@@ -172,6 +178,7 @@ function HiButton(props) {
   const fab = variant === 'fab' || variant === 'extendedFab';
   const contained = variant === 'contained' || variant === 'raised';
   const buttonClassNames = classNames(classes.root, {
+    [classes.raisedDisabled]: variant === 'raised' && disabled,
     [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
     [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
     [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',

package/es/HiChip/HiChip.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import keycode from 'keycode';
 import HiIcon from '../HiIcon';
 import withStyles from '../styles/withStyles';
 export const styles = theme => ({
@@ -86,6 +87,13 @@ export const styles = theme => ({
   }
 });
 
+const handleKeyDown = (e, fn) => {
+  if (keycode(e) === 'space' || keycode(e) === 'enter') {
+    e.preventDefault();
+    fn();
+  }
+};
+
 function HiChip(props) {
   const {
     label,
@@ -123,7 +131,9 @@ function HiChip(props) {
     icon: icon,
     size: iconSize,
     onClick: onIconClick,
-    title: titleIcon
+    onKeyDown: event => handleKeyDown(event, onIconClick),
+    title: titleIcon,
+    tabIndex: onIconClick ? 0 : -1
   }), prefix && React.createElement("span", {
     className: classes.prefix
   }, prefix), img && React.createElement("img", {
@@ -142,24 +152,30 @@ function HiChip(props) {
     className: classNames(classes.navigate),
     icon: "arrow_left",
     onClick: onPrevious,
+    onKeyDown: event => handleKeyDown(event, onPrevious),
     size: iconSize,
-    title: titlePrevious
+    title: titlePrevious,
+    tabIndex: 0
   }), React.createElement("span", {
     className: classes.label
   }, label), onNext && React.createElement(HiIcon, {
     className: classNames(classes.navigate),
     icon: "arrow_right",
     onClick: onNext,
+    onKeyDown: event => handleKeyDown(event, onNext),
     size: iconSize,
-    title: titleNext
+    title: titleNext,
+    tabIndex: 0
   }), onDelete && React.createElement(HiIcon, {
     classes: {
       root: classes.eraseIcon
     },
     icon: "cancel",
     onClick: onDelete,
+    onKeyDown: event => handleKeyDown(event, onDelete),
     size: iconSize,
-    title: titleDelete
+    title: titleDelete,
+    tabIndex: 0
   }));
 }
 

package/es/HiColoredLabel/HiColoredLabel.js

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
-import { capitalize, escapeHTML } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
 import { fade } from '../styles/colorManipulator';
 export const styles = theme => ({
   root: _objectSpread({}, theme.typography.b1, {
@@ -16,7 +16,8 @@ export const styles = theme => ({
     borderRadius: 2,
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
+    lineHeight: 1
   }),
   color: {
     fontWeight: 400

package/es/HiSelect/HiSuggestSelect.js

@@ -184,7 +184,7 @@ class HiSuggestSelect extends React.PureComponent {
       onKeyDown: this.handleKeyDownSearch,
       onBlur: this.handleBlur,
       onFocus: this.handleFocus
-    })), React.createElement(Popper, {
+    })), open && React.createElement(Popper, {
       disablePortal: true,
       anchorEl: this.textInput,
       placement: "bottom-start",

package/es/HiSelectableList/HiSelectableList.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
+import { foldAccents } from '../utils/helpers';
 export const styles = () => ({
   root: {
     padding: 0
@@ -60,7 +61,17 @@ class HiSelectableList extends React.PureComponent {
         return 0;
       }
 
-      return a.label.toString().toLowerCase() > b.label.toString().toLowerCase();
+      const sortAppendList = this.props.sortAppendList;
+
+      if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
+        return 1;
+      }
+
+      if (sortAppendList.indexOf(a.id) > sortAppendList.indexOf(b.id)) {
+        return -1;
+      }
+
+      return foldAccents(a.label.toString().toLowerCase()) > foldAccents(b.label.toString().toLowerCase()) ? 1 : -1;
     };
   }
 
@@ -91,7 +102,8 @@ HiSelectableList.defaultProps = {
   disabledItemIdList: [],
   hideCheckbox: false,
   selectedItemIdList: [],
-  sort: false
+  sort: false,
+  sortAppendList: ['_all']
 };
 HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -155,7 +167,12 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Tri des éléments selon leur label
    */
-  sort: PropTypes.bool
+  sort: PropTypes.bool,
+
+  /**
+   * Liste des éléments à placer en premier, peu import le tri
+   */
+  sortAppendList: PropTypes.array
 } : {};
 export default withStyles(styles, {
   hiComponent: true,

package/es/HiTable/HiTableRow.js

@@ -1,6 +1,7 @@
 // @inheritedComponent TableRow
 import React from 'react';
 import PropTypes from 'prop-types';
+import keycode from 'keycode';
 import withStyles from '../styles/withStyles';
 import TableRow from '@material-ui/core/TableRow';
 import HiCellBuilder from './HiCellBuilder';
@@ -13,7 +14,7 @@ export const styles = theme => ({
     '&:first-child': {
       borderTop: 'solid 1px #E4E7E8'
     },
-    '&:hover': {
+    '&:hover, &:focus': {
       backgroundColor: `${theme.palette.action.hover} !important`
     }
   }
@@ -44,11 +45,17 @@ class HiTableRow extends React.PureComponent {
       className: classes.row,
       hover: true,
       onClick: event => this.handleClick(event, rowdata),
+      onKeyDown: event => {
+        if (keycode(event) === 'space' || keycode(event) === 'enter') {
+          event.preventDefault();
+          this.handleClick(event, rowdata);
+        }
+      },
       key: key,
       style: {
         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
       },
-      tabIndex: -1
+      tabIndex: 0
     }, Object.keys(columns).map(key => {
       return React.createElement(HiCellBuilder, {
         key: columns[key].colId,

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.50
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.50
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.48",
+  "version": "2.0.0-beta.50",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.48
+/** @license HiPay-Material-UI v2.0.0-beta.50
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13298,7 +13298,13 @@
 
             var styles = function styles(theme) {
               return {
-                root: {},
+                root: {
+                  '&$raisedDisabled': {
+                    color: theme.palette.neutral.contrastText,
+                    backgroundColor: theme.palette.neutral.main
+                  }
+                },
+                raisedDisabled: {},
                 flatNeutral: {
                   color: theme.palette.neutral.main,
                   '&$disabled': {
@@ -13462,7 +13468,7 @@
               var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
               var fab = variant === 'fab' || variant === 'extendedFab';
               var contained = variant === 'contained' || variant === 'raised';
-              var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
+              var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.raisedDisabled, variant === 'raised' && disabled), defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
               return React__default.createElement(Button$2, _extends_1({
                 className: className,
                 classes: {
@@ -15092,6 +15098,28 @@
 
               return node.previousSibling;
             }
+            /**
+             * Retourne la chaîne de caractères passée en entrée sans les accents
+             * @param toFold
+             * @returns {*}
+             */
+
+            function foldAccents(toFold) {
+              return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])/g, function (str, a, c, e, i, n, o, s, u, y, ae, oe) {
+                if (a) return 'a';
+                if (c) return 'c';
+                if (e) return 'e';
+                if (i) return 'i';
+                if (n) return 'n';
+                if (o) return 'o';
+                if (s) return 's';
+                if (u) return 'u';
+                if (y) return 'y';
+                if (ae) return 'ae';
+                if (oe) return 'oe';
+                return str;
+              });
+            }
 
             /**
              * @ignore - internal component.
@@ -66295,6 +66323,13 @@
               };
             };
 
+            var handleKeyDown = function handleKeyDown(e, fn) {
+              if (keycode(e) === 'space' || keycode(e) === 'enter') {
+                e.preventDefault();
+                fn();
+              }
+            };
+
             function HiChip(props) {
               var _classNames;
 
@@ -66326,7 +66361,11 @@
                 icon: icon,
                 size: iconSize,
                 onClick: onIconClick,
-                title: titleIcon
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onIconClick);
+                },
+                title: titleIcon,
+                tabIndex: onIconClick ? 0 : -1
               }), prefix && React__default.createElement("span", {
                 className: classes.prefix
               }, prefix), img && React__default.createElement("img", {
@@ -66345,24 +66384,36 @@
                 className: classnames(classes.navigate),
                 icon: "arrow_left",
                 onClick: onPrevious,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onPrevious);
+                },
                 size: iconSize,
-                title: titlePrevious
+                title: titlePrevious,
+                tabIndex: 0
               }), React__default.createElement("span", {
                 className: classes.label
               }, label), onNext && React__default.createElement(HiIcon$1, {
                 className: classnames(classes.navigate),
                 icon: "arrow_right",
                 onClick: onNext,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onNext);
+                },
                 size: iconSize,
-                title: titleNext
+                title: titleNext,
+                tabIndex: 0
               }), onDelete && React__default.createElement(HiIcon$1, {
                 classes: {
                   root: classes.eraseIcon
                 },
                 icon: "cancel",
                 onClick: onDelete,
+                onKeyDown: function onKeyDown(event) {
+                  return handleKeyDown(event, onDelete);
+                },
                 size: iconSize,
-                title: titleDelete
+                title: titleDelete,
+                tabIndex: 0
               }));
             }
 
@@ -80365,7 +80416,7 @@
                   '&:first-child': {
                     borderTop: 'solid 1px #E4E7E8'
                   },
-                  '&:hover': {
+                  '&:hover, &:focus': {
                     backgroundColor: "".concat(theme.palette.action.hover, " !important")
                   }
                 }
@@ -80412,11 +80463,18 @@
                     onClick: function onClick(event) {
                       return _this2.handleClick(event, rowdata);
                     },
+                    onKeyDown: function onKeyDown(event) {
+                      if (keycode(event) === 'space' || keycode(event) === 'enter') {
+                        event.preventDefault();
+
+                        _this2.handleClick(event, rowdata);
+                      }
+                    },
                     key: key,
                     style: {
                       height: dense ? CELL_HEIGHT_DENSE : CELL_HEIGHT
                     },
-                    tabIndex: -1
+                    tabIndex: 0
                   }, Object.keys(columns).map(function (key) {
                     return React__default.createElement(HiCellBuilder, {
                       key: columns[key].colId,
@@ -93914,7 +93972,8 @@
                   borderRadius: 2,
                   textOverflow: 'ellipsis',
                   overflow: 'hidden',
-                  whiteSpace: 'nowrap'
+                  whiteSpace: 'nowrap',
+                  lineHeight: 1
                 }),
                 color: {
                   fontWeight: 400
@@ -98433,7 +98492,17 @@
                     return 0;
                   }
 
-                  return a.label.toString().toLowerCase() > b.label.toString().toLowerCase();
+                  var sortAppendList = _this.props.sortAppendList;
+
+                  if (sortAppendList.indexOf(a.id) < sortAppendList.indexOf(b.id)) {
+                    return 1;
+                  }
+
+                  if (sortAppendList.indexOf(a.id) > sortAppendList.indexOf(b.id)) {
+                    return -1;
+                  }
+
+                  return foldAccents(a.label.toString().toLowerCase()) > foldAccents(b.label.toString().toLowerCase()) ? 1 : -1;
                 };
 
                 return _this;
@@ -98475,7 +98544,8 @@
               disabledItemIdList: [],
               hideCheckbox: false,
               selectedItemIdList: [],
-              sort: false
+              sort: false,
+              sortAppendList: ['_all']
             };
             HiSelectableList.propTypes = {
               /**
@@ -98539,7 +98609,12 @@
               /**
                * Tri des éléments selon leur label
                */
-              sort: propTypes.bool
+              sort: propTypes.bool,
+
+              /**
+               * Liste des éléments à placer en premier, peu import le tri
+               */
+              sortAppendList: propTypes.array
             };
             var HiSelectableList$1 = withStyles(styles$q, {
               hiComponent: true,