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

package/HiChip/HiChip.js

@@ -124,12 +124,12 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
         img && _react2.default.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon }),
+        icon && _react2.default.createElement(_HiIconBuilder2.default, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && _react2.default.createElement(_HiIconBuilder2.default, {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         _react2.default.createElement(
             'span',
@@ -140,13 +140,13 @@ function HiChip(props) {
             className: (0, _classnames2.default)(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && _react2.default.createElement(_HiIconBuilder2.default, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/HiColoredLabel/HiColoredLabel.js

@@ -106,7 +106,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {

package/HiDatePicker/HiDateRangeSelector.js

@@ -164,7 +164,9 @@ var styles = exports.styles = function styles(theme) {
         },
         dateRangePicker: {
             width: 'calc(100% + 8px)'
-        }
+        },
+        smSelect: {},
+        smRangePicker: {}
     };
 };
 
@@ -262,7 +264,7 @@ var HiDateRangeSelector = function (_React$Component) {
                 },
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 4 },
+                    { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
                     _react2.default.createElement(_HiSelect.HiSelectField, {
                         disabled: disabled,
                         error: error,
@@ -283,7 +285,7 @@ var HiDateRangeSelector = function (_React$Component) {
                 ),
                 _react2.default.createElement(
                     _Grid2.default,
-                    { item: true, xs: 12, sm: 8 },
+                    { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                     _react2.default.createElement(_HiDateRangePicker2.default, (0, _extends3.default)({
                         classes: { root: classes.dateRangePicker },
                         id: idRange,
@@ -316,9 +318,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
-
         days: 'days',
-
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
         last_24h: 'Last 24h',

package/HiForm/HiFormControl.js

@@ -249,7 +249,7 @@ var HiFormControl = function (_React$PureComponent) {
                         label: label,
                         required: required,
                         disabled: disabled,
-                        focused: focused || hovered
+                        focused: !disabled && (focused || hovered)
                     }, InputLabelProps),
                     !disabled && error && _react2.default.createElement(_mdiMaterialUi.Alert, {
                         className: classes.errorIcon,

package/HiSelect/HiSelect.js

@@ -304,7 +304,7 @@ var HiSelect = function (_React$PureComponent) {
                 display = translations.one_item_selected.replace('%s', selectedIdList.length);
             } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
                 display = translations.n_items_selected.replace('%s', selectedIdList.length);
-            } else if (this.state.nbOptions === selectedIdList.length) {
+            } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
                 display = translations.all;
             } else if (selectedIdList.length === 1) {
                 if (type !== 'icon') {

package/HiSelectableList/HiSelectableList.js

@@ -99,7 +99,8 @@ var HiSelectableList = function (_React$PureComponent) {
                 allSelected = _props.allSelected,
                 checkbox = _props.checkbox,
                 hierarchic = _props.hierarchic,
-                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+                disabledIds = _props.disabledIds,
+                others = (0, _objectWithoutProperties3.default)(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
 
 
             var parents = [];
@@ -161,7 +162,8 @@ var HiSelectableList = function (_React$PureComponent) {
                             hoverIcon: hoverIcon,
                             checkedIcon: checkedIcon,
                             checkbox: checkbox,
-                            level: parents.length
+                            level: parents.length,
+                            disabled: disabledIds ? disabledIds.includes(item.id) : false
                         }, others));
                     })
                 )
@@ -203,6 +205,10 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
+    /**
+     * Liste des ids des items disabled
+     */
+    disabledIds: _propTypes2.default.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */

package/HiSelectableList/HiSelectableListItem.js

@@ -440,18 +440,38 @@ HiSelectableListItem.defaultProps = {
     }
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: _propTypes2.default.node,
     /**
      * Useful to extend the style applied to components.
      */
     classes: _propTypes2.default.object,
     /**
-     * État de l'élément
+     * Applique le style et désactive le click
      */
-    selected: _propTypes2.default.bool,
+    disabled: _propTypes2.default.bool,
     /**
-     * Type de l'élément
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
-    type: _propTypes2.default.string,
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: _propTypes2.default.bool,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -459,65 +479,45 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - label: string
      */
     item: _propTypes2.default.object.isRequired,
+    /**
+     * Padding par défaut des éléments
+     */
+    leftPadding: _propTypes2.default.number,
     /**
      * Niveau de l'item
      */
     level: _propTypes2.default.number,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Nombre d'items enfants
      */
-    parentItem: _propTypes2.default.bool,
+    nbChildren: _propTypes2.default.number,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: _propTypes2.default.func,
     /**
-     * Applique le style et désactive le click
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
      */
-    disabled: _propTypes2.default.bool,
+    parentIcon: _propTypes2.default.node,
     /**
-     * Items sélectionné partiellement
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    indeterminate: _propTypes2.default.bool,
+    parentItem: _propTypes2.default.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: _propTypes2.default.bool,
     /**
-     * Nombre d'items enfants
+     * État de l'élément
      */
-    nbChildren: _propTypes2.default.number,
+    selected: _propTypes2.default.bool,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: _propTypes2.default.object,
     /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: _propTypes2.default.node,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: _propTypes2.default.node,
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: _propTypes2.default.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: _propTypes2.default.bool,
-    /**
-     * Padding par défaut des éléments
+     * Type de l'élément
      */
-    leftPadding: _propTypes2.default.number
+    type: _propTypes2.default.string
 } : {};
 exports.default = (0, _withStyles2.default)(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/HiTable/HiTable.js

@@ -802,7 +802,7 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                raised: true,
+                                variant: 'raised',
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {

package/HiTable/HiTableFooterScroll.js

@@ -138,7 +138,7 @@ var HiTableFooterScroll = function (_React$Component) {
             ) : _react2.default.createElement(
                 _HiButton2.default,
                 {
-                    raised: true,
+                    variant: 'raised',
                     color: 'primary',
                     className: classes.loadMoreButton,
                     onClick: function onClick() {

package/es/HiChip/HiChip.js

@@ -87,12 +87,12 @@ function HiChip(props) {
             })
         },
         img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon }),
+        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 20
+            size: 16
         }),
         React.createElement(
             'span',
@@ -103,13 +103,13 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 20
+            size: 16
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 20
+            size: 16
         })
     );
 }

package/es/HiColoredLabel/HiColoredLabel.js

@@ -74,7 +74,7 @@ HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Label à afficher
      */
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]).isRequired
 } : {};
 
 HiColoredLabel.defaultProps = {

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -105,7 +105,9 @@ export const styles = theme => ({
     },
     dateRangePicker: {
         width: 'calc(100% + 8px)'
-    }
+    },
+    smSelect: {},
+    smRangePicker: {}
 });
 
 class HiDateRangeSelector extends React.Component {
@@ -187,7 +189,7 @@ class HiDateRangeSelector extends React.Component {
             },
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 4 },
+                { item: true, xs: 12, sm: 4, classes: { 'grid-sm-4': classes.smSelect } },
                 React.createElement(HiSelectField, {
                     disabled: disabled,
                     error: error,
@@ -208,7 +210,7 @@ class HiDateRangeSelector extends React.Component {
             ),
             React.createElement(
                 Grid,
-                { item: true, xs: 12, sm: 8 },
+                { item: true, xs: 12, sm: 8, classes: { 'grid-sm-8': classes.smRangePicker } },
                 React.createElement(HiDateRangePicker, _extends({
                     classes: { root: classes.dateRangePicker },
                     id: idRange,
@@ -239,9 +241,7 @@ HiDateRangeSelector.defaultProps = {
         quarter: 'Quarter',
         week: 'Week',
         year: 'Year',
-
         days: 'days',
-
         custom_period: 'Custom Period',
         yesterday: 'Yesterday',
         last_24h: 'Last 24h',

package/es/HiForm/HiFormControl.js

@@ -176,7 +176,7 @@ class HiFormControl extends React.PureComponent {
                     label: label,
                     required: required,
                     disabled: disabled,
-                    focused: focused || hovered
+                    focused: !disabled && (focused || hovered)
                 }, InputLabelProps),
                 !disabled && error && React.createElement(Alert, {
                     className: classes.errorIcon,

package/es/HiSelect/HiSelect.js

@@ -216,7 +216,7 @@ class HiSelect extends React.PureComponent {
             display = translations.one_item_selected.replace('%s', selectedIdList.length);
         } else if (this.state.nbOptions !== selectedIdList.length && selectedIdList.length > 1) {
             display = translations.n_items_selected.replace('%s', selectedIdList.length);
-        } else if (this.state.nbOptions === selectedIdList.length) {
+        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
             if (type !== 'icon') {

package/es/HiSelectableList/HiSelectableList.js

@@ -37,9 +37,10 @@ class HiSelectableList extends React.PureComponent {
             checkedIcon,
             allSelected,
             checkbox,
-            hierarchic
+            hierarchic,
+            disabledIds
         } = _props,
-              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic']);
+              others = _objectWithoutProperties(_props, ['classes', 'itemList', 'selectedIdList', 'onSelect', 'maxHeight', 'hierarchySelected', 'parentItemSelectable', 'hierarchy', 'translations', 'icon', 'parentIcon', 'hoverIcon', 'checkedIcon', 'allSelected', 'checkbox', 'hierarchic', 'disabledIds']);
 
         let parents = [];
 
@@ -100,7 +101,8 @@ class HiSelectableList extends React.PureComponent {
                         hoverIcon: hoverIcon,
                         checkedIcon: checkedIcon,
                         checkbox: checkbox,
-                        level: parents.length
+                        level: parents.length,
+                        disabled: disabledIds ? disabledIds.includes(item.id) : false
                     }, others));
                 })
             )
@@ -140,6 +142,10 @@ HiSelectableList.propTypes = process.env.NODE_ENV !== "production" ? {
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
+    /**
+     * Liste des ids des items disabled
+     */
+    disabledIds: PropTypes.array,
     /**
      * Tableau associatif : parentId => [children objects]
      */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -361,18 +361,38 @@ HiSelectableListItem.defaultProps = {
     }
 };
 HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Affiche une checkbox
+     */
+    checkbox: PropTypes.bool,
+    /**
+     * Icon affiché lorsque l'item est sélectionné
+     */
+    checkedIcon: PropTypes.node,
     /**
      * Useful to extend the style applied to components.
      */
     classes: PropTypes.object,
     /**
-     * État de l'élément
+     * Applique le style et désactive le click
      */
-    selected: PropTypes.bool,
+    disabled: PropTypes.bool,
     /**
-     * Type de l'élément
+     * Si "true", liste avec hierarchie
+     */
+    hierarchic: PropTypes.bool,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
      */
-    type: PropTypes.string,
+    hoverIcon: PropTypes.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: PropTypes.node,
+    /**
+     * Items sélectionné partiellement
+     */
+    indeterminate: PropTypes.bool,
     /**
      * Élément dont la structure attendue dépend du type
      * paramètres requis:
@@ -380,65 +400,45 @@ HiSelectableListItem.propTypes = process.env.NODE_ENV !== "production" ? {
      * - label: string
      */
     item: PropTypes.object.isRequired,
+    /**
+     * Padding par défaut des éléments
+     */
+    leftPadding: PropTypes.number,
     /**
      * Niveau de l'item
      */
     level: PropTypes.number,
     /**
-     * Affiche l'item en tant qu'item parent d'un groupe
+     * Nombre d'items enfants
      */
-    parentItem: PropTypes.bool,
+    nbChildren: PropTypes.number,
     /**
      * Fonction de callback à la sélection de l'élément
      */
     onSelect: PropTypes.func,
     /**
-     * Applique le style et désactive le click
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
      */
-    disabled: PropTypes.bool,
+    parentIcon: PropTypes.node,
     /**
-     * Items sélectionné partiellement
+     * Affiche l'item en tant qu'item parent d'un groupe
      */
-    indeterminate: PropTypes.bool,
+    parentItem: PropTypes.bool,
     /**
      * Les items parents sont sélectionnables
      */
     parentItemSelectable: PropTypes.bool,
     /**
-     * Nombre d'items enfants
+     * État de l'élément
      */
-    nbChildren: PropTypes.number,
+    selected: PropTypes.bool,
     /**
      * Traductions (par défaut en anglais)
      */
     translations: PropTypes.object,
     /**
-     * Icon affiché lorsque l'item n'est pas sélectionné
-     */
-    icon: PropTypes.node,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: PropTypes.node,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    hoverIcon: PropTypes.node,
-    /**
-     * Icon affiché lorsque l'item est sélectionné
-     */
-    checkedIcon: PropTypes.node,
-    /**
-     * Affiche une checkbox
-     */
-    checkbox: PropTypes.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: PropTypes.bool,
-    /**
-     * Padding par défaut des éléments
+     * Type de l'élément
      */
-    leftPadding: PropTypes.number
+    type: PropTypes.string
 } : {};
 export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);

package/es/HiTable/HiTable.js

@@ -674,7 +674,7 @@ class HiTable extends React.Component {
                     React.createElement(
                         HiButton,
                         {
-                            raised: true,
+                            variant: 'raised',
                             color: 'primary',
                             className: classes.backToTopButton,
                             onClick: () => this.scrollToTop()

package/es/HiTable/HiTableFooterScroll.js

@@ -84,7 +84,7 @@ class HiTableFooterScroll extends React.Component {
         ) : React.createElement(
             HiButton,
             {
-                raised: true,
+                variant: 'raised',
                 color: 'primary',
                 className: classes.loadMoreButton,
                 onClick: () => this.handleRequestNextDatas(true)

package/es/utils/hiHelpers.js

@@ -167,7 +167,7 @@ export function getNextItemSelectable(node, direction) {
     } else if (node.previousSibling === null) {
         return null;
     } else if (node.previousSibling.tabIndex === -1) {
-        return this.getNextItemSelectable(node.previousSibling, direction);
+        return getNextItemSelectable(node.previousSibling, direction);
     }
     return node.previousSibling;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "HiPay Material-UI Style Guide - React components that implement Google's Material Design from Material-UI.",
   "main": "./index.js",
   "repository": {