@hipay/hipay-material-ui 3.11.2 → 3.12.0

package/src/HiSelect/HiSelect.js

@@ -0,0 +1,1047 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Scrollbars from 'react-custom-scrollbars';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import HiSelectableList from '../HiSelectableList';
+import HiInput from '../HiForm/HiInput';
+import HiSelectInput from './HiSelectInput';
+import withStyles from '@mui/styles/withStyles';
+import { foldAccents } from '../utils/helpers';
+import HiIcon from '../HiIcon';
+import keycode from 'keycode';
+import classNames from 'classnames';
+import HiAlertModal from '../HiAlertModal';
+import { isMobile } from 'react-device-detect';
+import HiSelectMobile from './HiSelectMobile';
+import { findDOMNode } from 'react-dom';
+
+export const styles = (theme) => ({
+    root: {
+        backgroundColor: theme.palette.background2,
+        width: '100%',
+        position: 'relative',
+    },
+    popper: {
+        zIndex: 1200,
+    },
+    popperWidth: {
+        width: '100% !important',
+    },
+    popperRightAlign: {
+        right: 0,
+        left: 'unset!important',
+    },
+    paper: {
+        borderRadius: '0px 2px',
+        maxHeight: 480,
+        transition: 'none !important',
+    },
+    labelIcon: {
+        marginRight: 10,
+        verticalAlign: 'text-bottom',
+    },
+    labelImg: {
+        height: 18,
+        width: 'auto',
+        margin: '0 4px',
+        verticalAlign: 'text-bottom',
+    },
+    selectIconLabel: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        paddingRight: 16,
+        ...theme.typography.b1,
+        display: 'inline-block',
+        width: '100%',
+    },
+    selectImgLabel: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        paddingRight: 16,
+        ...theme.typography.b1,
+        display: 'inline-flex',
+        width: '100%',
+    },
+    separator: {
+        borderTop: `1px solid ${theme.palette.input.bottomLine}`,
+    },
+});
+
+function filterValue(item, search) {
+    return (
+        search === '' ||
+        foldAccents(item.label.toString().toLowerCase()).search(
+            foldAccents(search.toLowerCase()),
+        ) !== -1
+    );
+}
+
+/**
+ *
+ * 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, ...)
+ * - les actions du clavier son capturés avec KeyDown
+ *
+ * Ce composant réuni les sous-composants
+ * - HiSelectInput : 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
+ */
+class HiSelect extends React.PureComponent {
+    static propTypes = {
+        /**
+         * Affiche une alerte à l'ouverture de la liste
+         */
+        alert: PropTypes.object,
+        align: PropTypes.oneOf(['left', 'right']),
+        /**
+         * Permet de forcer le focus sur le composant
+         */
+        autoFocus: PropTypes.bool,
+        /**
+         * Useful to extend the style applied to components.
+         */
+        classes: PropTypes.object,
+        /**
+         * Popper width
+         */
+        containerWidth: PropTypes.number,
+        /**
+         * Inactif
+         */
+        disabled: PropTypes.bool,
+        /**
+         * Option permettant d'afficher les sélection sous forme de Chip.
+         */
+        displayAsChip: PropTypes.bool,
+        /**
+         * Applique le style error
+         */
+        error: PropTypes.bool,
+        /**
+         * Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
+         */
+        fallbackImage: PropTypes.string,
+        /*
+         * Fonction de filtrage custom
+         */
+        filterFunc: PropTypes.func,
+        /**
+         * Affiche l'élément 'All'
+         */
+        hasAll: PropTypes.bool,
+        /**
+         * Override HiInput props (for search)
+         */
+        hiSearchInputProps: PropTypes.object,
+        /**
+         * Override HiSelectableList props
+         */
+        hiSelectableListProps: PropTypes.object,
+        /**
+         * Override HiSelectInput props
+         */
+        hiSelectInputProps: PropTypes.object,
+        /**
+         * Nom de l'icône
+         */
+        iconAll: PropTypes.string,
+        /**
+         * id du select
+         */
+        id: PropTypes.string,
+        /**
+         * Ajoute un loader
+         */
+        loading: PropTypes.bool,
+        /**
+         * Nombre max d'items affichés
+         */
+        maxOptionsDisplayed: PropTypes.number,
+        /**
+         * Autorise la sélection de plusieurs valeurs
+         */
+        multiple: PropTypes.bool,
+        /**
+         * Nom du champ de formulaire
+         */
+        name: PropTypes.string.isRequired,
+        /**
+         * Fonction de callback appelée lorsqu'on perd le focus
+         */
+        onBlur: PropTypes.func,
+        /**
+         * Fonction de callback qui renvoit la/les valeurs sélectionnées
+         *
+         * @param {object} event
+         * @param {string || array} value
+         */
+        onChange: PropTypes.func.isRequired,
+        /**
+         * Fonction de callback appelée lorsqu'on ferme le select
+         */
+        onClose: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsqu'on survole le champs
+         */
+        onMouseEnter: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsque le curseur quitte le champs
+         */
+        onMouseLeave: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsqu'on vide le champs
+         */
+        onReset: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsque le scroll atteint le bas de la liste
+         */
+        onScrollReachBottom: PropTypes.func,
+        /**
+         * Fonction de callback appelée lorsque le champs de recherche est utilisé
+         */
+        onSearch: PropTypes.func,
+        /**
+         * Listes des options du select
+         */
+        options: PropTypes.array.isRequired,
+        /**
+         * Placeholder affiché lorsque l'input est vide
+         */
+        placeholder: PropTypes.string,
+        /**
+         * Affiche un input de recherche permettant de filtrer les options
+         */
+        searchable: PropTypes.bool,
+        /**
+         * Node qui s'ajoute entre la barre de recherche et la liste de résultats
+         */
+        startAdornment: PropTypes.object,
+        /**
+         * Si true, le contenu du select sera dans une div static plutôt que dans une popper absolute
+         */
+        staticPosition: PropTypes.bool,
+        /**
+         * Traductions (par défaut en anglais)
+         */
+        translations: PropTypes.object,
+        /**
+         * Type des éléments du select, définit le rendu d'un élément
+         */
+        type: PropTypes.oneOf(['icon', 'text', 'image', 'primary-highlight']),
+        /**
+         * Value(s) du select
+         */
+        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
+    };
+
+    static defaultProps = {
+        align: 'left',
+        autoFocus: false,
+        disabled: false,
+        displayAsChip: false,
+        error: false,
+        hasAll: false,
+        hiSelectableListProps: {},
+        hiSelectInputProps: {},
+        hiSearchInputProps: {},
+        multiple: false,
+        placeholder: '',
+        searchable: false,
+        staticPosition: false,
+        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',
+        },
+        type: 'text',
+        filterFunc: filterValue,
+        maxOptionsDisplayed: 12,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            alertOpen: false,
+            open: false,
+            focused: false,
+            searchValue: props.searchValue ? undefined : '',
+            suggestions: props.options,
+            openDown: true,
+            overlayWidth: 0,
+        };
+    }
+
+    componentDidMount() {
+        if (this.props.autoFocus) {
+            this.inputEl.focus();
+        }
+
+        if (this.overlay) {
+            this.setState({ overlayWidth: findDOMNode(this.overlay).clientWidth });
+        }
+    }
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if (nextProps.options !== prevState.suggestions) {
+            return {
+                ...prevState,
+                suggestions: nextProps.options,
+            };
+        }
+        return null;
+    }
+
+    /**
+     * Build itemList & inputValue from select props
+     * @param options
+     * @param value
+     * @param search
+     * @param loading
+     * @returns {{itemList: *[], inputValue: *}}
+     */
+    buildSelectProps = (options, value = [], search = '', loading = false) => {
+        // build item list
+        const itemList = [
+            ...(loading
+                ? [
+                      {
+                          id: '_loading',
+                          type: 'loader',
+                          disabled: true,
+                          centered: true,
+                          hideCheckbox: true,
+                          label: 'loading',
+                      },
+                  ]
+                : []),
+            // simple one level filter on label
+            ...(search !== ''
+                ? [...options.filter((item) => this.props.filterFunc(item, search))]
+                : [
+                      ...(this.props.hasAll
+                          ? [
+                                {
+                                    id: '_all',
+                                    label: this.props.translations.all,
+                                    ...(this.props.iconAll && {
+                                        type: 'icon',
+                                        icon: this.props.iconAll,
+                                    }),
+                                },
+                            ]
+                          : []),
+                      ...options,
+                  ]),
+        ];
+
+        return {
+            itemList,
+            inputValue: this.buildInputValue(options, value, loading),
+        };
+    };
+
+    findRecursively = (arr, id) => {
+        for (let i = 0; i < arr.length; i++) {
+            if (arr[i].id === id) {
+                return arr[i];
+            } else if (arr[i].children && arr[i].children.length) {
+                let found = this.findRecursively(arr[i].children, id);
+                if (found) return found;
+            }
+        }
+    };
+
+    buildInputValue = (options, value = [], loading = false) => {
+        const { classes, hasAll, translations, type } = this.props;
+
+        // build input value
+        let inputValue;
+        if (loading && value.length === 1) {
+            inputValue = translations.one_item_selected;
+        } else if (hasAll && options.length === value.length) {
+            inputValue = translations.all;
+            value.unshift('_all');
+        } else if (value.length > 1) {
+            inputValue = translations.n_items_selected.replace('%s', value.length);
+        } else if (value.length === 1) {
+            const item = this.findRecursively(options, value[0]);
+            if (item === undefined) {
+                inputValue = translations.one_item_selected;
+            } else if (type === 'icon' || item.type === 'icon') {
+                const iconProps = {
+                    className: classes.labelIcon,
+                    color: item.color,
+                };
+                let icon;
+                if (typeof item.icon === 'string') {
+                    icon = <HiIcon icon={item.icon} {...iconProps} />;
+                } else if (typeof item.icon === 'object') {
+                    icon = { ...item.icon };
+                    icon.props = { ...icon.props, ...iconProps };
+                }
+                inputValue = (
+                    <span className={classes.selectIconLabel}>
+                        {icon}
+                        {item.label}
+                    </span>
+                );
+            } else if (type === 'image' || item.type === 'image') {
+                inputValue = (
+                    <span className={classes.selectIconLabel}>
+                        {item.img && (
+                            <img
+                                className={classes.labelImg}
+                                src={item.img}
+                                alt={item.label}
+                                onError={(e) => {
+                                    if (item.fallbackImage) {
+                                        e.target.src = `${item.fallbackImage}`;
+                                    } else {
+                                        e.target.style.display = 'none';
+                                    }
+                                }}
+                            />
+                        )}
+                        {item.label}
+                    </span>
+                );
+            } else {
+                inputValue = item.label;
+            }
+        }
+
+        return inputValue;
+    };
+
+    focusOnFirstItem = () => {
+        if (this.overlay && this.overlay.querySelector('li:not([tabindex^="-"])')) {
+            setTimeout(() => {
+                const item = this.overlay.querySelector('li:not([tabindex^="-"])');
+                item.focus();
+            }, 1);
+        }
+    };
+
+    getInputElement = (el) => {
+        this.searchField = el;
+        if (this.props.inputRef) {
+            this.props.inputRef(this.searchField);
+        }
+    };
+
+    handleBlur = (event) => {
+        this.handleSearchReset();
+        this.setState({ focused: false });
+        if (this.props.onBlur && !this.inputEl.contains(event.relatedTarget) && !this.state.open) {
+            this.props.onBlur(event);
+        }
+    };
+
+    handleClick = (event) => {
+        if (this.state.open) {
+            this.handleClose();
+        } else if (this.props.alert && !this.state.alertOpen) {
+            this.setState({
+                open: false,
+                alertOpen: true,
+            });
+        } else {
+            this.setState({
+                open: true,
+                alertOpen: false,
+            });
+            this.handleSuggestions(this.props.options);
+            if (this.props.onClick) this.props.onClick();
+
+            // Gestion du focus
+            setTimeout(() => {
+                if (!this.props.searchable) {
+                    // Sinon focus sur l'élément sélectionné
+                    this.focusOnSelectedItem(this.props.value);
+                }
+            }, 1);
+        }
+    };
+
+    handleSubmitAlert = () => {
+        this.handleClick();
+    };
+
+    handleCancelAlert = () => {
+        this.handleClose();
+    };
+
+    handleExitedAlert = () => {
+        if (this.searchField) {
+            this.searchField.focus();
+        }
+    };
+
+    handleCloseAlert = () => {
+        this.handleClose();
+    };
+
+    focusOnSelectedItem = (selectedValue) => {
+        if (this.overlay && this.overlay.querySelector('li:not([tabindex^="-"])')) {
+            setTimeout(() => {
+                if (this.overlay) {
+                    // On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
+                    let item = this.overlay.querySelector('li:not([tabindex^="-"])');
+                    if (selectedValue && typeof selectedValue === 'string') {
+                        item = this.overlay.getElementsByTagName('li').namedItem(selectedValue);
+                    } else if (selectedValue && typeof selectedValue === 'number') {
+                        item =
+                            this.overlay.querySelector('li:not([tabindex^="-"])')[
+                                selectedValue - 1
+                            ];
+                    }
+                    if (item) {
+                        item.focus();
+                    }
+                }
+            }, 1);
+        }
+    };
+
+    handleClickAway = (event) => {
+        // Au clic sur le bouton, on laisse le handleClick fermer le select
+        if (!this.inputEl.contains(event.target)) {
+            this.handleClose(event);
+        }
+    };
+
+    handleClose = () => {
+        this.handleSearchReset();
+        this.setState({
+            open: false,
+            alertOpen: false,
+        });
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+        if (this.inputEl) {
+            setTimeout(() => {
+                this.inputEl.focus();
+            }, 100);
+        }
+    };
+
+    handleFocus = () => {
+        this.setState({ focused: true });
+    };
+
+    // Stop the propagation of the event before it reach the childrens
+    handleKeyDownCapture = (event) => {
+        const key = keycode(event);
+        if (key === 'enter') {
+            if (this.state.open) {
+                if (this.props.multiple) {
+                    event.stopPropagation();
+                    this.handleClose();
+                }
+            }
+        }
+    };
+
+    // Key down on input
+    handleKeyDown = (event) => {
+        const key = keycode(event);
+        if (!this.state.alertOpen) {
+            if (event.target === this.inputEl && this.state.open && key === 'down') {
+                // Focus on list 1st item
+                event.stopPropagation();
+                event.preventDefault();
+                const firstLi = document.querySelector(`#${this.props.id} + div ul > li`);
+                if (!!firstLi) {
+                    firstLi.focus();
+                }
+            } else if (key === 'esc' && this.state.open) {
+                event.stopPropagation();
+                event.preventDefault();
+                this.handleClose();
+            } else if (key === 'enter') {
+                if (this.state.open) {
+                    if (this.props.multiple) {
+                        this.handleClose();
+                    }
+                }
+            } else if (key === 'space' && event.target !== this.searchField) {
+                event.preventDefault();
+            } else if (key === 'tab' && (this.state.open || this.state.alertOpen)) {
+                event.stopPropagation();
+                this.handleClose();
+            } else if (key === 'down' && event.target.id.includes('_subheader')) {
+                // Focus on parent, next item is child
+                if (document.querySelector(`#group-${event.target.id} li:nth-child(1)`)) {
+                    document.querySelector(`#group-${event.target.id} li:nth-child(1)`).focus();
+                }
+            } else if (key === 'down' && !event.target.nextSibling) {
+                // Focus on parent, next item is child
+                if (document.getElementById(event.target.dataset.group)?.nextSibling?.nextSibling) {
+                    document
+                        .getElementById(event.target.dataset.group)
+                        .nextSibling.nextSibling.focus();
+                }
+            } else if (key === 'up') {
+                if (event.target.previousSibling === null && !!event.target.dataset.group) {
+                    // Previous item is parent item
+                    document.getElementById(event.target.dataset.group).focus();
+                } else if (!!event.target.previousSibling && !event.target.dataset.group) {
+                    // On parent, go to previous (last) child
+                    if (event.target.previousSibling.querySelector('li:last-child')) {
+                        event.target.previousSibling.querySelector('li:last-child').focus();
+                    }
+                }
+            }
+        }
+    };
+
+    // Key down on search input
+    handleKeyDownSearch = (event) => {
+        const key = keycode(event);
+        if (this.overlay && (key === 'down' || key === 'up')) {
+            this.focusOnFirstItem();
+        } else if (this.overlay && (key === 'esc' || key === 'enter')) {
+            event.preventDefault();
+            this.handleClose();
+        } else if (key === 'tab') {
+            this.setState({ open: false });
+        }
+    };
+
+    /**
+     * Call onScrollReachBottom
+     * @param e
+     */
+    handleScroll = (e) => {
+        if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
+            this.props.onScrollReachBottom();
+        }
+    };
+
+    /**
+     * Call onChange with the updated value
+     *
+     * - handle single value
+     * - handle multiple value
+     * - handle '_all' id
+     *
+     * @param event
+     * @param item
+     */
+    handleSelect = (event, item) => {
+        const { hasAll, multiple, onChange, options, value } = this.props;
+
+        if (!multiple) {
+            // This is a fix to prevent select open after select => TODO improve ?
+            setTimeout(() => {
+                // single value
+                this.handleClose();
+            }, 1);
+            onChange(event, item.id, item);
+        } else if (hasAll && item.id === '_all') {
+            if (value.length === options.length) {
+                // unselect _all options
+                onChange(event, [], item);
+            } else {
+                // select _all options
+                onChange(
+                    event,
+                    options.map((option) => option.id),
+                    item,
+                );
+            }
+        } else if (isMobile && multiple) {
+            // Array of selected values
+            onChange(
+                event,
+                item.map((option) => option.id),
+                item,
+            );
+        } else if (value.includes(item.id)) {
+            // unselect item
+            onChange(
+                event,
+                value.filter((id) => id !== item.id),
+                item,
+            );
+        } else {
+            onChange(event, [...value, item.id], item);
+        }
+    };
+
+    /**
+     * Update suggestions list
+     * - add '_no_result' item if suggestion list is empty
+     * - add '_all' item if suggestion list is complete
+     * @param suggestions
+     */
+    handleSuggestions = (suggestions) => {
+        const { hasAll, iconAll, translations } = this.props;
+
+        if (suggestions.length === 0) {
+            // Add '_no_result' suggestion
+            this.setState((prevState) => ({
+                ...prevState,
+                suggestions: [
+                    {
+                        id: '_no_result',
+                        type: 'text',
+                        disabled: true,
+                        centered: true,
+                        hideCheckbox: true,
+                        label: translations.no_result_match,
+                    },
+                ],
+            }));
+        } else {
+            this.setState({
+                suggestions: [
+                    // Add '_all' suggestion
+                    ...(hasAll
+                        ? [
+                              {
+                                  id: '_all',
+                                  label: translations.all,
+                                  ...(iconAll && {
+                                      type: 'icon',
+                                      icon: iconAll,
+                                  }),
+                              },
+                          ]
+                        : []),
+                    ...suggestions,
+                ],
+            });
+        }
+    };
+
+    handleSearch = (e, inputValue) => {
+        const searchValue = inputValue && e.target.value ? inputValue : e.target.value;
+        if (this.props.onSearch) {
+            this.props.onSearch(e, searchValue);
+        } else {
+            this.setState({
+                searchValue,
+            });
+        }
+    };
+
+    handleSearchReset = () => {
+        this.handleSearch({ target: { value: '' } }, '');
+    };
+
+    getLengthItemList = (itemList) => {
+        let itemListLength = 0;
+        itemList.forEach((parent) => {
+            if (parent.displayed !== false) {
+                itemListLength += 1;
+                if (parent.children) {
+                    itemListLength += this.getLengthItemList(parent.children);
+                }
+            }
+        });
+        return itemListLength;
+    };
+
+    renderScrollbarTrackHorizontal = (props) => {
+        const { style, ...otherProps } = props;
+
+        const inlineStyle = {
+            ...style,
+            zIndex: 10,
+            right: 2,
+            bottom: 2,
+            left: 2,
+            borderRadius: 3,
+        };
+
+        return <div {...props} style={inlineStyle} />;
+    };
+
+    renderScrollbarTrackVertical = (props) => {
+        const { style, ...otherProps } = props;
+
+        const inlineStyle = {
+            ...style,
+            zIndex: 10,
+            right: 2,
+            bottom: 2,
+            top: 2,
+            borderRadius: 3,
+        };
+
+        return <div {...props} style={inlineStyle} />;
+    };
+
+    render() {
+        const {
+            alert,
+            classes,
+            disabled,
+            error,
+            loading,
+            options,
+            searchable,
+            displayAsChip,
+            type,
+            value,
+            multiple,
+            translations,
+            hiSearchInputProps,
+            hiSelectableListProps,
+            hiSelectInputProps,
+            id,
+            onScrollReachBottom,
+            onSubmit,
+            placeholder,
+            searchValue = this.state.searchValue,
+            startAdornment,
+            staticPosition,
+            maxOptionsDisplayed,
+            buildSelectProps = this.buildSelectProps, // use parent builder if defined
+        } = this.props;
+
+        const { alertOpen, open, focused } = this.state;
+
+        if (multiple) {
+            if (!Array.isArray(value)) {
+                throw new Error(
+                    'HiPay Material-UI: the `value` property must be an array ' +
+                        'when using the `HiSelect` component with `multiple`.',
+                );
+            }
+        }
+
+        let selectedItemIdList = [];
+        if (value) {
+            selectedItemIdList = multiple ? [...value] : [value];
+        }
+
+        const {
+            itemList,
+            inputValue = this.buildInputValue(options, selectedItemIdList, loading),
+        } = buildSelectProps(options, selectedItemIdList, searchValue, loading);
+
+        let popperStyle = {
+            position: staticPosition ? 'relative' : 'fix',
+            top: 0,
+            left: 0,
+        };
+        if (this.props.containerWidth > 0) {
+            popperStyle = { width: this.props.containerWidth };
+            if (!staticPosition) {
+                popperStyle.position = 'absolute';
+            }
+        }
+
+        const popperClass = classNames(classes.popper, {
+            [classes.popperWidth]: !this.props.containerWidth,
+            [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right',
+        });
+
+        const searchInput = (position) => {
+            if (searchable) {
+                return (
+                    <HiInput
+                        value={searchValue}
+                        autoFocus
+                        inputRef={this.getInputElement}
+                        onKeyDown={this.handleKeyDownSearch}
+                        onChange={this.handleSearch}
+                        onReset={this.handleSearchReset}
+                        placeholder={translations.search}
+                        startAdornment={'search'}
+                        tabIndex={0}
+                        className={classNames({ [classes.separator]: position === 'top' })}
+                        {...hiSearchInputProps}
+                    />
+                );
+            }
+            return null;
+        };
+
+        // Replace popper onSearch when popper displayed on top of selectButton
+        if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
+            // In case we have a nested list
+            const itemListLength = this.getLengthItemList(itemList);
+            // +1 for search input
+            const nbItems =
+                itemListLength <= maxOptionsDisplayed - 2
+                    ? itemListLength + 1
+                    : maxOptionsDisplayed - 1;
+            popperStyle.transform = `translate3d(-1px, -${nbItems * 40 + 2}px, 0px)`;
+        } else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
+            popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
+        }
+
+        const content = ({ placement }) => {
+            if (placement !== this.placement) {
+                this.placement = placement;
+            }
+            const nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
+            const autoHeightMax = nbItemsDisplayed * 40 - 10;
+            return (
+                <ClickAwayListener onClickAway={this.handleClickAway}>
+                    <Grow in={open} id="menu-list" style={{ transformOrigin: '0 0 0' }}>
+                        <Paper
+                            style={
+                                maxOptionsDisplayed < 12
+                                    ? { maxHeight: 40 * maxOptionsDisplayed }
+                                    : {}
+                            }
+                            className={classes.paper}
+                        >
+                            {((this.placement && this.placement.indexOf('bottom') >= 0) ||
+                                staticPosition) &&
+                                searchInput('bottom')}
+                            {startAdornment}
+                            <Scrollbars
+                                renderTrackHorizontal={this.renderScrollbarTrackHorizontal}
+                                renderTrackVertical={this.renderScrollbarTrackVertical}
+                                ref={(contentEl) => {
+                                    this.optionsContent = contentEl;
+                                }}
+                                autoHeight
+                                autoHeightMax={autoHeightMax}
+                                {...(onScrollReachBottom && {
+                                    onScroll: this.handleScroll,
+                                })}
+                            >
+                                <HiSelectableList
+                                    type={type}
+                                    itemList={itemList}
+                                    onSelect={this.handleSelect}
+                                    selectedItemIdList={selectedItemIdList}
+                                    fallbackImage={this.props.fallbackImage}
+                                    overlay={this.overlay}
+                                    value={value}
+                                    {...hiSelectableListProps}
+                                />
+                            </Scrollbars>
+                            {this.placement &&
+                                this.placement.indexOf('top') >= 0 &&
+                                !staticPosition &&
+                                searchInput('top')}
+                        </Paper>
+                    </Grow>
+                </ClickAwayListener>
+            );
+        };
+
+        return !isMobile ? (
+            <div
+                className={classes.root}
+                ref={(el) => {
+                    this.overlay = el;
+                }}
+                onKeyDown={this.handleKeyDown}
+                onKeyDownCapture={this.handleKeyDownCapture}
+            >
+                {alert && (
+                    <HiAlertModal
+                        open={alertOpen}
+                        title={alert.title}
+                        content={alert.content}
+                        onSubmitClick={this.handleSubmitAlert}
+                        onCancelClick={this.handleCancelAlert}
+                        onClose={this.handleCloseAlert}
+                        onExited={this.handleExitedAlert}
+                        labelSubmitButton={alert.submitButton}
+                        labelCancelButton={alert.cancelButton}
+                    />
+                )}
+                <HiSelectInput
+                    id={id}
+                    value={inputValue}
+                    open={open}
+                    focused={focused}
+                    type={type}
+                    disabled={disabled}
+                    noButton={displayAsChip}
+                    error={error}
+                    onClick={this.handleClick}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    onSubmit={onSubmit}
+                    onMouseEnter={this.props.onMouseEnter}
+                    onMouseLeave={this.props.onMouseLeave}
+                    onReset={this.props.onReset}
+                    placeholder={placeholder}
+                    {...hiSelectInputProps}
+                    refElement={(el) => {
+                        this.inputEl = el;
+                    }}
+                />
+                {open && staticPosition ? (
+                    <div style={popperStyle} className={popperClass}>
+                        {content({})}
+                    </div>
+                ) : (
+                    <Popper
+                        anchorEl={this.inputEl}
+                        placement="bottom-start"
+                        open={open}
+                        className={popperClass}
+                        disablePortal
+                        style={popperStyle}
+                    >
+                        {content}
+                    </Popper>
+                )}
+            </div>
+        ) : (
+            <div
+                ref={(el) => {
+                    this.overlay = el;
+                }}
+            >
+                <HiSelectInput
+                    id={id}
+                    value={inputValue}
+                    open={open}
+                    focused={focused}
+                    type={type}
+                    disabled={disabled}
+                    noButton={displayAsChip}
+                    error={error}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    onMouseEnter={this.props.onMouseEnter}
+                    onMouseLeave={this.props.onMouseLeave}
+                    onReset={this.props.onReset}
+                    placeholder={placeholder}
+                    {...hiSelectInputProps}
+                    refElement={(el) => {
+                        this.inputEl = el;
+                    }}
+                />
+                <HiSelectMobile
+                    onChange={this.handleSelect}
+                    multiple={multiple}
+                    id={id}
+                    itemList={itemList}
+                    value={value}
+                    width={this.state.overlayWidth}
+                />
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { hiComponent: true, name: 'HmuiHiSelect' })(HiSelect);