@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.26

package/HiTable/HiTableFooter.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -78,6 +82,11 @@ var HiTableFooter = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiTableFooter, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,

package/HiTable/HiTableHead.js

@@ -13,6 +13,10 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -163,13 +167,13 @@ var HiTableHead = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableHead.__proto__ || (0, _getPrototypeOf2.default)(HiTableHead)).call(this));
 
+        _this.orderColumnsAnchorEl = null;
         _this.orderColumnsButton = null;
 
 
         _this.state = {
             hovered: false,
-            openedOrderColumns: false,
-            orderColumnsAnchorEl: null
+            openedOrderColumns: false
         };
 
         _this.handleEvent = _this.handleEvent.bind(_this);
@@ -179,6 +183,11 @@ var HiTableHead = function (_React$Component) {
     }
 
     (0, _createClass3.default)(HiTableHead, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'handleEvent',
         value: function handleEvent(_ref) {
             var type = _ref.type;
@@ -196,9 +205,9 @@ var HiTableHead = function (_React$Component) {
         key: 'handleOpenOrderColumns',
         value: function handleOpenOrderColumns() {
             this.setState({
-                openedOrderColumns: true,
-                orderColumnsAnchorEl: (0, _reactDom.findDOMNode)(this.orderColumnsButton)
+                openedOrderColumns: true
             });
+            this.orderColumnsAnchorEl = (0, _reactDom.findDOMNode)(this.orderColumnsButton);
         }
     }, {
         key: 'handleCloseOrderColumns',
@@ -240,8 +249,7 @@ var HiTableHead = function (_React$Component) {
                 fixedColumnWidth = _props.fixedColumnWidth;
             var _state = this.state,
                 hovered = _state.hovered,
-                openedOrderColumns = _state.openedOrderColumns,
-                orderColumnsAnchorEl = _state.orderColumnsAnchorEl;
+                openedOrderColumns = _state.openedOrderColumns;
 
 
             var headerProps = (0, _extends3.default)({
@@ -343,7 +351,7 @@ var HiTableHead = function (_React$Component) {
                         orderable && _react2.default.createElement(_OrderColumns2.default, {
                             isOpen: openedOrderColumns,
                             onClose: this.handleCloseOrderColumns,
-                            anchorEl: orderColumnsAnchorEl,
+                            anchorEl: this.orderColumnsAnchorEl,
                             updateOrderedColumns: onColumnsOrderUpdate,
                             columns: columns,
                             orderedColumns: orderedColumns,

package/HiTopBar/HiTopBar.js

@@ -245,6 +245,12 @@ var HiTopBar = function (_React$Component) {
         value: function handleClickMenu() {
             this.props.onClickReturn();
         }
+
+        //TODO : Cyclic reference passed.
+        /*shouldComponentUpdate(nextProps, nextState){
+          return JSON.stringify(this.props) !== JSON.stringify(nextProps);
+        }*/
+
     }, {
         key: 'render',
         value: function render() {

package/README.md

@@ -5,12 +5,14 @@ Voici la documentation du site HiPay Material-UI.
 Avant de commencer, il faut vous familiariser avec REACT :
 - https://reactjs.org/
 - https://reactjs.org/docs/optimizing-performance.html
+
 Et connaitres les [best practices](#best-practices)
 
 
 ## Lancer le projet
 
 #### Via docker
+
 Il faut que sur votre poste soit installés
 - [Docker](https://www.docker.com/community-edition) (minimum version 17)
 - [Docker Compose](#https://docs.docker.com/compose/install/) (minimum version 1.13.0)
@@ -27,6 +29,7 @@ Le site est dispo à cette URL:
 [http://localhost:3222](http://localhost:3222)
 
 #### En local
+
 Il faut que sur votre poste soit installés
 - [node](https://nodejs.org/fr/) (minimum version LTS 8.9.4)
 - [npm](https://www.npmjs.com/) (minimum version 5.6.0)
@@ -115,10 +118,50 @@ git flow feature start PSYCHE-XXX
 - Les [tests unitaires](#tests) doivent passer
 - La [génération des apis](#generation-des-apis) aussi
 - Le code doit être bien formatter : [ESLint - Prettier](#esLint-prettier)
-- commit + push
+- Commit - suivant les conventions de rédaction des messages de commit
+- Push
 - Faire la demande de merge request sur la develop
 - La revue se fera par un membre de l'équipe PSYCHE
 
+##### Conventional Changelog
+
+(optionel) installer [commitizen](https://github.com/commitizen/cz-cli) pour s'assurer de commiter selon la convention
+```sh
+npm install commitizen -g
+```
+
+
+Voici un squelette d’exemple de message de commit conventionnel :
+```
+<type de tâche>(<périmètre>): message court
+
+Description complémentaire/complète
+
+Référence/action sur un ticket définissant cette tâche
+ ```
+
+ On facilite ainsi la lecture du log d’une part, la génération automatique du changelog (ou release notes) d’autre part
+
+Types de tâche:
+- <b>fix</b>  : commit d'une correction de bug. Se traduit en <b>PATCH</b> dans le changelog
+- <b>feat</b> : commit d'une nouvelle feature. Se traduit en <b>MINOR</b> dans le changelog
+- <b>test</b> : commit d'un ajout ou d'une maj de tests
+- <b>docs</b> : commit d'un ajout ou d'une maj de la documentation OU de l'app de démonstration
+- <b>perf</b> : commit concernant l'amélioration des performances
+
+<b>BREAKING CHANGE</b> : si un commit introduit un BREAKING CHANGE, on doit ajouter le tag BREAKING CHANGE dans le corps du commit. Ce commit peut être de n'importe quel type mais il est préférable qu'il soit lié à une feature. Se traduit en <b>MAJOR</b> dans le changelog
+
+Périmètre (optionel): nom du composant, type de tests, page de la doc
+
+ Exemple:
+ ```
+ feat(HiTable): add children rows management
+
+Handle children rows as subtable based on the same columns as parents.
+
+PSYCHE-XX
+ ```
+
 ## Génération des apis
 ```sh
 npm run docs:api
@@ -178,12 +221,18 @@ Le projet est publié sur un repo privé npm : https://www.npmjs.com/package/@hi
 
 #### Publier une nouvelle version
 
-1. Changer la version dans package.json
-2. Build
+Avoir installé [conventional-changelog-cli](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-cli) pour générer le CHANGELOG à partir des commits git.
 ```sh
-npm run build
+npm install -g conventional-changelog-cli
+npm install -g cz-conventional-changelog
 ```
-3. Publish
+
+1. Changer la version dans package.json
+2. Générer le fichier HI-CHANGELOG.md : ```npm run changelog```
+3. Commiter la release : ```git ci -am "chore(release): VERSION DATE```
+4. Build : ```npm run build```
+5. Publish :
+
 ```sh
 cd build
 npm login
@@ -192,7 +241,24 @@ npm login
 npm publish
 ```
 
-# Si ERR d'authenitifcation
+#### [Semantic Versioning](https://semver.org/)
+
+Une version MAJOR.MINOR.PATCH, correspond a:
+
+- MAJOR version introduisant des évolutions non retro-compatibles (API changes...),
+- MINOR version introduisant des évolutions retro-compatibles, la sortie des versions mineures est basé sur les sprints de la tribu PSYCHE
+- PATCH version corrigeant des bugs
+Des tags additionels peuvent être ajouter selon le contexte (ex: 1.0.0-beta.24).
+
+En production, chaque releases (MAJOR, MINOR & PATCH) doit faire l'objet d'une communication interne aux tribus utilisatrices.
+
+Les projets peuvent se baser sur une version MINOR: ```^2.5.0```, ce qui signifient "compatible avec la version 2.5.0".
+
+Ainsi les PATCH seront automatiquement pris en compte.
+L'intégration d'une MINOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md).
+Le passage à une autre MAJOR doit faire l'objet d'une recette (voir HI-CHANGELOG.md BREAKING CHANGE).
+
+# Si ERR d'authentification
 npm adduser
 admin
 admin123

package/es/HiChip/HiChip.js

@@ -27,14 +27,24 @@ export const styles = theme => ({
         },
         '&$deletable': {
             paddingRight: 4
+        },
+        '&$leftIccon': {
+            paddingLeft: 4
         }
     }),
     leftNavigation: {},
     rightNavigation: {},
     deletable: {},
+    leftIccon: {},
     icon: {
         marginRight: 4
     },
+    iconClickable: {
+        cursor: 'pointer',
+        '&:hover, &:focus': {
+            color: theme.palette.business.primary.normal
+        }
+    },
     eraseIcon: {
         // Remove grey highlight
         WebkitTapHighlightColor: 'transparent',
@@ -78,7 +88,24 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, id, img, onPrevious, onNext, onDelete, prefix } = props;
+    const {
+        label,
+        classes,
+        icon,
+        id,
+        img,
+        onPrevious,
+        onNext,
+        onDelete,
+        prefix,
+        onIconClick,
+        title,
+        titleDelete,
+        titleIcon,
+        titleImg,
+        titleNext,
+        titlePrevious
+    } = props;
 
     return React.createElement(
         'div',
@@ -87,8 +114,10 @@ function HiChip(props) {
             className: classNames(classes.root, {
                 [classes.leftNavigation]: onPrevious,
                 [classes.rightNavigation]: onNext,
-                [classes.deletable]: onDelete
-            })
+                [classes.deletable]: onDelete,
+                [classes.leftIccon]: icon
+            }),
+            title: title
         },
         prefix && React.createElement(
             'span',
@@ -96,13 +125,22 @@ function HiChip(props) {
             prefix,
             ' : '
         ),
-        img && React.createElement('img', { className: classes.badge, src: img, alt: img }),
-        icon && React.createElement(HiIconBuilder, { className: classes.icon, icon: icon, size: 16 }),
+        img && React.createElement('img', { className: classes.badge, src: img, alt: img, title: titleImg }),
+        icon && React.createElement(HiIconBuilder, {
+            className: classNames(classes.icon, {
+                [classes.iconClickable]: onIconClick
+            }),
+            icon: icon,
+            size: 16,
+            onClick: onIconClick,
+            title: titleIcon
+        }),
         onPrevious && React.createElement(HiIconBuilder, {
             className: classNames(classes.navigate),
             icon: 'menuLeft',
             onClick: onPrevious,
-            size: 16
+            size: 16,
+            title: titlePrevious
         }),
         React.createElement(
             'span',
@@ -113,13 +151,15 @@ function HiChip(props) {
             className: classNames(classes.navigate),
             icon: 'menuRight',
             onClick: onNext,
-            size: 16
+            size: 16,
+            title: titleNext
         }),
         onDelete && React.createElement(HiIconBuilder, {
             classes: { root: classes.eraseIcon },
             icon: 'closeCircle',
             onClick: onDelete,
-            size: 16
+            size: 16,
+            title: titleDelete
         })
     );
 }
@@ -149,6 +189,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Fonction de callback au clic sur l'icon close si cancelable = true
      */
     onDelete: PropTypes.func,
+    /**
+     * Fonction de callback au clic sur l'icon à gauche
+     */
+    onIconClick: PropTypes.func,
     /**
      * Fonction de callback au clic sur l'icon next
      */
@@ -156,7 +200,35 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Fonction de callback au clic sur l'icon previous
      */
-    onPrevious: PropTypes.func
+    onPrevious: PropTypes.func,
+    /**
+     * Préfixe dans le HiChip
+     */
+    prefix: PropTypes.string,
+    /**
+     * Titre du chip
+     */
+    title: PropTypes.string,
+    /**
+     * Titre de l'icône supprimer
+     */
+    titleDelete: PropTypes.string,
+    /**
+     * Titre de l'icône
+     */
+    titleIcon: PropTypes.string,
+    /**
+     * Titre de la balise img
+     */
+    titleImg: PropTypes.string,
+    /**
+     * Titre de la navigation suivante
+     */
+    titleNext: PropTypes.string,
+    /**
+     * Titre de la navigation précédente
+     */
+    titlePrevious: PropTypes.string
 } : {};
 
 export default withStyles(styles, { name: 'HmuiHiChip' })(HiChip);

package/es/HiDatePicker/HiDateRangePicker.js

@@ -27,6 +27,7 @@ class HiDateRangePicker extends React.Component {
         super();
 
         this.handleInputChange = inputName => event => {
+            this.event = event;
             this.props.onChange(inputName, event.target.value);
         };
 
@@ -34,6 +35,13 @@ class HiDateRangePicker extends React.Component {
             this.setState({ focusedInput: name });
         };
 
+        this.handleDayPickerBlur = name => () => {
+            this.setState({ focusedInput: '' });
+            if (this.props.onBlur) {
+                this.props.onBlur(name);
+            }
+        };
+
         this.state = {
             fromCurrentMonth: props.from ? props.from : new Date(),
             toCurrentMonth: props.to ? props.to : new Date(),
@@ -100,11 +108,7 @@ class HiDateRangePicker extends React.Component {
     }
 
     handleReset(name) {
-        if (name === 'from') {
-            this.handleCurrentMonthChange(name, new Date());
-        } else {
-            this.handleCurrentMonthChange(name, this.props.from);
-        }
+        this.handleCurrentMonthChange(name, new Date());
 
         this.timeout = setTimeout(() => {
             if (this.props.onReset) {
@@ -122,7 +126,12 @@ class HiDateRangePicker extends React.Component {
                     if (name === 'from' && this.toInput) {
                         this.toInput.getInput().focus();
                     } else if (name === 'to') {
-                        document.activeElement.blur();
+                        if (typeof this.event === 'undefined' || this.event && this.event.type !== 'change') {
+                            // trigger blur only if user clicks on date into calendar
+                            // else keep focus to see day selection into calendar
+                            document.activeElement.blur();
+                        }
+                        delete this.event;
                     }
                 }
             } else {
@@ -222,10 +231,6 @@ class HiDateRangePicker extends React.Component {
         }
     }
 
-    handleDayPickerBlur() {
-        this.setState({ focusedInput: '' });
-    }
-
     openPanel(name, panel) {
         this.setState({
             [`${name}OpenedPanel`]: panel
@@ -479,7 +484,7 @@ class HiDateRangePicker extends React.Component {
                 {
                     className: classes.fromInput,
                     onFocus: this.handleDayPickerFocus('from'),
-                    onBlur: this.handleDayPickerBlur
+                    onBlur: this.handleDayPickerBlur('from')
                 },
                 React.createElement(
                     'div',
@@ -507,7 +512,7 @@ class HiDateRangePicker extends React.Component {
                 {
                     className: toClass,
                     onFocus: this.handleDayPickerFocus('to'),
-                    onBlur: this.handleDayPickerBlur
+                    onBlur: this.handleDayPickerBlur('to')
                 },
                 React.createElement(DayPickerInput, {
                     ref: el => {
@@ -604,10 +609,18 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     minimumDate: PropTypes.instanceOf(Date),
     /**
      * Callback à la sélection d'une date
+     * @param {string} nom de l'input
+     */
+    onBlur: PropTypes.func,
+    /**
+     * Callback à la sélection d'une date
+     * @param {string} nom du champs
+     * @param {string} nouvelle valeur du champs
      */
     onChange: PropTypes.func,
     /**
      * Callback au reset de l'input
+     * @param {string} nom du champs réinitialisé
      */
     onReset: PropTypes.func,
     /**

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -42,13 +42,13 @@ export function buildDateRangeOptionByKey(key, t, format) {
             label = t.current_week;
             from = moment().startOf('week');
             to = moment();
-            info = `${t.week} ${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
+            info = `${t.short_week}${from.format('w')}, \n ${from.format(format)} ${t.to_now}`;
             break;
         case 'pw':
             label = t.previous_week;
             from = moment().subtract(1, 'week').startOf('week');
             to = moment().subtract(1, 'week').endOf('week');
-            info = `${t.week} ${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
+            info = `${t.short_week}${from.format('w')}, ${from.format(format)} ${t.to} ${to.format(format)}`;
             break;
         case 'cm':
             label = t.current_month;
@@ -146,6 +146,15 @@ class HiDateRangeSelector extends React.Component {
         this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
     }
 
+    static getDerivedStateFromProps(props, state) {
+        if (props.defaultPreset && props.returnSelectValue) {
+            return {
+                selectedPreset: props.defaultPreset
+            };
+        }
+        return null;
+    }
+
     componentDidMount() {
         if (this.container) {
             this.setState({ containerWidth: findDOMNode(this.container).clientWidth });
@@ -250,6 +259,7 @@ HiDateRangeSelector.defaultProps = {
         month: 'Month',
         quarter: 'Quarter',
         week: 'Week',
+        short_week: 'W',
         year: 'Year',
         days: 'days',
         custom_period: 'Custom Period',

package/es/HiForm/HiInput.js

@@ -153,6 +153,7 @@ class HiInput extends React.PureComponent {
         if (this.props.onReset) {
             this.props.onReset();
         }
+        this.inputElement.focus();
     }
 
     handleBlur(event) {

package/es/HiForm/HiPasswordField.js

@@ -11,9 +11,9 @@ import HiTextField from './HiTextField';
 export const styles = theme => ({
     inputPassword: {
         fontWeight: 'bolder',
-        fontFamily: 'Verdana, sans-serif',
+        fontFamily: 'inherit',
         letterSpacing: '4px',
-        fontSize: 25
+        fontSize: '1.6rem'
     }
 });
 

package/es/HiPins/HiPins.js

@@ -10,7 +10,7 @@ export const styles = theme => ({
         display: 'inline-block',
         padding: '0 9px',
         height: 16,
-        lineHeight: '16px',
+        lineHeight: '18px',
         minWidth: 25,
         textAlign: 'center',
         borderRadius: '45px',
@@ -33,9 +33,9 @@ export const styles = theme => ({
  *
  */
 function HiPins(props) {
-    const { classes, children, color, onClick, className } = props;
+    const { classes, theme, children, color = props.theme.palette.business.primary.normal, onClick, className } = props;
 
-    const textColor = getContrastedTextColor(color, props.theme.palette.neutral.dark, '#FFF');
+    const textColor = getContrastedTextColor(color, theme.palette.neutral.dark, '#FFF');
 
     const divProps = {
         style: { backgroundColor: color, color: textColor }
@@ -59,7 +59,7 @@ HiPins.propTypes = process.env.NODE_ENV !== "production" ? {
     children: PropTypes.node.isRequired,
     classes: PropTypes.object.isRequired,
     className: PropTypes.string,
-    color: PropTypes.string.isRequired,
+    color: PropTypes.string,
     onClick: PropTypes.func
 } : {};
 export default withStyles(styles, { withTheme: true, name: 'HmuiHiPins' })(HiPins);

package/es/HiSelect/HiSelect.js

@@ -78,7 +78,7 @@ class HiSelect extends React.PureComponent {
             hierarchySelected: {},
             hierarchy: {},
             nbOptions: 0,
-            dynamic: false
+            dynamic: props.dynamic || false
         };
 
         // Check if value is in options
@@ -121,7 +121,7 @@ class HiSelect extends React.PureComponent {
                 }
             });
             this.state.nbOptions = optionsLength;
-        } else {
+        } else if (!props.dynamic) {
             this.state.dynamic = true;
         }
 
@@ -223,10 +223,11 @@ class HiSelect extends React.PureComponent {
             id,
             placeholder,
             staticPosition,
-            pinnedItem
+            pinnedItem,
+            hasAll
         } = this.props;
 
-        const { open, suggestions, focused } = this.state;
+        const { open, suggestions, focused, dynamic } = this.state;
 
         let display = '';
         const selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
@@ -249,26 +250,27 @@ class HiSelect extends React.PureComponent {
             });
         }
 
-        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) {
+        if ((dynamic || loading) && selectedIdList.length === 1) {
+            display = translations.one_item_selected;
+        } else if ((this.state.nbOptions !== selectedIdList.length || !hasAll) && selectedIdList.length > 1) {
             display = translations.n_items_selected.replace('%s', selectedIdList.length);
-        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions >= 1) {
+        } else if (this.state.nbOptions === selectedIdList.length && this.state.nbOptions > 1) {
             display = translations.all;
         } else if (selectedIdList.length === 1) {
-            if (type !== 'icon') {
-                let item = options.find(o => o.id === selectedIdList[0]);
-                if (!item && pinnedItem) {
+            let item = options.find(o => o.id === selectedIdList[0]);
+            if (item === undefined) {
+                display = translations.one_item_selected;
+            } else if (type !== 'icon') {
+                if (pinnedItem) {
                     item = pinnedItem;
                 }
                 display = item.label;
             } else {
-                const optionSelected = options.find(o => o.id === selectedIdList[0]);
                 display = React.createElement(
                     'span',
                     { className: classes.selectIconLabel },
-                    React.createElement(HiIconBuilder, { icon: optionSelected.icon, className: classes.labelIcon }),
-                    optionSelected.label
+                    React.createElement(HiIconBuilder, { icon: item.icon, className: classes.labelIcon }),
+                    item.label
                 );
             }
         }
@@ -402,6 +404,7 @@ HiSelect.defaultProps = {
     hierarchic: false,
     parentItemSelectable: false,
     displayAsChip: false,
+    dynamic: false,
     icon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     parentIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
     hoverIcon: React.createElement(CheckboxBlankOutline, { style: { width: 20, height: 20 } }),
@@ -632,9 +635,9 @@ var _initialiseProps = function () {
                 }
             }
             this.setState({ hierarchySelected: hiSelected });
-            onChange(event, valueList);
+            onChange(event, valueList, item);
         } else {
-            onChange(event, item.id);
+            onChange(event, item.id, item);
             this.handleClose();
         }
     };
@@ -701,6 +704,12 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * Option permettant d'afficher les sélection sous forme de Chip.
      */
     displayAsChip: PropTypes.bool,
+    /**
+     * Option permettant de définir si les options du select sont dynamiques.
+     * Si les options du select sont initialisées à vide, alors ce sera mis à true
+     * automatiquement.
+     */
+    dynamic: PropTypes.bool.isRequired,
     /**
      * Applique le style error
      */