@xaypay/tui 0.0.87 → 0.0.88

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.
Files changed (10) hide show
  1. package/dist/index.es.js +21 -10
  2. package/dist/index.js +21 -10
  3. package/package.json +1 -1
  4. package/src/components/button/index.js +4 -2
  5. package/src/components/input/index.js +12 -6
  6. package/src/components/newAutocomplete/index.js +1 -1
  7. package/src/components/select/index.js +1 -1
  8. package/src/components/select/select.module.css +1 -1
  9. package/src/stories/configuration.stories.mdx +2 -1
  10. package/tui.config.js +3 -1
package/dist/index.es.js CHANGED
@@ -815,6 +815,9 @@ const Input = ({
815
815
  const handleMouseLeave = () => {
816
816
  setIsHover(false);
817
817
  };
818
+ const handleShowPass = () => {
819
+ setShow(!show);
820
+ };
818
821
  useEffect(() => {
819
822
  if (errorMessage) {
820
823
  setInnerErrorMessage(errorMessage);
@@ -876,10 +879,11 @@ const Input = ({
876
879
  onMouseEnter: handleMouseEnter,
877
880
  onMouseLeave: handleMouseLeave
878
881
  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default.createElement("div", {
879
- onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
880
- onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
881
- onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
882
+ onClick: type === 'password' ? handleShowPass : _ => _,
882
883
  style: {
884
+ display: 'flex',
885
+ alignItems: 'center',
886
+ justifyContent: 'center',
883
887
  cursor: type === 'password' ? 'pointer' : 'default',
884
888
  height: height ? height : configStyles.INPUT.height,
885
889
  padding: padding ? padding : configStyles.INPUT.padding,
@@ -931,10 +935,11 @@ const Input = ({
931
935
  backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
932
936
  }
933
937
  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
934
- onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
935
- onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
936
- onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
938
+ onClick: type === 'password' ? handleShowPass : _ => _,
937
939
  style: {
940
+ display: 'flex',
941
+ alignItems: 'center',
942
+ justifyContent: 'center',
938
943
  cursor: type === 'password' ? 'pointer' : 'default',
939
944
  height: height ? height : configStyles.INPUT.height,
940
945
  padding: padding ? padding : configStyles.INPUT.padding,
@@ -1102,6 +1107,7 @@ const Button = ({
1102
1107
  textTransform,
1103
1108
  backgroundColor,
1104
1109
  disabledLineColor,
1110
+ btnIconMarginRight,
1105
1111
  backgroundHoverColor,
1106
1112
  disabledBackgroundColor,
1107
1113
  ...props
@@ -1124,12 +1130,12 @@ const Button = ({
1124
1130
  style: {
1125
1131
  display: 'flex',
1126
1132
  alignItems: 'center',
1133
+ justifyContent: 'center',
1127
1134
  fontSize: size ? size : configStyles.BUTTON.size,
1128
1135
  fontFamily: font ? font : configStyles.BUTTON.font,
1129
1136
  height: height ? height : configStyles.BUTTON.height,
1130
1137
  fontWeight: weight ? weight : configStyles.BUTTON.weight,
1131
1138
  padding: padding ? padding : configStyles.BUTTON.padding,
1132
- justifyContent: icon && label ? 'space-between' : 'center',
1133
1139
  borderRadius: radius ? radius : configStyles.BUTTON.radius,
1134
1140
  boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
1135
1141
  transition: transition ? transition : configStyles.BUTTON.transition,
@@ -1147,7 +1153,11 @@ const Button = ({
1147
1153
  onMouseEnter: handleMouseEnter,
1148
1154
  onMouseLeave: handleMouseLeave,
1149
1155
  className: classProps
1150
- }, props), icon && icon, " ", label && label, " ", !icon && !label && 'Add icon or label prop on Button component');
1156
+ }, props), icon && icon, " ", label && /*#__PURE__*/React__default.createElement("span", {
1157
+ style: {
1158
+ marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
1159
+ }
1160
+ }, label), " ", !icon && !label && 'Add icon or label prop on Button component');
1151
1161
  };
1152
1162
  Button.propTypes = {
1153
1163
  type: PropTypes.string,
@@ -1175,6 +1185,7 @@ Button.propTypes = {
1175
1185
  disabledColor: PropTypes.string,
1176
1186
  backgroundColor: PropTypes.string,
1177
1187
  disabledLineColor: PropTypes.string,
1188
+ btnIconMarginRight: PropTypes.string,
1178
1189
  backgroundHoverColor: PropTypes.string,
1179
1190
  disabledBackgroundColor: PropTypes.string
1180
1191
  };
@@ -1198,7 +1209,7 @@ const SvgArrow = ({
1198
1209
  fill: fillColor ? fillColor : '#3C393E'
1199
1210
  }));
1200
1211
 
1201
- var css_248z$9 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:10}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
1212
+ var css_248z$9 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
1202
1213
  var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
1203
1214
  styleInject(css_248z$9);
1204
1215
 
@@ -1422,7 +1433,7 @@ const Select = ({
1422
1433
  }
1423
1434
  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
1424
1435
  className: `${styles$7['select-content-top-icon']}`
1425
- }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
1436
+ }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
1426
1437
  className: `${styles$7['close-icon']}`,
1427
1438
  onClick: disabled ? _ => _ : handleClearSelect,
1428
1439
  style: {
package/dist/index.js CHANGED
@@ -845,6 +845,9 @@ const Input = ({
845
845
  const handleMouseLeave = () => {
846
846
  setIsHover(false);
847
847
  };
848
+ const handleShowPass = () => {
849
+ setShow(!show);
850
+ };
848
851
  React.useEffect(() => {
849
852
  if (errorMessage) {
850
853
  setInnerErrorMessage(errorMessage);
@@ -906,10 +909,11 @@ const Input = ({
906
909
  onMouseEnter: handleMouseEnter,
907
910
  onMouseLeave: handleMouseLeave
908
911
  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
909
- onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
910
- onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
911
- onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
912
+ onClick: type === 'password' ? handleShowPass : _ => _,
912
913
  style: {
914
+ display: 'flex',
915
+ alignItems: 'center',
916
+ justifyContent: 'center',
913
917
  cursor: type === 'password' ? 'pointer' : 'default',
914
918
  height: height ? height : configStyles.INPUT.height,
915
919
  padding: padding ? padding : configStyles.INPUT.padding,
@@ -961,10 +965,11 @@ const Input = ({
961
965
  backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
962
966
  }
963
967
  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
964
- onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
965
- onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
966
- onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
968
+ onClick: type === 'password' ? handleShowPass : _ => _,
967
969
  style: {
970
+ display: 'flex',
971
+ alignItems: 'center',
972
+ justifyContent: 'center',
968
973
  cursor: type === 'password' ? 'pointer' : 'default',
969
974
  height: height ? height : configStyles.INPUT.height,
970
975
  padding: padding ? padding : configStyles.INPUT.padding,
@@ -1132,6 +1137,7 @@ const Button = ({
1132
1137
  textTransform,
1133
1138
  backgroundColor,
1134
1139
  disabledLineColor,
1140
+ btnIconMarginRight,
1135
1141
  backgroundHoverColor,
1136
1142
  disabledBackgroundColor,
1137
1143
  ...props
@@ -1154,12 +1160,12 @@ const Button = ({
1154
1160
  style: {
1155
1161
  display: 'flex',
1156
1162
  alignItems: 'center',
1163
+ justifyContent: 'center',
1157
1164
  fontSize: size ? size : configStyles.BUTTON.size,
1158
1165
  fontFamily: font ? font : configStyles.BUTTON.font,
1159
1166
  height: height ? height : configStyles.BUTTON.height,
1160
1167
  fontWeight: weight ? weight : configStyles.BUTTON.weight,
1161
1168
  padding: padding ? padding : configStyles.BUTTON.padding,
1162
- justifyContent: icon && label ? 'space-between' : 'center',
1163
1169
  borderRadius: radius ? radius : configStyles.BUTTON.radius,
1164
1170
  boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
1165
1171
  transition: transition ? transition : configStyles.BUTTON.transition,
@@ -1177,7 +1183,11 @@ const Button = ({
1177
1183
  onMouseEnter: handleMouseEnter,
1178
1184
  onMouseLeave: handleMouseLeave,
1179
1185
  className: classProps
1180
- }, props), icon && icon, " ", label && label, " ", !icon && !label && 'Add icon or label prop on Button component');
1186
+ }, props), icon && icon, " ", label && /*#__PURE__*/React__default["default"].createElement("span", {
1187
+ style: {
1188
+ marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
1189
+ }
1190
+ }, label), " ", !icon && !label && 'Add icon or label prop on Button component');
1181
1191
  };
1182
1192
  Button.propTypes = {
1183
1193
  type: PropTypes__default["default"].string,
@@ -1205,6 +1215,7 @@ Button.propTypes = {
1205
1215
  disabledColor: PropTypes__default["default"].string,
1206
1216
  backgroundColor: PropTypes__default["default"].string,
1207
1217
  disabledLineColor: PropTypes__default["default"].string,
1218
+ btnIconMarginRight: PropTypes__default["default"].string,
1208
1219
  backgroundHoverColor: PropTypes__default["default"].string,
1209
1220
  disabledBackgroundColor: PropTypes__default["default"].string
1210
1221
  };
@@ -1228,7 +1239,7 @@ const SvgArrow = ({
1228
1239
  fill: fillColor ? fillColor : '#3C393E'
1229
1240
  }));
1230
1241
 
1231
- var css_248z$9 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:10}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
1242
+ var css_248z$9 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
1232
1243
  var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
1233
1244
  styleInject(css_248z$9);
1234
1245
 
@@ -1452,7 +1463,7 @@ const Select = ({
1452
1463
  }
1453
1464
  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
1454
1465
  className: `${styles$7['select-content-top-icon']}`
1455
- }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
1466
+ }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
1456
1467
  className: `${styles$7['close-icon']}`,
1457
1468
  onClick: disabled ? _ => _ : handleClearSelect,
1458
1469
  style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaypay/tui",
3
- "version": "0.0.87",
3
+ "version": "0.0.88",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/button/index.js CHANGED
@@ -29,6 +29,7 @@ export const Button = ({
29
29
  textTransform,
30
30
  backgroundColor,
31
31
  disabledLineColor,
32
+ btnIconMarginRight,
32
33
  backgroundHoverColor,
33
34
  disabledBackgroundColor,
34
35
  ...props
@@ -60,12 +61,12 @@ export const Button = ({
60
61
  style={{
61
62
  display: 'flex',
62
63
  alignItems: 'center',
64
+ justifyContent: 'center',
63
65
  fontSize: size ? size : configStyles.BUTTON.size,
64
66
  fontFamily: font ? font : configStyles.BUTTON.font,
65
67
  height: height ? height : configStyles.BUTTON.height,
66
68
  fontWeight: weight ? weight : configStyles.BUTTON.weight,
67
69
  padding: padding ? padding : configStyles.BUTTON.padding,
68
- justifyContent: icon && label? 'space-between' : 'center',
69
70
  borderRadius: radius ? radius : configStyles.BUTTON.radius,
70
71
  boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
71
72
  transition: transition ? transition : configStyles.BUTTON.transition,
@@ -98,7 +99,7 @@ export const Button = ({
98
99
  className={classProps}
99
100
  {...props}
100
101
  >
101
- {icon && icon} {label && label} {!icon && !label && 'Add icon or label prop on Button component'}
102
+ {icon && icon} {label && <span style={{ marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px' }}>{ label }</span>} {!icon && !label && 'Add icon or label prop on Button component'}
102
103
  </button>
103
104
  );
104
105
  };
@@ -129,6 +130,7 @@ Button.propTypes = {
129
130
  disabledColor: PropTypes.string,
130
131
  backgroundColor: PropTypes.string,
131
132
  disabledLineColor: PropTypes.string,
133
+ btnIconMarginRight: PropTypes.string,
132
134
  backgroundHoverColor: PropTypes.string,
133
135
  disabledBackgroundColor: PropTypes.string
134
136
  };
package/src/components/input/index.js CHANGED
@@ -178,6 +178,10 @@ export const Input = ({
178
178
  setIsHover(false);
179
179
  };
180
180
 
181
+ const handleShowPass = () => {
182
+ setShow(!show);
183
+ };
184
+
181
185
  useEffect(() => {
182
186
  if (errorMessage) {
183
187
  setInnerErrorMessage(errorMessage);
@@ -248,10 +252,11 @@ export const Input = ({
248
252
  {
249
253
  leftIcon && leftIcon.length > 0 && type != 'tel' ?
250
254
  <div
251
- onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
252
- onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
253
- onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
255
+ onClick={type === 'password' ? handleShowPass : _ => _}
254
256
  style={{
257
+ display: 'flex',
258
+ alignItems: 'center',
259
+ justifyContent: 'center',
255
260
  cursor: type === 'password' ? 'pointer' : 'default',
256
261
  height: height ? height : configStyles.INPUT.height,
257
262
  padding: padding ? padding : configStyles.INPUT.padding,
@@ -324,10 +329,11 @@ export const Input = ({
324
329
  {
325
330
  rightIcon && rightIcon.length > 0 ?
326
331
  <div
327
- onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
328
- onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
329
- onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
332
+ onClick={type === 'password' ? handleShowPass : _ => _}
330
333
  style={{
334
+ display: 'flex',
335
+ alignItems: 'center',
336
+ justifyContent: 'center',
331
337
  cursor: type === 'password' ? 'pointer' : 'default',
332
338
  height: height ? height : configStyles.INPUT.height,
333
339
  padding: padding ? padding : configStyles.INPUT.padding,
package/src/components/newAutocomplete/index.js CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
4
4
  import { keyframes, css } from 'styled-components';
5
5
 
6
6
  import { compereConfigs } from './../../utils';
7
-
7
+
8
8
  export const NewAutocomplete = ({
9
9
  label,
10
10
  change,
package/src/components/select/index.js CHANGED
@@ -267,7 +267,7 @@ export const Select = ({
267
267
  !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
268
268
  }
269
269
 
270
- {showCloseIcon && !disabled && newSelected && newSelected.length > 0 &&
270
+ {(showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 &&
271
271
  <div
272
272
  className={`${styles['close-icon']}`}
273
273
  onClick={disabled ? _ => _ : handleClearSelect}
package/src/components/select/select.module.css CHANGED
@@ -16,7 +16,7 @@
16
16
  position: absolute;
17
17
  width: 100%;
18
18
  left: 0px;
19
- z-index: 10;
19
+ z-index: 99999999999;
20
20
  max-height: 0;
21
21
  overflow: hidden;
22
22
  animation: select-show 640ms linear forwards;
package/src/stories/configuration.stories.mdx CHANGED
@@ -145,7 +145,8 @@ import StackAlt from './assets/stackalt.svg';
145
145
  disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
146
146
  transition: 'background-color 240ms, color 240ms', // for transition
147
147
  hoverColor: '#001745', // for hover color
148
- backgroundHoverColor: '#CB3A3A' // for hover background color
148
+ backgroundHoverColor: '#CB3A3A', // for hover background color
149
+ btnIconMarginRight: '5px' // for button icon margin right
149
150
  }
150
151
  ```
151
152
 
package/tui.config.js CHANGED
@@ -22,7 +22,8 @@ module.exports = {
22
22
  disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
23
23
  transition: 'background-color 240ms, color 240ms', // for transition
24
24
  hoverColor: '#001745', // for hover color
25
- backgroundHoverColor: '#CB3A3A' // for hover background color
25
+ backgroundHoverColor: '#CB3A3A', // for hover background color
26
+ btnIconMarginRight: '5px' // for button icon margin right
26
27
  },
27
28
  // default properties for <Input /> component
28
29
  INPUT: {
@@ -180,6 +181,7 @@ module.exports = {
180
181
  },
181
182
  // default properties for <Select /> component
182
183
  SELECT: {
184
+ showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
183
185
  marginTop: '10px', // for error message postion from top
184
186
  labelWeight: '500', // for label font weight
185
187
  labelColor: '#3C393E', // for label color