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

package/HiCheckbox/HiCheckbox.js

@@ -74,8 +74,8 @@ exports.styles = styles;
 
 var HiCheckbox =
 /*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(HiCheckbox, _React$Component);
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiCheckbox, _React$PureComponent);
 
   function HiCheckbox(props) {
     var _this;
@@ -158,7 +158,7 @@ function (_React$Component) {
     }
   }]);
   return HiCheckbox;
-}(_react.default.Component);
+}(_react.default.PureComponent);
 
 HiCheckbox.defaultProps = {
   checked: false,

package/HiColoredLabel/HiColoredLabel.js

@@ -136,13 +136,14 @@ function HiColoredLabel(props) {
       color = props.color,
       active = props.active,
       fontWeight = props.fontWeight,
+      style = props.style,
       theme = props.theme,
-      other = (0, _objectWithoutProperties2.default)(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+      other = (0, _objectWithoutProperties2.default)(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", (0, _extends2.default)({
     className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.color, !active), (0, _defineProperty2.default)(_classNames, classes.activeColor, active), (0, _defineProperty2.default)(_classNames, classes["activeColor".concat((0, _helpers.capitalize)(color))], active && isHiColor), (0, _defineProperty2.default)(_classNames, classes["color".concat((0, _helpers.capitalize)(color))], !active && isHiColor), _classNames), className),
-    style: (0, _extends2.default)({}, isHexColor && {
+    style: (0, _extends2.default)({}, style, isHexColor && {
       backgroundColor: active ? color : (0, _colorManipulator.fade)(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, fontWeight && {

package/HiSelectNew/HiNestedSelectContent.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getRecursiveFinalItemIdList = getRecursiveFinalItemIdList;
 exports.findFinalItemRecursively = findFinalItemRecursively;
-exports.default = exports.styles = void 0;
+exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -17,12 +17,10 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -33,16 +31,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _HiSelectContent = _interopRequireDefault(require("./HiSelectContent"));
 
-var _HiIcon = _interopRequireDefault(require("../HiIcon"));
-
-var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
-
 var _helpers = require("../utils/helpers");
 
 // @inheritedComponent HiSelectContent
 
 /**
- * Return array of final item id in nested list (via props chlidren)
+ * Return array of final item id in nested list (via props children)
  * @param itemList
  * @param finalItemIdList
  * @returns {*[]}
@@ -156,50 +150,6 @@ function buildFilteredItemList(itemList) {
     v: visibleParent
   });
 }
-
-var styles = function styles(theme) {
-  return {
-    root: {
-      backgroundColor: theme.palette.background2,
-      maxWidth: 500,
-      width: '100%',
-      position: 'relative'
-    },
-    popper: {
-      // width: '100%',
-      zIndex: 1200
-    },
-    paper: {
-      borderRadius: '0px 2px',
-      maxHeight: 480,
-      transition: 'none !important'
-    },
-    labelImg: {
-      height: 18,
-      width: 'auto',
-      margin: '0 4px',
-      verticalAlign: 'middle'
-    },
-    selectIconLabel: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      paddingRight: 16
-    }, theme.typography.b1, {
-      display: 'inline-flex',
-      width: '100%'
-    }),
-    selectImgLabel: (0, _extends2.default)({
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      paddingRight: 16
-    }, theme.typography.b1, {
-      display: 'inline-flex',
-      width: '100%'
-    })
-  };
-};
 /**
  * HiNestedSelectContent hérite du composant HiSelectContent
  *
@@ -214,18 +164,23 @@ var styles = function styles(theme) {
  */
 
 
-exports.styles = styles;
-
 var HiNestedSelectContent =
 /*#__PURE__*/
 function (_React$PureComponent) {
   (0, _inherits2.default)(HiNestedSelectContent, _React$PureComponent);
 
-  function HiNestedSelectContent(props) {
+  function HiNestedSelectContent() {
+    var _getPrototypeOf2;
+
     var _this;
 
     (0, _classCallCheck2.default)(this, HiNestedSelectContent);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiNestedSelectContent).call(this, props));
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiNestedSelectContent)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.handleSelect = function (event, item) {
       var _this$props = _this.props,
@@ -329,20 +284,8 @@ function (_React$PureComponent) {
       };
     };
 
-    _this.handleSelect = _this.handleSelect.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     return _this;
   }
-  /**
-   * Call onChange with the updated value
-   *
-   * - handle single value
-   * - handle multiple value
-   * - handle '_all' id
-   *
-   * @param event
-   * @param item
-   */
-
 
   (0, _createClass2.default)(HiNestedSelectContent, [{
     key: "render",
@@ -463,10 +406,5 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array])
 } : {};
-
-var _default = (0, _withStyles.default)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiNestedSelectContent'
-})(HiNestedSelectContent);
-
+var _default = HiNestedSelectContent;
 exports.default = _default;

package/HiSelectableList/HiSelectableListItem.js

@@ -45,6 +45,11 @@ var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _helpers = require("../utils/helpers");
 
+var _pure = _interopRequireDefault(require("recompose/pure"));
+
+var PureListSubheader = (0, _pure.default)(_ListSubheader.default);
+var PureListItem = (0, _pure.default)(_ListItem.default);
+
 var styles = function styles(theme) {
   return {
     root: {
@@ -170,8 +175,8 @@ exports.styles = styles;
 
 var HiSelectableListItem =
 /*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(HiSelectableListItem, _React$Component);
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiSelectableListItem, _React$PureComponent);
 
   function HiSelectableListItem(props) {
     var _this;
@@ -288,7 +293,7 @@ function (_React$Component) {
         displayedIcon = icon;
       }
 
-      var ListItemComponentName = pinned ? _ListSubheader.default : _ListItem.default;
+      var ListItemComponentName = pinned ? PureListSubheader : PureListItem;
       return _react.default.createElement(ListItemComponentName, (0, _extends2.default)({
         id: id,
         tabIndex: disabled ? '-1' : 0,
@@ -342,7 +347,7 @@ function (_React$Component) {
     }
   }]);
   return HiSelectableListItem;
-}(_react.default.Component);
+}(_react.default.PureComponent);
 
 HiSelectableListItem.defaultProps = {
   centered: false,

package/HiTable/HiTableRow.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.styles = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -27,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
 
 var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));
@@ -48,6 +52,9 @@ var styles = function styles(theme) {
       '&:hover, &:focus': {
         backgroundColor: "".concat(theme.palette.action.hover, " !important")
       }
+    },
+    clicableRow: {
+      cursor: 'pointer'
     }
   };
 };
@@ -88,7 +95,7 @@ function (_React$PureComponent) {
           locale = _this$props.locale,
           rowdata = _this$props.rowdata;
       return _react.default.createElement(_TableRow.default, {
-        className: classes.row,
+        className: (0, _classnames.default)(classes.row, (0, _defineProperty2.default)({}, classes.clicableRow, this.props.onClick)),
         hover: true,
         onClick: function onClick(event) {
           return _this2.handleClick(event, rowdata);
@@ -105,10 +112,10 @@ function (_React$PureComponent) {
           height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
         },
         tabIndex: 0
-      }, Object.keys(columns).map(function (key) {
+      }, Object.keys(columns).map(function (column) {
         return _react.default.createElement(_HiCellBuilder.default, {
-          key: columns[key].colId,
-          column: columns[key],
+          key: columns[column].colId,
+          column: columns[column],
           data: rowdata,
           locale: locale
         });

package/es/HiCheckbox/HiCheckbox.js

@@ -38,7 +38,7 @@ export const styles = theme => ({
   }
 });
 
-class HiCheckbox extends React.Component {
+class HiCheckbox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -112,9 +112,10 @@ function HiColoredLabel(props) {
     color,
     active,
     fontWeight,
+    style,
     theme
   } = props,
-        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "theme"]);
+        other = _objectWithoutProperties(props, ["classes", "className", "label", "color", "active", "fontWeight", "style", "theme"]);
 
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
@@ -125,7 +126,7 @@ function HiColoredLabel(props) {
       [classes[`activeColor${capitalize(color)}`]]: active && isHiColor,
       [classes[`color${capitalize(color)}`]]: !active && isHiColor
     }, className),
-    style: _objectSpread({}, isHexColor && {
+    style: _objectSpread({}, style, isHexColor && {
       backgroundColor: active ? color : fade(color, 0.08),
       color: active ? theme.palette.getContrastText(color) : color
     }, fontWeight && {

package/es/HiSelectNew/HiNestedSelectContent.js

@@ -5,11 +5,9 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import HiSelectContent from './HiSelectContent';
-import HiIcon from '../HiIcon';
-import withStyles from '../styles/withStyles';
 import { foldAccents } from '../utils/helpers';
 /**
- * Return array of final item id in nested list (via props chlidren)
+ * Return array of final item id in nested list (via props children)
  * @param itemList
  * @param finalItemIdList
  * @returns {*[]}
@@ -116,48 +114,6 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
     v: visibleParent
   });
 }
-
-export const styles = theme => ({
-  root: {
-    backgroundColor: theme.palette.background2,
-    maxWidth: 500,
-    width: '100%',
-    position: 'relative'
-  },
-  popper: {
-    // width: '100%',
-    zIndex: 1200
-  },
-  paper: {
-    borderRadius: '0px 2px',
-    maxHeight: 480,
-    transition: 'none !important'
-  },
-  labelImg: {
-    height: 18,
-    width: 'auto',
-    margin: '0 4px',
-    verticalAlign: 'middle'
-  },
-  selectIconLabel: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 16
-  }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
-  }),
-  selectImgLabel: _objectSpread({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    paddingRight: 16
-  }, theme.typography.b1, {
-    display: 'inline-flex',
-    width: '100%'
-  })
-});
 /**
  * HiNestedSelectContent hérite du composant HiSelectContent
  *
@@ -171,9 +127,10 @@ export const styles = theme => ({
  * - si aucun enfant n'est sélectionné, le parent est affiché "unselected".
  */
 
+
 class HiNestedSelectContent extends React.PureComponent {
-  constructor(props) {
-    super(props);
+  constructor(...args) {
+    super(...args);
 
     this.handleSelect = (event, item) => {
       const {
@@ -267,20 +224,7 @@ class HiNestedSelectContent extends React.PureComponent {
         itemList
       };
     };
-
-    this.handleSelect = this.handleSelect.bind(this);
   }
-  /**
-   * Call onChange with the updated value
-   *
-   * - handle single value
-   * - handle multiple value
-   * - handle '_all' id
-   *
-   * @param event
-   * @param item
-   */
-
 
   render() {
     const _this$props = this.props,
@@ -400,7 +344,4 @@ HiNestedSelectContent.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
 } : {};
-export default withStyles(styles, {
-  hiComponent: true,
-  name: 'HmuiHiNestedSelectContent'
-})(HiNestedSelectContent);
+export default HiNestedSelectContent;

package/es/HiSelectableList/HiSelectableListItem.js

@@ -11,6 +11,9 @@ import HiColoredLabel from '../HiColoredLabel';
 import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
+import pure from 'recompose/pure';
+const PureListSubheader = pure(ListSubheader);
+const PureListItem = pure(ListItem);
 export const styles = theme => ({
   root: {
     paddingLeft: 4
@@ -129,7 +132,7 @@ export const styles = theme => ({
  * Construit un élément de liste sélectionnable (avec checkbox)
  */
 
-class HiSelectableListItem extends React.Component {
+class HiSelectableListItem extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -235,7 +238,7 @@ class HiSelectableListItem extends React.Component {
       displayedIcon = icon;
     }
 
-    const ListItemComponentName = pinned ? ListSubheader : ListItem;
+    const ListItemComponentName = pinned ? PureListSubheader : PureListItem;
     return React.createElement(ListItemComponentName, _extends({
       id: id,
       tabIndex: disabled ? '-1' : 0,

package/es/HiTable/HiTableRow.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import keycode from 'keycode';
+import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import TableRow from '@material-ui/core/TableRow';
 import HiCellBuilder from './HiCellBuilder';
@@ -17,6 +18,9 @@ export const styles = theme => ({
     '&:hover, &:focus': {
       backgroundColor: `${theme.palette.action.hover} !important`
     }
+  },
+  clicableRow: {
+    cursor: 'pointer'
   }
 });
 
@@ -42,7 +46,9 @@ class HiTableRow extends React.PureComponent {
       rowdata
     } = this.props;
     return React.createElement(TableRow, {
-      className: classes.row,
+      className: classNames(classes.row, {
+        [classes.clicableRow]: this.props.onClick
+      }),
       hover: true,
       onClick: event => this.handleClick(event, rowdata),
       onKeyDown: event => {
@@ -56,10 +62,10 @@ class HiTableRow extends React.PureComponent {
         height: dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT
       },
       tabIndex: 0
-    }, Object.keys(columns).map(key => {
+    }, Object.keys(columns).map(column => {
       return React.createElement(HiCellBuilder, {
-        key: columns[key].colId,
-        column: columns[key],
+        key: columns[column].colId,
+        column: columns[column],
         data: rowdata,
         locale: locale
       });

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,
     // 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
@@ -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.52
  *
  * 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.52
  *
  * 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.52",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

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,6 +182,11 @@ 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,
@@ -188,7 +195,7 @@ function createPalette(palette) {
       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
@@ -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