@hipay/hipay-material-ui 2.0.0-beta.68 → 2.0.0-beta.70

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

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.68
+/** @license HiPay-Material-UI v2.0.0-beta.70
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -15625,6 +15625,68 @@
               withTheme: true
             })(HiWidget);
 
+            /**
+             * @ignore - internal component.
+             */
+
+            var HiActivity = pure(function (props) {
+              var classes = props.classes,
+                  _props$color = props.color,
+                  color = _props$color === void 0 ? props.theme.palette.neutral.main : _props$color,
+                  theme = props.theme,
+                  other = objectWithoutProperties(props, ["classes", "color", "theme"]);
+
+              return React.createElement("svg", _extends_1({
+                viewBox: "0 0 22.75 20.75"
+              }, other), React.createElement("circle", {
+                cx: "9",
+                cy: "11.05",
+                r: "9",
+                opacity: 0.16,
+                fill: color
+              }), React.createElement("g", null, React.createElement("path", {
+                // eslint-disable-next-line max-len
+                d: "M7.33,1.41A7.75,7.75,0,0,0,5.64,3.94,7.91,7.91,0,0,0,5,7.05a7.91,7.91,0,0,0,2.3,5.65L5.92,14.11A10.06,10.06,0,0,1,3.79,11,9.73,9.73,0,0,1,3,7.05a9.72,9.72,0,0,1,.77-3.89A10.06,10.06,0,0,1,5.92,0ZM14,11.06v4h1a1,1,0,0,1,1,1h7v2H16a1,1,0,0,1-1,1H11a1,1,0,0,1-1-1H3V16h7a1,1,0,0,1,1-1h1v-4ZM10.19,4.22A3.84,3.84,0,0,0,9.06,7.05a3.84,3.84,0,0,0,1.13,2.84L8.78,11.3A6.36,6.36,0,0,1,7.47,9.38,5.84,5.84,0,0,1,7,7.05a6,6,0,0,1,.47-2.34,5.62,5.62,0,0,1,1.31-1.9Zm4.22,1.4A2,2,0,0,1,15,7a2,2,0,0,1-.56,1.43,2,2,0,0,1-2.82,0A2,2,0,0,1,11,7a2,2,0,0,1,3.38-1.41Zm4.12-.91A6,6,0,0,1,19,7.05a5.84,5.84,0,0,1-.47,2.33,6.36,6.36,0,0,1-1.31,1.92L15.81,9.89a3.84,3.84,0,0,0,1.13-2.84,3.84,3.84,0,0,0-1.13-2.83l1.41-1.41A5.62,5.62,0,0,1,18.53,4.71Zm3.68-1.55A9.72,9.72,0,0,1,23,7.05a9.73,9.73,0,0,1-.77,3.9,10.06,10.06,0,0,1-2.13,3.16L18.67,12.7A7.91,7.91,0,0,0,21,7.05a7.91,7.91,0,0,0-.61-3.11,7.75,7.75,0,0,0-1.69-2.53L20.08,0A10.06,10.06,0,0,1,22.21,3.16Z",
+                fill: color
+              })));
+            });
+            HiActivity.muiName = 'SvgIcon';
+            var HiActivity$1 = withStyles({}, {
+              hiComponent: true,
+              withTheme: true
+            })(HiActivity);
+
+            /**
+             * @ignore - internal component.
+             */
+
+            var HiPermission = pure(function (props) {
+              var classes = props.classes,
+                  _props$color = props.color,
+                  color = _props$color === void 0 ? props.theme.palette.neutral.main : _props$color,
+                  theme = props.theme,
+                  other = objectWithoutProperties(props, ["classes", "color", "theme"]);
+
+              return React.createElement("svg", _extends_1({
+                viewBox: "0 0 22.98 20.05"
+              }, other), React.createElement("circle", {
+                cx: "9",
+                cy: "11.75",
+                r: "9",
+                opacity: 0.16,
+                fill: color
+              }), React.createElement("g", null, React.createElement("path", {
+                // eslint-disable-next-line max-len
+                d: "M11.24,2a6.69,6.69,0,0,1,9.52,0,6.5,6.5,0,0,1,2,4.76,6.5,6.5,0,0,1-2,4.76,6.5,6.5,0,0,1-4.76,2,6.66,6.66,0,0,1-3-.75V15H10.75v2.25H8.5V19.5H3.25V14l.19-.28,5.9-5.86a10.31,10.31,0,0,1-.09-1.08A6.5,6.5,0,0,1,11.24,2ZM19.7,3.05a5.19,5.19,0,0,0-7.4,0,5,5,0,0,0-1.55,3.7A9,9,0,0,0,10.89,8l0,.37-.28.28-5.91,6V18H7V15.75H9.25V13.5H11.5V11.25h1.78l.19.09a5.19,5.19,0,0,0,6.23-.89,5,5,0,0,0,1.55-3.7A5,5,0,0,0,19.7,3.05ZM16.45,4.2a1.45,1.45,0,0,1,2.1,0,1.45,1.45,0,0,1,0,2.1,1.45,1.45,0,0,1-2.1,0,1.45,1.45,0,0,1,0-2.1Z",
+                fill: color
+              })));
+            });
+            HiPermission.muiName = 'SvgIcon';
+            var HiPermission$1 = withStyles({}, {
+              hiComponent: true,
+              withTheme: true
+            })(HiPermission);
+
 
 
             var hiSvgIcons = /*#__PURE__*/Object.freeze({
@@ -15642,7 +15704,9 @@
                         HiSizeSmall: HiSizeSmall,
                         HiTransaction: HiTransaction$1,
                         HiUser: HiUser$1,
-                        HiWidget: HiWidget$1
+                        HiWidget: HiWidget$1,
+                        HiActivity: HiActivity$1,
+                        HiPermission: HiPermission$1
             });
 
             var createIcon = createCommonjsModule(function (module, exports) {
@@ -71197,7 +71261,7 @@
             }(React.PureComponent);
 
             HiChipSwitch.defaultProps = {
-              active: true,
+              active: false,
               activeIcon: 'check',
               selection: null,
               selectionTitle: ''
@@ -72635,7 +72699,7 @@
                   },
                   width: '100%',
                   // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border top
-                  '&:not($error)': {
+                  '&:$error': {
                     marginTop: 1
                   }
                 }),
@@ -72923,7 +72987,8 @@
                       inputClassName = _this$props.inputClassName,
                       onReset = _this$props.onReset,
                       spellcheck = _this$props.spellcheck,
-                      startAdornmentColor = _this$props.startAdornmentColor;
+                      startAdornmentColor = _this$props.startAdornmentColor,
+                      inputProps = _this$props.inputProps;
                   var focused = this.state.focused;
 
                   var overlayProps = _extends_1({
@@ -73003,10 +73068,10 @@
                         _this2.endAdornmentNode = el;
                       }
                     }, eraseIcon, endAdornment),
-                    inputProps: {
+                    inputProps: _extends_1({
                       spellCheck: spellcheck ? "true" : "false",
                       className: classnames(inputClassName, classes.inputPropsClassName, (_classNames4 = {}, defineProperty(_classNames4, classes.inputText, !multiline), defineProperty(_classNames4, classes.inputTextArea, multiline), _classNames4))
-                    }
+                    }, inputProps)
                   }));
                 }
               }], [{
@@ -73093,6 +73158,11 @@
                */
               inputId: propTypes.string,
 
+              /**
+               * Passe des props directement à l'input
+               */
+              inputProps: propTypes.object,
+
               /**
                * Passe une ref callback au composant input
                */
@@ -77876,8 +77946,6 @@
             var KEYS = 'keys';
             var VALUES = 'values';
 
-            var returnThis = function () { return this; };
-
             var _iterDefine = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) {
               _iterCreate(Constructor, NAME, next);
               var getMethod = function (kind) {
@@ -77902,8 +77970,6 @@
                 if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) {
                   // Set @@toStringTag to native iterators
                   _setToStringTag(IteratorPrototype, TAG, true);
-                  // fix for some old engines
-                  if (!_library && typeof IteratorPrototype[ITERATOR] != 'function') _hide(IteratorPrototype, ITERATOR, returnThis);
                 }
               }
               // fix Array#{values, @@iterator}.name in V8 / FF
@@ -77912,7 +77978,7 @@
                 $default = function values() { return $native.call(this); };
               }
               // Define iterator
-              if ((!_library || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {
+              if ((FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {
                 _hide(proto, ITERATOR, $default);
               }
               if (DEFAULT) {
@@ -80183,9 +80249,9 @@
                       overflow: true,
                       placeholder: placeholderContent
                     }, itemComponent);
-                  } else {
-                    return itemComponent;
                   }
+
+                  return itemComponent;
                 };
 
                 _this.compareItem = function (a, b) {
@@ -83855,7 +83921,8 @@
                       onSearch = _this$props.onSearch,
                       translations = _this$props.translations,
                       align = _this$props.align,
-                      otherProps = objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
+                      inputClasses = _this$props.inputClasses,
+                      otherProps = objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align", "inputClasses"]);
 
                   var _this$state = this.state,
                       focused = _this$state.focused,
@@ -83896,7 +83963,8 @@
                     onChange: onSearch,
                     onKeyDown: this.handleKeyDownSearch,
                     onBlur: this.handleBlur,
-                    onFocus: this.handleFocus
+                    onFocus: this.handleFocus,
+                    classes: inputClasses
                   })), open && React.createElement(Popper$3, {
                     disablePortal: true,
                     anchorEl: this.textInput,
@@ -83951,6 +84019,11 @@
                */
               id: propTypes.string,
 
+              /**
+               * Object that contains the style for Input component
+               */
+              inputClasses: propTypes.object,
+
               /**
                * Passe une ref callback au composant input
                */
@@ -91814,13 +91887,21 @@
 
             var ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SENTINEL_SCORE];
 
-            var styles$l = {
-              icon: {
-                color: '#00ADE9'
-              },
-              headerRoot: {
-                cursor: 'inherit'
-              }
+            var styles$l = function styles(theme) {
+              return {
+                head: {
+                  cursor: 'inherit',
+                  borderBottom: "solid 1px ".concat(theme.palette.divider)
+                },
+                cell: {
+                  border: 'none',
+                  paddingRight: '13px',
+                  paddingLeft: '13px'
+                },
+                icon: {
+                  color: '#00ADE9'
+                }
+              };
             };
 
             var HiTableHeader =
@@ -91862,7 +91943,9 @@
                       orderBy = _this$props.orderBy,
                       sortable = _this$props.sortable,
                       dense = _this$props.dense;
-                  return React.createElement(TableHead$2, null, React.createElement(TableRow$4, {
+                  return React.createElement(TableHead$2, {
+                    className: classes.head
+                  }, React.createElement(TableRow$4, {
                     style: {
                       height: dense ? CELL_HEADER_HEIGHT_DENSE : CELL_HEADER_HEIGHT,
                       whiteSpace: 'nowrap'
@@ -91878,13 +91961,8 @@
                     var finalLabel = view === 's' ? smallLabel : label;
                     return React.createElement(TableCell$2, {
                       key: colId,
+                      className: classes.cell,
                       sortDirection: orderBy === colId ? order : false,
-                      style: {
-                        border: 'none',
-                        borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
-                        paddingRight: '13px',
-                        paddingLeft: '13px'
-                      },
                       numeric: ALIGN_RIGHT_TYPES.includes(type),
                       title: headerTooltip
                     }, sortable ? React.createElement(TableSortLabel$2, {
@@ -96901,12 +96979,35 @@
                       color = _this$props.color,
                       icon = _this$props.icon,
                       label = _this$props.label,
-                      view = _this$props.view,
-                      size = _this$props.size;
+                      onClick = _this$props.onClick,
+                      size = _this$props.size,
+                      view = _this$props.view;
+
+                  if (onClick) {
+                    return React.createElement("div", {
+                      className: classes.wrapper,
+                      title: label
+                    }, React.createElement(HiIconButton$1, {
+                      color: 'inherit',
+                      style: {
+                        color: color,
+                        fontSize: size || 24,
+                        maxHeight: 31,
+                        maxWidth: 31
+                      },
+                      onClick: onClick
+                    }, React.createElement(HiIcon$1, {
+                      className: classes.icon,
+                      icon: icon
+                    }), view !== 's' && label && React.createElement("span", {
+                      className: classes.label
+                    }, label)));
+                  }
+
                   return React.createElement("div", {
                     className: classes.wrapper,
                     title: label
-                  }, icon && React.createElement(HiIcon$1, {
+                  }, React.createElement(HiIcon$1, {
                     color: 'inherit',
                     style: {
                       color: color,
@@ -96949,6 +97050,11 @@
                */
               label: propTypes.string,
 
+              /**
+               * Fonction déclenchée lors du clic
+               */
+              onClick: propTypes.func,
+
               /**
                * View (L/M/S)
                */
@@ -97346,12 +97452,18 @@
               whiteSpace: 'pre',
               width: '100%'
             };
+            var styleButton = {
+              padding: '1px 5px',
+              minHeight: '18px',
+              maxHeight: '18px'
+            };
             /**
              * CellText functional component
              * (don't includes complex ellipsis: middle, after-first-word...)
              *
              * @param label
              * @param color
+             * @param isButton
              * @param value
              * @param active
              * @param title
@@ -97362,6 +97474,8 @@
             var CellTextStyled = function CellTextStyled(_ref) {
               var label = _ref.label,
                   color = _ref.color,
+                  isButton = _ref.isButton,
+                  onClick = _ref.onClick,
                   _ref$value = _ref.value,
                   value = _ref$value === void 0 ? '' : _ref$value,
                   _ref$active = _ref.active,
@@ -97369,6 +97483,17 @@
                   _ref$title = _ref.title,
                   title$$1 = _ref$title === void 0 ? '' : _ref$title;
               var valueString = label ? label.toString() : value.toString();
+
+              if (isButton) {
+                return React.createElement(HiButton$1, {
+                  color: color,
+                  onClick: onClick,
+                  size: "small",
+                  style: styleButton,
+                  variant: "raised"
+                }, valueString);
+              }
+
               return React.createElement("div", {
                 style: styleRoot,
                 title: title$$1 || valueString
@@ -97393,11 +97518,21 @@
                */
               color: propTypes.string,
 
+              /**
+               * Définit si la cellule de text
+               */
+              isButton: propTypes.bool,
+
               /**
                * Label
                */
               label: propTypes.oneOfType([propTypes.string, propTypes.number]),
 
+              /**
+               * Fonction déclenchée lors du clic
+               */
+              onClick: propTypes.func,
+
               /**
                * Tooltip
                */
@@ -97418,7 +97553,7 @@
                   overflow: 'hidden',
                   position: 'relative',
                   textAlign: 'right',
-                  paddingTop: 10
+                  maxHeight: '32px'
                 },
                 trendChipIcon: {
                   width: 14,
@@ -97565,9 +97700,9 @@
               return {
                 root: {
                   display: 'inline-block',
-                  padding: '1px 9px',
-                  height: 16,
-                  lineHeight: '16px',
+                  padding: '0px 9px',
+                  height: 17,
+                  lineHeight: '17px',
                   minWidth: 25,
                   textAlign: 'center',
                   borderRadius: '45px',
@@ -97817,6 +97952,7 @@
                             color: datacell.color,
                             icon: datacell.icon,
                             label: datacell.label,
+                            onClick: datacell.handleClick,
                             view: cell.view ? cell.view : DEFAULT_VIEWS[cell.type],
                             size: cell.size
                           });
@@ -97861,6 +97997,8 @@
                             active: datacell.active,
                             color: datacell.color,
                             label: datacell.label,
+                            isButton: datacell.isButton,
+                            onClick: datacell.handleClick,
                             title: cell.title ? cell.title(datacell, cell) : datacell.title,
                             value: datacell.value
                           });
@@ -97878,15 +98016,12 @@
                 key: "render",
                 value: function render() {
                   var _this$props = this.props,
+                      className = _this$props.className,
                       column = _this$props.column,
                       data = _this$props.data,
                       locale = _this$props.locale;
                   return React.createElement(TableCell$2, {
-                    style: {
-                      border: 'none',
-                      paddingRight: '13px',
-                      paddingLeft: '13px'
-                    }
+                    className: className
                   }, this.createCell(column, data, locale));
                 }
               }]);
@@ -97895,6 +98030,11 @@
             }(React.PureComponent);
 
             HiCellBuilder.propTypes = {
+              /**
+               * Override TableCell style
+               */
+              className: propTypes.object,
+
               /**
                * Propriétés de la colonne
                */
@@ -97917,15 +98057,18 @@
                   '&:last-child': {
                     borderBottom: 'solid 1px #E4E7E8'
                   },
-                  '&:first-child': {
-                    borderTop: 'solid 1px #E4E7E8'
-                  },
                   '&:hover, &:focus': {
                     backgroundColor: "".concat(theme.palette.action.hover, " !important")
                   }
                 },
                 clickableRow: {
                   cursor: 'pointer'
+                },
+                cell: {
+                  border: 'none',
+                  padding: '0px 13px',
+                  minHeight: '32px',
+                  maxHeight: '40px'
                 }
               };
             };
@@ -97985,6 +98128,7 @@
                   }, Object.keys(columns).map(function (column) {
                     return React.createElement(HiCellBuilder, {
                       key: columns[column].colId,
+                      className: classes.cell,
                       column: columns[column],
                       data: rowdata,
                       locale: locale
@@ -108219,8 +108363,9 @@
                   overflow: 'hidden',
                   textOverflow: 'ellipsis'
                 }, theme.typography.b1, {
-                  display: 'inline-flex',
-                  width: '100%'
+                  display: 'inline-block',
+                  width: '100%',
+                  maxWidth: 500
                 }),
                 placeholder: {
                   color: theme.palette.grey[400]
@@ -108529,13 +108674,14 @@
                   transition: 'none !important'
                 },
                 labelIcon: {
-                  marginRight: 10
+                  marginRight: 10,
+                  verticalAlign: 'text-bottom'
                 },
                 labelImg: {
                   height: 18,
                   width: 'auto',
                   margin: '0 4px',
-                  verticalAlign: 'middle'
+                  verticalAlign: 'text-bottom'
                 },
                 selectIconLabel: _extends_1({
                   whiteSpace: 'nowrap',
@@ -108543,7 +108689,7 @@
                   textOverflow: 'ellipsis',
                   paddingRight: 16
                 }, theme.typography.b1, {
-                  display: 'inline-flex',
+                  display: 'inline-block',
                   width: '100%'
                 }),
                 selectImgLabel: _extends_1({
@@ -108961,11 +109107,28 @@
                     this.inputEl.focus();
                   }
                 }
+              }, {
+                key: "getLengthItemList",
+                value: function getLengthItemList(itemList) {
+                  var _this2 = this;
+
+                  var itemListLength = 0;
+                  itemList.forEach(function (parent) {
+                    if (parent.displayed && itemListLength < 10) {
+                      itemListLength += 1;
+
+                      if (parent.children && itemListLength < 10) {
+                        itemListLength += _this2.getLengthItemList(parent.children);
+                      }
+                    }
+                  });
+                  return itemListLength;
+                }
               }, {
                 key: "render",
                 value: function render() {
                   var _classNames,
-                      _this2 = this;
+                      _this3 = this;
 
                   var _this$props4 = this.props,
                       classes = _this$props4.classes,
@@ -109032,10 +109195,10 @@
                       return React.createElement(HiInput$1, _extends_1({
                         value: searchValue,
                         autoFocus: true,
-                        inputRef: _this2.getInputElement,
-                        onKeyDown: _this2.handleKeyDownSearch,
-                        onChange: _this2.handleSearch,
-                        onReset: _this2.handleSearchReset,
+                        inputRef: _this3.getInputElement,
+                        onKeyDown: _this3.handleKeyDownSearch,
+                        onChange: _this3.handleSearch,
+                        onReset: _this3.handleSearchReset,
                         placeholder: translations.search,
                         startAdornment: 'search',
                         tabIndex: 0,
@@ -109048,8 +109211,10 @@
 
 
                   if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
-                    // +1 for search input
-                    var nbItems = itemList.length <= 10 ? itemList.length + 1 : 11;
+                    // In case we have a nested list
+                    var itemListLength = this.getLengthItemList(itemList); // +1 for search input
+
+                    var nbItems = itemListLength <= 10 ? itemListLength + 1 : 11;
                     popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
                   } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
                     popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
@@ -109058,12 +109223,12 @@
                   var content = function content(_ref) {
                     var placement = _ref.placement;
 
-                    if (placement !== _this2.placement) {
-                      _this2.placement = placement;
+                    if (placement !== _this3.placement) {
+                      _this3.placement = placement;
                     }
 
                     return React.createElement(ClickAwayListener$2, {
-                      onClickAway: _this2.handleClickAway
+                      onClickAway: _this3.handleClickAway
                     }, React.createElement(Grow$2, {
                       in: open,
                       id: "menu-list",
@@ -109072,29 +109237,29 @@
                       }
                     }, React.createElement(Paper$2, {
                       className: classes.paper
-                    }, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends_1({
+                    }, (_this3.placement && _this3.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, React.createElement(Scrollbars, _extends_1({
                       ref: function ref(contentEl) {
-                        _this2.optionsContent = contentEl;
+                        _this3.optionsContent = contentEl;
                       },
                       autoHeight: true,
                       autoHeightMax: 430
                     }, onScrollReachBottom && {
-                      onScroll: _this2.handleScroll
+                      onScroll: _this3.handleScroll
                     }), React.createElement(HiSelectableList$1, _extends_1({
                       type: type,
                       itemList: itemList,
-                      onSelect: _this2.handleSelect,
+                      onSelect: _this3.handleSelect,
                       selectedItemIdList: selectedItemIdList,
-                      fallbackImage: _this2.props.fallbackImage,
-                      overlay: _this2.overlay,
+                      fallbackImage: _this3.props.fallbackImage,
+                      overlay: _this3.overlay,
                       value: value
-                    }, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
+                    }, hiSelectableListProps))), _this3.placement && _this3.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
                   };
 
                   return React.createElement("div", {
                     className: classes.root,
                     ref: function ref(el) {
-                      _this2.overlay = el;
+                      _this3.overlay = el;
                     },
                     onKeyDown: this.handleKeyDown,
                     onKeyDownCapture: this.handleKeyDownCapture
@@ -109117,7 +109282,7 @@
                     placeholder: placeholder
                   }, hiSelectInputProps, {
                     refElement: function refElement(el) {
-                      _this2.inputEl = el;
+                      _this3.inputEl = el;
                     }
                   })), open && staticPosition ? React.createElement("div", {
                     style: popperStyle,