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

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+<a name="2.0.0-beta.41"></a>
+# [2.0.0-beta.41](https://gitlab.hipay.org/backend/hipay-material-ui/compare/0.0.1...2.0.0-beta.41) (2018-11-12)
+
+
+### Bug Fixes
+
+* **eslint:** remove eslint warrnings in components (ignore test files) ([d236c62](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d236c62))
+* **HiBreadcrumb:** clean eslint warnings ([6db12fb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6db12fb))
+* **HiDatePicker:** add static positions for custom overlays ([c3edf24](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c3edf24))
+* **HiExpansionPanel:** Fix props type a requirement ([cbc3b48](https://gitlab.hipay.org/backend/hipay-material-ui/commit/cbc3b48))
+* **HiInput:** handle focus state through prop when needed to override default comportment ([9a133cc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9a133cc))
+* **HiKpiNotice:** eslint clean warnings ([11b5552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/11b5552))
+* **HiSelect:** Fix build of HiSelectContent ([4b87f78](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4b87f78))
+* **HiSelect:** focus on undefined item ([2d084e6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2d084e6))
+* **HiSelect:** handle staticPosition & width properly for HiDateRangeSelector usage ([7b19ffb](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7b19ffb))
+* **HiSelectableListItem:** disabled item checkbox color ([9f10552](https://gitlab.hipay.org/backend/hipay-material-ui/commit/9f10552))
+* **HiSelectableListItem:** remove item width ([a913945](https://gitlab.hipay.org/backend/hipay-material-ui/commit/a913945))
+* **HiSelectContent:** Remove compute of input value ([b86db83](https://gitlab.hipay.org/backend/hipay-material-ui/commit/b86db83))
+* **HiSlider:** eslint clean warnings ([08964b1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/08964b1))
+* **HiUploadField:** clean eslint warnings ([c76aaf1](https://gitlab.hipay.org/backend/hipay-material-ui/commit/c76aaf1))
+* **migration:** fix contrast threshold ... ([6fb3b18](https://gitlab.hipay.org/backend/hipay-material-ui/commit/6fb3b18))
+* **package:** add cross-env ([7098fd6](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7098fd6))
+
+
+### Features
+
+* **CellImage:** Handle fallbackImage ([254799d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/254799d))
+* **CellSentinel:** Uniformize cell api with front CellSentinel ([4e2975b](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4e2975b))
+* **CellSentinel:** Update CellSentinel to the new way (split each result in different column) ([efe2711](https://gitlab.hipay.org/backend/hipay-material-ui/commit/efe2711))
+* **CellSentinelScore:** Add CellSentinelScore ([2fff04d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/2fff04d))
+* **CellText:** Handle active prop in CellText & column views in HiTable ([4366e60](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4366e60))
+* **HiCells:** Add simple cells types (Address, Date, Icon, Image, Numeric, PinToAction, Rate, Senti ([f688517](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f688517))
+* **HiIcon:** Add mdi-material-ui as available icons via 'mdi_' prefix ([1091d6d](https://gitlab.hipay.org/backend/hipay-material-ui/commit/1091d6d))
+* **HiMap:** unregister fetch on unmount ([0afa931](https://gitlab.hipay.org/backend/hipay-material-ui/commit/0afa931))
+* **HiSelect:** Add (NEW) HiSelect, HiNestedSelect, HiDynamicSelect ([4c6447e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/4c6447e))
+* **HiSelect:** Reset search input on blur & on close ([d9af584](https://gitlab.hipay.org/backend/hipay-material-ui/commit/d9af584))
+* **HiSelectableList:** Add sort props to sort item list on label ([f412ddc](https://gitlab.hipay.org/backend/hipay-material-ui/commit/f412ddc))
+* **HiSelectContent:** Add new HiSelectContent & HiNestedSelectContent ([215ad8f](https://gitlab.hipay.org/backend/hipay-material-ui/commit/215ad8f))
+* **HiSelectContent:** export utils functions ([7c41d87](https://gitlab.hipay.org/backend/hipay-material-ui/commit/7c41d87))
+* **HiUploadField:** rename component HiUploadField ([593f77e](https://gitlab.hipay.org/backend/hipay-material-ui/commit/593f77e))
+* **notice:** Création notice KPI ([bba3f89](https://gitlab.hipay.org/backend/hipay-material-ui/commit/bba3f89))
+
+
+### Performance Improvements
+
+* **PureFunction:** Use pure & functional components ([220c686](https://gitlab.hipay.org/backend/hipay-material-ui/commit/220c686))
+
+
+### BREAKING CHANGES
+
+* **HiUploadField:** Components names changes
+* **HiCells:** Remove CellCountry, CellThirdParty, CellStatus & CellAccount (use generic type
+CellImage & CellText)
+* **HiSelect:** HiSelect API change, use HiNestedSelect or HiDynamicSelect relative to situation
+
+
+
 <a name="2.0.0-beta.35"></a>
 # 2.0.0-beta.35 (2018-09-14)
 

package/HiBreadcrumb/HiBreadcrumb.js

@@ -47,7 +47,9 @@ function (_React$PureComponent) {
 
     _this.handleStep = function (idx) {
       return function () {
-        _this.props.handleStep(idx);
+        if (_this.props.disableNavigation === false) {
+          _this.props.handleStep(idx);
+        }
       };
     };
 
@@ -62,7 +64,8 @@ function (_React$PureComponent) {
       var _this$props = this.props,
           activeStep = _this$props.activeStep,
           steps = _this$props.steps,
-          type = _this$props.type;
+          type = _this$props.type,
+          disableNavigation = _this$props.disableNavigation;
       return _react.default.createElement(_HiStepper.default, {
         activeStep: activeStep,
         type: type
@@ -81,7 +84,8 @@ function (_React$PureComponent) {
           active: activeStep === index,
           status: step.status,
           notificationNumber: step.notificationNumber,
-          type: type
+          type: type,
+          disableNavigation: disableNavigation
         }, step.label));
       })));
     }
@@ -91,7 +95,8 @@ function (_React$PureComponent) {
 
 HiBreadcrumb.defaultProps = {
   activeStep: 0,
-  type: 'back'
+  type: 'back',
+  disableNavigation: false
 };
 HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
@@ -99,6 +104,11 @@ HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   activeStep: _propTypes.default.number,
 
+  /**
+   * Disable navigation in steps
+   */
+  disableNavigation: _propTypes.default.bool,
+
   /**
    * The callback function handling the flow from one step to another
    */

package/HiBreadcrumb/HiStep.js

@@ -37,6 +37,9 @@ var styles = function styles() {
   return {
     lastStep: {
       marginBottom: 40
+    },
+    step: {
+      outline: 'none'
     }
   };
 };
@@ -89,7 +92,7 @@ function (_React$PureComponent) {
       return _react.default.createElement("div", {
         role: "button",
         tabIndex: index,
-        className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.lastStep, isLast && type !== 'back')),
+        className: (0, _classnames.default)(classes.step, (0, _defineProperty2.default)({}, classes.lastStep, isLast && type !== 'back')),
         onClick: onClick,
         onKeyDown: onClick
       }, _react.default.Children.map(children, function (child) {

package/HiBreadcrumb/HiStepContent.js

@@ -39,7 +39,6 @@ var styles = function styles() {
     contentContainer: {
       height: 'fit-content',
       maxHeight: 300,
-      maxWidth: 323,
       marginTop: 35,
       marginLeft: 24,
       padding: 24,

package/HiBreadcrumb/HiStepLabel.js

@@ -59,11 +59,13 @@ var styles = function styles(theme) {
       marginLeft: 4,
       fontWeight: theme.typography.fontWeightRegular,
       color: theme.palette.neutral.main,
-      marginBottom: -4,
+      marginBottom: -4
+    }, theme.typography.b2),
+    labelHover: {
       '&:hover': {
         cursor: 'pointer'
       }
-    }, theme.typography.b2),
+    },
     labelContainer: {
       marginBottom: 4
     },
@@ -141,7 +143,8 @@ function (_React$PureComponent) {
           notificationNumber = _this$props.notificationNumber,
           status = _this$props.status,
           type = _this$props.type,
-          other = (0, _objectWithoutProperties2.default)(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type"]);
+          disableNavigation = _this$props.disableNavigation,
+          other = (0, _objectWithoutProperties2.default)(_this$props, ["active", "children", "classes", "className", "notificationNumber", "status", "type", "disableNavigation"]);
       return _react.default.createElement("span", (0, _extends2.default)({
         className: (0, _classnames.default)(classes.root, classNameProp, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.frontRoot, type === 'front-light'), (0, _defineProperty2.default)(_classNames, classes.frontDarkRoot, type === 'front-dark'), _classNames))
       }, other), _react.default.createElement("span", {
@@ -153,7 +156,7 @@ function (_React$PureComponent) {
       })), _react.default.createElement("span", {
         className: (0, _classnames.default)(classes.labelContainer, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.largeLabelContainer, type !== 'back'), (0, _defineProperty2.default)(_classNames2, classes.shortLabelContainer, type === 'back'), _classNames2))
       }, _react.default.createElement("div", {
-        className: (0, _classnames.default)(classes.label, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames3, classes.light, type === 'front-light'), (0, _defineProperty2.default)(_classNames3, classes.activeStep, active), (0, _defineProperty2.default)(_classNames3, classes.frontLabel, type !== 'back'), (0, _defineProperty2.default)(_classNames3, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty2.default)(_classNames3, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames3))
+        className: (0, _classnames.default)(classes.label, (_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.labelHover, disableNavigation === false), (0, _defineProperty2.default)(_classNames3, classes.validated, status === 'validated'), (0, _defineProperty2.default)(_classNames3, classes.refused, status === 'refused'), (0, _defineProperty2.default)(_classNames3, classes.warning, status === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.active, status === 'active'), (0, _defineProperty2.default)(_classNames3, classes.light, type === 'front-light'), (0, _defineProperty2.default)(_classNames3, classes.activeStep, active), (0, _defineProperty2.default)(_classNames3, classes.frontLabel, type !== 'back'), (0, _defineProperty2.default)(_classNames3, classes.shortEllipsis, notificationNumber > 0), (0, _defineProperty2.default)(_classNames3, classes.longEllipsis, notificationNumber === 0 && type === 'back'), _classNames3))
       }, children), notificationNumber > 0 && _react.default.createElement("span", {
         className: classes.pin
       }, _react.default.createElement(_HiPin.default, {
@@ -194,6 +197,11 @@ HiStepLabel.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   className: _propTypes.default.string,
 
+  /**
+   * Disable navigation in steps
+   */
+  disableNavigation: _propTypes.default.bool,
+
   /**
    * The value to be displayed in the HiPin on the right of the label
    */

package/HiBreadcrumb/HiStepper.js

@@ -28,7 +28,7 @@ var _styles = require("../styles");
 var styles = function styles() {
   return {
     root: {
-      width: 340
+      width: '100%'
     }
   };
 };

package/HiButton/HiButton.js

@@ -82,6 +82,12 @@ var styles = function styles(theme) {
     },
 
     /* Styles applied to the root element if `variant="[contained | fab]"` and `color="positive"`. */
+    containedPrimary: {
+      '&$disabled': {
+        color: theme.palette.neutral.contrastText,
+        backgroundColor: theme.palette.neutral.main
+      }
+    },
     containedPositive: {
       color: theme.palette.positive.contrastText,
       backgroundColor: theme.palette.positive.main,
@@ -199,7 +205,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.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));
+  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.containedPrimary, (contained || fab) && color === 'primary'), (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/HiCell/CellIcon.js

@@ -71,10 +71,10 @@ function (_React$PureComponent) {
         className: classes.wrapper,
         title: label
       }, icon && _react.default.createElement(_HiIcon.default, {
-        color: "inherit",
+        color: 'inherit',
         style: {
           color: color,
-          fontSize: size ? size : 24
+          fontSize: size || 24
         },
         className: classes.icon,
         icon: icon
@@ -115,12 +115,12 @@ CellIcon.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * View (L/M/S)
    */
-  view: _propTypes.default.oneOf(['l', 'm', 's']),
+  size: _propTypes.default.number,
 
   /**
    * Icon size
    */
-  size: _propTypes.default.number
+  view: _propTypes.default.oneOf(['l', 'm', 's'])
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiCell/CellImage.js

@@ -41,6 +41,18 @@ var styles = function styles() {
     }
   };
 };
+
+exports.styles = styles;
+
+var handleError = function handleError(fallbackImage) {
+  return function (e) {
+    if (fallbackImage) {
+      e.target.src = "".concat(fallbackImage);
+    } else {
+      e.target.style.display = 'none';
+    }
+  };
+};
 /**
  * Cette cellule permet d'afficher une image/logo (24px largeur) et un label (optionnel).
  * En vue large, aucun tooltip n'est affiché
@@ -48,8 +60,6 @@ var styles = function styles() {
  */
 
 
-exports.styles = styles;
-
 var CellImage =
 /*#__PURE__*/
 function (_React$PureComponent) {
@@ -69,7 +79,9 @@ function (_React$PureComponent) {
           label = _this$props.label,
           shortLabel = _this$props.shortLabel,
           view = _this$props.view,
-          size = _this$props.size;
+          size = _this$props.size,
+          fallbackImage = _this$props.fallbackImage,
+          title = _this$props.title;
       if (!path || path === '') return '';
       return _react.default.createElement("div", {
         className: classes.wrapper,
@@ -77,8 +89,10 @@ function (_React$PureComponent) {
       }, _react.default.createElement("img", {
         src: path,
         alt: label,
+        title: title,
         className: classes.img,
-        width: size
+        width: size,
+        onError: handleError(fallbackImage)
       }), shortLabel && view === 'm' && _react.default.createElement("span", {
         className: classes.label
       }, shortLabel), label && (view === 'l' || view === 'm' && !shortLabel) && _react.default.createElement("span", {
@@ -99,6 +113,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   classes: _propTypes.default.object,
 
+  /**
+   * Fallback image path
+   */
+  fallbackImage: _propTypes.default.string,
+
   /**
    * Label
    */
@@ -119,6 +138,11 @@ CellImage.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   size: _propTypes.default.number,
 
+  /**
+   * Title.
+   */
+  title: _propTypes.default.string,
+
   /**
    * View (L/M/S)
    */

package/HiCell/CellNumeric.js

@@ -28,8 +28,7 @@ var _helpers = require("../utils/helpers");
 var styles = function styles() {
   return {
     wrapper: {
-      textAlign: 'right',
-      direction: 'rtl'
+      textAlign: 'right'
     }
   };
 };

package/HiCell/CellRate.js

@@ -39,7 +39,8 @@ var styles = function styles(theme) {
       justifyContent: 'center',
       overflow: 'hidden',
       position: 'relative',
-      textAlign: 'right'
+      textAlign: 'right',
+      paddingTop: '1em'
     },
     trendChipIcon: {
       width: 14,
@@ -57,7 +58,6 @@ var styles = function styles(theme) {
       color: theme.palette.neutral.main
     },
     spanIndicator: {
-      fontSize: 11,
       float: 'right',
       color: '#737373',
       position: 'relative',
@@ -130,7 +130,10 @@ function (_React$PureComponent) {
       }, _react.default.createElement("div", {
         className: typeof indicator === 'undefined' && classes.rateDiv || ''
       }, displayedRate, trendIcon), typeof indicator !== 'undefined' && _react.default.createElement("span", {
-        className: classes.spanIndicator
+        className: classes.spanIndicator,
+        style: {
+          fontSize: view !== 'l' ? 10 : 11
+        }
       }, indicator));
     }
   }]);

package/HiCell/CellSentinel.js

@@ -60,21 +60,18 @@ function (_React$PureComponent) {
           outlined = _this$props.outlined,
           reviewer = _this$props.reviewer,
           value = _this$props.value;
-
-      var _label = label ? label : value;
-
-      var _letter = letter ? letter : _label[0];
-
+      var effectiveLabel = label || value;
+      var effectiveLetter = letter || effectiveLabel[0];
       return _react.default.createElement("div", {
         className: classes.flexContent,
-        title: reviewer ? "".concat(_label, "\n").concat(reviewer) : _label
+        title: reviewer ? "".concat(effectiveLabel, "\n").concat(reviewer) : effectiveLabel
       }, _react.default.createElement(_HiColoredLabel.default, {
         active: active,
         classes: {
           root: classes.label
         },
         color: color,
-        label: _letter,
+        label: effectiveLetter,
         outlined: outlined
       }));
     }
@@ -87,14 +84,14 @@ CellSentinel.defaultProps = {
   outlined: false
 };
 CellSentinel.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
   classes: _propTypes.default.object,
-  value: _propTypes.default.string,
   color: _propTypes.default.string,
   label: _propTypes.default.string,
   letter: _propTypes.default.string,
-  active: _propTypes.default.bool,
+  outlined: _propTypes.default.bool,
   reviewer: _propTypes.default.string,
-  outlined: _propTypes.default.bool
+  value: _propTypes.default.string
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiCell/CellSentinelScore.js

@@ -39,7 +39,6 @@ var sentinelColorById = {
   AUTHENTICATE: '#484A4B',
   FORCE_AUTHENTICATE: '#20272B',
   PENDING: '#3987AD',
-  TO_BE_REVIEWED: '#FF8F01',
   CHALLENGED: '#FF8F01',
   BLOCKED: '#D50000',
   ALLOWED: '#00AF01',
@@ -65,13 +64,14 @@ function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          active = _this$props.active,
           classes = _this$props.classes,
           result = _this$props.result,
           value = _this$props.value;
       return _react.default.createElement("div", {
         className: classes.flexContent
       }, _react.default.createElement(_HiColoredLabel.default, {
-        active: result === 'TO_BE_REVIEWED',
+        active: active,
         classes: {
           root: classes.label
         },
@@ -84,10 +84,10 @@ function (_React$PureComponent) {
 }(_react.default.PureComponent);
 
 CellSentinelScore.defaultProps = {
-  active: false,
-  outlined: false
+  active: false
 };
 CellSentinelScore.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
   classes: _propTypes.default.object,
   result: _propTypes.default.string,
   value: _propTypes.default.number

package/HiCell/CellTextStyled.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _HiColoredLabel = _interopRequireDefault(require("../HiColoredLabel"));
+
+var styleRoot = {
+  width: '100%',
+  height: 19,
+  margin: 'auto 0',
+  display: 'flex',
+  lineHeight: '15px'
+};
+var styleColorLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre'
+};
+var styleLabel = {
+  display: 'inline-block',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'pre',
+  width: '100%'
+};
+/**
+ * CellText functional component
+ * (don't includes complex ellipsis: middle, after-first-word...)
+ *
+ * @param label
+ * @param color
+ * @param value
+ * @param active
+ * @param title
+ * @returns {*}
+ * @constructor
+ */
+
+var CellTextStyled = function CellTextStyled(_ref) {
+  var label = _ref.label,
+      color = _ref.color,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
+  var valueString = label ? label.toString() : value.toString();
+  return _react.default.createElement("div", {
+    style: styleRoot,
+    title: title || valueString
+  }, color ? _react.default.createElement(_HiColoredLabel.default, {
+    style: styleColorLabel,
+    label: valueString,
+    color: color,
+    active: active
+  }) : _react.default.createElement("div", {
+    style: styleLabel
+  }, valueString));
+};
+
+CellTextStyled.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Will forward active prop to HiColoredLabel
+   */
+  active: _propTypes.default.bool,
+
+  /**
+   * Couleur du text & du background
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * Label
+   */
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+
+  /**
+   * Tooltip
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Value
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+} : {};
+var _default = CellTextStyled;
+exports.default = _default;

package/HiCell/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "CellText", {
     return _CellText.default;
   }
 });
+Object.defineProperty(exports, "CellTextStyled", {
+  enumerable: true,
+  get: function get() {
+    return _CellTextStyled.default;
+  }
+});
 
 var _CellAddress = _interopRequireDefault(require("./CellAddress"));
 
@@ -68,4 +74,6 @@ var _CellRate = _interopRequireDefault(require("./CellRate"));
 
 var _CellSentinel = _interopRequireDefault(require("./CellSentinel"));
 
-var _CellText = _interopRequireDefault(require("./CellText"));
+var _CellText = _interopRequireDefault(require("./CellText"));
+
+var _CellTextStyled = _interopRequireDefault(require("./CellTextStyled"));

package/HiChip/HiChip.js

@@ -82,6 +82,7 @@ var styles = function styles(theme) {
       textOverflow: 'ellipsis'
     },
     prefix: {
+      whiteSpace: 'nowrap',
       color: theme.palette.neutral.dark,
       paddingRight: 4
     },

package/HiDatePicker/Caption.js

@@ -15,19 +15,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
+var _HiButton = _interopRequireDefault(require("../HiButton"));
+
 var styles = function styles(theme) {
   return {
     caption: (0, _extends2.default)({
       display: 'table-caption',
       height: 40,
       textAlign: 'center',
-      padding: '10px 0'
+      padding: '4px 0'
     }, theme.typography.body1, {
       color: theme.palette.neutral.main
-    }),
-    clickableSpan: {
-      cursor: 'pointer'
-    }
+    })
   };
 };
 
@@ -42,11 +41,11 @@ var Caption = function Caption(_ref) {
   var months = localeUtils.getMonths();
   return _react.default.createElement("div", {
     className: classes.caption
-  }, _react.default.createElement("span", {
-    className: classes.clickableSpan,
+  }, _react.default.createElement(_HiButton.default, {
+    size: "small",
     onClick: onMonthClick
-  }, months[date.getMonth()]), "\xA0", _react.default.createElement("span", {
-    className: classes.clickableSpan,
+  }, months[date.getMonth()]), _react.default.createElement(_HiButton.default, {
+    size: "small",
     onClick: onYearClick
   }, date.getFullYear()));
 };