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

package/HiSelect/HiSuggestSelect.js

@@ -5,10 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 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);
@@ -45,10 +41,6 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _reactDom = require('react-dom');
 
 var _Grow = require('material-ui/transitions/Grow');
@@ -59,10 +51,6 @@ var _Paper = require('material-ui/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
 
-var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
-
-var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
-
 var _reactPopper = require('react-popper');
 
 var _HiSelectableList = require('../HiSelectableList');
@@ -86,7 +74,7 @@ var styles = exports.styles = function styles(theme) {
         root: {
             backgroundColor: theme.palette.background2,
             maxWidth: 500,
-            minWidth: 250,
+            minWidth: 200,
             width: '100%'
         },
         popper: {
@@ -95,9 +83,6 @@ var styles = exports.styles = function styles(theme) {
             zIndex: 9,
             top: '100%'
         },
-        popperClose: {
-            pointerEvents: 'none'
-        },
         paper: {
             borderRadius: '0px 2px',
             maxHeight: 440,
@@ -162,8 +147,8 @@ var HiSuggestSelect = function (_React$PureComponent) {
         };
 
         _this.handleSelect = _this.handleSelect.bind(_this);
-        _this.handleClose = _this.handleClose.bind(_this);
         _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
         return _this;
     }
 
@@ -172,29 +157,24 @@ var HiSuggestSelect = function (_React$PureComponent) {
         value: function componentWillReceiveProps(nextProps) {
             this.setState({ options: nextProps.options });
         }
-    }, {
-        key: 'handleClose',
-        value: function handleClose() {
-            document.body.style.overflow = 'auto';
-            this.setState({
-                focused: false, // TODO - Make difference between open and focus
-                options: []
-            });
-        }
 
         // Key down on list items
 
 
         // Key down on search input
 
+    }, {
+        key: 'handleFocus',
+        value: function handleFocus() {
+            this.setState({ focused: true });
+        }
     }, {
         key: 'handleBlur',
         value: function handleBlur(event) {
             // Si on click sur un élément de HiInput, on garde le focus
             // Par exemple sur l'icone reset
-            var overlay = this.overlay;
             if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-                this.setState({ options: [] });
+                this.setState({ options: [], focused: false });
             }
         }
     }, {
@@ -212,7 +192,8 @@ var HiSuggestSelect = function (_React$PureComponent) {
                 focused = _state.focused,
                 options = _state.options;
 
-            var open = !!options.length;
+            var open = !!options.length && focused;
+
             return _react2.default.createElement(
                 'div',
                 {
@@ -235,7 +216,8 @@ var HiSuggestSelect = function (_React$PureComponent) {
                             },
                             onChange: onSearch,
                             onKeyDown: this.handleKeyDownSearch,
-                            onBlur: this.handleBlur
+                            onBlur: this.handleBlur,
+                            onFocus: this.handleFocus
                         }))
                     ),
                     open && _react2.default.createElement(
@@ -243,26 +225,22 @@ var HiSuggestSelect = function (_React$PureComponent) {
                         {
                             placement: 'bottom-start',
                             eventsEnabled: open,
-                            className: (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open))
+                            className: classes.popper
                         },
                         _react2.default.createElement(
-                            _ClickAwayListener2.default,
-                            { onClickAway: this.handleClose },
+                            _Grow2.default,
+                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
                             _react2.default.createElement(
-                                _Grow2.default,
-                                { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
-                                _react2.default.createElement(
-                                    _Paper2.default,
-                                    { className: classes.paper },
-                                    _react2.default.createElement(_HiSelectableList2.default, {
-                                        itemList: options,
-                                        selectedIdList: [],
-                                        checkbox: false,
-                                        onSelect: this.handleSelect,
-                                        translations: translations,
-                                        onKeyDown: this.handleKeyDown
-                                    })
-                                )
+                                _Paper2.default,
+                                { className: classes.paper },
+                                _react2.default.createElement(_HiSelectableList2.default, {
+                                    itemList: options,
+                                    selectedIdList: [],
+                                    checkbox: false,
+                                    onSelect: this.handleSelect,
+                                    translations: translations,
+                                    onKeyDown: this.handleKeyDown
+                                })
                             )
                         )
                     )

package/HiSelect/HiSuggestSelectField.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 var _extends2 = require('babel-runtime/helpers/extends');
@@ -56,88 +56,96 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // @inheritedComponent HiSuggestSelect
 
 var HiSuggestSelectField = function (_React$PureComponent) {
-    (0, _inherits3.default)(HiSuggestSelectField, _React$PureComponent);
-
-    function HiSuggestSelectField() {
-        (0, _classCallCheck3.default)(this, HiSuggestSelectField);
-        return (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelectField)).apply(this, arguments));
+  (0, _inherits3.default)(HiSuggestSelectField, _React$PureComponent);
+
+  function HiSuggestSelectField() {
+    (0, _classCallCheck3.default)(this, HiSuggestSelectField);
+    return (0, _possibleConstructorReturn3.default)(this, (HiSuggestSelectField.__proto__ || (0, _getPrototypeOf2.default)(HiSuggestSelectField)).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(HiSuggestSelectField, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          label = _props.label,
+          required = _props.required,
+          disabled = _props.disabled,
+          error = _props.error,
+          errorText = _props.errorText,
+          helperText = _props.helperText,
+          helperIcon = _props.helperIcon,
+          id = _props.id,
+          className = _props.className,
+          others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'className']);
+
+
+      return _react2.default.createElement(
+        _HiFormControl2.default,
+        {
+          id: id,
+          label: label,
+          required: required,
+          disabled: disabled,
+          error: error,
+          errorText: errorText,
+          helperText: helperText,
+          helperIcon: helperIcon,
+          className: className
+        },
+        _react2.default.createElement(_HiSuggestSelect2.default, (0, _extends3.default)({
+          id: id,
+          translations: {
+            all: 'Tous les pays',
+            no_result_match: 'Aucun résultat correspondant',
+            search: 'Recherche',
+            n_items_selected: '%s pays sélectionnés',
+            one_item_selected: '%s pays sélectionné'
+          },
+          disabled: disabled,
+          error: error
+        }, others))
+      );
     }
-
-    (0, _createClass3.default)(HiSuggestSelectField, [{
-        key: 'render',
-        value: function render() {
-            var _props = this.props,
-                label = _props.label,
-                required = _props.required,
-                disabled = _props.disabled,
-                error = _props.error,
-                errorText = _props.errorText,
-                helperText = _props.helperText,
-                helperIcon = _props.helperIcon,
-                id = _props.id,
-                others = (0, _objectWithoutProperties3.default)(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
-
-
-            return _react2.default.createElement(
-                _HiFormControl2.default,
-                {
-                    id: id,
-                    label: label,
-                    required: required,
-                    disabled: disabled,
-                    error: error,
-                    errorText: errorText,
-                    helperText: helperText,
-                    helperIcon: helperIcon
-                },
-                _react2.default.createElement(_HiSuggestSelect2.default, (0, _extends3.default)({
-                    id: id,
-                    translations: {
-                        all: 'Tous les pays',
-                        no_result_match: 'Aucun résultat correspondant',
-                        search: 'Recherche',
-                        n_items_selected: '%s pays sélectionnés',
-                        one_item_selected: '%s pays sélectionné'
-                    }
-                }, others))
-            );
-        }
-    }]);
-    return HiSuggestSelectField;
+  }]);
+  return HiSuggestSelectField;
 }(_react2.default.PureComponent);
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Si `true`, l'input sera inactif.
-     */
-    disabled: _propTypes2.default.bool,
-    /**
-     * Si `true`, le champs sera en erreur.
-     */
-    error: _propTypes2.default.bool,
-    /**
-     * Texte de l'erreur
-     */
-    errorText: _propTypes2.default.string,
-    /**
-     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-     */
-    helperIcon: _propTypes2.default.bool,
-    /**
-     * Texte de l'aide
-     */
-    helperText: _propTypes2.default.string,
-    /**
-     * id de l'élément input
-     */
-    id: _propTypes2.default.string,
-    /**
-     * Label du champs
-     */
-    label: _propTypes2.default.string,
-    /**
-     * true si champs obligatoire
-     */
-    required: _propTypes2.default.bool
+  /**
+   * Surcharge des styles
+   */
+  className: _propTypes2.default.string,
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: _propTypes2.default.bool,
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: _propTypes2.default.bool,
+  /**
+   * Texte de l'erreur
+   */
+  errorText: _propTypes2.default.string,
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: _propTypes2.default.bool,
+  /**
+   * Texte de l'aide
+   */
+  helperText: _propTypes2.default.string,
+  /**
+   * id de l'élément input
+   */
+  id: _propTypes2.default.string,
+  /**
+   * Label du champs
+   */
+  label: _propTypes2.default.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: _propTypes2.default.bool
 } : {};
 exports.default = HiSuggestSelectField;

package/HiSelect/SelectInput.js

@@ -100,7 +100,7 @@ var styles = exports.styles = function styles(theme) {
         },
         inkbar: {
             '&:not($disabled)': {
-                '&:after': {
+                '&:not($error):after': {
                     backgroundColor: theme.palette.business.primary.normal,
                     left: 0,
                     bottom: 0,
@@ -206,7 +206,8 @@ var SelectInput = function (_React$PureComponent) {
                 open = _props.open,
                 focused = _props.focused,
                 error = _props.error,
-                id = _props.id;
+                id = _props.id,
+                refElement = _props.refElement;
 
             // On utilise classNames pour variabiliser les styles et merge les classes appliquées
 
@@ -227,7 +228,10 @@ var SelectInput = function (_React$PureComponent) {
                     onFocus: this.props.onFocus,
                     onBlur: this.props.onBlur,
                     role: 'button',
-                    tabIndex: '0'
+                    tabIndex: '0',
+                    ref: function ref(el) {
+                        refElement && refElement(el);
+                    }
                 },
                 _react2.default.createElement(
                     'span',
@@ -246,7 +250,10 @@ var SelectInput = function (_React$PureComponent) {
                     onMouseLeave: this.props.onMouseLeave,
                     onKeyDown: this.handleKeyDown,
                     onFocus: this.props.onFocus,
-                    onBlur: this.props.onBlur
+                    onBlur: this.props.onBlur,
+                    buttonRef: function buttonRef(el) {
+                        refElement && refElement(el);
+                    }
                 },
                 _react2.default.createElement(
                     'span',
@@ -283,6 +290,23 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * If `true`, the select will be disabled.
      */
     disabled: _propTypes2.default.bool,
+    /**
+     * Applique le style error
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Applique le style focused
+     */
+    focused: _propTypes2.default.bool,
+    /**
+     * id du select
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Affiche sous forme de div à la place d'un bouton.
+     * Si des éléments cliquables sont à l'intérieur.
+     */
+    noButton: _propTypes2.default.bool,
     /**
      * Fonction de callback au blur du bouton
      */
@@ -299,30 +323,17 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: _propTypes2.default.func,
-    /**
-     * Valeur à afficher (déjà formattée)
-     */
-    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]),
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
     open: _propTypes2.default.bool,
     /**
-     * Affiche sous forme de div à la place d'un bouton.
-     * Si des éléments cliquables sont à l'intérieur.
-     */
-    noButton: _propTypes2.default.bool,
-    /**
-     * Applique le style focused
-     */
-    focused: _propTypes2.default.bool,
-    /**
-     * Applique le style error
+     * Use that property to pass a ref callback to the native component.
      */
-    error: _propTypes2.default.bool,
+    refElement: _propTypes2.default.func,
     /**
-     * id du select
+     * Valeur à afficher (déjà formattée)
      */
-    id: _propTypes2.default.string
+    value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/HiSelectableList/HiSelectableListItem.js

@@ -117,6 +117,9 @@ var styles = exports.styles = function styles(theme) {
             marginLeft: theme.spacing.unit
         }),
         listItemInfoText: (0, _extends3.default)({
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
             color: theme.palette.neutral.normal
         }, theme.typography.body4, {
             fontWeight: theme.typography.fontWeightRegular,

package/HiTopBar/HiTopBar.js

@@ -209,7 +209,7 @@ var HiTopBar = function (_React$Component) {
             menuAnchor: null
         };
 
-        _this.toggleCollapse = _this.toggleCollapse.bind(_this);
+        _this.handleCollapse = _this.handleCollapse.bind(_this);
         _this.handleClickMenu = _this.handleClickMenu.bind(_this);
         _this.handleOpenMenu = _this.handleOpenMenu.bind(_this);
         _this.handleCloseMenu = _this.handleCloseMenu.bind(_this);
@@ -234,8 +234,8 @@ var HiTopBar = function (_React$Component) {
             callback();
         }
     }, {
-        key: 'toggleCollapse',
-        value: function toggleCollapse() {
+        key: 'handleCollapse',
+        value: function handleCollapse() {
             this.setState({ collapsed: !this.state.collapsed });
         }
     }, {
@@ -259,6 +259,7 @@ var HiTopBar = function (_React$Component) {
                 translations = _props.translations,
                 onClickMenu = _props.onClickMenu,
                 accountSelectorContent = _props.accountSelectorContent,
+                refButtons = _props.refButtons,
                 searchInput = _props.searchInput,
                 searchFocus = _props.searchFocus;
 
@@ -295,15 +296,16 @@ 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: function ref(div) {
-                                            return _this2.overlay = div;
-                                        } },
+                                    { ref: refButtons },
                                     searchFocus ? _react2.default.createElement(
                                         _HiButton2.default,
                                         {
@@ -359,7 +361,7 @@ var HiTopBar = function (_React$Component) {
                                 (hideable || hasSettings) && _react2.default.createElement(
                                     _IconButton2.default,
                                     { color: 'inherit', className: classes.iconButton },
-                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                    hideable && _react2.default.createElement(_mdiMaterialUi.ChevronDoubleUp, { onClick: this.handleCollapse }),
                                     hasSettings && _react2.default.createElement(_HiIconBuilder2.default, {
                                         onClick: this.props.onClickSettings,
                                         icon: 'fa-gear',
@@ -371,7 +373,7 @@ var HiTopBar = function (_React$Component) {
                         hideable && this.state.collapsed && _react2.default.createElement(
                             _IconButton2.default,
                             {
-                                onClick: this.toggleCollapse,
+                                onClick: this.handleCollapse,
                                 color: 'inherit',
                                 className: classes.showTopBarButton
                             },
@@ -387,9 +389,7 @@ var HiTopBar = function (_React$Component) {
                         { className: classes.toolbar },
                         _react2.default.createElement(
                             'div',
-                            { ref: function ref(div) {
-                                    return _this2.overlay = div;
-                                } },
+                            { ref: refButtons },
                             searchFocus ? _react2.default.createElement(
                                 _IconButton2.default,
                                 { className: classes.leftButtonMobile, color: 'inherit' },
@@ -533,6 +533,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * [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/es/HiDatePicker/HiDatePicker.js

@@ -52,21 +52,19 @@ class HiDatePicker extends React.Component {
     }
 
     handleDayChange(day, modifiers) {
-        if (this.props.onChange) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime && day !== undefined) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
-                    }
+        if (modifiers.selected) {
+            // Deselect day
+            this.props.onChange(undefined);
+        } else {
+            // Keep Time if set
+            if (this.props.enableTime && day !== undefined) {
+                if (this.props.value) {
+                    day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                } else {
+                    day.setHours(0, 0);
                 }
-                this.props.onChange(day);
             }
+            this.props.onChange(day);
         }
         if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
             // Hide overlay & remove focus on input
@@ -304,7 +302,7 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
      *
      * @param {Date} date sélectionnée
      */
-    onChange: PropTypes.func,
+    onChange: PropTypes.func.isRequired,
     /**
      * Callback au reset de l'input
      */

package/es/HiForm/HiFormControl.js

@@ -98,8 +98,11 @@ class HiFormControl extends React.PureComponent {
         this.handleHover = this.handleHover.bind(this);
     }
 
-    handleHelperClick() {
+    handleHelperClick(event) {
         this.setState(prevState => ({ helperOpen: !prevState.helperOpen }));
+        if (event) {
+            event.preventDefault();
+        }
     }
 
     handleFocus(value) {

package/es/HiForm/HiInput.js

@@ -67,7 +67,7 @@ export const styles = theme => ({
     rightIcon: {
         margin: '0 8px',
         width: 18,
-        height: 40,
+        height: 39,
         color: theme.palette.neutral.normal
     },
     rightIconFocus: {
@@ -90,10 +90,10 @@ export const styles = theme => ({
         padding: 0
     }),
     inputText: {
-        height: 40
+        height: 39
     },
     inputTextarea: {
-        minHeight: 40,
+        minHeight: 39,
         paddingTop: 8
     },
     iconPointer: {
@@ -101,7 +101,7 @@ export const styles = theme => ({
         cursor: 'pointer'
     },
     eraseButton: {
-        height: 40,
+        height: 39,
         width: 40,
         display: 'inline-block'
     },

package/es/HiForm/HiSearchField.js

@@ -73,7 +73,7 @@ class HiSearchField extends React.Component {
 
             this.props.callbackFilteredList(filteredList);
         } else {
-            this.props.onSearch(searchedValue);
+            this.props.onSearch(event, searchedValue);
         }
     }