@hipay/hipay-material-ui 2.0.0-beta.41 → 2.0.0-beta.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,10 +37,6 @@ var _ref = React.createElement(HiIcon, {
37
37
  icon: "keyboard_arrow_up"
38
38
  });
39
39
 
40
- var _ref2 = React.createElement(HiIcon, {
41
- icon: "keyboard_arrow_down"
42
- });
43
-
44
40
  class HiAppBar extends React.Component {
45
41
  constructor(props) {
46
42
  super(props);
@@ -51,13 +47,7 @@ class HiAppBar extends React.Component {
51
47
  }
52
48
 
53
49
  handleCollapse() {
54
- if (this.props.onCollapse) {
55
- this.props.onCollapse();
56
- } else {
57
- this.setState(prevState => ({
58
- collapsed: !prevState.collapsed
59
- }));
60
- }
50
+ this.props.onCollapse(!this.state.collapsed);
61
51
  }
62
52
 
63
53
  render() {
@@ -66,8 +56,7 @@ class HiAppBar extends React.Component {
66
56
  children,
67
57
  classes,
68
58
  className,
69
- collapsed = this.state.collapsed,
70
- // enable controlled & uncontrolled prop
59
+ collapsed,
71
60
  focused,
72
61
  hideable,
73
62
  position
@@ -93,11 +82,7 @@ class HiAppBar extends React.Component {
93
82
  onClick: this.handleCollapse,
94
83
  color: "inherit",
95
84
  className: classes.iconButton
96
- }, _ref)))), hideable && collapsed && React.createElement(HiIconButton, {
97
- onClick: this.handleCollapse,
98
- color: "inherit",
99
- className: classes.collapseButton
100
- }, _ref2));
85
+ }, _ref)))));
101
86
  }
102
87
 
103
88
  }
@@ -9,6 +9,12 @@ import { fade } from '../styles/colorManipulator';
9
9
  import Button from '@material-ui/core/Button';
10
10
  export const styles = theme => ({
11
11
  root: {},
12
+ flatNeutral: {
13
+ color: theme.palette.neutral.main,
14
+ '&$disabled': {
15
+ color: theme.palette.action.disabled
16
+ }
17
+ },
12
18
  flatPositive: {
13
19
  color: theme.palette.positive.main,
14
20
  '&:hover': {
@@ -17,6 +23,9 @@ export const styles = theme => ({
17
23
  '@media (hover: none)': {
18
24
  backgroundColor: 'transparent'
19
25
  }
26
+ },
27
+ '&$disabled': {
28
+ color: theme.palette.action.disabled
20
29
  }
21
30
  },
22
31
  flatNegative: {
@@ -27,6 +36,9 @@ export const styles = theme => ({
27
36
  '@media (hover: none)': {
28
37
  backgroundColor: 'transparent'
29
38
  }
39
+ },
40
+ '&$disabled': {
41
+ color: theme.palette.action.disabled
30
42
  }
31
43
  },
32
44
  flatMiddle: {
@@ -37,16 +49,9 @@ export const styles = theme => ({
37
49
  '@media (hover: none)': {
38
50
  backgroundColor: 'transparent'
39
51
  }
40
- }
41
- },
42
- flatNeutral: {
43
- color: theme.palette.neutral.main,
44
- '&:hover': {
45
- backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
46
- // Reset on touch devices, it doesn't add specificity
47
- '@media (hover: none)': {
48
- backgroundColor: 'transparent'
49
- }
52
+ },
53
+ '&$disabled': {
54
+ color: theme.palette.action.disabled
50
55
  }
51
56
  },
52
57
 
@@ -60,6 +65,10 @@ export const styles = theme => ({
60
65
  '@media (hover: none)': {
61
66
  backgroundColor: theme.palette.positive.main
62
67
  }
68
+ },
69
+ '&$disabled': {
70
+ color: theme.palette.neutral.contrastText,
71
+ backgroundColor: theme.palette.neutral.main
63
72
  }
64
73
  },
65
74
 
@@ -73,6 +82,10 @@ export const styles = theme => ({
73
82
  '@media (hover: none)': {
74
83
  backgroundColor: theme.palette.negative.main
75
84
  }
85
+ },
86
+ '&$disabled': {
87
+ color: theme.palette.neutral.contrastText,
88
+ backgroundColor: theme.palette.neutral.main
76
89
  }
77
90
  },
78
91
 
@@ -86,6 +99,10 @@ export const styles = theme => ({
86
99
  '@media (hover: none)': {
87
100
  backgroundColor: theme.palette.middle.main
88
101
  }
102
+ },
103
+ '&$disabled': {
104
+ color: theme.palette.neutral.contrastText,
105
+ backgroundColor: theme.palette.neutral.main
89
106
  }
90
107
  },
91
108
 
@@ -99,6 +116,10 @@ export const styles = theme => ({
99
116
  '@media (hover: none)': {
100
117
  backgroundColor: theme.palette.neutral.main
101
118
  }
119
+ },
120
+ '&$disabled': {
121
+ color: theme.palette.neutral.contrastText,
122
+ backgroundColor: theme.palette.neutral.main
102
123
  }
103
124
  },
104
125
 
@@ -132,7 +153,8 @@ export const styles = theme => ({
132
153
  '&:hover': {
133
154
  border: `1px solid ${theme.palette.neutral.main}`
134
155
  }
135
- }
156
+ },
157
+ disabled: {}
136
158
  });
137
159
 
138
160
  function HiButton(props) {
@@ -141,9 +163,10 @@ function HiButton(props) {
141
163
  classes,
142
164
  className,
143
165
  color,
144
- variant
166
+ variant,
167
+ disabled
145
168
  } = props,
146
- other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant"]);
169
+ other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
147
170
 
148
171
  const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
149
172
  const fab = variant === 'fab' || variant === 'extendedFab';
@@ -152,15 +175,16 @@ function HiButton(props) {
152
175
  [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
153
176
  [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
154
177
  [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
155
- [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral',
178
+ [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
156
179
  [classes.containedPositive]: (contained || fab) && color === 'positive',
157
180
  [classes.containedNegative]: (contained || fab) && color === 'negative',
158
181
  [classes.containedMiddle]: (contained || fab) && color === 'middle',
159
- [classes.containedNeutral]: (contained || fab) && color === 'neutral',
182
+ [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
160
183
  [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
161
184
  [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
162
185
  [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
163
- [classes.outlinedNeutral]: variant === 'outlined' && color === 'neutral'
186
+ [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
187
+ [classes.disabled]: disabled
164
188
  });
165
189
  return React.createElement(Button, _extends({
166
190
  className: className,
@@ -168,7 +192,8 @@ function HiButton(props) {
168
192
  root: buttonClassNames
169
193
  },
170
194
  color: hcolor,
171
- variant: variant
195
+ variant: variant,
196
+ disabled: disabled
172
197
  }, other), children);
173
198
  }
174
199
 
@@ -194,7 +219,7 @@ HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
194
219
  variant: PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
195
220
  } : {};
196
221
  HiButton.defaultProps = {
197
- color: 'default',
222
+ color: 'neutral',
198
223
  variant: 'text'
199
224
  };
200
225
  export default withStyles(styles, {
@@ -5,10 +5,10 @@ import React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import classNames from 'classnames';
7
7
  import withStyles from '../styles/withStyles';
8
- import { capitalize } from '../utils/helpers';
8
+ import { capitalize, escapeHTML } from '../utils/helpers';
9
9
  import { fade } from '../styles/colorManipulator';
10
10
  export const styles = theme => ({
11
- root: _objectSpread({}, theme.typography.b3, {
11
+ root: _objectSpread({}, theme.typography.b1, {
12
12
  display: 'inline-block',
13
13
  alignItems: 'baseline',
14
14
  maxWidth: '100%',
@@ -130,7 +130,12 @@ function HiColoredLabel(props) {
130
130
  }, fontWeight && {
131
131
  fontWeight
132
132
  })
133
- }, other), label);
133
+ }, other, {
134
+ // eslint-disable-next-line react/no-danger
135
+ dangerouslySetInnerHTML: {
136
+ __html: escapeHTML(label)
137
+ }
138
+ }));
134
139
  }
135
140
 
136
141
  HiColoredLabel.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -234,8 +234,6 @@ class HiDatePicker extends React.Component {
234
234
 
235
235
  const inputProps = _objectSpread({}, onReset && {
236
236
  onReset: this.handleReset
237
- }, {
238
- onBlur: this.handleBlur
239
237
  }, props, {
240
238
  onChange: this.handleInputChange
241
239
  });
@@ -141,6 +141,14 @@ class HiInput extends React.PureComponent {
141
141
  this.handleOverlayRef = this.handleOverlayRef.bind(this);
142
142
  }
143
143
 
144
+ static getDerivedStateFromProps(nextProps, prevState) {
145
+ if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
146
+ return {
147
+ focused: nextProps.focused
148
+ };
149
+ }
150
+ }
151
+
144
152
  getInputElement(el) {
145
153
  this.inputElement = el;
146
154
 
@@ -171,6 +179,10 @@ class HiInput extends React.PureComponent {
171
179
  // Si on click sur un élément de HiInput, on garde le focus
172
180
  // Par exemple sur l'icone reset
173
181
  if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
182
+ if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
183
+ this.props.onBlur(event);
184
+ }
185
+
174
186
  event.stopPropagation();
175
187
  } else {
176
188
  this.setState({
@@ -403,6 +415,12 @@ HiInput.propTypes = process.env.NODE_ENV !== "production" ? {
403
415
  */
404
416
  error: PropTypes.bool,
405
417
 
418
+ /**
419
+ * Force le focus de l'input et surcharge le comportement par défaut
420
+ * où le focus est géré dans le state.
421
+ */
422
+ focused: PropTypes.bool,
423
+
406
424
  /**
407
425
  * Utile pour surcharger les classes de l'input
408
426
  */
@@ -10,42 +10,48 @@ import * as hiSvgIcons from '../hi-svg-icons';
10
10
  import * as mdi from 'mdi-material-ui';
11
11
  export const styles = theme => ({
12
12
  /* Styles applied to the root element. */
13
- root: {},
13
+ root: {
14
+ /* Styles applied to the root element if `color="primary"`. */
15
+ '&$colorPrimary': {
16
+ color: theme.palette.primary.main
17
+ },
18
+
19
+ /* Styles applied to the root element if `color="secondary"`. */
20
+ '&$colorSecondary': {
21
+ color: theme.palette.secondary.main
22
+ },
23
+
24
+ /* Styles applied to the root element if `color="positive"`. */
25
+ '&$colorPositive': {
26
+ color: theme.palette.positive.main
27
+ },
28
+
29
+ /* Styles applied to the root element if `color="negative"`. */
30
+ '&$colorNegative': {
31
+ color: theme.palette.negative.main
32
+ },
33
+
34
+ /* Styles applied to the root element if `color="middle"`. */
35
+ '&$colorMiddle': {
36
+ color: theme.palette.middle.main
37
+ },
38
+
39
+ /* Styles applied to the root element if `color="neutral"`. */
40
+ '&$colorNeutral': {
41
+ color: theme.palette.neutral.main
42
+ }
43
+ },
14
44
 
15
45
  /* Styles applied to the root element. */
16
46
  faIcon: {
17
47
  fontSize: 20
18
48
  },
19
-
20
- /* Styles applied to the root element if `color="primary"`. */
21
- colorPrimary: {
22
- color: theme.palette.primary.main
23
- },
24
-
25
- /* Styles applied to the root element if `color="secondary"`. */
26
- colorSecondary: {
27
- color: theme.palette.secondary.main
28
- },
29
-
30
- /* Styles applied to the root element if `color="positive"`. */
31
- colorPositive: {
32
- color: theme.palette.positive.main
33
- },
34
-
35
- /* Styles applied to the root element if `color="negative"`. */
36
- colorNegative: {
37
- color: theme.palette.negative.main
38
- },
39
-
40
- /* Styles applied to the root element if `color="middle"`. */
41
- colorMiddle: {
42
- color: theme.palette.middle.main
43
- },
44
-
45
- /* Styles applied to the root element if `color="neutral"`. */
46
- colorNeutral: {
47
- color: theme.palette.neutral.main
48
- }
49
+ colorPrimary: {},
50
+ colorSecondary: {},
51
+ colorPositive: {},
52
+ colorNegative: {},
53
+ colorMiddle: {},
54
+ colorNeutral: {}
49
55
  });
50
56
 
51
57
  function HiIcon(props) {
@@ -6,7 +6,8 @@ import React from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import HiSelect from './HiSelect';
8
8
  import HiIcon from '../HiIcon';
9
- import withStyles from "../styles/withStyles";
9
+ import withStyles from '../styles/withStyles';
10
+ import { foldAccents } from '../utils/helpers';
10
11
  /**
11
12
  * Return array of final item id in nested list (via props chlidren)
12
13
  * @param itemList
@@ -56,18 +57,20 @@ function findFinalItemRecursively(itemList, searchId) {
56
57
  * @param visibleParent - visibility of the list parent item (default false)
57
58
  * @param pinnedParent - parent will be displayed as pinned items
58
59
  * @param disabledParent - parent will not be selectable
60
+ * @param nbChildrenAsInfo - Show children number as info
61
+ * @param translations - Translations
59
62
  * @returns {*}
60
63
  */
61
64
 
62
65
 
63
- function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false) {
66
+ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue = '', visibleParent = false, pinnedParent = false, disabledParent = false, nbChildrenAsInfo = false, translations) {
64
67
  return itemList.reduce(({
65
68
  l: memoItemList,
66
69
  s: memoSelected,
67
70
  u: memoUnselected,
68
71
  v: memoVisible
69
72
  }, item) => {
70
- const itemVisible = searchValue === '' || item.label.toString().toLowerCase().search(searchValue.toLowerCase()) !== -1; // Parent item
73
+ const itemVisible = searchValue === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(searchValue.toLowerCase())) !== -1; // Parent item
71
74
 
72
75
  if (item.children) {
73
76
  const {
@@ -76,6 +79,11 @@ function buildFilteredItemList(itemList, selectedItemIdList = [], searchValue =
76
79
  u: unselected,
77
80
  v: visible
78
81
  } = buildFilteredItemList(item.children, selectedItemIdList, searchValue, itemVisible, pinnedParent, disabledParent);
82
+
83
+ if (nbChildrenAsInfo) {
84
+ item.info = translations.n_children.replace('%s', item.children.length);
85
+ }
86
+
79
87
  return {
80
88
  l: [...memoItemList, _objectSpread({}, item, disabledParent && {
81
89
  disabled: true,
@@ -126,7 +134,31 @@ export const styles = theme => ({
126
134
  borderRadius: '0px 2px',
127
135
  maxHeight: 480,
128
136
  transition: 'none !important'
129
- }
137
+ },
138
+ labelImg: {
139
+ height: 18,
140
+ width: 'auto',
141
+ margin: '0 4px',
142
+ verticalAlign: 'middle'
143
+ },
144
+ selectIconLabel: _objectSpread({
145
+ whiteSpace: 'nowrap',
146
+ overflow: 'hidden',
147
+ textOverflow: 'ellipsis',
148
+ paddingRight: 16
149
+ }, theme.typography.b1, {
150
+ display: 'inline-flex',
151
+ width: '100%'
152
+ }),
153
+ selectImgLabel: _objectSpread({
154
+ whiteSpace: 'nowrap',
155
+ overflow: 'hidden',
156
+ textOverflow: 'ellipsis',
157
+ paddingRight: 16
158
+ }, theme.typography.b1, {
159
+ display: 'inline-flex',
160
+ width: '100%'
161
+ })
130
162
  });
131
163
  /**
132
164
  * HiNestedSelect hérite du composant HiSelect
@@ -193,6 +225,7 @@ class HiNestedSelect extends React.PureComponent {
193
225
  hasAll,
194
226
  iconAll,
195
227
  multiple,
228
+ nbChildrenAsInfo,
196
229
  pinnedParent,
197
230
  translations
198
231
  } = this.props; // build item list
@@ -202,7 +235,7 @@ class HiNestedSelect extends React.PureComponent {
202
235
  s: allSelected,
203
236
  u: allUnselected,
204
237
  v: visible
205
- } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple);
238
+ } = buildFilteredItemList(options, value, search, false, pinnedParent, disabledParent || !multiple, nbChildrenAsInfo, translations);
206
239
  const itemList = !visible ? [...(loading ? [{
207
240
  id: '_loading',
208
241
  type: 'loader',
@@ -332,7 +365,7 @@ HiNestedSelect.defaultProps = {
332
365
  search: 'Search',
333
366
  n_items_selected: '%s items selected',
334
367
  one_item_selected: '%s item selected',
335
- n_children: '%s items',
368
+ n_children: '%s',
336
369
  one_child: '%s item'
337
370
  }
338
371
  };
@@ -377,6 +410,11 @@ HiNestedSelect.propTypes = process.env.NODE_ENV !== "production" ? {
377
410
  */
378
411
  name: PropTypes.string.isRequired,
379
412
 
413
+ /**
414
+ * Définit si l'on doit afficher le nombre d'enfants du parent dans son champ info
415
+ */
416
+ nbChildrenAsInfo: PropTypes.bool,
417
+
380
418
  /**
381
419
  * Fonction de callback qui renvoit la/les valeurs sélectionnées
382
420
  *
@@ -12,7 +12,7 @@ import HiSelectableList from '../HiSelectableList';
12
12
  import HiInput from '../HiForm/HiInput';
13
13
  import HiSelectInput from './HiSelectInput';
14
14
  import withStyles from '../styles/withStyles';
15
- import { getNextItemSelectable } from '../utils/helpers';
15
+ import { getNextItemSelectable, foldAccents } from '../utils/helpers';
16
16
  import HiIcon from '../HiIcon';
17
17
  import keycode from 'keycode';
18
18
  export const styles = theme => ({
@@ -23,7 +23,7 @@ export const styles = theme => ({
23
23
  position: 'relative'
24
24
  },
25
25
  popper: {
26
- width: '100%',
26
+ width: '100% !important',
27
27
  zIndex: 1200
28
28
  },
29
29
  paper: {
@@ -136,7 +136,8 @@ class HiSelect extends React.PureComponent {
136
136
 
137
137
  if (this.overlay && (key === 'down' || key === 'up')) {
138
138
  this.focusOnFirstItem();
139
- } else if (this.overlay && key === 'esc') {
139
+ } else if (this.overlay && key === 'esc' || key === 'enter') {
140
+ event.preventDefault();
140
141
  this.handleClose();
141
142
  }
142
143
  };
@@ -272,7 +273,13 @@ class HiSelect extends React.PureComponent {
272
273
  hideCheckbox: true,
273
274
  label: 'loading'
274
275
  }] : []), // simple one level filter on label
275
- ...(search !== '' ? [...options.filter(item => item.label && item.label.toString().toLowerCase().search(search.toLowerCase()) !== -1)] : [...options])];
276
+ ...(search !== '' ? [...options.filter(item => item.label && foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1)] : [...(this.props.hasAll ? [_objectSpread({
277
+ id: '_all',
278
+ label: this.props.translations.all
279
+ }, this.props.iconAll && {
280
+ type: 'icon',
281
+ icon: this.props.iconAll
282
+ })] : []), ...options])];
276
283
  return {
277
284
  itemList,
278
285
  inputValue: this.buildInputValue(options, value, loading)
@@ -135,14 +135,53 @@ class HiSelectInput extends React.PureComponent {
135
135
  }
136
136
  };
137
137
 
138
+ this.handleKeyDownReset = event => {
139
+ const key = keycode(event);
140
+
141
+ if (key === 'enter' || key === 'space') {
142
+ this.handleReset(event);
143
+ event.stopPropagation();
144
+ event.preventDefault();
145
+ }
146
+ };
147
+
138
148
  this.handleClick = event => {
139
149
  if ((!this.resetIcon || !this.resetIcon.contains(event.target)) && this.props.onClick) {
140
150
  this.props.onClick(event);
141
151
  }
142
152
  };
143
153
 
154
+ this.handleReset = event => {
155
+ this.props.onReset(event);
156
+
157
+ if (this.input) {
158
+ this.input.focus();
159
+ }
160
+ };
161
+
162
+ this.handleBlur = event => {
163
+ if ((!this.input || !this.input.contains(event.relatedTarget)) && this.props.onBlur) {
164
+ this.props.onBlur(event);
165
+ } else {
166
+ if (this.input && (!this.resetIcon || !this.resetIcon.contains(event.relatedTarget))) {
167
+ this.input.focus();
168
+ }
169
+ }
170
+ };
171
+
172
+ this.handleRef = el => {
173
+ this.input = el;
174
+
175
+ if (this.props.refElement) {
176
+ this.props.refElement(el);
177
+ }
178
+ };
179
+
144
180
  this.handleKeyDown = this.handleKeyDown.bind(this);
145
181
  this.handleClick = this.handleClick.bind(this);
182
+ this.handleBlur = this.handleBlur.bind(this);
183
+ this.handleRef = this.handleRef.bind(this);
184
+ this.handleReset = this.handleReset.bind(this);
146
185
  }
147
186
 
148
187
  render() {
@@ -157,9 +196,7 @@ class HiSelectInput extends React.PureComponent {
157
196
  focused,
158
197
  error,
159
198
  id,
160
- placeholder,
161
- refElement,
162
- theme
199
+ placeholder
163
200
  } = this.props; // On utilise classNames pour variabiliser les styles et merge les classes appliquées
164
201
 
165
202
  const rootClass = classNames(classes.root, classes.inkbar, classes.underline, {
@@ -182,9 +219,7 @@ class HiSelectInput extends React.PureComponent {
182
219
  onBlur: this.props.onBlur,
183
220
  role: "button",
184
221
  tabIndex: "0",
185
- ref: el => {
186
- if (refElement) refElement(el);
187
- }
222
+ ref: this.handleRef
188
223
  }, React.createElement("span", {
189
224
  className: classNames(classes.label, {
190
225
  [classes.placeholder]: value === undefined
@@ -200,10 +235,8 @@ class HiSelectInput extends React.PureComponent {
200
235
  onMouseLeave: this.props.onMouseLeave,
201
236
  onKeyDown: this.handleKeyDown,
202
237
  onFocus: this.props.onFocus,
203
- onBlur: this.props.onBlur,
204
- buttonRef: el => {
205
- if (refElement) refElement(el);
206
- }
238
+ onBlur: this.handleBlur,
239
+ buttonRef: this.handleRef
207
240
  }, React.createElement("span", {
208
241
  className: classNames(classes.label, {
209
242
  [classes.placeholder]: value === undefined
@@ -214,9 +247,11 @@ class HiSelectInput extends React.PureComponent {
214
247
  }
215
248
  }, React.createElement(HiIcon, {
216
249
  icon: "close",
217
- size: 24,
218
- color: theme.palette.neutral.main,
219
- onClick: onReset
250
+ size: 20,
251
+ color: "neutral",
252
+ onClick: this.handleReset,
253
+ onKeyDown: this.handleKeyDownReset,
254
+ tabIndex: 0
220
255
  })), React.createElement(Icon, {
221
256
  classes: {
222
257
  root: iconClass
@@ -327,6 +362,5 @@ HiSelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
327
362
  } : {};
328
363
  export default withStyles(styles, {
329
364
  hiComponent: true,
330
- name: 'HmuiHiSelectInput',
331
- withTheme: true
365
+ name: 'HmuiHiSelectInput'
332
366
  })(HiSelectInput);
@@ -76,7 +76,10 @@ export const styles = theme => ({
76
76
  }, theme.typography.b1, {
77
77
  fontWeight: 'inherit',
78
78
  width: '100%',
79
- padding: '5px 0'
79
+ padding: '5px 0',
80
+ '& strong': {
81
+ fontWeight: theme.typography.fontWeightMedium
82
+ }
80
83
  }),
81
84
  label: {
82
85
  display: 'inline-block',
@@ -205,6 +208,7 @@ class HiSelectableListItem extends React.Component {
205
208
  hideCheckbox,
206
209
  onSelect,
207
210
  indeterminate,
211
+ indeterminateIcon,
208
212
  icon,
209
213
  id,
210
214
  img,
@@ -270,7 +274,8 @@ class HiSelectableListItem extends React.Component {
270
274
  ,
271
275
  disabled: disabled,
272
276
  icon: displayedIcon,
273
- indeterminate: indeterminate
277
+ indeterminate: indeterminate,
278
+ indeterminateIcon: indeterminateIcon
274
279
  }), React.createElement("div", {
275
280
  className: classNames(classes.listItemContent, {
276
281
  [classes.centered]: centered,
@@ -308,6 +313,7 @@ HiSelectableListItem.defaultProps = {
308
313
  hideCheckbox: false,
309
314
  hoverIcon: 'check_box_outline_blank',
310
315
  checkedIcon: 'check_box',
316
+ indeterminateIcon: 'indeterminate_check_box',
311
317
  indeterminate: false,
312
318
  level: 0,
313
319
  paddingLeft: 4,
@@ -241,4 +241,26 @@ export function getNextItemSelectable(node, direction) {
241
241
  }
242
242
 
243
243
  return node.previousSibling;
244
+ }
245
+ /**
246
+ * Retourne la chaîne de caractères passée en entrée sans les accents
247
+ * @param toFold
248
+ * @returns {*}
249
+ */
250
+
251
+ export function foldAccents(toFold) {
252
+ return toFold.replace(/([àáâãäå])|([ç])|([èéêë])|([ìíîï])|([ñ])|([òóôõöø])|([ß])|([ùúûü])|([ÿ])|([æ])|([œ])/g, (str, a, c, e, i, n, o, s, u, y, ae, oe) => {
253
+ if (a) return 'a';
254
+ if (c) return 'c';
255
+ if (e) return 'e';
256
+ if (i) return 'i';
257
+ if (n) return 'n';
258
+ if (o) return 'o';
259
+ if (s) return 's';
260
+ if (u) return 'u';
261
+ if (y) return 'y';
262
+ if (ae) return 'ae';
263
+ if (oe) return 'oe';
264
+ return str;
265
+ });
244
266
  }