@xaypay/tui 0.0.84 → 0.0.86

package/dist/index.es.js

@@ -1095,12 +1095,14 @@ const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverColor,
   transition,
   contentWidth,
   disabledColor,
   textTransform,
   backgroundColor,
   disabledLineColor,
+  backgroundHoverColor,
   disabledBackgroundColor,
   ...props
 }) => {
@@ -1135,9 +1137,9 @@ const Button = ({
       width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
       textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
       boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor : color ? color : configStyles.BUTTON.color
     },
     type: type ? type : configStyles.BUTTON.type,
     disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -1166,12 +1168,14 @@ Button.propTypes = {
   padding: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
+  hoverColor: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   disabledLineColor: PropTypes.string,
+  backgroundHoverColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };
 
@@ -1194,7 +1198,7 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-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:9}.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}}";
+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}}";
 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"};
 styleInject(css_248z$9);
 
@@ -1403,6 +1407,9 @@ const Select = ({
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['select-content-top-text']}`,
     style: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
@@ -3880,7 +3887,10 @@ const NewAutocomplete = ({
         id: currentId
       });
     } else {
-      change('');
+      change({
+        name: '',
+        id: ''
+      });
     }
   };
   const handleClick = selectedValue => {
@@ -3952,8 +3962,8 @@ const NewAutocomplete = ({
       alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
-      if (!item.hasOwnProperty('name')) {
-        alert('Please add name property in items of options array');
+      if (!item.hasOwnProperty(keyNames.name)) {
+        alert(`Please add ${keyNames.name} property in items of options array`);
       }
     });
     if (!getItem) {
@@ -3974,7 +3984,7 @@ const NewAutocomplete = ({
       setId('');
       setInnerValue('');
     }
-  }, [selected]);
+  }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,

package/dist/index.js

@@ -1125,12 +1125,14 @@ const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverColor,
   transition,
   contentWidth,
   disabledColor,
   textTransform,
   backgroundColor,
   disabledLineColor,
+  backgroundHoverColor,
   disabledBackgroundColor,
   ...props
 }) => {
@@ -1165,9 +1167,9 @@ const Button = ({
       width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
       textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
       boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor : color ? color : configStyles.BUTTON.color
     },
     type: type ? type : configStyles.BUTTON.type,
     disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -1196,12 +1198,14 @@ Button.propTypes = {
   padding: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
+  hoverColor: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
   textTransform: PropTypes__default["default"].string,
   disabledColor: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   disabledLineColor: PropTypes__default["default"].string,
+  backgroundHoverColor: PropTypes__default["default"].string,
   disabledBackgroundColor: PropTypes__default["default"].string
 };
 
@@ -1224,7 +1228,7 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-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:9}.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}}";
+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}}";
 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"};
 styleInject(css_248z$9);
 
@@ -1433,6 +1437,9 @@ const Select = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top-text']}`,
     style: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
@@ -3910,7 +3917,10 @@ const NewAutocomplete = ({
         id: currentId
       });
     } else {
-      change('');
+      change({
+        name: '',
+        id: ''
+      });
     }
   };
   const handleClick = selectedValue => {
@@ -3982,8 +3992,8 @@ const NewAutocomplete = ({
       alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
-      if (!item.hasOwnProperty('name')) {
-        alert('Please add name property in items of options array');
+      if (!item.hasOwnProperty(keyNames.name)) {
+        alert(`Please add ${keyNames.name} property in items of options array`);
       }
     });
     if (!getItem) {
@@ -4004,7 +4014,7 @@ const NewAutocomplete = ({
       setId('');
       setInnerValue('');
     }
-  }, [selected]);
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/button/index.js

@@ -22,12 +22,14 @@ export const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverColor,
   transition,
   contentWidth,
   disabledColor,
   textTransform,
   backgroundColor,
   disabledLineColor,
+  backgroundHoverColor,
   disabledBackgroundColor,
   ...props
 }) => {
@@ -73,7 +75,9 @@ export const Button = ({
         textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
         backgroundColor:
           (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor :
-          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
+          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' :
+          !outline && !disabled && isHover? backgroundHoverColor ? backgroundHoverColor : configStyles.BUTTON.backgroundHoverColor :
+          backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
         boxShadow:
           outline ?
             disabled ?
@@ -82,7 +86,9 @@ export const Button = ({
           'none',
         color:          
           (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
-          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor :
+          !outline && !disabled && isHover ? hoverColor ? hoverColor : configStyles.BUTTON.hoverColor :
+          color ? color : configStyles.BUTTON.color
       }}
       type={type ? type : configStyles.BUTTON.type}
       disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -116,11 +122,13 @@ Button.propTypes = {
   padding: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
+  hoverColor: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   disabledLineColor: PropTypes.string,
+  backgroundHoverColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };

package/src/components/newAutocomplete/NewAutocomplete.stories.js

@@ -28,7 +28,7 @@ const Template = (args) => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjJjNDMwNzVlNzExZTc4OWI1YzE3ZTY1OGZmMjdmZWZiMWU3NWU3ZGVkYjU5MTJlNjExMjg1YzE5YjAxZDQwYjc0OTg0ZTk5OTI0MTkxY2M0IiwiaWF0IjoxNjg2MjAxNDM4LjEyMzYwNiwibmJmIjoxNjg2MjAxNDM4LjEyMzYxMywiZXhwIjoxNjg2MjI2NjM4LjEwOTI5Niwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.EaNRUEWtVxPAV0yD5Ci53zxCRgxqw4ljfDEkkVcLqh8ypcymHDBITyQJackmopdTi9pqLq43G9XVynBgB5SYDp3mmfpJGdFipFLYG2h6X4VNFmwNaLDi5fAOzZ7bQCg3DDVcQ-_jYc4ph2PJYQT2ZafZ4EPwIBScra-PqrxvkdB7ww5KLELGRdDeqOVhGbXFWxe72gzjL_rAg9YTYEFjP-Qmue-Qqx_sYzRu1fuN8xZ0HJnEB5Ctzpdf8dV4qbb5SyOCtqbR34uTR7iFVu73kzw_udJvtyaywUjWXVrVlh-VOVgHEaUVmktyfwYo8dw6L3KIVWzkx09SePa4YpH5t6XyPD5sFbL7sx-fP3_uiiCtjAZc7vzRZmfbvOQc3C3-28FgjUADtV3f1qf5Kvdss4_8Q0iXaC2-SGHNcVL7SecD68l_px5Jl16mmkRCklo86EEWcV3Av-fAYnQ-4-6sVgkRtfABqi79gQfZac_emBxGEDE4trI81U6ApfTMcaRLfIehJauz9m94zwOyHPIv4t-1eLGRl0wvCTP8BLhgpMWq6F1UfHpTSSnr6dVTBv8IUKjTe4wJfwgU_TCnVbb0sZa2L3GR3vNsf1kDTe5sgOTCaq8INp-VfhxeULQr2eQaP2vTE4zrghKnQTA1YF1n1Hth4Rgc6pEhqW8f0oO-9Wk',
         },
       }).then((res)=> {
         return res.json()
@@ -42,11 +42,11 @@ const Template = (args) => {
       });
   };
 
-  return <NewAutocomplete {...args} getItem={handleClick} options={newOptions} change={handleChange} />
+  return <NewAutocomplete {...args} getItem={handleClick} selected={{ "bbb":"0", "name":"gasdfgdsfgdsg" }} options={newOptions} change={handleChange} />
 };
 export const Default = Template.bind({});
 Default.args = {
   searchCount: 3,
   keyNames: { name: 'name', id: 'bbb' },
-  selected: { "bbb":"0", "name":"gasdfgdsfgdsg" },
+  selected: { "bbb":"0", "name":"gasdfgdsfgdsg" }
 }

package/src/components/newAutocomplete/index.js

@@ -131,7 +131,7 @@ export const NewAutocomplete = ({
         if (value.length >= searchCount) {
             change({ name: value, id: currentId });
         } else {
-            change('');
+            change({ name: '', id: '' });
         }
     };
 
@@ -244,8 +244,8 @@ export const NewAutocomplete = ({
         }
 
         options && options.length > 0 && options.map(item => {
-            if (!item.hasOwnProperty('name')) {
-                alert('Please add name property in items of options array');
+            if (!item.hasOwnProperty(keyNames.name)) {
+                alert(`Please add ${keyNames.name} property in items of options array`);
             }
         });
 
@@ -270,7 +270,7 @@ export const NewAutocomplete = ({
             setId('');
             setInnerValue('');
         }
-    }, [selected]);
+    }, []);
 
     return (
         <>

package/src/components/select/index.js

@@ -243,6 +243,9 @@ export const Select = ({
                         <div
                             className={`${styles['select-content-top-text']}`}
                             style={{
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
                                 color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor,
                             }}
                         >

package/src/components/select/select.module.css

@@ -16,7 +16,7 @@
     position: absolute;
     width: 100%;
     left: 0px;
-    z-index: 9;
+    z-index: 10;
     max-height: 0;
     overflow: hidden;
     animation: select-show 640ms linear forwards;

package/src/stories/configuration.stories.mdx

@@ -144,6 +144,8 @@ import StackAlt from './assets/stackalt.svg';
     disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
     disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
     transition: 'background-color 240ms, color 240ms', // for transition
+    hoverColor: '#001745',                             // for hover color
+    backgroundHoverColor: '#CB3A3A'                    // for hover background color
 }
 ```
 
@@ -420,9 +422,11 @@ import StackAlt from './assets/stackalt.svg';
   minWidth: '200px',                                    // for minimum width
   maxWidth: '500px',                                    // for maximum width
   labelSize: '16px',                                    // for label font size
+  errorSize: '12px',                                    // for error font size
   minHeight: '100px',                                   // for minimum height
   maxHeight: '300px',                                   // for maximum height
   padding: '12px 15px',                                 // for padding
+  errorColor: '#E40E00',                                // for error color
   labelColor: '#3C393E',                                // for label color
   labelWeight: 'normal',                                // for label font weight
   labelDisplay: 'block',                                // for label display

package/tui.config.js

@@ -21,6 +21,8 @@ module.exports = {
         disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
         disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
         transition: 'background-color 240ms, color 240ms', // for transition
+        hoverColor: '#001745',                             // for hover color
+        backgroundHoverColor: '#CB3A3A'                    // for hover background color
     },
     // default properties for <Input /> component
     INPUT: {
@@ -335,12 +337,11 @@ module.exports = {
         height: '200px',                                      // for file choose place height
         color: '#3C393E',                                     // for file place color
         upload: 'Բեռնել',                                     // for file place text
-        maxWidth: '440px',                                       // for file width
+        maxWidth: '440px',                                    // for file width
         labelSize: '16px',                                    // for file font size
         border: '2px dashed',                                 // for file choose place border
-        errorColor: '#ee0000',                                // for file error message color
         labelColor: '#4A4A4D',                                // for file color
-        errorColor: '#ee0000',                                // for file place error color
+        errorColor: '#ee0000',                                // for file place and error message error color
         borderColor: '#D1D1D1',                               // for file choose place border color
         listItemHeight: '70px',                               // for file list item height
         uploadColor: '#0DA574',                               // for file place upload text color