@hipay/hipay-material-ui 1.0.0-beta.9 → 2.0.0-beta.35

package/es/HiSelectableList/HiSelectableListItem.js

@@ -1,477 +1,425 @@
-import _extends from 'babel-runtime/helpers/extends';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import warning from 'warning';
-import { CheckboxBlankOutline, CheckboxMarked } from 'mdi-material-ui';
-import ListItem from 'material-ui/List/ListItem';
+import ListItem from '@material-ui/core/ListItem';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import HiIcon from '../HiIcon';
 import HiCheckbox from '../HiCheckbox';
-import withStyles from '../styles/withStyles';
-import { escapeHTML } from '../utils/hiHelpers';
-import HiIconBuilder from '../utils/HiIconBuilder';
 import HiColoredLabel from '../HiColoredLabel';
-
+import HiLoader from '../HiLoader';
+import withStyles from '../styles/withStyles';
+import { escapeHTML } from '../utils/helpers';
 export const styles = theme => ({
-    listItem: {
-        padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightRegular,
-        maxHeight: 40
-    },
-    listItemTitle: {
-        padding: `${9}px 0px`,
-        fontWeight: theme.typography.fontWeightLight
-    },
-    listItemHover: {
-        '&:hover:not($disabled)': {
-            backgroundColor: theme.palette.hover,
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    },
-    disabled: {
-        color: theme.palette.neutral.light,
-        fontWeight: theme.typography.fontWeightLight
-    },
-    centered: {
-        textAlign: 'center',
-        width: '100%'
-    },
-    selected: {
-        backgroundColor: theme.palette.selected
-    },
-    childListItem: {
-        paddingLeft: theme.spacing.unit * 2
-    },
-    listItemIconChecked: {
-        color: theme.palette.business.primary.normal
-    },
-    listItemContent: _extends({
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    }, theme.typography.body1, {
-        fontWeight: 'inherit',
-        width: '100%'
-    }),
-    listItemSecondaryText: _extends({}, theme.typography.body5, {
-        fontWeight: theme.typography.fontWeightLight,
-        marginLeft: theme.spacing.unit,
-        color: theme.palette.neutral.normal
-    }),
-    listItemInfoText: _extends({
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        color: theme.palette.neutral.normal
-    }, theme.typography.body4, {
-        fontWeight: theme.typography.fontWeightRegular,
-        textAlign: 'right',
-        margin: '0 8px',
-        width: '-webkit-fill-available'
-    }),
-    checkbox: {
-        width: 20,
-        height: 20,
-        fontSize: 20,
-        marginRight: 20,
-        marginLeft: 20
-    },
-    imgListItem: {
-        width: 24,
-        height: 'auto',
-        marginRight: 8,
-        verticalAlign: 'middle'
-    },
-    checkboxIcon: {
-        width: 20,
-        height: 20,
-        marginLeft: 2,
-        verticalAlign: 'middle',
-        color: theme.palette.text.icon
-    },
-    icon: {
-        width: 20,
-        height: 20,
-        marginRight: 8,
-        verticalAlign: 'middle',
-        color: theme.palette.text.icon
+  root: {},
+  listItem: {
+    backgroundColor: theme.palette.background3,
+    padding: '5px 0',
+    fontWeight: theme.typography.fontWeightRegular,
+    maxHeight: 56,
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&$inline': {
+      maxHeight: 40,
+      alignItems: 'flex-start',
+      '& $secondaryLabel': {
+        display: 'inline-block'
+      }
     },
-    nbChildrenIndicator: _extends({
-        position: 'absolute',
-        right: 10,
-        color: theme.palette.neutral.normal
-    }, theme.typography.body3),
-    labelHighlight: {
-        '&>strong': {
-            fontWeight: theme.typography.fontWeightMedium,
-            color: '#000000'
-        }
-    },
-    labelHighlightColored: {
-        '&>strong': {
-            fontWeight: theme.typography.fontWeightMedium
-        }
-    },
-    primaryHighlight: {
-        fontWeight: theme.typography.fontWeightMedium,
-        color: theme.palette.business.primary.normal,
-        textTransform: 'uppercase'
+    '&:focus': {
+      backgroundColor: theme.palette.action.hover,
+      outline: 'none'
     }
+  },
+  listItemHover: {
+    '&:hover:not($disabled):not($pinned)': {
+      backgroundColor: theme.palette.action.hover,
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  },
+  centered: {
+    textAlign: 'center',
+    width: '100%'
+  },
+  disabled: {
+    color: theme.palette.action.disabled,
+    fontWeight: theme.typography.fontWeightLight,
+    cursor: 'default'
+  },
+  selected: {
+    backgroundColor: theme.palette.action.selected
+  },
+  pinned: {
+    display: 'inherit',
+    marginRight: 8,
+    backgroundColor: theme.palette.background3
+  },
+  thin: {
+    fontWeight: theme.typography.fontWeightLight
+  },
+  loader: {
+    textAlign: 'center',
+    width: 1,
+    height: 22,
+    padding: '8px 0',
+    margin: 'auto'
+  },
+  listItemContent: _objectSpread({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }, theme.typography.b1, {
+    fontWeight: 'inherit',
+    width: '100%',
+    height: '-webkit-fill-available',
+    padding: '4px 0'
+  }),
+  label: {
+    display: 'inline-block',
+    margin: '1px 0 1px 8px'
+  },
+  coloredLabel: {
+    display: 'inline-flex',
+    marginTop: -4
+  },
+  primaryHighlight: {
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.primary.main,
+    textTransform: 'uppercase'
+  },
+  secondaryLabel: _objectSpread({}, theme.typography.b3, {
+    color: theme.palette.neutral.main,
+    fontWeight: theme.typography.fontWeightLight,
+    fontSize: 11,
+    marginLeft: 8
+  }),
+  inline: {},
+  info: _objectSpread({}, theme.typography.b3, {
+    color: theme.palette.neutral.main,
+    fontWeight: theme.typography.fontWeightLight,
+    fontSize: 12,
+    width: '-webkit-fill-available',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    textAlign: 'right',
+    margin: '4px 12px 4px 8px',
+    alignSelf: 'center'
+  }),
+  checkbox: {
+    width: 20,
+    height: 20,
+    fontSize: 20,
+    margin: '5px 6px 5px 0'
+  },
+  img: {
+    width: 24,
+    height: 'auto',
+    margin: '2px 8px',
+    verticalAlign: 'middle'
+  },
+  icon: {
+    margin: '0 8px',
+    verticalAlign: 'middle'
+  }
 });
-
 /**
  * Construit un élément de liste sélectionnable (avec checkbox)
  */
+
 class HiSelectableListItem extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor(props) {
-        super(props);
-
-        this.buildListItem = () => {
-            const { classes, type, item, nbChildren, translations, checkbox } = this.props;
-            const effectiveType = typeof item.type !== 'undefined' ? item.type : type;
-
-            let childrenIndicator = '';
-            if (nbChildren > 0) {
-                childrenIndicator = React.createElement(
-                    'span',
-                    { className: classes.nbChildrenIndicator },
-                    nbChildren < 2 ? translations.one_child.replace('%s', nbChildren) : translations.n_children.replace('%s', nbChildren)
-                );
-            }
-            switch (effectiveType) {
-                case 'icon':
-                    process.env.NODE_ENV !== "production" ? warning(typeof item.icon !== 'undefined', 'Hipay-Material-UI: item with type icon should have icon parameter') : void 0;
-
-                    const effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
-                    return React.createElement(
-                        'div',
-                        { className: classes.listItemContent, 'data-id': item.id },
-                        !effectiveCheckbox && React.createElement(HiIconBuilder, { icon: item.icon, className: classes.icon }),
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-                case 'image':
-                    let img = '';
-                    if (typeof item.img !== 'undefined') {
-                        img = React.createElement('img', { src: item.img, alt: item.img, className: classes.imgListItem });
-                    }
-
-                    return React.createElement(
-                        'div',
-                        { className: classes.listItemContent, 'data-id': item.id },
-                        img,
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-                case 'primary-highlight':
-                    // used in DateRangeSelector for Custom item
-                    const itemPrimaryHighlightClass = classNames(classes.listItemContent, classes.primaryHighlight);
-
-                    return React.createElement(
-                        'div',
-                        { className: itemPrimaryHighlightClass, 'data-id': item.id },
-                        this.getItemLabel(item)
-                    );
-                case 'text':
-                default:
-                    const itemTextClass = classNames(classes.listItemContent, {
-                        [classes.centered]: item.centered
-                    });
-
-                    return React.createElement(
-                        'div',
-                        { className: itemTextClass, 'data-id': item.id },
-                        this.getItemLabel(item),
-                        React.createElement(
-                            'span',
-                            { className: classes.listItemSecondaryText },
-                            item.secondaryLabel
-                        ),
-                        childrenIndicator
-                    );
-            }
-        };
-
-        this.state = {
-            hover: false
-        };
-
-        this.buildListItem = this.buildListItem.bind(this);
-        this.toggleHover = this.toggleHover.bind(this);
-    }
+    this.setHover = hover => () => {
+      this.setState({
+        hover
+      });
+    };
 
-    toggleHover() {
-        this.setState({ hover: !this.state.hover });
-    }
+    this.state = {
+      hover: false
+    };
+    this.buildItemLabel = this.buildItemLabel.bind(this);
+    this.setHover = this.setHover.bind(this);
+  }
+
+  /**
+   * Build item label with highlight and/or colored label
+   *
+   * @returns {*}
+   */
+  buildItemLabel() {
+    const {
+      classes,
+      color,
+      label,
+      labelHighlight,
+      selected
+    } = this.props;
 
-    getItemLabel(item) {
-        const { classes } = this.props;
-        if (!item.labelHighlight && item.color && this.props.selected) {
-            return React.createElement(HiColoredLabel, { color: item.color, label: item.label });
-        } else if (item.labelHighlight) {
-            const mLabel = React.createElement('span', {
-                className: item.color ? classes.labelHighlightColored : classes.labelHighlight,
-                dangerouslySetInnerHTML: {
-                    __html: escapeHTML(item.labelHighlight)
-                }
-            });
-            if (item.color && this.props.selected) {
-                return React.createElement(HiColoredLabel, { color: item.color, label: mLabel });
-            }
-            return mLabel;
+    if (labelHighlight) {
+      const spanHighlight = React.createElement("span", {
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+          __html: escapeHTML(labelHighlight)
         }
-        return item.label;
-    }
+      });
 
-    /**
-     * Build list item from type
-     */
-
-
-    render() {
-        const {
-            classes,
-            selected,
-            item,
-            onSelect,
-            checkbox,
-            disabled,
-            indeterminate,
-            parentItemSelectable,
-            icon,
-            parentIcon,
-            hoverIcon,
-            checkedIcon,
-            level,
-            hierarchic,
-            leftPadding
-        } = this.props;
-
-        /**
-         * Item params override inherited props
-         */
-        const effectiveCheckbox = typeof item.checkbox !== 'undefined' ? item.checkbox : checkbox;
-        const effectiveDisabled = typeof item.disabled !== 'undefined' ? item.disabled : disabled;
-
-        // build class
-        let listItemClass = classNames(classes.listItem, classes.listItemHover, {
-            [classes.disabled]: effectiveDisabled,
-            [classes.selected]: selected
+      if (color && selected) {
+        return React.createElement(HiColoredLabel, {
+          className: classes.coloredLabel,
+          color: color,
+          label: spanHighlight
         });
-        if (item.hasChildren && parentItemSelectable === false) {
-            listItemClass = classNames(classes.listItemTitle);
-        }
+      }
 
-        // build props
-        let listItemProps = {
-            key: item.id,
-            className: listItemClass,
-            onMouseEnter: this.toggleHover,
-            onMouseLeave: this.toggleHover
-        };
-
-        if (!effectiveDisabled) {
-            listItemProps = _extends({}, listItemProps, {
-                button: true,
-                component: 'li',
-                onClick: event => onSelect(event, item)
-            });
-        }
+      return React.createElement("span", {
+        className: classes.label
+      }, spanHighlight);
+    }
 
-        let selectable = true;
-        if (item.hasChildren && parentItemSelectable === false) {
-            selectable = false;
-            listItemProps.onClick = () => {};
-            listItemProps.button = false;
-        }
+    if (color && selected) {
+      return React.createElement(HiColoredLabel, {
+        className: classes.coloredLabel,
+        color: color,
+        label: label
+      });
+    }
 
-        let iconAll;
-        if (item.id === '_all' && item.icon) {
-            iconAll = React.createElement(HiIconBuilder, { icon: item.icon, className: classes.checkboxIcon });
-        }
+    return React.createElement("div", {
+      className: classes.label
+    }, label);
+  }
 
-        // calcul du padding left
-        let paddingLeft = 0;
-
-        if (leftPadding) {
-            paddingLeft = leftPadding;
-        } else {
-            // Si pas de hiérarchie, padding de 8px
-            if (!hierarchic) {
-                if (!effectiveCheckbox) {
-                    paddingLeft = 8;
-                }
-            } else if (selectable) {
-                // Si item selectionnable
-                // Si parent selectionnable
-                if (parentItemSelectable) {
-                    // Si l'item contient une checkbox
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * level;
-                    } else {
-                        paddingLeft = 16 * (level + 1);
-                    }
-                } else if (level > 0) {
-                    if (effectiveCheckbox) {
-                        paddingLeft = 16 * (level - 1);
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
-                } else if (!effectiveCheckbox) {
-                    if (item.id === '_all') {
-                        paddingLeft = 16;
-                    } else {
-                        paddingLeft = 16 * level;
-                    }
-                }
-            } else {
-                paddingLeft = 16; // Padding de 16 par défaut
-                if (level > 0) {
-                    paddingLeft = 16 * level;
-                }
-            }
-        }
+  render() {
+    const {
+      centered,
+      classes,
+      selected,
+      disabled,
+      hideCheckbox,
+      onSelect,
+      indeterminate,
+      icon,
+      id,
+      img,
+      info,
+      hoverIcon,
+      checkedIcon,
+      level,
+      paddingLeft,
+      pinned,
+      secondaryInline,
+      secondaryLabel,
+      thin,
+      type
+    } = this.props; // Return simple loader list item
 
-        listItemProps.style = { paddingLeft: `${paddingLeft}px` };
+    if (type === 'loader') {
+      return React.createElement(ListItem, null, React.createElement(HiLoader, {
+        loading: true,
+        className: classes.loader,
+        size: 8
+      }));
+    }
 
-        let iconDisplay = icon;
-        if (this.state.hover) {
-            iconDisplay = hoverIcon;
-        } else if (item.hasChildren) {
-            iconDisplay = parentIcon;
-        } else if (item.id === '_all') {
-            iconDisplay = iconAll;
-        }
+    let displayedIcon;
 
-        return React.createElement(
-            ListItem,
-            listItemProps,
-            effectiveCheckbox && selectable && React.createElement(HiCheckbox, {
-                checked: selected,
-                icon: iconDisplay,
-                checkedIcon: checkedIcon,
-                indeterminate: indeterminate,
-                classes: { checked: classes.listItemIconChecked },
-                className: classes.checkbox
-            }),
-            this.buildListItem(),
-            !!item.info && React.createElement(
-                'span',
-                { className: classes.listItemInfoText },
-                item.info
-            )
-        );
+    if (!disabled && this.state.hover) {
+      displayedIcon = hoverIcon;
+    } else if (icon) {
+      displayedIcon = icon;
     }
+
+    const ListItemComponentName = pinned ? ListSubheader : ListItem;
+    return React.createElement(ListItemComponentName, _extends({
+      id: id,
+      tabIndex: 0,
+      key: `li-${id}`,
+      classes: {
+        root: classes.root
+      },
+      className: classNames(classes.listItem, classes.listItemHover, {
+        [classes.disabled]: disabled,
+        [classes.selected]: selected,
+        [classes.thin]: thin,
+        [classes.pinned]: pinned,
+        [classes.inline]: secondaryInline
+      }),
+      disabled: disabled
+    }, disabled || {
+      onClick: onSelect,
+      onMouseEnter: this.setHover(true),
+      onMouseLeave: this.setHover(false)
+    }, {
+      style: {
+        paddingLeft: `${paddingLeft + level * 32}px`
+      }
+    }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
+      checked: selected,
+      checkedIcon: checkedIcon,
+      className: classes.checkbox,
+      color: "primary" // TODO ?
+      ,
+      disabled: disabled,
+      icon: displayedIcon,
+      indeterminate: indeterminate
+    }), React.createElement("div", {
+      className: classNames(classes.listItemContent, {
+        [classes.centered]: centered,
+        [classes.primaryHighlight]: type === 'primary-highlight'
+      }),
+      "data-id": id
+    }, type === 'icon' && icon && hideCheckbox && React.createElement(HiIcon, {
+      icon: icon,
+      className: classes.icon
+    }), type === 'image' && img && React.createElement("img", {
+      src: img,
+      alt: img,
+      className: classes.img
+    }), this.buildItemLabel(), !!secondaryLabel && React.createElement("div", {
+      className: classNames(classes.secondaryLabel, {
+        [classes.inline]: secondaryInline
+      })
+    }, secondaryLabel)), !!info && React.createElement("span", {
+      className: classes.info
+    }, info));
+  }
+
 }
 
 HiSelectableListItem.defaultProps = {
-    type: 'text',
-    checkbox: false,
-    parentItem: false,
-    selected: false,
-    indeterminate: false,
-    disabled: false,
-    parentItemSelectable: false,
-    nbChildren: 0,
-    icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
-    checkedIcon: React.createElement(CheckboxMarked, { style: { width: 20, height: 20 } }),
-    hierarchic: false,
-    translations: {
-        n_children: '%s items',
-        one_child: '%s item'
-    }
+  centered: false,
+  disabled: false,
+  hideCheckbox: false,
+  indeterminate: false,
+  level: 0,
+  paddingLeft: 16,
+  pinned: false,
+  secondaryInline: true,
+  selected: false,
+  thin: false
 };
 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,
-    /**
-     * Applique le style et désactive le click
-     */
-    disabled: PropTypes.bool,
-    /**
-     * Si "true", liste avec hierarchie
-     */
-    hierarchic: PropTypes.bool,
-    /**
-     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
-     */
-    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:
-     * - id: string/number
-     * - label: string
-     */
-    item: PropTypes.object.isRequired,
-    /**
-     * Padding par défaut des éléments
-     */
-    leftPadding: PropTypes.number,
-    /**
-     * Niveau de l'item
-     */
-    level: PropTypes.number,
-    /**
-     * Nombre d'items enfants
-     */
-    nbChildren: PropTypes.number,
-    /**
-     * Fonction de callback à la sélection de l'élément
-     */
-    onSelect: PropTypes.func,
-    /**
-     * Icon affiché lorsqu'un item parent n'est pas sélectionné
-     */
-    parentIcon: PropTypes.node,
-    /**
-     * Affiche l'item en tant qu'item parent d'un groupe
-     */
-    parentItem: PropTypes.bool,
-    /**
-     * Les items parents sont sélectionnables
-     */
-    parentItemSelectable: PropTypes.bool,
-    /**
-     * État de l'élément
-     */
-    selected: PropTypes.bool,
-    /**
-     * Traductions (par défaut en anglais)
-     */
-    translations: PropTypes.object,
-    /**
-     * Type de l'élément
-     */
-    type: PropTypes.string
+  /**
+   * Centre le label de l'élément
+   */
+  centered: PropTypes.bool,
+
+  /**
+   * Icon affiché lorsque l'item est sélectionné
+   */
+  checkedIcon: PropTypes.string,
+
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object,
+
+  /**
+   * Display selected item as colored label
+   */
+  color: PropTypes.string,
+
+  /**
+   * Applique le style et désactive le click
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * N'affiche pas de checkboxes
+   */
+  hideCheckbox: PropTypes.bool,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+   */
+  hoverIcon: PropTypes.string,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  icon: PropTypes.string,
+
+  /**
+   * Icon affiché lorsque l'item n'est pas sélectionné
+   */
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Path de l'image de l'élément de type image
+   */
+  img: PropTypes.string,
+
+  /**
+   * Items sélectionné partiellement
+   */
+  indeterminate: PropTypes.bool,
+
+  /**
+   * Text d'information affiché à droite de l'élément
+   */
+  info: PropTypes.string,
+
+  /**
+   * Label
+   */
+  label: PropTypes.string,
+
+  /**
+   * Label highlight (autorise le highlight du label via la balise <strong>)
+   */
+  labelHighlight: PropTypes.string,
+
+  /**
+   * Niveau de l'item, ajoute un padding à gauche de 16px
+   */
+  level: PropTypes.number,
+
+  /**
+   * Fonction de callback à la sélection de l'élément
+   */
+  onSelect: PropTypes.func,
+
+  /**
+   * Padding par défaut des éléments
+   */
+  paddingLeft: PropTypes.number,
+
+  /**
+   * Item display as pinned item, with sticky behavior
+   */
+  pinned: PropTypes.bool,
+
+  /**
+   * Définit si le second label s'affiche sur la même ligne ou en dessous
+   */
+  secondaryInline: PropTypes.bool,
+
+  /**
+   * Second label affiché à droite du label
+   */
+  secondaryLabel: PropTypes.string,
+
+  /**
+   * État de l'élément
+   */
+  selected: PropTypes.bool,
+
+  /**
+   * Display label as thin text (used to display parent items)
+   */
+  thin: PropTypes.bool,
+
+  /**
+   * Type de l'élément
+   */
+  type: PropTypes.string
 } : {};
-export default withStyles(styles, { name: 'HmuiHiSelectableList' })(HiSelectableListItem);
+export default withStyles(styles, {
+  hiComponent: true,
+  name: 'HmuiHiSelectableList'
+})(HiSelectableListItem);