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

package/HiChip/HiChip.js

@@ -115,6 +115,7 @@ function HiChip(props) {
     var label = props.label,
         classes = props.classes,
         icon = props.icon,
+        id = props.id,
         img = props.img,
         onPrevious = props.onPrevious,
         onNext = props.onNext,
@@ -125,6 +126,7 @@ function HiChip(props) {
     return _react2.default.createElement(
         'div',
         {
+            id: id,
             className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.leftNavigation, onPrevious), (0, _defineProperty3.default)(_classNames, classes.rightNavigation, onNext), (0, _defineProperty3.default)(_classNames, classes.deletable, onDelete), _classNames))
         },
         prefix && _react2.default.createElement(
@@ -170,6 +172,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icone affiché à gauche
      */
     icon: _propTypes2.default.string,
+    /**
+     * Identifiant de l'élément
+     */
+    id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     /**
      * Ajoute une image à gauche du Chip
      */

package/HiChip/HiChipSwitch.js

@@ -207,6 +207,7 @@ var HiChipSwitch = function (_React$PureComponent) {
                 _this2 = this;
 
             var _props = this.props,
+                id = _props.id,
                 label = _props.label,
                 classes = _props.classes,
                 activeIcon = _props.activeIcon,
@@ -232,6 +233,7 @@ var HiChipSwitch = function (_React$PureComponent) {
             return _react2.default.createElement(
                 'div',
                 {
+                    id: id,
                     className: (0, _classnames2.default)(classes.root, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.active, !!active), (0, _defineProperty3.default)(_classNames, classes.inactive, !active), _classNames)),
                     onClick: onClick,
                     role: 'button',
@@ -285,6 +287,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: _propTypes2.default.object,
+    /**
+     * Identifiant de l'élément
+     */
+    id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
     /**
      * Label qu'affiche le ChipFilter
      */

package/HiDatePicker/HiDatePicker.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -114,6 +118,7 @@ var HiDatePicker = function (_React$Component) {
         _this.renderMonthPickerOverlay = _this.renderMonthPickerOverlay.bind(_this);
         _this.renderTimePickerOverlay = _this.renderTimePickerOverlay.bind(_this);
         _this.renderYearPickerOverlay = _this.renderYearPickerOverlay.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
         return _this;
     }
 
@@ -128,29 +133,36 @@ var HiDatePicker = function (_React$Component) {
             this.handleCurrentMonthChange(new Date());
             this.props.onReset();
         }
+    }, {
+        key: 'handleInputChange',
+        value: function handleInputChange(event) {
+            this.props.onChange(event.target.value);
+        }
     }, {
         key: 'handleDayChange',
         value: function handleDayChange(day, modifiers) {
-            if (modifiers.selected) {
-                // Deselect day
-                this.props.onChange(undefined);
-            } else {
-                // Keep Time if set
-                if (this.props.enableTime && day !== undefined) {
-                    if (this.props.value) {
-                        day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
-                    } else {
-                        day.setHours(0, 0);
+            if (day) {
+                if (modifiers.selected) {
+                    // Deselect day
+                    this.props.onChange(undefined);
+                } else {
+                    // Keep Time if set
+                    if (this.props.enableTime && day !== undefined) {
+                        if (this.props.value) {
+                            day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
+                        } else {
+                            day.setHours(0, 0);
+                        }
                     }
+                    this.props.onChange(day);
+                }
+                if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
+                    // Hide overlay & remove focus on input
+                    document.activeElement.blur();
+                } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
+                    // Open Time panel after date selection
+                    this.openPanel('time');
                 }
-                this.props.onChange(day);
-            }
-            if (day instanceof Date && !this.props.enableTime && modifiers.selected !== true) {
-                // Hide overlay & remove focus on input
-                document.activeElement.blur();
-            } else if (day instanceof Date && this.props.enableTime && modifiers.selected !== true) {
-                // Open Time panel after date selection
-                this.openPanel('time');
             }
         }
     }, {
@@ -299,7 +311,7 @@ var HiDatePicker = function (_React$Component) {
                 captionElement: this.renderCaption,
                 classNames: classes,
                 disabledDays: effectiveDisabledDays,
-                selectedDays: value,
+                selectedDays: (typeof value === 'undefined' ? 'undefined' : (0, _typeof3.default)(value)) === 'object' ? value : undefined,
                 locale: locale,
                 firstDayOfWeek: 1,
                 fromMonth: minimumDate,
@@ -315,7 +327,9 @@ var HiDatePicker = function (_React$Component) {
                 onReset: this.handleReset
             }, {
                 onBlur: this.handleBlur
-            }, props);
+            }, props, {
+                onChange: this.handleInputChange
+            });
 
             return _react2.default.createElement(
                 'div',
@@ -410,6 +424,6 @@ HiDatePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date sélectionnée
      */
-    value: _propTypes2.default.instanceOf(Date)
+    value: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string])
 } : {};
 exports.default = (0, _withStyles2.default)(_stylesheet2.default, { name: 'HmuiHiDatePicker' })(HiDatePicker);

package/HiDatePicker/HiDateRangePicker.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
@@ -106,6 +110,12 @@ var HiDateRangePicker = function (_React$Component) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HiDateRangePicker.__proto__ || (0, _getPrototypeOf2.default)(HiDateRangePicker)).call(this));
 
+        _this.handleInputChange = function (inputName) {
+            return function (event) {
+                _this.props.onChange(inputName, event.target.value);
+            };
+        };
+
         _this.handleDayPickerFocus = function (name) {
             return function () {
                 _this.setState({ focusedInput: name });
@@ -141,6 +151,7 @@ var HiDateRangePicker = function (_React$Component) {
         _this.handleYearClickTo = _this.handleYearClickTo.bind(_this);
         _this.handleDayPickerFocus = _this.handleDayPickerFocus.bind(_this);
         _this.handleDayPickerBlur = _this.handleDayPickerBlur.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
 
         _this.openPanel = _this.openPanel.bind(_this);
 
@@ -203,38 +214,40 @@ var HiDateRangePicker = function (_React$Component) {
         value: function handleDayChange(name, day, modifiers) {
             var _this4 = this;
 
-            // if time disabled, focus TO input
-            // else focus current input
-            if (!this.props.enableTime) {
-                if (day instanceof Date) {
-                    if (name === 'from' && this.toInput) {
-                        this.toInput.getInput().focus();
-                    } else if (name === 'to') {
-                        document.activeElement.blur();
+            if (day) {
+                // if time disabled, focus TO input
+                // else focus current input
+                if (!this.props.enableTime) {
+                    if (day instanceof Date) {
+                        if (name === 'from' && this.toInput) {
+                            this.toInput.getInput().focus();
+                        } else if (name === 'to') {
+                            document.activeElement.blur();
+                        }
                     }
+                } else {
+                    this.timeout = setTimeout(function () {
+                        if (_this4[name + 'Input'].getInput()) {
+                            _this4[name + 'Input'].getInput().focus();
+                        }
+                    }, 10);
                 }
-            } else {
-                this.timeout = setTimeout(function () {
-                    if (_this4[name + 'Input'].getInput()) {
-                        _this4[name + 'Input'].getInput().focus();
-                    }
-                }, 10);
-            }
 
-            if (this.props.onChange) {
-                // Keep Time if set
-                if (this.props.enableTime) {
-                    if (this.props[name]) {
-                        day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
-                    } else {
-                        day.setHours(0, 0);
+                if (this.props.onChange) {
+                    // Keep Time if set
+                    if (this.props.enableTime) {
+                        if (this.props[name]) {
+                            day.setHours(this.props[name].getHours(), this.props[name].getMinutes());
+                        } else {
+                            day.setHours(0, 0);
+                        }
                     }
+                    this.props.onChange(name, day);
                 }
-                this.props.onChange(name, day);
-            }
 
-            if (this.props.enableTime) {
-                this.openPanel(name, 'time');
+                if (this.props.enableTime) {
+                    this.openPanel(name, 'time');
+                }
             }
         }
     }, {
@@ -502,6 +515,20 @@ var HiDateRangePicker = function (_React$Component) {
                 }
             };
 
+            var selectedDays = [];
+            var selected = {};
+            if (from instanceof Date) {
+                selectedDays.push(from);
+                selected.from = from;
+            }
+            if (to instanceof Date) {
+                selectedDays.push(to);
+                selected.to = to;
+            }
+            if ((0, _values2.default)(selected).length > 0) {
+                selectedDays.push(selected);
+            }
+
             var dayPickerProps = (0, _extends3.default)({
                 classNames: classes,
                 disabledDays: disabledDays,
@@ -511,7 +538,7 @@ var HiDateRangePicker = function (_React$Component) {
                 modifiers: modifiers,
                 modifiersStyles: modifiersStyles,
                 // Both are required ?
-                selectedDays: [from, { from: from, to: to }],
+                selectedDays: selectedDays,
                 todayButton: translations.today,
                 weekdayElement: _Weekday2.default
             }, props);
@@ -520,9 +547,9 @@ var HiDateRangePicker = function (_React$Component) {
             // Disable days after 'to' date if define
 
             var after = void 0;
-            if (to && disableFutureDays) {
+            if (to instanceof Date && disableFutureDays) {
                 after = to < now ? now : to;
-            } else if (to) {
+            } else if (to instanceof Date) {
                 after = to;
             } else if (disableFutureDays) {
                 after = now;
@@ -549,9 +576,9 @@ var HiDateRangePicker = function (_React$Component) {
             // Disable days before 'from' date if define
 
             var before = void 0;
-            if (from && disablePastDays) {
+            if (from instanceof Date && disablePastDays) {
                 before = from < now ? now : from;
-            } else if (from) {
+            } else if (from instanceof Date) {
                 before = from;
             } else if (disablePastDays) {
                 before = now;
@@ -583,7 +610,8 @@ var HiDateRangePicker = function (_React$Component) {
             }, props, labelFrom && {
                 label: labelFrom
             }, {
-                id: id + '-from'
+                id: id + '-from',
+                onChange: this.handleInputChange('from')
             });
 
             var toInputProps = (0, _extends3.default)({}, onReset && {
@@ -593,11 +621,11 @@ var HiDateRangePicker = function (_React$Component) {
             }, props, labelTo && {
                 label: labelTo
             }, {
-                id: id + '-to'
+                id: id + '-to',
+                onChange: this.handleInputChange('to')
             });
 
-            var fromClass = (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'to'), (0, _defineProperty3.default)(_classNames, classes.dayPickerMargin, staticPosition === true && this.state.focusedInput === 'to'), _classNames));
-            var toClass = (0, _classnames2.default)(classes.toInput, (0, _defineProperty3.default)({}, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'));
+            var toClass = (0, _classnames2.default)(classes.toInput, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.absolute, staticPosition === true && this.state.focusedInput === 'from'), (0, _defineProperty3.default)(_classNames, classes.right4, staticPosition === true && this.state.focusedInput === 'from'), _classNames));
 
             return _react2.default.createElement(
                 'div',
@@ -611,7 +639,7 @@ var HiDateRangePicker = function (_React$Component) {
                     },
                     _react2.default.createElement(
                         'div',
-                        { className: fromClass },
+                        null,
                         _react2.default.createElement(_DayPickerInput2.default, {
                             ref: function ref(el) {
                                 _this6.fromInput = el;
@@ -711,7 +739,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: _propTypes2.default.instanceOf(Date),
+    from: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Utilisé pour construire les ids des champs from et to en les suffixant "-from" et "-to"
      */
@@ -747,7 +775,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: _propTypes2.default.instanceOf(Date),
+    to: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Traductions
      */

package/HiDatePicker/HiDateRangeSelector.js

@@ -378,7 +378,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de début sélectionnée
      */
-    from: _propTypes2.default.instanceOf(Date),
+    from: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Si "true", le texte d'aide s'affichera seulement au clic sur l'icône "Information"
      */
@@ -426,7 +426,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Date de fin sélectionnée
      */
-    to: _propTypes2.default.instanceOf(Date),
+    to: _propTypes2.default.oneOfType([_propTypes2.default.instanceOf(Date), _propTypes2.default.string]),
     /**
      * Traductions
      */

package/HiDatePicker/Overlays/Overlay.js

@@ -113,7 +113,7 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
      * ReactDayPicker prop
      * The currently selected day or selected days
      */
-    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array]),
+    selectedDay: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.array, _propTypes2.default.string]),
     /**
      * Définit comment construire le Paper dans le cas d'un double input
      */

package/HiDatePicker/stylesheet.js

@@ -34,6 +34,9 @@ exports.default = function (theme) {
         absolute: {
             position: 'absolute'
         },
+        right4: {
+            right: 4
+        },
         dayPickerMargin: {
             top: -337,
             width: 'calc(100% - 4px)'

package/HiForm/HiInput.js

@@ -307,7 +307,8 @@ var HiInput = function (_React$PureComponent) {
                 rows = _props.rows,
                 inputClassName = _props.inputClassName,
                 onReset = _props.onReset,
-                theme = _props.theme;
+                theme = _props.theme,
+                startAdornmentColor = _props.startAdornmentColor;
             var focused = this.state.focused;
 
 
@@ -322,13 +323,17 @@ var HiInput = function (_React$PureComponent) {
             });
 
             var leftIcon = void 0;
+            var startAdornmentStyle = { padding: 8 };
+            if (startAdornmentColor) {
+                startAdornmentStyle.color = startAdornmentColor;
+            }
             if (startAdornment) {
                 var _classNames2;
 
                 leftIcon = _react2.default.createElement(_HiIconBuilder2.default, {
                     icon: startAdornment,
                     size: 36,
-                    style: { padding: '8px' },
+                    style: startAdornmentStyle,
                     onClick: this.props.onLeftIconClick,
                     className: (0, _classnames2.default)(classes.startAdornment, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.startAdornmentFocus, focused), (0, _defineProperty3.default)(_classNames2, classes.startAdornmentDisabled, disabled), (0, _defineProperty3.default)(_classNames2, classes.iconPointer, this.props.onLeftIconClick), _classNames2))
                 });
@@ -521,6 +526,10 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icône à afficher à gauche de l'input
      */
     startAdornment: _propTypes2.default.string,
+    /**
+     * Couleur de l'icône à afficher à gauche de l'input
+     */
+    startAdornmentColor: _propTypes2.default.string,
     /**
      * @ignore
      */

package/HiForm/HiPasswordField.js

@@ -114,7 +114,12 @@ var HiPasswordField = function (_React$Component) {
             return _react2.default.createElement(_HiTextField2.default, (0, _extends3.default)({}, otherProps, {
                 type: type,
                 onRightIconClick: this.handlePasswordToggle,
-                HiInputProps: (0, _extends3.default)({}, HiInputProps, { endAdornment: endAdornment, placeholder: '', inputClassName: inputClassName })
+                HiInputProps: (0, _extends3.default)({}, HiInputProps, {
+                    endAdornment: endAdornment,
+                    placeholder: '',
+                    inputClassName: inputClassName,
+                    autocomplete: 'on'
+                })
             }));
         }
     }]);

package/HiLoader/HiLoader.js

@@ -26,16 +26,19 @@ var styles = exports.styles = function styles() {
 };
 
 function HiLoader(props) {
-    var theme = props.theme,
-        loading = props.loading;
+    var className = props.className,
+        theme = props.theme,
+        loading = props.loading,
+        _props$size = props.size,
+        size = _props$size === undefined ? 12 : _props$size;
 
 
     return _react2.default.createElement(
         'div',
-        { id: 'hi-loader' },
+        { id: 'hi-loader', className: className },
         _react2.default.createElement(_reactSpinners.PropagateLoader, {
             loading: loading,
-            size: 12,
+            size: size,
             color: theme.palette.business.primary.normal
         })
     );

package/HiSelect/HiSelect.js

@@ -297,6 +297,7 @@ var HiSelect = function (_React$PureComponent) {
                 classes = _props.classes,
                 disabled = _props.disabled,
                 error = _props.error,
+                loading = _props.loading,
                 options = _props.options,
                 checkbox = _props.checkbox,
                 searchable = _props.searchable,
@@ -324,8 +325,21 @@ var HiSelect = function (_React$PureComponent) {
             var selectedIdList = Array.isArray(value) ? value : value ? [value] : [];
 
             var _suggestions = [].concat((0, _toConsumableArray3.default)(suggestions));
+
             if (pinnedItem) {
-                _suggestions = [pinnedItem].concat((0, _toConsumableArray3.default)(suggestions));
+                _suggestions.unshift(pinnedItem);
+            }
+
+            // If loading
+            if (loading) {
+                _suggestions.unshift({
+                    id: '_loading',
+                    type: 'loader',
+                    disabled: true,
+                    centered: true,
+                    checkbox: false,
+                    label: 'loading'
+                });
             }
 
             if (this.state.dynamic && selectedIdList.length === 1) {
@@ -832,6 +846,10 @@ HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
      * id du select
      */
     id: _propTypes2.default.string,
+    /**
+     * Ajoute un loader
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Autorise la sélection de plusieurs valeurs
      */

package/HiSelect/HiSuggestSelect.js

@@ -210,6 +210,7 @@ var HiSuggestSelect = function (_React$PureComponent) {
                     label: showNoResults ? translations.no_result_match : translations.min_length
                 }];
             }
+
             var open = !!optionsShown.length && focused;
 
             return _react2.default.createElement(
@@ -274,7 +275,7 @@ HiSuggestSelect.defaultProps = {
     showMinLength: false,
     showNoResults: false,
     translations: {
-        no_result_match: 'No result match',
+        no_result_match: 'Aucun résultat correspondant',
         min_length: 'Veuillez saisir 3 caractères minimum'
     },
     options: []

package/HiSelectableList/HiSelectableListItem.js

@@ -73,6 +73,10 @@ var _HiColoredLabel = require('../HiColoredLabel');
 
 var _HiColoredLabel2 = _interopRequireDefault(_HiColoredLabel);
 
+var _HiLoader = require('../HiLoader');
+
+var _HiLoader2 = _interopRequireDefault(_HiLoader);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var styles = exports.styles = function styles(theme) {
@@ -100,6 +104,13 @@ var styles = exports.styles = function styles(theme) {
             textAlign: 'center',
             width: '100%'
         },
+        loader: {
+            textAlign: 'center',
+            width: 1,
+            height: 22,
+            padding: '8px 0',
+            margin: 'auto'
+        },
         selected: {
             backgroundColor: theme.palette.selected
         },
@@ -259,6 +270,9 @@ var HiSelectableListItem = function (_React$Component) {
                         { className: itemPrimaryHighlightClass, 'data-id': item.id },
                         _this.getItemLabel(item)
                     );
+                case 'loader':
+                    return _react2.default.createElement(_HiLoader2.default, { loading: true, className: classes.loader, size: 8 });
+                    break;
                 case 'text':
                 default:
                     var itemTextClass = (0, _classnames2.default)(classes.listItemContent, (0, _defineProperty3.default)({}, classes.centered, item.centered));

package/HiTable/BodyCells/CellAccount.js

@@ -91,7 +91,7 @@ CellAccount.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Couleur du compte
      */
-    color: _propTypes2.default.string.isRequired,
+    color: _propTypes2.default.string,
     /**
      * Nom du compte
      */

package/HiTable/BodyCells/CellStatus.js

@@ -131,7 +131,7 @@ CellStatus.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Code du statut courant de la transaction (détermine la couleur du label)
      */
-    code: _propTypes2.default.number.isRequired,
+    code: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired,
     /**
      * Fonction de callback appelée pour ouvrir les lignes de détails
      */

package/HiTable/ColumnFilter.js

@@ -138,7 +138,7 @@ var styles = exports.styles = function styles(theme) {
             fontSize: 14
         },
         button: {
-            height: 40,
+            minHeight: 40,
             fontSize: 14,
             width: '50%'
         },

package/es/HiChip/HiChip.js

@@ -78,11 +78,12 @@ export const styles = theme => ({
 });
 
 function HiChip(props) {
-    const { label, classes, icon, img, onPrevious, onNext, onDelete, prefix } = props;
+    const { label, classes, icon, id, img, onPrevious, onNext, onDelete, prefix } = props;
 
     return React.createElement(
         'div',
         {
+            id: id,
             className: classNames(classes.root, {
                 [classes.leftNavigation]: onPrevious,
                 [classes.rightNavigation]: onNext,
@@ -132,6 +133,10 @@ HiChip.propTypes = process.env.NODE_ENV !== "production" ? {
      * Icone affiché à gauche
      */
     icon: PropTypes.string,
+    /**
+     * Identifiant de l'élément
+     */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
      * Ajoute une image à gauche du Chip
      */

package/es/HiChip/HiChipSwitch.js

@@ -138,6 +138,7 @@ class HiChipSwitch extends React.PureComponent {
 
     render() {
         const {
+            id,
             label,
             classes,
             activeIcon,
@@ -163,6 +164,7 @@ class HiChipSwitch extends React.PureComponent {
         return React.createElement(
             'div',
             {
+                id: id,
                 className: classNames(classes.root, {
                     [classes.active]: !!active,
                     [classes.inactive]: !active
@@ -223,6 +225,10 @@ HiChipSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
      * Surcharge les classes du composant
      */
     classes: PropTypes.object,
+    /**
+     * Identifiant de l'élément
+     */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /**
      * Label qu'affiche le ChipFilter
      */