@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.
- package/HiAppBar/HiAppBar.js +3 -20
- package/HiButton/HiButton.js +39 -15
- package/HiColoredLabel/HiColoredLabel.js +7 -2
- package/HiDatePicker/HiDatePicker.js +0 -2
- package/HiForm/HiInput.js +19 -0
- package/HiIcon/HiIcon.js +37 -31
- package/HiSelectNew/HiNestedSelect.js +44 -4
- package/HiSelectNew/HiSelect.js +12 -4
- package/HiSelectNew/HiSelectInput.js +50 -15
- package/HiSelectableList/HiSelectableListItem.js +8 -2
- package/es/HiAppBar/HiAppBar.js +3 -18
- package/es/HiButton/HiButton.js +43 -18
- package/es/HiColoredLabel/HiColoredLabel.js +8 -3
- package/es/HiDatePicker/HiDatePicker.js +0 -2
- package/es/HiForm/HiInput.js +18 -0
- package/es/HiIcon/HiIcon.js +37 -31
- package/es/HiSelectNew/HiNestedSelect.js +44 -6
- package/es/HiSelectNew/HiSelect.js +11 -4
- package/es/HiSelectNew/HiSelectInput.js +49 -15
- package/es/HiSelectableList/HiSelectableListItem.js +8 -2
- package/es/utils/helpers.js +22 -0
- package/index.es.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/umd/hipay-material-ui.development.js +108 -50
- package/umd/hipay-material-ui.production.min.js +2 -2
- package/utils/helpers.js +24 -0
package/index.es.js
CHANGED
package/index.js
CHANGED
package/package.json
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
/** @license HiPay-Material-UI v2.0.0-beta.
|
1
|
+
/** @license HiPay-Material-UI v2.0.0-beta.43
|
2
2
|
*
|
3
3
|
* This source code is licensed under the MIT license found in the
|
4
4
|
* LICENSE file in the root directory of this source tree.
|
@@ -13290,6 +13290,12 @@
|
|
13290
13290
|
var styles = function styles(theme) {
|
13291
13291
|
return {
|
13292
13292
|
root: {},
|
13293
|
+
flatNeutral: {
|
13294
|
+
color: theme.palette.neutral.main,
|
13295
|
+
'&$disabled': {
|
13296
|
+
color: theme.palette.action.disabled
|
13297
|
+
}
|
13298
|
+
},
|
13293
13299
|
flatPositive: {
|
13294
13300
|
color: theme.palette.positive.main,
|
13295
13301
|
'&:hover': {
|
@@ -13298,6 +13304,9 @@
|
|
13298
13304
|
'@media (hover: none)': {
|
13299
13305
|
backgroundColor: 'transparent'
|
13300
13306
|
}
|
13307
|
+
},
|
13308
|
+
'&$disabled': {
|
13309
|
+
color: theme.palette.action.disabled
|
13301
13310
|
}
|
13302
13311
|
},
|
13303
13312
|
flatNegative: {
|
@@ -13308,6 +13317,9 @@
|
|
13308
13317
|
'@media (hover: none)': {
|
13309
13318
|
backgroundColor: 'transparent'
|
13310
13319
|
}
|
13320
|
+
},
|
13321
|
+
'&$disabled': {
|
13322
|
+
color: theme.palette.action.disabled
|
13311
13323
|
}
|
13312
13324
|
},
|
13313
13325
|
flatMiddle: {
|
@@ -13318,16 +13330,9 @@
|
|
13318
13330
|
'@media (hover: none)': {
|
13319
13331
|
backgroundColor: 'transparent'
|
13320
13332
|
}
|
13321
|
-
}
|
13322
|
-
|
13323
|
-
|
13324
|
-
color: theme.palette.neutral.main,
|
13325
|
-
'&:hover': {
|
13326
|
-
backgroundColor: fade(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
|
13327
|
-
// Reset on touch devices, it doesn't add specificity
|
13328
|
-
'@media (hover: none)': {
|
13329
|
-
backgroundColor: 'transparent'
|
13330
|
-
}
|
13333
|
+
},
|
13334
|
+
'&$disabled': {
|
13335
|
+
color: theme.palette.action.disabled
|
13331
13336
|
}
|
13332
13337
|
},
|
13333
13338
|
|
@@ -13341,6 +13346,10 @@
|
|
13341
13346
|
'@media (hover: none)': {
|
13342
13347
|
backgroundColor: theme.palette.positive.main
|
13343
13348
|
}
|
13349
|
+
},
|
13350
|
+
'&$disabled': {
|
13351
|
+
color: theme.palette.neutral.contrastText,
|
13352
|
+
backgroundColor: theme.palette.neutral.main
|
13344
13353
|
}
|
13345
13354
|
},
|
13346
13355
|
|
@@ -13354,6 +13363,10 @@
|
|
13354
13363
|
'@media (hover: none)': {
|
13355
13364
|
backgroundColor: theme.palette.negative.main
|
13356
13365
|
}
|
13366
|
+
},
|
13367
|
+
'&$disabled': {
|
13368
|
+
color: theme.palette.neutral.contrastText,
|
13369
|
+
backgroundColor: theme.palette.neutral.main
|
13357
13370
|
}
|
13358
13371
|
},
|
13359
13372
|
|
@@ -13367,6 +13380,10 @@
|
|
13367
13380
|
'@media (hover: none)': {
|
13368
13381
|
backgroundColor: theme.palette.middle.main
|
13369
13382
|
}
|
13383
|
+
},
|
13384
|
+
'&$disabled': {
|
13385
|
+
color: theme.palette.neutral.contrastText,
|
13386
|
+
backgroundColor: theme.palette.neutral.main
|
13370
13387
|
}
|
13371
13388
|
},
|
13372
13389
|
|
@@ -13380,6 +13397,10 @@
|
|
13380
13397
|
'@media (hover: none)': {
|
13381
13398
|
backgroundColor: theme.palette.neutral.main
|
13382
13399
|
}
|
13400
|
+
},
|
13401
|
+
'&$disabled': {
|
13402
|
+
color: theme.palette.neutral.contrastText,
|
13403
|
+
backgroundColor: theme.palette.neutral.main
|
13383
13404
|
}
|
13384
13405
|
},
|
13385
13406
|
|
@@ -13413,7 +13434,8 @@
|
|
13413
13434
|
'&:hover': {
|
13414
13435
|
border: "1px solid ".concat(theme.palette.neutral.main)
|
13415
13436
|
}
|
13416
|
-
}
|
13437
|
+
},
|
13438
|
+
disabled: {}
|
13417
13439
|
};
|
13418
13440
|
};
|
13419
13441
|
|
@@ -13425,19 +13447,21 @@
|
|
13425
13447
|
className = props.className,
|
13426
13448
|
color = props.color,
|
13427
13449
|
variant = props.variant,
|
13428
|
-
|
13450
|
+
disabled = props.disabled,
|
13451
|
+
other = objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
|
13429
13452
|
|
13430
13453
|
var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
|
13431
13454
|
var fab = variant === 'fab' || variant === 'extendedFab';
|
13432
13455
|
var contained = variant === 'contained' || variant === 'raised';
|
13433
|
-
var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'neutral'), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && color === 'neutral'), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && color === 'neutral'), _classNames));
|
13456
|
+
var buttonClassNames = classnames(classes.root, (_classNames = {}, defineProperty(_classNames, classes.flatPositive, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive'), defineProperty(_classNames, classes.flatNegative, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative'), defineProperty(_classNames, classes.flatMiddle, (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle'), defineProperty(_classNames, classes.flatNeutral, (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.containedPositive, (contained || fab) && color === 'positive'), defineProperty(_classNames, classes.containedNegative, (contained || fab) && color === 'negative'), defineProperty(_classNames, classes.containedMiddle, (contained || fab) && color === 'middle'), defineProperty(_classNames, classes.containedNeutral, (contained || fab) && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.outlinedPositive, variant === 'outlined' && color === 'positive'), defineProperty(_classNames, classes.outlinedNegative, variant === 'outlined' && color === 'negative'), defineProperty(_classNames, classes.outlinedMiddle, variant === 'outlined' && color === 'middle'), defineProperty(_classNames, classes.outlinedNeutral, variant === 'outlined' && (color === 'default' || color === 'neutral')), defineProperty(_classNames, classes.disabled, disabled), _classNames));
|
13434
13457
|
return React__default.createElement(Button$2, _extends_1({
|
13435
13458
|
className: className,
|
13436
13459
|
classes: {
|
13437
13460
|
root: buttonClassNames
|
13438
13461
|
},
|
13439
13462
|
color: hcolor,
|
13440
|
-
variant: variant
|
13463
|
+
variant: variant,
|
13464
|
+
disabled: disabled
|
13441
13465
|
}, other), children);
|
13442
13466
|
}
|
13443
13467
|
|
@@ -13463,7 +13487,7 @@
|
|
13463
13487
|
variant: propTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'])
|
13464
13488
|
};
|
13465
13489
|
HiButton.defaultProps = {
|
13466
|
-
color: '
|
13490
|
+
color: 'neutral',
|
13467
13491
|
variant: 'text'
|
13468
13492
|
};
|
13469
13493
|
var HiButton$1 = withStyles(styles, {
|
@@ -65850,42 +65874,48 @@
|
|
65850
65874
|
var styles$2 = function styles(theme) {
|
65851
65875
|
return {
|
65852
65876
|
/* Styles applied to the root element. */
|
65853
|
-
root: {
|
65877
|
+
root: {
|
65878
|
+
/* Styles applied to the root element if `color="primary"`. */
|
65879
|
+
'&$colorPrimary': {
|
65880
|
+
color: theme.palette.primary.main
|
65881
|
+
},
|
65854
65882
|
|
65855
|
-
|
65856
|
-
|
65857
|
-
|
65858
|
-
|
65883
|
+
/* Styles applied to the root element if `color="secondary"`. */
|
65884
|
+
'&$colorSecondary': {
|
65885
|
+
color: theme.palette.secondary.main
|
65886
|
+
},
|
65859
65887
|
|
65860
|
-
|
65861
|
-
|
65862
|
-
|
65863
|
-
|
65888
|
+
/* Styles applied to the root element if `color="positive"`. */
|
65889
|
+
'&$colorPositive': {
|
65890
|
+
color: theme.palette.positive.main
|
65891
|
+
},
|
65864
65892
|
|
65865
|
-
|
65866
|
-
|
65867
|
-
|
65868
|
-
|
65893
|
+
/* Styles applied to the root element if `color="negative"`. */
|
65894
|
+
'&$colorNegative': {
|
65895
|
+
color: theme.palette.negative.main
|
65896
|
+
},
|
65869
65897
|
|
65870
|
-
|
65871
|
-
|
65872
|
-
|
65873
|
-
|
65898
|
+
/* Styles applied to the root element if `color="middle"`. */
|
65899
|
+
'&$colorMiddle': {
|
65900
|
+
color: theme.palette.middle.main
|
65901
|
+
},
|
65874
65902
|
|
65875
|
-
|
65876
|
-
|
65877
|
-
|
65903
|
+
/* Styles applied to the root element if `color="neutral"`. */
|
65904
|
+
'&$colorNeutral': {
|
65905
|
+
color: theme.palette.neutral.main
|
65906
|
+
}
|
65878
65907
|
},
|
65879
65908
|
|
65880
|
-
/* Styles applied to the root element
|
65881
|
-
|
65882
|
-
|
65909
|
+
/* Styles applied to the root element. */
|
65910
|
+
faIcon: {
|
65911
|
+
fontSize: 20
|
65883
65912
|
},
|
65884
|
-
|
65885
|
-
|
65886
|
-
|
65887
|
-
|
65888
|
-
}
|
65913
|
+
colorPrimary: {},
|
65914
|
+
colorSecondary: {},
|
65915
|
+
colorPositive: {},
|
65916
|
+
colorNegative: {},
|
65917
|
+
colorMiddle: {},
|
65918
|
+
colorNeutral: {}
|
65889
65919
|
};
|
65890
65920
|
};
|
65891
65921
|
|
@@ -68701,6 +68731,10 @@
|
|
68701
68731
|
// Si on click sur un élément de HiInput, on garde le focus
|
68702
68732
|
// Par exemple sur l'icone reset
|
68703
68733
|
if (event.relatedTarget && this.overlayNode && this.overlayNode.contains(event.relatedTarget)) {
|
68734
|
+
if (this.endAdornmentNode.contains(event.relatedTarget) && this.props.onBlur) {
|
68735
|
+
this.props.onBlur(event);
|
68736
|
+
}
|
68737
|
+
|
68704
68738
|
event.stopPropagation();
|
68705
68739
|
} else {
|
68706
68740
|
this.setState({
|
@@ -68873,6 +68907,15 @@
|
|
68873
68907
|
}
|
68874
68908
|
}));
|
68875
68909
|
}
|
68910
|
+
}], [{
|
68911
|
+
key: "getDerivedStateFromProps",
|
68912
|
+
value: function getDerivedStateFromProps(nextProps, prevState) {
|
68913
|
+
if (typeof nextProps.focused !== 'undefined' && nextProps.focused !== prevState.focused) {
|
68914
|
+
return {
|
68915
|
+
focused: nextProps.focused
|
68916
|
+
};
|
68917
|
+
}
|
68918
|
+
}
|
68876
68919
|
}]);
|
68877
68920
|
|
68878
68921
|
return HiInput;
|
@@ -68929,6 +68972,12 @@
|
|
68929
68972
|
*/
|
68930
68973
|
error: propTypes.bool,
|
68931
68974
|
|
68975
|
+
/**
|
68976
|
+
* Force le focus de l'input et surcharge le comportement par défaut
|
68977
|
+
* où le focus est géré dans le state.
|
68978
|
+
*/
|
68979
|
+
focused: propTypes.bool,
|
68980
|
+
|
68932
68981
|
/**
|
68933
68982
|
* Utile pour surcharger les classes de l'input
|
68934
68983
|
*/
|
@@ -86225,8 +86274,6 @@
|
|
86225
86274
|
|
86226
86275
|
var inputProps = _extends_1({}, onReset && {
|
86227
86276
|
onReset: this.handleReset
|
86228
|
-
}, {
|
86229
|
-
onBlur: this.handleBlur
|
86230
86277
|
}, props, {
|
86231
86278
|
onChange: this.handleInputChange
|
86232
86279
|
});
|
@@ -91527,7 +91574,7 @@
|
|
91527
91574
|
|
91528
91575
|
var styles$l = function styles(theme) {
|
91529
91576
|
return {
|
91530
|
-
root: _extends_1({}, theme.typography.
|
91577
|
+
root: _extends_1({}, theme.typography.b1, {
|
91531
91578
|
display: 'inline-block',
|
91532
91579
|
alignItems: 'baseline',
|
91533
91580
|
maxWidth: '100%',
|
@@ -91645,7 +91692,12 @@
|
|
91645
91692
|
}, fontWeight && {
|
91646
91693
|
fontWeight: fontWeight
|
91647
91694
|
})
|
91648
|
-
}, other
|
91695
|
+
}, other, {
|
91696
|
+
// eslint-disable-next-line react/no-danger
|
91697
|
+
dangerouslySetInnerHTML: {
|
91698
|
+
__html: escapeHTML(label)
|
91699
|
+
}
|
91700
|
+
}));
|
91649
91701
|
}
|
91650
91702
|
|
91651
91703
|
HiColoredLabel.propTypes = {
|
@@ -95598,7 +95650,10 @@
|
|
95598
95650
|
}, theme.typography.b1, {
|
95599
95651
|
fontWeight: 'inherit',
|
95600
95652
|
width: '100%',
|
95601
|
-
padding: '5px 0'
|
95653
|
+
padding: '5px 0',
|
95654
|
+
'& strong': {
|
95655
|
+
fontWeight: theme.typography.fontWeightMedium
|
95656
|
+
}
|
95602
95657
|
}),
|
95603
95658
|
label: {
|
95604
95659
|
display: 'inline-block',
|
@@ -95744,6 +95799,7 @@
|
|
95744
95799
|
hideCheckbox = _this$props2.hideCheckbox,
|
95745
95800
|
onSelect = _this$props2.onSelect,
|
95746
95801
|
indeterminate = _this$props2.indeterminate,
|
95802
|
+
indeterminateIcon = _this$props2.indeterminateIcon,
|
95747
95803
|
icon = _this$props2.icon,
|
95748
95804
|
id = _this$props2.id,
|
95749
95805
|
img = _this$props2.img,
|
@@ -95802,7 +95858,8 @@
|
|
95802
95858
|
,
|
95803
95859
|
disabled: disabled,
|
95804
95860
|
icon: displayedIcon,
|
95805
|
-
indeterminate: indeterminate
|
95861
|
+
indeterminate: indeterminate,
|
95862
|
+
indeterminateIcon: indeterminateIcon
|
95806
95863
|
}), React__default.createElement("div", {
|
95807
95864
|
className: classnames(classes.listItemContent, (_classNames2 = {}, defineProperty(_classNames2, classes.centered, centered), defineProperty(_classNames2, classes.primaryHighlight, type === 'primary-highlight'), _classNames2)),
|
95808
95865
|
"data-id": id
|
@@ -95837,6 +95894,7 @@
|
|
95837
95894
|
hideCheckbox: false,
|
95838
95895
|
hoverIcon: 'check_box_outline_blank',
|
95839
95896
|
checkedIcon: 'check_box',
|
95897
|
+
indeterminateIcon: 'indeterminate_check_box',
|
95840
95898
|
indeterminate: false,
|
95841
95899
|
level: 0,
|
95842
95900
|
paddingLeft: 4,
|