@hipay/hipay-material-ui 3.12.1 → 3.12.2

package/src/HiSelect/HiSelect.js

@@ -1,1047 +0,0 @@
-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);