@hipay/hipay-material-ui 2.0.0-beta.51 → 2.0.0-beta.53

package/es/styles/createPalette.js

@@ -132,6 +132,7 @@ export default function createPalette(palette) {
       contrastText: '#FFFFFF'
     },
     negative = {
+      ultraLight: '#EA9494',
       light: '#E66666',
       main: '#D50000',
       dark: '#A00000',
@@ -144,6 +145,7 @@ export default function createPalette(palette) {
       contrastText: '#FFFFFF'
     },
     neutral = {
+      ultraLight: '#8B8B8B',
       light: '#838383',
       main: '#737373',
       dark: '#20272B',
@@ -154,13 +156,17 @@ export default function createPalette(palette) {
       main: red[500],
       dark: red[700]
     },
+    lookup = {
+      light: '#FFFF8D',
+      main: '#EDED14'
+    },
     type = 'light',
-    contrastThreshold = 2.9,
+    contrastThreshold = 2.8,
     // max light contrast
     tonalOffset = 0.2,
     context = 'local'
   } = palette,
-        other = _objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "type", "contrastThreshold", "tonalOffset", "context"]);
+        other = _objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "lookup", "type", "contrastThreshold", "tonalOffset", "context"]);
 
   function getContrastText(background) {
     // Use the same logic as
@@ -170,7 +176,7 @@ export default function createPalette(palette) {
 
     if (process.env.NODE_ENV !== 'production') {
       const contrast = getContrastRatio(background, contrastText);
-      process.env.NODE_ENV !== "production" ? warning(contrast >= 3, [`Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      process.env.NODE_ENV !== "production" ? warning(contrast >= 2.8, [`Material-UI: the contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
     }
 
     return contrastText;
@@ -225,6 +231,8 @@ export default function createPalette(palette) {
     neutral,
     // The colors used to represent interface elements that the user should be made aware of.
     error,
+    // The colors used to represent form elements that have lookup state.
+    lookup,
     // The grey colors.
     grey,
     // Used by `getContrastText()` to maximize the contrast between the background and

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.51
+/** @license HiPay-Material-UI v2.0.0-beta.53
  *
  * 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.51
+/** @license HiPay-Material-UI v2.0.0-beta.53
  *
  * 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.51",
+  "version": "2.0.0-beta.53",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",
@@ -48,6 +48,7 @@
     "jss-vendor-prefixer": "^8.0.1",
     "keycode": "^2.1.9",
     "mdi-material-ui": "^5.4.0",
+    "moment": "^2.22.2",
     "normalize-scroll-left": "^0.1.2",
     "popper.js": "^1.14.1",
     "prop-types": "^15.6.0",

package/styles/createPalette.js

@@ -155,6 +155,7 @@ function createPalette(palette) {
   } : _palette$positive,
       _palette$negative = palette.negative,
       negative = _palette$negative === void 0 ? {
+    ultraLight: '#EA9494',
     light: '#E66666',
     main: '#D50000',
     dark: '#A00000',
@@ -169,6 +170,7 @@ function createPalette(palette) {
   } : _palette$middle,
       _palette$neutral = palette.neutral,
       neutral = _palette$neutral === void 0 ? {
+    ultraLight: '#8B8B8B',
     light: '#838383',
     main: '#737373',
     dark: '#20272B',
@@ -180,15 +182,20 @@ function createPalette(palette) {
     main: _red.default[500],
     dark: _red.default[700]
   } : _palette$error,
+      _palette$lookup = palette.lookup,
+      lookup = _palette$lookup === void 0 ? {
+    light: '#FFFF8D',
+    main: '#EDED14'
+  } : _palette$lookup,
       _palette$type = palette.type,
       type = _palette$type === void 0 ? 'light' : _palette$type,
       _palette$contrastThre = palette.contrastThreshold,
-      contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
+      contrastThreshold = _palette$contrastThre === void 0 ? 2.8 : _palette$contrastThre,
       _palette$tonalOffset = palette.tonalOffset,
       tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
       _palette$context = palette.context,
       context = _palette$context === void 0 ? 'local' : _palette$context,
-      other = (0, _objectWithoutProperties2.default)(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "type", "contrastThreshold", "tonalOffset", "context"]);
+      other = (0, _objectWithoutProperties2.default)(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "lookup", "type", "contrastThreshold", "tonalOffset", "context"]);
 
   function getContrastText(background) {
     // Use the same logic as
@@ -198,7 +205,7 @@ function createPalette(palette) {
 
     if (process.env.NODE_ENV !== 'production') {
       var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
-      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 3, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 2.8, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
     }
 
     return contrastText;
@@ -257,6 +264,8 @@ function createPalette(palette) {
     neutral: neutral,
     // The colors used to represent interface elements that the user should be made aware of.
     error: error,
+    // The colors used to represent form elements that have lookup state.
+    lookup: lookup,
     // The grey colors.
     grey: _grey.default,
     // Used by `getContrastText()` to maximize the contrast between the background and

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

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.51
+/** @license HiPay-Material-UI v2.0.0-beta.53
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1086,6 +1086,7 @@
               } : _palette$positive,
                   _palette$negative = palette.negative,
                   negative = _palette$negative === void 0 ? {
+                ultraLight: '#EA9494',
                 light: '#E66666',
                 main: '#D50000',
                 dark: '#A00000',
@@ -1100,6 +1101,7 @@
               } : _palette$middle,
                   _palette$neutral = palette.neutral,
                   neutral = _palette$neutral === void 0 ? {
+                ultraLight: '#8B8B8B',
                 light: '#838383',
                 main: '#737373',
                 dark: '#20272B',
@@ -1111,15 +1113,20 @@
                 main: red[500],
                 dark: red[700]
               } : _palette$error,
+                  _palette$lookup = palette.lookup,
+                  lookup = _palette$lookup === void 0 ? {
+                light: '#FFFF8D',
+                main: '#EDED14'
+              } : _palette$lookup,
                   _palette$type = palette.type,
                   type = _palette$type === void 0 ? 'light' : _palette$type,
                   _palette$contrastThre = palette.contrastThreshold,
-                  contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
+                  contrastThreshold = _palette$contrastThre === void 0 ? 2.8 : _palette$contrastThre,
                   _palette$tonalOffset = palette.tonalOffset,
                   tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
                   _palette$context = palette.context,
                   context = _palette$context === void 0 ? 'local' : _palette$context,
-                  other = objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "type", "contrastThreshold", "tonalOffset", "context"]);
+                  other = objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "lookup", "type", "contrastThreshold", "tonalOffset", "context"]);
 
               function getContrastText(background) {
                 // Use the same logic as
@@ -1129,7 +1136,7 @@
 
                 {
                   var contrast = getContrastRatio(background, contrastText);
-                  warning_1(contrast >= 3, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
+                  warning_1(contrast >= 2.8, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
                 }
 
                 return contrastText;
@@ -1188,6 +1195,8 @@
                 neutral: neutral,
                 // The colors used to represent interface elements that the user should be made aware of.
                 error: error,
+                // The colors used to represent form elements that have lookup state.
+                lookup: lookup,
                 // The grey colors.
                 grey: grey,
                 // Used by `getContrastText()` to maximize the contrast between the background and
@@ -66090,8 +66099,8 @@
 
             var HiCheckbox =
             /*#__PURE__*/
-            function (_React$Component) {
-              inherits(HiCheckbox, _React$Component);
+            function (_React$PureComponent) {
+              inherits(HiCheckbox, _React$PureComponent);
 
               function HiCheckbox(props) {
                 var _this;
@@ -66178,7 +66187,7 @@
               }]);
 
               return HiCheckbox;
-            }(React__default.Component);
+            }(React__default.PureComponent);
 
             HiCheckbox.defaultProps = {
               checked: false,
@@ -66313,7 +66322,8 @@
                   '&:hover, &:focus': {
                     backgroundColor: theme.palette.primary.main,
                     color: theme.palette.grey[300]
-                  }
+                  },
+                  position: 'relative'
                 },
                 badge: {
                   height: 16,
@@ -66333,7 +66343,7 @@
             function HiChip(props) {
               var _classNames;
 
-              var label = props.label,
+              var className = props.className,
                   classes = props.classes,
                   fallbackImage = props.fallbackImage,
                   icon = props.icon,
@@ -66341,6 +66351,7 @@
                   iconSize = _props$iconSize === void 0 ? 20 : _props$iconSize,
                   id = props.id,
                   img = props.img,
+                  label = props.label,
                   onPrevious = props.onPrevious,
                   onNext = props.onNext,
                   onDelete = props.onDelete,
@@ -66354,7 +66365,7 @@
                   titlePrevious = props.titlePrevious;
               return React__default.createElement("div", {
                 id: id,
-                className: classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.leftNavigation, onPrevious), defineProperty(_classNames, classes.rightNavigation, onNext), defineProperty(_classNames, classes.deletable, onDelete), defineProperty(_classNames, classes.leftIcon, icon), _classNames)),
+                className: classnames(classes.root, className, (_classNames = {}, defineProperty(_classNames, classes.leftNavigation, onPrevious), defineProperty(_classNames, classes.rightNavigation, onNext), defineProperty(_classNames, classes.deletable, onDelete), defineProperty(_classNames, classes.leftIcon, icon), _classNames)),
                 title: title$$1
               }, icon && React__default.createElement(HiIcon$1, {
                 className: classnames(classes.icon, defineProperty({}, classes.iconClickable, onIconClick)),
@@ -66423,6 +66434,11 @@
                */
               classes: propTypes.object,
 
+              /**
+               * Surcharge les classes du composant
+               */
+              className: propTypes.object,
+
               /**
                * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
                */
@@ -80415,6 +80431,9 @@
                   '&:hover, &:focus': {
                     backgroundColor: "".concat(theme.palette.action.hover, " !important")
                   }
+                },
+                clicableRow: {
+                  cursor: 'pointer'
                 }
               };
             };
@@ -80454,7 +80473,7 @@
                       locale = _this$props.locale,
                       rowdata = _this$props.rowdata;
                   return React__default.createElement(TableRow$4, {
-                    className: classes.row,
+                    className: classnames(classes.row, defineProperty({}, classes.clicableRow, this.props.onClick)),
                     hover: true,
                     onClick: function onClick(event) {
                       return _this2.handleClick(event, rowdata);
@@ -80471,10 +80490,10 @@
                       height: dense ? CELL_HEIGHT_DENSE : CELL_HEIGHT
                     },
                     tabIndex: 0
-                  }, Object.keys(columns).map(function (key) {
+                  }, Object.keys(columns).map(function (column) {
                     return React__default.createElement(HiCellBuilder, {
-                      key: columns[key].colId,
-                      column: columns[key],
+                      key: columns[column].colId,
+                      column: columns[column],
                       data: rowdata,
                       locale: locale
                     });
@@ -94066,14 +94085,15 @@
                   color = props.color,
                   active = props.active,
                   fontWeight = props.fontWeight,
+                  style = props.style,
                   theme = props.theme,
-                  other = objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+                  other = objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
 
               var isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
               var isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
               return React__default.createElement("div", _extends_1({
                 className: classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.color, !active), defineProperty(_classNames, classes.activeColor, active), defineProperty(_classNames, classes["activeColor".concat(capitalize(color))], active && isHiColor), defineProperty(_classNames, classes["color".concat(capitalize(color))], !active && isHiColor), _classNames), className),
-                style: _extends_1({}, isHexColor && {
+                style: _extends_1({}, style, isHexColor && {
                   backgroundColor: active ? color : fade(color, 0.08),
                   color: active ? theme.palette.getContrastText(color) : color
                 }, fontWeight && {
@@ -97966,6 +97986,8 @@
               name: 'HmuiHiLoader'
             })(HiLoader);
 
+            var PureListSubheader = pure(ListSubheader$2);
+            var PureListItem = pure(ListItem$2);
             var styles$p = function styles(theme) {
               return {
                 root: {
@@ -98088,8 +98110,8 @@
 
             var HiSelectableListItem =
             /*#__PURE__*/
-            function (_React$Component) {
-              inherits(HiSelectableListItem, _React$Component);
+            function (_React$PureComponent) {
+              inherits(HiSelectableListItem, _React$PureComponent);
 
               function HiSelectableListItem(props) {
                 var _this;
@@ -98175,6 +98197,7 @@
                       fallbackImage = _this$props2.fallbackImage,
                       hideCheckbox = _this$props2.hideCheckbox,
                       onSelect = _this$props2.onSelect,
+                      onKeyDown = _this$props2.onKeyDown,
                       indeterminate = _this$props2.indeterminate,
                       indeterminateIcon = _this$props2.indeterminateIcon,
                       icon = _this$props2.icon,
@@ -98207,7 +98230,7 @@
                     displayedIcon = icon;
                   }
 
-                  var ListItemComponentName = pinned ? ListSubheader$2 : ListItem$2;
+                  var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
                   return React__default.createElement(ListItemComponentName, _extends_1({
                     id: id,
                     tabIndex: disabled ? '-1' : 0,
@@ -98220,12 +98243,14 @@
                   }, disabled || {
                     onClick: onSelect,
                     onMouseEnter: this.setHover(true),
-                    onMouseLeave: this.setHover(false)
+                    onMouseLeave: this.setHover(false),
+                    onKeyDown: onKeyDown
                   }, {
                     style: {
                       paddingLeft: "".concat(paddingLeft + level * 32, "px")
                     }
                   }), !hideCheckbox && !pinned && React__default.createElement(HiCheckbox$1, {
+                    tabIndex: onKeyDown ? '-1' : 0,
                     checked: selected,
                     checkedIcon: checkedIcon,
                     classes: {
@@ -98262,7 +98287,7 @@
               }]);
 
               return HiSelectableListItem;
-            }(React__default.Component);
+            }(React__default.PureComponent);
 
             HiSelectableListItem.defaultProps = {
               centered: false,
@@ -98370,6 +98395,11 @@
                */
               onSelect: propTypes.func,
 
+              /**
+               * Fonction de callback à la sélection de l'élément
+               */
+              onKeyDown: propTypes.func,
+
               /**
                * Padding par défaut des éléments
                */