@xaypay/tui 0.0.83 → 0.0.85

package/dist/index.es.js

@@ -657,13 +657,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled.span`
@@ -697,6 +698,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -731,7 +734,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames(className ? className : configStyles.INPUT.className);
+  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -773,13 +776,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -892,6 +915,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -960,6 +985,8 @@ Input.propTypes = {
   errorLeft: PropTypes.string,
   labelSize: PropTypes.string,
   maxLength: PropTypes.number,
+  minNumSize: PropTypes.number,
+  maxNumSize: PropTypes.number,
   errorColor: PropTypes.string,
   labelColor: PropTypes.string,
   borderRight: PropTypes.string,
@@ -1068,12 +1095,14 @@ const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverColor,
   transition,
   contentWidth,
   disabledColor,
   textTransform,
   backgroundColor,
   disabledLineColor,
+  backgroundHoverColor,
   disabledBackgroundColor,
   ...props
 }) => {
@@ -1108,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,
@@ -1139,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
 };
 
@@ -3853,7 +3884,10 @@ const NewAutocomplete = ({
         id: currentId
       });
     } else {
-      change('');
+      change({
+        name: '',
+        id: ''
+      });
     }
   };
   const handleClick = selectedValue => {
@@ -3947,7 +3981,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

@@ -687,13 +687,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled__default["default"].span`
@@ -727,6 +728,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -761,7 +764,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
+  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -803,13 +806,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -922,6 +945,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -990,6 +1015,8 @@ Input.propTypes = {
   errorLeft: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
+  minNumSize: PropTypes__default["default"].number,
+  maxNumSize: PropTypes__default["default"].number,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   borderRight: PropTypes__default["default"].string,
@@ -1098,12 +1125,14 @@ const Button = ({
   disabled,
   className,
   boxSizing,
+  hoverColor,
   transition,
   contentWidth,
   disabledColor,
   textTransform,
   backgroundColor,
   disabledLineColor,
+  backgroundHoverColor,
   disabledBackgroundColor,
   ...props
 }) => {
@@ -1138,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,
@@ -1169,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
 };
 
@@ -3883,7 +3914,10 @@ const NewAutocomplete = ({
         id: currentId
       });
     } else {
-      change('');
+      change({
+        name: '',
+        id: ''
+      });
     }
   };
   const handleClick = selectedValue => {
@@ -3977,7 +4011,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.83",
+  "version": "0.0.85",
   "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/input/index.js

@@ -9,6 +9,7 @@ import styles from "./input.module.css";
 export const InputTypes = {
     TEL: 'tel',
     TEXT: "text",
+    NUMBER: 'number',
     PASSWORD: "password",
 };
 
@@ -44,6 +45,8 @@ export const Input = ({
     errorSize,
     labelSize,
     maxLength,
+    minNumSize,
+    maxNumSize,
     labelColor,
     errorColor,
     borderRight,
@@ -80,7 +83,8 @@ export const Input = ({
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
     const classProps = classnames(
-        className ? className : configStyles.INPUT.className
+        className ? className : configStyles.INPUT.className,
+        type === 'number' ? styles['inp-num'] : ''
     );
 
     const errorShow = keyframes`
@@ -128,16 +132,37 @@ export const Input = ({
                     }
                 }
             }
-        } 
+        }
+
+        if (type === 'number') {
+            if (minNumSize && currentValue < minNumSize) {
+                setInnerValue(minNumSize);
+                if (change) {
+                    change(minNumSize);
+                }
+            }
+            if (maxNumSize && currentValue > maxNumSize) {
+                setInnerValue(maxNumSize);
+                if (change) {
+                    change(maxNumSize);
+                }
+            }
+            if (currentValue === '') {
+                setInnerValue('');
+                if (change) {
+                    change('');
+                }
+            }
+        }
 
-        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+        if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
             setInnerValue(currentValue.substr(0, maxLength));
             if (change) {
                 change(currentValue.substr(0, maxLength));
             }
         }
 
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
             !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
             if (change) {
                 change(currentValue);
@@ -280,6 +305,8 @@ export const Input = ({
                     name={name ? name : `tui_${random}_tui`}
                     placeholder={placeholder ? placeholder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    min={type === 'number' && minNumSize ? minNumSize: ''}
+                    max={type === 'number' && maxNumSize ? maxNumSize : ''}
                     style={{
                         border: 'none',
                         outline: 'none',
@@ -368,6 +395,8 @@ Input.propTypes = {
     errorLeft: PropTypes.string,
     labelSize: PropTypes.string,
     maxLength: PropTypes.number,
+    minNumSize: PropTypes.number,
+    maxNumSize: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
     borderRight: PropTypes.string,

package/src/components/input/input.module.css

@@ -20,6 +20,18 @@ input:-webkit-autofill:active  {
     animation-fill-mode: forwards;
 }
 
+/* Works for Chrome, Safari, Edge, Opera */
+.inp-num::-webkit-outer-spin-button,
+.inp-num::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+.inp-num[type="number"] {
+  -moz-appearance: textfield;
+}
+
 @keyframes error-show {
     100% {
         bottom: -20px;

package/src/components/input/input.stories.js

@@ -22,6 +22,8 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  type: InputTypes.TEXT
+  type: InputTypes.TEXT,
+  minNumSize: 1,
+  maxNumSize: 8.8
 };
 

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: '' });
         }
     };
 
@@ -270,7 +270,7 @@ export const NewAutocomplete = ({
             setId('');
             setInnerValue('');
         }
-    }, [selected]);
+    }, []);
 
     return (
         <>

package/src/components/table/table.stories.js

@@ -294,18 +294,27 @@ const bodyData = [
                 'text for => test',
             ]
         },
-        create: {
-            content: '27.05.2022'
-        },
+        create: [
+            [
+                {
+                    content: '21'
+                }
+            ],
+            [
+                {
+                    content: '13'
+                }
+            ]
+        ],
         actions: [
             [
                 {
-                    id: 20037,
+                    id: 21031,
                     type: 'attach',
                     content: <ReactSVGAttach />
                 },
                 {
-                    id: 20037,
+                    id: 21031,
                     type: 'plus',
                     content: <ReactSVGPlus />
                 }

package/src/components/table/td.js

@@ -58,27 +58,34 @@ const TD = ({
                                 </span>
                             )
                         } else if (newItem && Array.isArray(newItem)) {
-                            const x = item[newIndex].map((iT, iN) => {
-                                // console.log(iT, ' - - - ->>>>>>>>>>>>>>>>>>>>>>>');
-                                // return <span key={`${iT.id}_${iN}`}>
-                                //     {iT}
-                                // </span>;
-                                return <span
+                            return (
+                                <span
                                     style={{
-                                        width: '32px',
-                                        height: '32px',
-                                        marginRight: '10px'
+                                        display: 'inline-block',
+                                        marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
+                                        borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
                                     }}
-                                    id={iT.id}
-                                    type={iT.type}
-                                    className={styles['td-span']}
-                                    key={`${iT.id}_${iN}`}
-                                    onClick={handleBodyActionClick}
                                 >
-                                    { iT.content }
+                                    {
+                                        item[newIndex].map((iT, iN) => {
+                                            return <span
+                                                style={{
+                                                    width: '32px',
+                                                    height: '32px',
+                                                    marginRight: '10px',
+                                                }}
+                                                id={iT.id ? iT.id : ''}
+                                                type={iT.type ? iT.type : ''}
+                                                className={styles['td-span']}
+                                                onClick={handleBodyActionClick}
+                                                key={`${iT.id || iT.content}_${iN}`}
+                                            >
+                                                { iT.content }
+                                            </span>
+                                        })
+                                    }
                                 </span>
-                            });
-                            console.log(x, 'x');
+                            );
                         } else {
                             return <span
                                 key={`${newItem}_${newIndex}`}

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
 }
 ```
 

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: {