@hipay/hipay-material-ui 1.0.0-beta.28 → 1.0.0-beta.3

package/HiTable/HiTableHead.js

@@ -5,18 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SORTED_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -51,10 +43,6 @@ var _reactProptypeConditionalRequire = require('react-proptype-conditional-requi
 
 var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _Table = require('material-ui/Table');
 
 var _PlusCircle = require('mdi-material-ui/PlusCircle');
@@ -91,13 +79,11 @@ var styles = exports.styles = function styles(theme) {
     return {
         thead: {
             position: 'relative',
-            width: '100%',
+            display: 'block' /*seperates the header from the body allowing it to be positioned*/
+            , width: '100%',
             overflow: 'visible',
             zIndex: 12
         },
-        theadFixedWidth: {
-            display: 'block' /*seperates the header from the body allowing it to be positioned*/
-        },
         theadRow: {
             backgroundColor: theme.palette.background3,
             zIndex: 12
@@ -167,13 +153,13 @@ var HiTableHead = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableHead.__proto__ || (0, _getPrototypeOf2.default)(HiTableHead)).call(this));
 
-        _this.orderColumnsAnchorEl = null;
         _this.orderColumnsButton = null;
 
 
         _this.state = {
             hovered: false,
-            openedOrderColumns: false
+            openedOrderColumns: false,
+            orderColumnsAnchorEl: null
         };
 
         _this.handleEvent = _this.handleEvent.bind(_this);
@@ -183,11 +169,6 @@ var HiTableHead = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiTableHead, [{
-        key: 'shouldComponentUpdate',
-        value: function shouldComponentUpdate(nextProps, nextState) {
-            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
-        }
-    }, {
         key: 'handleEvent',
         value: function handleEvent(_ref) {
             var type = _ref.type;
@@ -205,9 +186,9 @@ var HiTableHead = function (_React$Component) {
         key: 'handleOpenOrderColumns',
         value: function handleOpenOrderColumns() {
             this.setState({
-                openedOrderColumns: true
+                openedOrderColumns: true,
+                orderColumnsAnchorEl: (0, _reactDom.findDOMNode)(this.orderColumnsButton)
             });
-            this.orderColumnsAnchorEl = (0, _reactDom.findDOMNode)(this.orderColumnsButton);
         }
     }, {
         key: 'handleCloseOrderColumns',
@@ -245,15 +226,15 @@ var HiTableHead = function (_React$Component) {
                 sticky = _props.sticky,
                 translations = _props.translations,
                 view = _props.view,
-                lookupColumns = _props.lookupColumns,
-                fixedColumnWidth = _props.fixedColumnWidth;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 hovered = _state.hovered,
-                openedOrderColumns = _state.openedOrderColumns;
+                openedOrderColumns = _state.openedOrderColumns,
+                orderColumnsAnchorEl = _state.orderColumnsAnchorEl;
 
 
             var headerProps = (0, _extends3.default)({
-                className: (0, _classnames2.default)(classes.thead, (0, _defineProperty3.default)({}, classes.theadFixedWidth, fixedColumnWidth))
+                className: classes.thead
             }, orderable && { onMouseEnter: this.handleEvent, onMouseLeave: this.handleEvent });
 
             var unfixedColumnIsSet = false,
@@ -300,8 +281,8 @@ var HiTableHead = function (_React$Component) {
                             return _react2.default.createElement(_HeaderCell2.default, {
                                 key: 'header-' + column.colId,
                                 colId: column.colId,
-                                type: column['formType'] || column['type'] // define select items
-                                , title: column['label'],
+                                type: column['type'],
+                                title: column['label'],
                                 smallTitle: column['reducedLabel'],
                                 selectable: firstColumn && selectable,
                                 selected: selectedIdList.length > 0 ? selectedIdList.length === dataSource.length ? true : 'mixed' : false,
@@ -320,9 +301,7 @@ var HiTableHead = function (_React$Component) {
                                 fixedWidth: fixed,
                                 align: column['align'],
                                 sticky: firstColumn && sticky,
-                                lookedUp: lookupColumns.includes(column.colId),
-                                fixedColumnWidth: fixedColumnWidth,
-                                translations: translations.headerCell
+                                lookedUp: lookupColumns.includes(column.colId)
                             });
                         }
                     }),
@@ -351,12 +330,12 @@ var HiTableHead = function (_React$Component) {
                         orderable && _react2.default.createElement(_OrderColumns2.default, {
                             isOpen: openedOrderColumns,
                             onClose: this.handleCloseOrderColumns,
-                            anchorEl: this.orderColumnsAnchorEl,
+                            anchorEl: orderColumnsAnchorEl,
                             updateOrderedColumns: onColumnsOrderUpdate,
                             columns: columns,
                             orderedColumns: orderedColumns,
                             mandatoryColumnId: mandatoryColumnId,
-                            translations: translations.orderColumns
+                            translations: translations
                         })
                     )
                 ),
@@ -400,7 +379,10 @@ HiTableHead.defaultProps = {
     dense: false,
     sticky: true,
     translations: {
-        get_the_n_new_items: 'Get the %s new items'
+        get_the_n_new_items: 'Get the %s new items',
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time'
     },
     view: 'l'
 };
@@ -429,11 +411,6 @@ HiTableHead.propTypes = process.env.NODE_ENV !== "production" ? {
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
-    /**
-     * Fixe la taille des colonnes selon le type de vue
-     * Sinon les colonnes s'adaptent à l'espace disponible
-     */
-    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */

package/HiTable/OrderColumns.js

@@ -141,8 +141,7 @@ var styles = exports.styles = function styles(theme) {
         controlLabelRoot: {
             marginLeft: 6,
             marginBottom: 8,
-            fontSize: 15,
-            width: 160
+            fontSize: 15
         },
         switchLabelRoot: {
             marginLeft: 15,
@@ -151,10 +150,7 @@ var styles = exports.styles = function styles(theme) {
         columnLabel: {
             position: 'relative',
             top: 5,
-            left: 5,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap'
+            left: 5
         },
         label: {
             fontWeight: 'inherit'

package/HiTable/constants.js

@@ -85,7 +85,7 @@ var FRAUD_RESULT_ASK_AUTHENTICATE = exports.FRAUD_RESULT_ASK_AUTHENTICATE = 'ASK
  * Cell default width for each views
  * @type {{}}
  */
-var DEFAULT_WIDTHS = exports.DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.LARGE, 160), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.LARGE, 220), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.MEDIUM, 140), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.LARGE, 140), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.SMALL, 60), _TYPE_ICON)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.LARGE, 140), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.MEDIUM, 90), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.LARGE, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.LARGE, 200), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
+var DEFAULT_WIDTHS = exports.DEFAULT_WIDTHS = (_DEFAULT_WIDTHS = {}, (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT, (_TYPE_ACCOUNT = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.LARGE, 160), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.MEDIUM, 120), (0, _defineProperty3.default)(_TYPE_ACCOUNT, VIEWS.SMALL, 80), _TYPE_ACCOUNT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ACCOUNT_NUMBER, (_TYPE_ACCOUNT_NUMBER = {}, (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_ACCOUNT_NUMBER, VIEWS.SMALL, 60), _TYPE_ACCOUNT_NUMBER)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ADDRESS, (_TYPE_ADDRESS = {}, (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ADDRESS, VIEWS.SMALL, 80), _TYPE_ADDRESS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_CHECKBOX, (_TYPE_CHECKBOX = {}, (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_CHECKBOX, VIEWS.SMALL, 40), _TYPE_CHECKBOX)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_COUNTRY, (_TYPE_COUNTRY = {}, (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_COUNTRY, VIEWS.SMALL, 40), _TYPE_COUNTRY)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_DATE, (_TYPE_DATE = {}, (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.LARGE, 220), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.MEDIUM, 140), (0, _defineProperty3.default)(_TYPE_DATE, VIEWS.SMALL, 120), _TYPE_DATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_ICON, (_TYPE_ICON = {}, (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_ICON, VIEWS.SMALL, 40), _TYPE_ICON)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_IMAGE, (_TYPE_IMAGE = {}, (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_IMAGE, VIEWS.SMALL, 60), _TYPE_IMAGE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_NUMERIC, (_TYPE_NUMERIC = {}, (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_NUMERIC, VIEWS.SMALL, 80), _TYPE_NUMERIC)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_RATE, (_TYPE_RATE = {}, (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.LARGE, 100), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.MEDIUM, 90), (0, _defineProperty3.default)(_TYPE_RATE, VIEWS.SMALL, 80), _TYPE_RATE)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_SENTINEL, (_TYPE_SENTINEL = {}, (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.LARGE, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.MEDIUM, 80), (0, _defineProperty3.default)(_TYPE_SENTINEL, VIEWS.SMALL, 80), _TYPE_SENTINEL)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_STATUS, (_TYPE_STATUS = {}, (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_STATUS, VIEWS.SMALL, 80), _TYPE_STATUS)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_TEXT, (_TYPE_TEXT = {}, (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.LARGE, 120), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.MEDIUM, 100), (0, _defineProperty3.default)(_TYPE_TEXT, VIEWS.SMALL, 80), _TYPE_TEXT)), (0, _defineProperty3.default)(_DEFAULT_WIDTHS, TYPE_THIRD_PARTY_SECURITY, (_TYPE_THIRD_PARTY_SEC = {}, (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.LARGE, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.MEDIUM, 40), (0, _defineProperty3.default)(_TYPE_THIRD_PARTY_SEC, VIEWS.SMALL, 40), _TYPE_THIRD_PARTY_SEC)), _DEFAULT_WIDTHS);
 /**
  * Cell default width for each views
  * @type {{}}
@@ -96,7 +96,7 @@ var DEFAULT_VIEWS = exports.DEFAULT_VIEWS = (_DEFAULT_VIEWS = {}, (0, _definePro
  * Cell default side padding (one side) for each views
  * @type {{}}
  */
-var DEFAULT_PADDING = exports.DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.LARGE, 8), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.MEDIUM, 8), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.SMALL, 8), _DEFAULT_PADDING);
+var DEFAULT_PADDING = exports.DEFAULT_PADDING = (_DEFAULT_PADDING = {}, (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.LARGE, 12), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.MEDIUM, 10), (0, _defineProperty3.default)(_DEFAULT_PADDING, VIEWS.SMALL, 8), _DEFAULT_PADDING);
 
 /**
  * Cell types which are align right by default

package/HiTopBar/HiTopBar.js

@@ -154,8 +154,9 @@ var styles = exports.styles = function styles(theme) {
             color: theme.palette.text.secondary,
             minWidth: 32
         },
-        betaWithoutAccountSelector: {
-            marginLeft: 1.5 * theme.spacing.unit
+        beta: {
+            minWidth: 64,
+            maxWidth: 80
         },
         searchInput: {
             backgroundColor: theme.palette.background1 + ' !important'
@@ -187,7 +188,7 @@ var _ref = _react2.default.createElement(_HiIconBuilder2.default, { icon: 'fa-be
 
 var _ref2 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
-var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDown, null);
+var _ref3 = _react2.default.createElement(_mdiMaterialUi.ChevronDoubleDown, null);
 
 var _ref4 = _react2.default.createElement(_mdiMaterialUi.ArrowLeft, null);
 
@@ -208,7 +209,7 @@ var HiTopBar = function (_React$Component) {
             menuAnchor: null
         };
 
-        _this.handleCollapse = _this.handleCollapse.bind(_this);
+        _this.toggleCollapse = _this.toggleCollapse.bind(_this);
         _this.handleClickMenu = _this.handleClickMenu.bind(_this);
         _this.handleOpenMenu = _this.handleOpenMenu.bind(_this);
         _this.handleCloseMenu = _this.handleCloseMenu.bind(_this);
@@ -233,11 +234,8 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'handleCollapse',
-        value: function handleCollapse() {
-            if (this.props.onCollapse) {
-                this.props.onCollapse(!this.state.collapsed);
-            }
+        key: 'toggleCollapse',
+        value: function toggleCollapse() {
             this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
@@ -245,12 +243,6 @@ var HiTopBar = function (_React$Component) {
         value: function handleClickMenu() {
             this.props.onClickReturn();
         }
-
-        //TODO : Cyclic reference passed.
-        /*shouldComponentUpdate(nextProps, nextState){
-          return JSON.stringify(this.props) !== JSON.stringify(nextProps);
-        }*/
-
     }, {
         key: 'render',
         value: function render() {
@@ -267,7 +259,6 @@ var HiTopBar = function (_React$Component) {
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
                 accountSelectorContent = _props.accountSelectorContent,
-                refButtons = _props.refButtons,
                 searchInput = _props.searchInput,
                 searchFocus = _props.searchFocus;
 
@@ -294,8 +285,7 @@ var HiTopBar = function (_React$Component) {
                 _AppBar2.default,
                 {
                     classes: { root: classes.root, colorPrimary: colorPrimaryClass },
-                    position: this.props.position,
-                    id: 'top-bar'
+                    position: this.props.position
                 },
                 _react2.default.createElement(
                     _Hidden2.default,
@@ -305,16 +295,15 @@ var HiTopBar = function (_React$Component) {
                         null,
                         _react2.default.createElement(
                             _Collapse2.default,
-                            {
-                                'in': !this.state.collapsed,
-                                className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable))
-                            },
+                            { 'in': !this.state.collapsed, className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.collapseOverflow, !hideable)) },
                             _react2.default.createElement(
                                 _Toolbar2.default,
                                 { className: classes.toolbar },
                                 _react2.default.createElement(
                                     'div',
-                                    { ref: refButtons, id: 'menu-button-container' },
+                                    { ref: function ref(div) {
+                                            return _this2.overlay = div;
+                                        } },
                                     searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
@@ -345,7 +334,7 @@ var HiTopBar = function (_React$Component) {
                                 ),
                                 _react2.default.createElement(
                                     'div',
-                                    { id: 'quick-search-input', className: classes.flex },
+                                    { className: classes.flex },
                                     searchInput
                                 ),
                                 notificationButton,
@@ -357,13 +346,12 @@ var HiTopBar = function (_React$Component) {
                                         classes: {
                                             label: classes.accountSelectorButtonLabel
                                         },
-                                        onClick: this.props.onClickAccountSelector,
-                                        id: 'account-selector-button'
+                                        onClick: this.props.onClickAccountSelector
                                     },
                                     accountSelectorContent
                                 ),
                                 beta && _react2.default.createElement(_HiColoredLabel2.default, {
-                                    className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.betaWithoutAccountSelector, !hasAccountSelector)),
+                                    className: classes.beta,
                                     label: 'BETA',
                                     beta: true,
                                     color: theme.palette.neutral.dark
@@ -371,7 +359,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronUp, { onClick: this.handleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -383,7 +371,7 @@ var HiTopBar = function (_React$Component) {
                         hideable && this.state.collapsed && _react2.default.createElement(
                             _IconButton2.default,
                             {
-                                onClick: this.handleCollapse,
+                                onClick: this.toggleCollapse,
                                 color: 'inherit',
                                 className: classes.showTopBarButton
                             },
@@ -399,7 +387,9 @@ var HiTopBar = function (_React$Component) {
                         { className: classes.toolbar },
                         _react2.default.createElement(
                             'div',
-                            { ref: refButtons },
+                            { ref: function ref(div) {
+                                    return _this2.overlay = div;
+                                } },
                             searchFocus ? _react2.default.createElement(
                                 _IconButton2.default,
                                 { className: classes.leftButtonMobile, color: 'inherit' },
@@ -507,7 +497,7 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     hasSettings: _propTypes2.default.bool,
     /**
-     * La TopBar peut être cachée vie le bouton chevron
+     * La TopBar peut être cachée vie le bouton double chevron
      */
     hideable: _propTypes2.default.bool,
     /**
@@ -518,6 +508,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur l'accountSelector'
      */
     onClickAccountSelector: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur le menu
+     */
+    onClickInputButton: _propTypes2.default.func.isRequired,
     /**
      * Fonction de callback au click sur le menu
      */
@@ -534,19 +528,11 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au click sur le bouton "Settings" du menu
      */
     onClickSettings: _propTypes2.default.func,
-    /**
-     * Fonction de callback au click sur le bouton chevron
-     */
-    onCollapse: _propTypes2.default.func,
     /**
      * Positionement de la topBar. The behavior of the different options is described
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
     position: _propTypes2.default.oneOf(['fixed', 'absolute', 'sticky', 'static']),
-    /**
-     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
-     */
-    refButtons: _propTypes2.default.func,
     /**
      * Etat de focus.
      */

package/README.md

@@ -5,14 +5,12 @@ Voici la documentation du site HiPay Material-UI.
 Avant de commencer, il faut vous familiariser avec REACT :
 - https://reactjs.org/
 - https://reactjs.org/docs/optimizing-performance.html
-
 Et connaitres les [best practices](#best-practices)
 
 
 ## Lancer le projet
 
 #### Via docker
-
 Il faut que sur votre poste soit installés
 - [Docker](https://www.docker.com/community-edition) (minimum version 17)
 - [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
@@ -29,7 +27,6 @@ Le site est dispo à cette URL:
 [http://localhost:3222](http://localhost:3222)
 
 #### En local
-
 Il faut que sur votre poste soit installés
 - [node](https://nodejs.org/fr/) (minimum version LTS 8.9.4)
 - [npm](https://www.npmjs.com/) (minimum version 5.6.0)
@@ -118,50 +115,10 @@ git flow feature start PSYCHE-XXX
 - Les [tests unitaires](#tests) doivent passer
 - La [génération des apis](#generation-des-apis) aussi
 - Le code doit être bien formatter : [ESLint - Prettier](#esLint-prettier)
-- Commit - suivant les conventions de rédaction des messages de commit
-- Push
+- commit + push
 - Faire la demande de merge request sur la develop
 - La revue se fera par un membre de l'équipe PSYCHE
 
-##### Conventional Changelog
-
-(optionel) installer [commitizen](https://github.com/commitizen/cz-cli) pour s'assurer de commiter selon la convention
-```sh
-npm install commitizen -g
-```
-
-
-Voici un squelette d’exemple de message de commit conventionnel :
-```
-<type de tâche>(<périmètre>): message court
-
-Description complémentaire/complète
-
-Référence/action sur un ticket définissant cette tâche
- ```
-
- On facilite ainsi la lecture du log d’une part, la génération automatique du changelog (ou release notes) d’autre part
-
-Types de tâche:
-- <b>fix</b>  : commit d'une correction de bug. Se traduit en <b>PATCH</b> dans le changelog
-- <b>feat</b> : commit d'une nouvelle feature. Se traduit en <b>MINOR</b> dans le changelog
-- <b>test</b> : commit d'un ajout ou d'une maj de tests
-- <b>docs</b> : commit d'un ajout ou d'une maj de la documentation OU de l'app de démonstration
-- <b>perf</b> : commit concernant l'amélioration des performances
-
-<b>BREAKING CHANGE</b> : si un commit introduit un BREAKING CHANGE, on doit ajouter le tag BREAKING CHANGE dans le corps du commit. Ce commit peut être de n'importe quel type mais il est préférable qu'il soit lié à une feature. Se traduit en <b>MAJOR</b> dans le changelog
-
-Périmètre (optionel): nom du composant, type de tests, page de la doc
-
- Exemple:
- ```
- feat(HiTable): add children rows management
-
-Handle children rows as subtable based on the same columns as parents.
-
-PSYCHE-XX
- ```
-
 ## Génération des apis
 ```sh
 npm run docs:api
@@ -221,18 +178,12 @@ Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hi
 
 #### Publier une nouvelle version
 
-Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
+1. Changer la version dans package.json
+2. Build
 ```sh
-npm install -g conventional-changelog-cli
-npm install -g cz-conventional-changelog
+npm run build
 ```
-
-1. Changer la version dans package.json
-2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
-3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
-4. Build : ```npm run build```
-5. Publish :
-
+3. Publish
 ```sh
 cd build
 npm login
@@ -241,24 +192,7 @@ npm login
 npm publish
 ```
 
-#### [Semantic Versioning](https://semver.org/)
-
-Une version MAJOR.MINOR.PATCH, correspond a:
-
-- MAJOR version introduisant des évolutions non retro-compatibles (API changes...),
-- MINOR version introduisant des évolutions retro-compatibles, la sortie des versions mineures est basé sur les sprints de la tribu PSYCHE
-- PATCH version corrigeant des bugs
-Des tags additionels peuvent être ajouter selon le contexte (ex: 1.0.0-beta.24).
-
-En production, chaque releases (MAJOR, MINOR & PATCH) doit faire l'objet d'une communication interne aux tribus utilisatrices.
-
-Les projets peuvent se baser sur une version MINOR: ```^2.5.0```, ce qui signifient "compatible avec la version 2.5.0".
-
-Ainsi les PATCH seront automatiquement pris en compte.
-L'intégration d'une MINOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md).
-Le passage à une autre MAJOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md BREAKING CHANGE).
-
-# Si ERR d'authentification
+# Si ERR d'authenitifcation
 npm adduser
 admin
 admin123

package/es/HiCheckbox/HiCheckbox.js

@@ -17,20 +17,17 @@ export const styles = theme => ({
         marginLeft: 12
     },
     checked: {
-        color: theme.palette.business.primary.normal,
-        '&$disabled': {
-            color: '#999999'
-        }
+        color: theme.palette.business.primary.normal
     },
     disabled: {
-        color: theme.palette.placeholder
+        color: theme.palette.action.disabled
     }
 });
 
 class HiCheckbox extends React.Component {
 
     constructor(props) {
-        super(props);
+        super();
 
         this.handleChange = this.handleChange.bind(this);
     }