@hipay/hipay-material-ui 1.0.0-beta.1

package/HiSelect/HiSelect.js

@@ -0,0 +1,830 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.styles = undefined;
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _Grow = require('material-ui/transitions/Grow');
+
+var _Grow2 = _interopRequireDefault(_Grow);
+
+var _reactDom = require('react-dom');
+
+var _Paper = require('material-ui/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _ClickAwayListener = require('material-ui/utils/ClickAwayListener');
+
+var _ClickAwayListener2 = _interopRequireDefault(_ClickAwayListener);
+
+var _Collapse = require('material-ui/transitions/Collapse');
+
+var _Collapse2 = _interopRequireDefault(_Collapse);
+
+var _reactPopper = require('react-popper');
+
+var _mdiMaterialUi = require('mdi-material-ui');
+
+var _HiSelectableList = require('../HiSelectableList');
+
+var _HiSelectableList2 = _interopRequireDefault(_HiSelectableList);
+
+var _HiSelectableListItem = require('../HiSelectableList/HiSelectableListItem');
+
+var _HiSelectableListItem2 = _interopRequireDefault(_HiSelectableListItem);
+
+var _HiForm = require('../HiForm');
+
+var _SelectInput = require('./SelectInput');
+
+var _SelectInput2 = _interopRequireDefault(_SelectInput);
+
+var _HiChip = require('../HiChip/HiChip');
+
+var _HiChip2 = _interopRequireDefault(_HiChip);
+
+var _styles = require('../styles');
+
+var _hiHelpers = require('../utils/hiHelpers');
+
+var _HiIconBuilder = require('../utils/HiIconBuilder');
+
+var _HiIconBuilder2 = _interopRequireDefault(_HiIconBuilder);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// @inheritedComponent Input
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            backgroundColor: theme.palette.background2,
+            maxWidth: 500,
+            width: '100%',
+            position: 'relative'
+        },
+        popper: {
+            width: '100%',
+            transform: 'none !important',
+            zIndex: 9
+        },
+        paper: {
+            borderRadius: '0px 2px',
+            maxHeight: 440,
+            transition: 'none !important'
+        },
+        labelIcon: {
+            marginRight: 10
+        },
+        selectIconLabel: (0, _extends3.default)({
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            paddingRight: 16
+        }, theme.typography.body1, {
+            display: 'inline-flex',
+            width: '100%'
+        })
+    };
+};
+
+/**
+ *
+ * Utilisé pour tous types de selects dans les formulaires.
+ * - single / multiple ( multi-select )
+ * - avec / sans checkboxes
+ * - avec / sans barre de recherche
+ * - avec / sans option "All"
+ * - prise en compte du type des éléments (text, image, icon, ...)
+ *
+ * Ce composant réuni les sous-composants
+ * - SelectInput : affiche l'élément dans le formulaire
+ * - HiSearchField : intègre une barre de recherche dans le Popper,
+ * il filtre la liste des suggestions
+ * - HiSelectableList : affiche la liste des suggestions selon le type des éléments
+ */
+
+var HiSelect = function (_React$PureComponent) {
+    (0, _inherits3.default)(HiSelect, _React$PureComponent);
+
+    function HiSelect(props) {
+        (0, _classCallCheck3.default)(this, HiSelect);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiSelect.__proto__ || (0, _getPrototypeOf2.default)(HiSelect)).call(this, props));
+
+        _this.handleClick = function () {
+            document.body.style.overflow = 'hidden';
+            _this.setState({ open: true });
+            var options = _this.props.options.slice();
+            _this.handleSuggestions(options);
+
+            if (_this.props.onClick) {
+                _this.props.onClick();
+            }
+
+            // Gestion du focus
+            if (_this.searchField) {
+                // si searchable, focus sur le champs de recherche
+                var searchField = _this.searchField;
+                setTimeout(function () {
+                    searchField.focus();
+                }, 1);
+            } else if (_this.overlay) {
+                // sinon focus sur le dernier élément selectionné
+                _this.focusOnSelectedItem();
+            }
+        };
+
+        _this.focusOnSelectedItem = function () {
+            // On récupère la div parent "overlay"
+            var overlay = (0, _reactDom.findDOMNode)(_this.overlay);
+            var multiple = _this.props.multiple;
+            var value = _this.props.value;
+            var selectedIdList = Array.isArray(value) ? value : [value];
+            setTimeout(function () {
+                var focused = false;
+                // Si un ou plusieurs items sont selectionnés, on focus sur le dernier
+                if (selectedIdList.length > 0) {
+                    var itemSelected = overlay.querySelector('[data-id="' + selectedIdList[selectedIdList.length - 1] + '"]');
+                    if (itemSelected && itemSelected.parentElement.tagName === 'LI') {
+                        itemSelected.parentElement.focus();
+                        focused = true;
+                    }
+                }
+                // Si pas d'item selectionné, ou pas visible (en cas de recherche), focus sur le premier
+                if (selectedIdList.length === 0 || !focused) {
+                    // On recupère tous les items
+                    var items = overlay.getElementsByTagName('li');
+                    var itemToFocus = items[0];
+                    // Si select multiple, et qu'au moins un selectionné, focus sur le 2e item
+                    if (multiple && selectedIdList.length > 0) {
+                        itemToFocus = items[1];
+                    }
+                    itemToFocus.focus();
+                }
+            }, 1);
+        };
+
+        _this.handleKeyDown = function (event) {
+            var nextItem = void 0;
+            if (event.key === 'ArrowDown') {
+                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'down');
+            } else if (event.key === 'ArrowUp') {
+                nextItem = (0, _hiHelpers.getNextItemSelectable)(document.activeElement, 'up');
+            } else if (event.key === 'Tab') {
+                document.body.style.overflow = 'auto';
+                _this.setState({ open: false });
+            }
+            if (nextItem) {
+                nextItem.focus();
+            }
+        };
+
+        _this.handleKeyDownSearch = function (event) {
+            if (_this.overlay && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                _this.focusOnSelectedItem();
+            }
+        };
+
+        _this.handleFocus = function () {
+            _this.setState({ focused: true });
+        };
+
+        _this.handleBlur = function () {
+            _this.setState({ focused: false });
+        };
+
+        _this.handleClose = function () {
+            document.body.style.overflow = 'auto';
+            _this.setState({
+                open: false
+            });
+
+            if (_this.props.onClose) {
+                _this.props.onClose();
+            }
+        };
+
+        _this.handleSelect = function (event, item) {
+            var _this$props = _this.props,
+                multiple = _this$props.multiple,
+                value = _this$props.value,
+                name = _this$props.name,
+                onChange = _this$props.onChange,
+                options = _this$props.options,
+                hierarchic = _this$props.hierarchic;
+            var _this$state = _this.state,
+                hierarchySelected = _this$state.hierarchySelected,
+                hierarchy = _this$state.hierarchy,
+                nbOptions = _this$state.nbOptions;
+
+            var hiSelected = (0, _extends3.default)({}, hierarchySelected);
+
+            if (multiple) {
+                var valueList = value;
+                if (item.id === '_all') {
+                    if (valueList.length === nbOptions) {
+                        valueList = [];
+                        if (hierarchic) {
+                            // if hierarchic select => empty associative array of selected children
+                            (0, _keys2.default)(hiSelected).forEach(function (key) {
+                                hiSelected[key] = [];
+                            });
+                        }
+                    } else {
+                        options.forEach(function (option) {
+                            if (option.hasChildren !== true && !valueList.includes(option.id) && option.id !== '_all') {
+                                valueList.push(option.id);
+                            } else if (option.hasChildren === true) {
+                                // if hierarchic select => fill associative array of selected children
+                                hiSelected[option.id] = hierarchy[option.id];
+                            }
+                        });
+                    }
+                } else if (valueList.includes(item.id) || item.hasChildren === true && hierarchySelected[item.id].length === hierarchy[item.id].length) {
+                    // item déjà sélectionné => on le déselectionne
+                    if (item.hasChildren !== true) {
+                        valueList = valueList.filter(function (val) {
+                            return val !== item.id;
+                        });
+                    }
+
+                    if (item.hasChildren === true) {
+                        // remove all children
+                        valueList = valueList.filter(function (val) {
+                            return !_this.state.hierarchy[item.id].includes(val);
+                        });
+                        hiSelected[item.id] = [];
+                    } else if (item.hasOwnProperty('parentId')) {
+                        // Si item est un enfant on l'enlève du tableau associatif des
+                        // elmts sélectionnés
+                        hiSelected[item.parentId].splice(hiSelected[item.parentId].indexOf(item.id), 1);
+                    }
+                } else {
+                    // item non sélectionné => on le sélectionne
+                    if (item.hasChildren !== true) valueList.push(item.id);
+
+                    if (item.hasChildren === true) {
+                        // Si item parent => on ajoute tous les enfants
+                        // Ou on les supprime s'ils sont déjà tous sélectionnés (dans une liste filtrée)
+                        var idsInSuggestions = [];
+                        _this.state.suggestions.forEach(function (suggestion) {
+                            if (_this.state.hierarchy[item.id].includes(suggestion.id)) {
+                                idsInSuggestions.push(suggestion.id);
+                            }
+                        });
+                        // if(hierarchySelected[item.id].length > 0) {}
+                        var allChildrenSuggestionsSelected = true;
+                        idsInSuggestions.forEach(function (id) {
+                            if (!hierarchySelected[item.id].includes(id)) {
+                                allChildrenSuggestionsSelected = false;
+                            }
+                        });
+
+                        if (allChildrenSuggestionsSelected === true) {
+                            // On supprime les enfants car déjà tous sélectionnés
+                            idsInSuggestions.forEach(function (id) {
+                                valueList.splice(valueList.indexOf(id), 1);
+                                hiSelected[item.id].splice(hiSelected[item.id].indexOf(id), 1);
+                            });
+                        } else {
+                            // On ajoute tous les enfants filtrés au éléments sélectionnés
+                            valueList = (0, _hiHelpers.arrayUnique)(valueList.concat(idsInSuggestions));
+                            hiSelected[item.id] = (0, _hiHelpers.arrayUnique)(hiSelected[item.id].concat(idsInSuggestions));
+                        }
+
+                        _this.setState({ hierarchySelected: hiSelected });
+                    } else if (item.hasOwnProperty('parentId')) {
+                        // Si item est un enfant on l'ajoute du tableau associatif des
+                        // elmts sélectionnés
+                        hiSelected[item.parentId].push(item.id);
+                    }
+                }
+                _this.setState({ hierarchySelected: hiSelected });
+                onChange(event, valueList);
+            } else {
+                onChange(event, item.id);
+                _this.handleClose();
+            }
+        };
+
+        _this.handleSuggestions = function (suggestions) {
+            var _this$props2 = _this.props,
+                options = _this$props2.options,
+                hasAll = _this$props2.hasAll,
+                iconAll = _this$props2.iconAll,
+                translations = _this$props2.translations,
+                multiple = _this$props2.multiple;
+
+
+            if (suggestions.length === 0) {
+                // Handle No Result
+                // FIX to remove all item
+                suggestions = [];
+                suggestions.push({
+                    id: '_no_result',
+                    type: 'text',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: translations.no_result_match
+                });
+            } else if (hasAll && suggestions.length > 0 && suggestions.length === options.length && multiple === true) {
+                // Handle 'All'
+                if (suggestions.filter(function (suggestion) {
+                    return suggestion.id === '_all';
+                }).length === 0) {
+                    var allItem = {
+                        id: '_all',
+                        icon: iconAll,
+                        label: translations.all
+                    };
+                    if (iconAll !== false) {
+                        allItem.type = 'icon';
+                    }
+                    suggestions.unshift(allItem);
+                }
+            }
+
+            _this.setState({
+                suggestions: suggestions
+            });
+        };
+
+        _this.handleRequestDelete = function (evt) {
+            evt.stopPropagation();
+            _this.props.onChange(_this.props.name, []);
+        };
+
+        _this.state = {
+            open: false,
+            focused: false,
+            suggestions: [],
+            hierarchySelected: {},
+            hierarchy: {},
+            nbOptions: 0,
+            dynamic: false
+        };
+
+        if (props.hierarchic === true && props.options.length > 1) {
+            // Construct two associative arrays
+            // hierarchy[parentId] => children
+            // hierarchySelected[parentId] => selected children
+            var hierarchy = {};
+            var hierarchySelected = {};
+            var value = props.value || [];
+            if (!Array.isArray(value)) value = [props.value];
+            props.options.forEach(function (option) {
+                if (option.hasChildren === true && !hierarchy.hasOwnProperty(option.id)) {
+                    hierarchy[option.id] = [];
+                    hierarchySelected[option.id] = [];
+                } else if (option.hasOwnProperty('parentId')) {
+                    hierarchy[option.parentId].push(option.id);
+                    if (value.includes(option.id)) {
+                        hierarchySelected[option.parentId].push(option.id);
+                    }
+                }
+            });
+
+            _this.state.hierarchy = hierarchy;
+            _this.state.hierarchySelected = hierarchySelected;
+        }
+
+        if (props.options.length > 0) {
+            // Get real options number (parent & _all are not real options)
+            var optionsLength = 0;
+            props.options.forEach(function (option) {
+                if (option.hasChildren !== true && option.id !== '_all') {
+                    optionsLength++;
+                }
+            });
+            _this.state.nbOptions = optionsLength;
+        } else {
+            _this.state.dynamic = true;
+        }
+
+        _this.handleSelect = _this.handleSelect.bind(_this);
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleClose = _this.handleClose.bind(_this);
+        _this.handleRequestDelete = _this.handleRequestDelete.bind(_this);
+        _this.handleSuggestions = _this.handleSuggestions.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        return _this;
+    }
+
+    (0, _createClass3.default)(HiSelect, [{
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (typeof this.props.onSearch !== 'undefined' && this.props.options && this.props.options.length > 0) {
+                this.handleSuggestions(nextProps.options);
+                var optionsLength = 0;
+                nextProps.options.forEach(function (option) {
+                    if (option.hasChildren !== true && option.id !== '_all') {
+                        optionsLength++;
+                    }
+                });
+                this.setState({ nbOptions: optionsLength });
+            }
+        }
+
+        // Key down on list items
+
+
+        // Key down on search input
+
+
+        /**
+         * Call onChange with the updated value
+         *
+         * - handle single value
+         * - handle multiple value
+         * - handle '_all' id
+         *
+         * @param event
+         * @param item
+         */
+
+
+        /**
+         * Update suggestions list
+         * - add '_no_result' item if suggestion list is empty
+         * - add '_all' item if suggestion list is complete
+         * @param suggestions
+         */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                disabled = _props.disabled,
+                error = _props.error,
+                multiple = _props.multiple,
+                options = _props.options,
+                checkbox = _props.checkbox,
+                searchable = _props.searchable,
+                displayAsChip = _props.displayAsChip,
+                type = _props.type,
+                value = _props.value,
+                _props$hasSelectedCou = _props.hasSelectedCount,
+                hasSelectedCount = _props$hasSelectedCou === undefined ? multiple : _props$hasSelectedCou,
+                translations = _props.translations,
+                parentItemSelectable = _props.parentItemSelectable,
+                icon = _props.icon,
+                parentIcon = _props.parentIcon,
+                hoverIcon = _props.hoverIcon,
+                checkedIcon = _props.checkedIcon,
+                hierarchic = _props.hierarchic,
+                id = _props.id;
+            var _state = this.state,
+                open = _state.open,
+                suggestions = _state.suggestions,
+                focused = _state.focused;
+
+
+            var display = '';
+            var selectedIdList = Array.isArray(value) ? value : [value];
+
+            if (this.state.dynamic && selectedIdList.length === 1) {
+                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) {
+                display = translations.all;
+            } else if (selectedIdList.length === 1) {
+                if (type !== 'icon') {
+                    display = options.find(function (o) {
+                        return o.id === selectedIdList[0];
+                    }).label;
+                } else {
+                    var optionSelected = options.find(function (o) {
+                        return o.id === selectedIdList[0];
+                    });
+                    display = _react2.default.createElement(
+                        'span',
+                        { className: classes.selectIconLabel },
+                        _react2.default.createElement(_HiIconBuilder2.default, { icon: optionSelected.icon, className: classes.labelIcon }),
+                        optionSelected.label
+                    );
+                }
+            }
+
+            if (displayAsChip) {
+                var chipFilter = _react2.default.createElement(_HiChip2.default, { label: display, onDelete: this.handleRequestDelete });
+                if (display) {
+                    display = chipFilter;
+                }
+            }
+
+            var popperClass = (0, _classnames2.default)(classes.popper, (0, _defineProperty3.default)({}, classes.popperClose, !open));
+
+            var allSelected = false;
+            if (selectedIdList.length === this.state.nbOptions) {
+                allSelected = true;
+            }
+
+            var popperStyle = {};
+            if (this.props.containerWidth > 0) {
+                popperStyle = { width: this.props.containerWidth };
+            }
+
+            return _react2.default.createElement(
+                'div',
+                {
+                    className: classes.root,
+                    ref: function ref(el) {
+                        _this2.overlay = el;
+                    }
+                },
+                _react2.default.createElement(
+                    _reactPopper.Manager,
+                    null,
+                    _react2.default.createElement(
+                        _reactPopper.Target,
+                        null,
+                        _react2.default.createElement(_SelectInput2.default, {
+                            id: id,
+                            value: display,
+                            open: open,
+                            focused: focused,
+                            type: type,
+                            disabled: disabled,
+                            noButton: displayAsChip,
+                            error: error,
+                            onClick: this.handleClick,
+                            onFocus: this.handleFocus,
+                            onBlur: this.handleBlur,
+                            onMouseEnter: this.props.onMouseEnter,
+                            onMouseLeave: this.props.onMouseLeave
+                        })
+                    ),
+                    open && _react2.default.createElement(
+                        _reactPopper.Popper,
+                        {
+                            placement: 'bottom-start',
+                            eventsEnabled: open,
+                            className: popperClass,
+                            style: popperStyle
+                        },
+                        _react2.default.createElement(
+                            _ClickAwayListener2.default,
+                            { onClickAway: this.handleClose },
+                            _react2.default.createElement(
+                                _Grow2.default,
+                                { 'in': open, id: 'menu-list', style: { transformOrigin: '0 0 0' } },
+                                _react2.default.createElement(
+                                    _Paper2.default,
+                                    { className: classes.paper },
+                                    !!searchable && _react2.default.createElement(_HiForm.HiSearchField, {
+                                        itemList: options,
+                                        callbackFilteredList: this.handleSuggestions,
+                                        filterPropertyList: ['label'],
+                                        placeholder: translations.search,
+                                        autoFocus: true,
+                                        onSearch: this.props.onSearch,
+                                        inputRef: function inputRef(el) {
+                                            _this2.searchField = el;
+                                        },
+                                        onKeyDown: this.handleKeyDownSearch
+                                    }),
+                                    !!hasSelectedCount && _react2.default.createElement(
+                                        _Collapse2.default,
+                                        {
+                                            'in': selectedIdList.length > 0,
+                                            timeout: 'auto',
+                                            unmountOnExit: true
+                                        },
+                                        _react2.default.createElement(_HiSelectableListItem2.default, {
+                                            key: '_selected_count',
+                                            item: {
+                                                id: '_selected_count',
+                                                type: 'text',
+                                                disabled: true,
+                                                checkbox: false,
+                                                label: selectedIdList.length < 2 ? translations.one_item_selected.replace('%s', selectedIdList.length) : translations.n_items_selected.replace('%s', selectedIdList.length),
+                                                centered: true
+                                            }
+                                        })
+                                    ),
+                                    _react2.default.createElement(_HiSelectableList2.default, {
+                                        type: type,
+                                        parentItemSelectable: parentItemSelectable,
+                                        itemList: suggestions,
+                                        onSelect: this.handleSelect,
+                                        selectedIdList: selectedIdList,
+                                        checkbox: checkbox,
+                                        hierarchy: this.state.hierarchy,
+                                        hierarchic: hierarchic,
+                                        hierarchySelected: this.state.hierarchySelected,
+                                        translations: translations,
+                                        icon: icon,
+                                        parentIcon: parentIcon,
+                                        hoverIcon: hoverIcon,
+                                        checkedIcon: checkedIcon,
+                                        allSelected: allSelected,
+                                        value: value,
+                                        onKeyDown: this.handleKeyDown
+                                    })
+                                )
+                            )
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiSelect;
+}(_react2.default.PureComponent);
+
+HiSelect.defaultProps = {
+    disabled: false,
+    error: false,
+    multiple: false,
+    type: 'text',
+    checkbox: false,
+    searchable: false,
+    hasAll: false,
+    iconAll: false,
+    hierarchic: false,
+    parentItemSelectable: false,
+    displayAsChip: false,
+    icon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    parentIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    hoverIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
+    checkedIcon: _react2.default.createElement(_mdiMaterialUi.CheckboxMarked, { style: { width: 20, height: 20 } }),
+    translations: {
+        all: 'All',
+        no_result_match: 'No result match',
+        search: 'Search',
+        n_items_selected: '%s items selected',
+        one_item_selected: '%s item selected',
+        n_children: '%s items',
+        one_child: '%s item'
+    }
+};
+HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Affiche une checkbox pour chaque éléments, par défaut si options est nested
+     */
+    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,
+    /**
+     * Inactif
+     */
+    disabled: _propTypes2.default.bool,
+    /**
+     * Option permettant d'afficher les sélection sous forme de Chip.
+     */
+    displayAsChip: _propTypes2.default.bool,
+    /**
+     * Applique le style error
+     */
+    error: _propTypes2.default.bool,
+    /**
+     * Affiche l'élément 'All'
+     */
+    hasAll: _propTypes2.default.bool,
+    /**
+     * Affiche le compte d'éléments sélectionnés en haut de la liste
+     */
+    hasSelectedCount: _propTypes2.default.bool,
+    /**
+     * Les items sont hiérarchisés
+     */
+    hierarchic: _propTypes2.default.bool,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné et qu'on le survole
+     */
+    hoverIcon: _propTypes2.default.node,
+    /**
+     * Icon affiché lorsque l'item n'est pas sélectionné
+     */
+    icon: _propTypes2.default.node,
+    /**
+     * Nom de l'icône
+     */
+    iconAll: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]),
+    /**
+     * id du select
+     */
+    id: _propTypes2.default.string,
+    /**
+     * Autorise la sélection de plusieurs valeurs
+     */
+    multiple: _propTypes2.default.bool,
+    /**
+     * Nom du champ de formulaire
+     */
+    name: _propTypes2.default.string.isRequired,
+    /**
+     * Fonction de callback qui renvoit la/les valeurs sélectionnées
+     *
+     * @param {object} event
+     * @param {string || array} value
+     */
+    onChange: _propTypes2.default.func.isRequired,
+    /**
+     * Fonction de callback appelée lorsqu'on ferme le select
+     */
+    onClose: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on survole le champs
+     */
+    onMouseEnter: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsque le curseur quitte le champs
+     */
+    onMouseLeave: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée lorsqu'on écrit dans la barre de recherche
+     * A utiliser pour les selects avec des données dynamiques
+     *
+     * @param {string} value
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     * Listes des options du select
+     */
+    options: _propTypes2.default.array.isRequired,
+    /**
+     * Icon affiché lorsqu'un item parent n'est pas sélectionné
+     */
+    parentIcon: _propTypes2.default.node,
+    /**
+     * Les items parents sont sélectionnables
+     */
+    parentItemSelectable: _propTypes2.default.bool,
+    /**
+     * Affiche un input de recherche permettant de filtrer les options
+     */
+    searchable: _propTypes2.default.bool,
+    /**
+     * Traductions (par défaut en anglais)
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Type des éléments du select, définit le rendu d'un élément
+     */
+    type: _propTypes2.default.oneOf(['icon', 'text', 'image', 'primary-highlight']),
+    /**
+     * Value(s) du select
+     */
+    value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string, _propTypes2.default.array])
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { name: 'HmuiHiSelect' })(HiSelect);