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

package/es/HiSelect/HiSuggestSelect.js

@@ -4,17 +4,12 @@ import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutPropert
 
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Grow from 'material-ui/transitions/Grow';
 import Paper from 'material-ui/Paper';
-import ClickAwayListener from 'material-ui/utils/ClickAwayListener';
 import { Manager, Target, Popper } from 'react-popper';
-
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
-
 import { withStyles } from '../styles';
 import { getNextItemSelectable } from '../utils/hiHelpers';
 
@@ -22,7 +17,7 @@ export const styles = theme => ({
     root: {
         backgroundColor: theme.palette.background2,
         maxWidth: 500,
-        minWidth: 250,
+        minWidth: 200,
         width: '100%'
     },
     popper: {
@@ -31,9 +26,6 @@ export const styles = theme => ({
         zIndex: 9,
         top: '100%'
     },
-    popperClose: {
-        pointerEvents: 'none'
-    },
     paper: {
         borderRadius: '0px 2px',
         maxHeight: 440,
@@ -94,34 +86,29 @@ class HiSuggestSelect extends 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);
     }
 
     componentWillReceiveProps(nextProps) {
         this.setState({ options: nextProps.options });
     }
 
-    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
 
 
+    handleFocus() {
+        this.setState({ focused: true });
+    }
+
     handleBlur(event) {
         // Si on click sur un élément de HiInput, on garde le focus
         // Par exemple sur l'icone reset
-        const overlay = this.overlay;
         if (!event.relatedTarget || !this.overlay || !this.overlay.contains(event.relatedTarget)) {
-            this.setState({ options: [] });
+            this.setState({ options: [], focused: false });
         }
     }
 
@@ -131,7 +118,8 @@ class HiSuggestSelect extends React.PureComponent {
               otherProps = _objectWithoutProperties(_props, ['classes', 'translations', 'id', 'onSearch']);
 
         const { focused, options } = this.state;
-        const open = !!options.length;
+        const open = !!options.length && focused;
+
         return React.createElement(
             'div',
             {
@@ -154,7 +142,8 @@ class HiSuggestSelect extends React.PureComponent {
                         },
                         onChange: onSearch,
                         onKeyDown: this.handleKeyDownSearch,
-                        onBlur: this.handleBlur
+                        onBlur: this.handleBlur,
+                        onFocus: this.handleFocus
                     }))
                 ),
                 open && React.createElement(
@@ -162,26 +151,22 @@ class HiSuggestSelect extends React.PureComponent {
                     {
                         placement: 'bottom-start',
                         eventsEnabled: open,
-                        className: classNames(classes.popper, { [classes.popperClose]: !open })
+                        className: classes.popper
                     },
                     React.createElement(
-                        ClickAwayListener,
-                        { onClickAway: this.handleClose },
+                        Grow,
+                        { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
                         React.createElement(
-                            Grow,
-                            { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
-                            React.createElement(
-                                Paper,
-                                { className: classes.paper },
-                                React.createElement(HiSelectableList, {
-                                    itemList: options,
-                                    selectedIdList: [],
-                                    checkbox: false,
-                                    onSelect: this.handleSelect,
-                                    translations: translations,
-                                    onKeyDown: this.handleKeyDown
-                                })
-                            )
+                            Paper,
+                            { className: classes.paper },
+                            React.createElement(HiSelectableList, {
+                                itemList: options,
+                                selectedIdList: [],
+                                checkbox: false,
+                                onSelect: this.handleSelect,
+                                translations: translations,
+                                onKeyDown: this.handleKeyDown
+                            })
                         )
                     )
                 )

package/es/HiSelect/HiSuggestSelectField.js

@@ -12,78 +12,86 @@ import HiSuggestSelect from './HiSuggestSelect';
  */
 class HiSuggestSelectField extends React.PureComponent {
 
-    render() {
-        const _props = this.props,
-              {
-            label,
-            required,
-            disabled,
-            error,
-            errorText,
-            helperText,
-            helperIcon,
-            id
-        } = _props,
-              others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id']);
+  render() {
+    const _props = this.props,
+          {
+      label,
+      required,
+      disabled,
+      error,
+      errorText,
+      helperText,
+      helperIcon,
+      id,
+      className
+    } = _props,
+          others = _objectWithoutProperties(_props, ['label', 'required', 'disabled', 'error', 'errorText', 'helperText', 'helperIcon', 'id', 'className']);
 
-        return React.createElement(
-            HiFormControl,
-            {
-                id: id,
-                label: label,
-                required: required,
-                disabled: disabled,
-                error: error,
-                errorText: errorText,
-                helperText: helperText,
-                helperIcon: helperIcon
-            },
-            React.createElement(HiSuggestSelect, _extends({
-                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 React.createElement(
+      HiFormControl,
+      {
+        id: id,
+        label: label,
+        required: required,
+        disabled: disabled,
+        error: error,
+        errorText: errorText,
+        helperText: helperText,
+        helperIcon: helperIcon,
+        className: className
+      },
+      React.createElement(HiSuggestSelect, _extends({
+        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))
+    );
+  }
 }
 
 HiSuggestSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
-    /**
-     * Si `true`, l'input sera inactif.
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Si `true`, le champs sera en erreur.
-     */
-    error: PropTypes.bool,
-    /**
-     * Texte de l'erreur
-     */
-    errorText: PropTypes.string,
-    /**
-     * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
-     */
-    helperIcon: PropTypes.bool,
-    /**
-     * Texte de l'aide
-     */
-    helperText: PropTypes.string,
-    /**
-     * id de l'élément input
-     */
-    id: PropTypes.string,
-    /**
-     * Label du champs
-     */
-    label: PropTypes.string,
-    /**
-     * true si champs obligatoire
-     */
-    required: PropTypes.bool
+  /**
+   * Surcharge des styles
+   */
+  className: PropTypes.string,
+  /**
+   * Si `true`, l'input sera inactif.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Si `true`, le champs sera en erreur.
+   */
+  error: PropTypes.bool,
+  /**
+   * Texte de l'erreur
+   */
+  errorText: PropTypes.string,
+  /**
+   * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
+   */
+  helperIcon: PropTypes.bool,
+  /**
+   * Texte de l'aide
+   */
+  helperText: PropTypes.string,
+  /**
+   * id de l'élément input
+   */
+  id: PropTypes.string,
+  /**
+   * Label du champs
+   */
+  label: PropTypes.string,
+  /**
+   * true si champs obligatoire
+   */
+  required: PropTypes.bool
 } : {};
 export default HiSuggestSelectField;

package/es/HiSelect/SelectInput.js

@@ -47,7 +47,7 @@ export const styles = theme => ({
     },
     inkbar: {
         '&:not($disabled)': {
-            '&:after': {
+            '&:not($error):after': {
                 backgroundColor: theme.palette.business.primary.normal,
                 left: 0,
                 bottom: 0,
@@ -135,7 +135,18 @@ class SelectInput extends React.PureComponent {
     }
 
     render() {
-        const { classes, noButton, disabled, onClick, value, open, focused, error, id } = this.props;
+        const {
+            classes,
+            noButton,
+            disabled,
+            onClick,
+            value,
+            open,
+            focused,
+            error,
+            id,
+            refElement
+        } = this.props;
 
         // On utilise classNames pour variabiliser les styles et merge les classes appliquées
         const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -162,7 +173,10 @@ class SelectInput extends React.PureComponent {
                 onFocus: this.props.onFocus,
                 onBlur: this.props.onBlur,
                 role: 'button',
-                tabIndex: '0'
+                tabIndex: '0',
+                ref: el => {
+                    refElement && refElement(el);
+                }
             },
             React.createElement(
                 'span',
@@ -181,7 +195,10 @@ class SelectInput extends React.PureComponent {
                 onMouseLeave: this.props.onMouseLeave,
                 onKeyDown: this.handleKeyDown,
                 onFocus: this.props.onFocus,
-                onBlur: this.props.onBlur
+                onBlur: this.props.onBlur,
+                buttonRef: el => {
+                    refElement && refElement(el);
+                }
             },
             React.createElement(
                 'span',
@@ -216,6 +233,23 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * If `true`, the select will be disabled.
      */
     disabled: PropTypes.bool,
+    /**
+     * Applique le style error
+     */
+    error: PropTypes.bool,
+    /**
+     * Applique le style focused
+     */
+    focused: PropTypes.bool,
+    /**
+     * id du select
+     */
+    id: PropTypes.string,
+    /**
+     * Affiche sous forme de div à la place d'un bouton.
+     * Si des éléments cliquables sont à l'intérieur.
+     */
+    noButton: PropTypes.bool,
     /**
      * Fonction de callback au blur du bouton
      */
@@ -232,30 +266,17 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback à la pression de touche
      */
     onKeyDown: PropTypes.func,
-    /**
-     * Valeur à afficher (déjà formattée)
-     */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
     /**
      * Applique le style open et effectue une rotation de l'icône
      */
     open: PropTypes.bool,
     /**
-     * Affiche sous forme de div à la place d'un bouton.
-     * Si des éléments cliquables sont à l'intérieur.
-     */
-    noButton: PropTypes.bool,
-    /**
-     * Applique le style focused
-     */
-    focused: PropTypes.bool,
-    /**
-     * Applique le style error
+     * Use that property to pass a ref callback to the native component.
      */
-    error: PropTypes.bool,
+    refElement: PropTypes.func,
     /**
-     * id du select
+     * Valeur à afficher (déjà formattée)
      */
-    id: PropTypes.string
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node])
 } : {};
 export default withStyles(styles, { name: 'HmuiSelectInput' })(SelectInput);

package/es/HiSelectableList/HiSelectableListItem.js

@@ -55,6 +55,9 @@ export const styles = theme => ({
         marginLeft: theme.spacing.unit
     }),
     listItemInfoText: _extends({
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         color: theme.palette.neutral.normal
     }, theme.typography.body4, {
         fontWeight: theme.typography.fontWeightRegular,

package/es/HiTopBar/HiTopBar.js

@@ -128,7 +128,7 @@ class HiTopBar extends 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);
@@ -148,7 +148,7 @@ class HiTopBar extends React.Component {
         callback();
     }
 
-    toggleCollapse() {
+    handleCollapse() {
         this.setState({ collapsed: !this.state.collapsed });
     }
 
@@ -168,6 +168,7 @@ class HiTopBar extends React.Component {
             translations,
             onClickMenu,
             accountSelectorContent,
+            refButtons,
             searchInput,
             searchFocus
         } = this.props;
@@ -204,15 +205,18 @@ class HiTopBar extends React.Component {
                     null,
                     React.createElement(
                         Collapse,
-                        { 'in': !this.state.collapsed, className: classNames({
+                        {
+                            'in': !this.state.collapsed,
+                            className: classNames({
                                 [classes.collapseOverflow]: !hideable
-                            }) },
+                            })
+                        },
                         React.createElement(
                             Toolbar,
                             { className: classes.toolbar },
                             React.createElement(
                                 'div',
-                                { ref: div => this.overlay = div },
+                                { ref: refButtons },
                                 searchFocus ? React.createElement(
                                     HiButton,
                                     {
@@ -268,7 +272,7 @@ class HiTopBar extends React.Component {
                             (hideable || hasSettings) && React.createElement(
                                 IconButton,
                                 { color: 'inherit', className: classes.iconButton },
-                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.toggleCollapse }),
+                                hideable && React.createElement(ChevronDoubleUp, { onClick: this.handleCollapse }),
                                 hasSettings && React.createElement(HiIconBuilder, {
                                     onClick: this.props.onClickSettings,
                                     icon: 'fa-gear',
@@ -280,7 +284,7 @@ class HiTopBar extends React.Component {
                     hideable && this.state.collapsed && React.createElement(
                         IconButton,
                         {
-                            onClick: this.toggleCollapse,
+                            onClick: this.handleCollapse,
                             color: 'inherit',
                             className: classes.showTopBarButton
                         },
@@ -296,7 +300,7 @@ class HiTopBar extends React.Component {
                     { className: classes.toolbar },
                     React.createElement(
                         'div',
-                        { ref: div => this.overlay = div },
+                        { ref: refButtons },
                         searchFocus ? React.createElement(
                             IconButton,
                             { className: classes.leftButtonMobile, color: 'inherit' },
@@ -434,6 +438,10 @@ HiTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
      * [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
      */
     position: PropTypes.oneOf(['fixed', 'absolute', 'sticky', 'static']),
+    /**
+     *  Passe une ref callback à la div contenant les boutons "menu" et "back"
+     */
+    refButtons: PropTypes.func,
     /**
      * Etat de focus.
      */

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license Material-UI v1.0.0-beta.3
+/** @license Material-UI v1.0.0-beta.4
  *
  * 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 Material-UI v1.0.0-beta.3
+/** @license Material-UI v1.0.0-beta.4
  *
  * 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": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {