@xaypay/tui 0.1.1 → 0.1.3

package/dist/index.es.js

@@ -1596,14 +1596,15 @@ const TD = ({
       optionIndex
     });
   };
-  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
+  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex, contentListInnerItem) => {
     handleContentListClick(e, {
       item,
       index,
       innerIndex,
       listContentId,
       listContent,
-      listContentIndex
+      listContentIndex,
+      contentListInnerItem
     });
   };
   return /*#__PURE__*/React__default.createElement("td", {
@@ -1763,20 +1764,46 @@ const TD = ({
       height: item.status === 'close' ? '0px' : 'auto'
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
-    return /*#__PURE__*/React__default.createElement("p", {
-      key: `${innerItem}_${innerItemIndex}`,
-      className: styles$9['list-text'],
-      style: {
-        maxWidth: '100%',
-        color: openListColor,
-        textAlign: tBodyTextAlign,
-        fontSize: openListFontSize,
-        fontStyle: openListFontStyle,
-        fontWeight: openListFontWeight,
-        fontFamily: openListFontFamily
-      },
-      onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
-    }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    if (Array.isArray(innerItem.content)) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: `__${innerItemIndex}__`,
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      }, innerItem.content.map((contInnerItem, contInnerIndex) => {
+        return /*#__PURE__*/React__default.createElement("p", {
+          key: `${contInnerItem}_${contInnerIndex}`,
+          className: styles$9['list-text'],
+          style: {
+            maxWidth: '100%',
+            color: openListColor,
+            textAlign: tBodyTextAlign,
+            fontSize: openListFontSize,
+            fontStyle: openListFontStyle,
+            fontWeight: openListFontWeight,
+            fontFamily: openListFontFamily,
+            marginRight: contInnerIndex === innerItem.content.length - 1 ? '0px' : '10px'
+          },
+          onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex, contInnerItem)
+        }, contInnerItem.content === 0 ? contInnerItem.content.toString() : contInnerItem.content ? contInnerItem.content : '');
+      }));
+    } else {
+      return /*#__PURE__*/React__default.createElement("p", {
+        key: `${innerItem}_${innerItemIndex}`,
+        className: styles$9['list-text'],
+        style: {
+          maxWidth: '100%',
+          color: openListColor,
+          textAlign: tBodyTextAlign,
+          fontSize: openListFontSize,
+          fontStyle: openListFontStyle,
+          fontWeight: openListFontWeight,
+          fontFamily: openListFontFamily
+        },
+        onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
+      }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    }
   }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default.createElement("div", {
     id: item.id,
     style: {
@@ -2256,7 +2283,8 @@ const Table = ({
       listItemId: data.listContentId,
       listItemContent: data.listContent,
       itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
-      listItemInnerIndex: data.listContentIndex
+      listItemInnerIndex: data.listContentIndex,
+      contentListInnerItem: data.contentListInnerItem
     };
     getData(listData);
   };
@@ -2924,6 +2952,287 @@ Modal.defaultProps = {
   type: 'content'
 };
 
+const handleCheckTypeTel = (val, prevVal) => {
+  const phoneNumberRegex = /^\d{0,8}$/;
+  if (!phoneNumberRegex.test(val)) {
+    val = prevVal;
+  }
+  return val;
+};
+const handleCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+  if (maxLength && maxLength > 0) {
+    if (val.length > maxLength) {
+      val = val.substr(0, maxLength);
+    }
+  } else {
+    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+    if (val.length > 16 && !val.includes('.')) {
+      val = val.substr(0, 16);
+    }
+    if (val < Number.MIN_SAFE_INTEGER || val > Number.MAX_SAFE_INTEGER || innerMinNumSize && val < innerMinNumSize || maxNumSize && val > maxNumSize) {
+      val = prevVal;
+    }
+    const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+    const int = floatNumParts[0];
+    const float = floatNumParts[1];
+    if (floatToFix > 0) {
+      if (float && float.length > 0) {
+        let floatResult = '';
+        [...float].map((item, index) => {
+          if (index + 1 <= floatToFix) {
+            floatResult += item;
+          }
+        });
+        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
+      }
+    } else {
+      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+        val = `${int}`;
+      }
+    }
+    if (!regNum.test(val)) {
+      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+        return b + c.replace(/\./g, '');
+      });
+      val = newStr;
+    }
+  }
+  if (withoutDot && !/^\d+$/.test(val)) {
+    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+      return b + c.replace(/\./g, '');
+    });
+    val = newStr;
+  }
+  return val;
+};
+
+const TelInput = ({
+  type,
+  value,
+  radius,
+  inputChange,
+  isHover,
+  disabled,
+  inpStyles,
+  errorColor,
+  phoneDisplay,
+  inpAttributes,
+  phoneAlignItems,
+  innerErrorMessage,
+  telBorderRightWidth,
+  telBorderRightColor,
+  telBorderRightStyle,
+  phoneJustifyContent,
+  telBorderRightColorHover
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    currentValue = handleCheckTypeTel(currentValue, prevValue);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = handleCheckTypeTel(value, newValue);
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      ...inpStyles,
+      width: 'auto',
+      display: phoneDisplay,
+      alignItems: phoneAlignItems,
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      justifyContent: phoneJustifyContent,
+      pointerEvents: disabled ? 'none' : 'auto',
+      borderRight: `${telBorderRightWidth} ${telBorderRightStyle}`,
+      borderColor: innerErrorMessage ? errorColor : isHover ? telBorderRightColorHover : telBorderRightColor
+    }
+  }, "+374"), /*#__PURE__*/React__default.createElement("input", {
+    type: type,
+    value: innerValue,
+    disabled: disabled,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  }));
+};
+
+const TextInput = ({
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = value;
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const PassInput = ({
+  show,
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpAttributes,
+  inpStyles
+}) => {
+  const [innerShow, setInnerShow] = useState('');
+  const [innerValue, setInnerValue] = useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  useEffect(() => {
+    setInnerShow(show);
+  }, [show]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: innerShow ? 'text' : 'password',
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const NumberInput = ({
+  dots,
+  value,
+  float,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes,
+  minNumSize,
+  maxNumSize
+}) => {
+  const [innerValue, setInnerValue] = useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = useState(0);
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    const max = maxLength ? maxLength : null;
+    currentValue = handleCheckTypeNumber(currentValue, prevValue, max, float, maxNumSize, dots, innerMinNumSize);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  useEffect(() => {
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if ((maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
+  }, [maxLength, minNumSize, maxNumSize]);
+  useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      const max = maxLength ? maxLength : null;
+      newValue = handleCheckTypeNumber(value, newValue, max, float, maxNumSize, dots, innerMinNumSize);
+    }
+    setInnerValue(() => newValue);
+  }, [dots, value, float, maxNumSize, minNumSize]);
+  return /*#__PURE__*/React__default.createElement("input", {
+    type: "text",
+    value: innerValue,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    },
+    min: minNumSize,
+    max: maxNumSize,
+    onInput: handleChange
+  });
+};
+
 var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.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$7 = {"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$9);
@@ -3001,15 +3310,29 @@ const Input = ({
   telBorderRightColor,
   backgroundDisableColor,
   errorAnimationDuration,
-  telBorderRightColorHover,
-  ...props
+  telBorderRightColorHover
 }) => {
-  const phoneNumberRegex = /^\d+$/;
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
-  const [innerValue, setInnerValue] = useState('');
-  const [innerMinNumSize, setInnerMinNumSize] = useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
+  const inpStyles = {
+    width: width ?? merge.INPUT.width,
+    cursor: disabled ? 'not-allowed' : 'auto',
+    height: height ?? merge.INPUT.height,
+    padding: padding ?? merge.INPUT.padding,
+    fontSize: size ?? merge.INPUT.font.size,
+    fontStyle: style ?? merge.INPUT.font.style,
+    fontWeight: weight ?? merge.INPUT.font.weight,
+    fontFamily: family ?? merge.INPUT.font.family,
+    boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+    backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
+  };
+  const inpAttributes = {
+    placeholder: placeholder ?? '',
+    iName: name ? name : `tui_${random}_tui`,
+    autoComplete: autoComplete ?? merge.INPUT.autoComplete
+  };
   const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames(className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = keyframes`
@@ -3025,104 +3348,6 @@ const Input = ({
   const animation = () => css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
     `;
-  const handleCheckTypeTel = (val, prevVal) => {
-    if (type === 'tel') {
-      if (!phoneNumberRegex.test(val)) {
-        if (errorMessage) {
-          setInnerErrorMessage(errorMessage);
-        }
-        if (val !== '') {
-          val = prevVal;
-        }
-      } else {
-        setInnerErrorMessage('');
-        if (val.length > 8) {
-          val = val.substr(0, 8);
-        }
-      }
-    }
-    return val;
-  };
-  const handleCheckTypeNumber = (val, prevVal) => {
-    if (type === 'number') {
-      if (maxLength && maxLength > 0) {
-        if (val.length > maxLength) {
-          val = val.substr(0, maxLength);
-        }
-      } else {
-        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-        if (val.length > 16 && !val.includes('.')) {
-          val = val.substr(0, 16);
-        }
-        if (val > Number.MAX_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (val < Number.MIN_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (innerMinNumSize && val < innerMinNumSize) {
-          val = prevVal;
-        }
-        if (maxNumSize && val > maxNumSize) {
-          val = prevVal;
-        }
-        if (floatToFix > 0) {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          const float = floatNumParts[1];
-          if (float && float.length > 0) {
-            let floatResult = '';
-            [...float].map((item, index) => {
-              if (index + 1 <= floatToFix) {
-                floatResult += item;
-              }
-            });
-            if (floatResult !== '') {
-              val = `${int}.${floatResult}`;
-            } else {
-              val = `${int}`;
-            }
-          }
-        } else {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-            val = `${int}`;
-          }
-        }
-        if (!regNum.test(val)) {
-          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-            return b + c.replace(/\./g, '');
-          });
-          val = newStr;
-        }
-      }
-      if (withoutDot && !/^\d+$/.test(val)) {
-        const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
-    }
-    return val;
-  };
-  const handleChange = event => {
-    let prevValue = innerValue;
-    let currentValue = event.target.value;
-    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-    currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue, prevValue);
-    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
-      currentValue = currentValue.substr(0, max);
-    }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-    }
-    setInnerValue(() => currentValue);
-    if (change && currentValue !== prevValue) {
-      change(currentValue);
-    }
-  };
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -3133,41 +3358,15 @@ const Input = ({
     setShow(!show);
   };
   useEffect(() => {
-    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    if (minNumSize && minNumSize < 0) {
-      setInnerMinNumSize(0);
-      alert("minNumSize prop can't be less then 0");
-    } else if (minNumSize && minNumSize >= 0) {
-      setInnerMinNumSize(minNumSize);
-    }
-    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
-      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
-    }
-    if (type === 'number' && maxNumSize < minNumSize) {
-      alert("maxNumSize prop can't be less then minNumSize");
-    }
-    if (value !== undefined) {
-      if (value === null) {
-        newValue = '';
-      } else {
-        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-        newValue = handleCheckTypeTel(value, newValue);
-        newValue = handleCheckTypeNumber(value, newValue);
-        if (max && value.length > max && type !== 'tel' && type !== 'number') {
-          newValue = value.substr(0, max);
-        }
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-          !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-        }
-      }
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+      !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
-    setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
+  }, [type, regexp, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -3205,56 +3404,50 @@ const Input = ({
       borderBottomLeftRadius: radius ?? merge.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      // border: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      borderTopLeftRadius: radius ?? merge.INPUT.radius,
-      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
-      display: phoneDisplay ?? merge.INPUT.tel.display,
-      borderRight: `
-                                ${telBorderRightWidth ?? merge.INPUT.tel.borderRight.width}
-                                ${telBorderRightStyle ?? merge.INPUT.tel.borderRight.style}`,
-      alignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
-      borderColor: innerErrorMessage ? errorColor ? errorColor : merge.INPUT.error.color : isHover ? telBorderRightColorHover ? telBorderRightColorHover : merge.INPUT.tel.borderRight.colors.hover : telBorderRightColor ? telBorderRightColor : merge.INPUT.tel.borderRight.color,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      justifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
-    value: innerValue,
-    onInput: handleChange,
-    disabled: disabled ? disabled : '',
-    name: name ? name : `tui_${random}_tui`,
-    placeholder: placeholder ? placeholder : '',
-    type: show || type === 'number' ? 'text' : type,
-    min: type === 'number' && minNumSize ? minNumSize : '',
-    max: type === 'number' && maxNumSize ? maxNumSize : '',
-    autoComplete: autoComplete ? autoComplete : merge.INPUT.autoComplete,
-    style: {
-      border: 'none',
-      outline: 'none',
-      cursor: disabled ? 'not-allowed' : 'auto',
-      width: width ?? merge.INPUT.width,
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      borderRadius: radius ?? merge.INPUT.radius,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement(TelInput, {
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius,
+    phoneDisplay: phoneDisplay ?? merge.INPUT.tel.display,
+    phoneAlignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
+    phoneJustifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
+    telBorderRightWidth: telBorderRightWidth ?? merge.INPUT.tel.borderRight.width,
+    telBorderRightStyle: telBorderRightStyle ?? merge.INPUT.tel.borderRight.style,
+    telBorderRightColor: telBorderRightColor ?? merge.INPUT.tel.borderRight.color,
+    telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
+  }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
+    value: value,
+    inputChange: change,
+    dots: withoutDot,
+    float: floatToFix,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    minNumSize: minNumSize ? minNumSize : '',
+    maxNumSize: maxNumSize ? maxNumSize : '',
+    radius: radius ?? merge.INPUT.radius
+  }) : type === 'password' ? /*#__PURE__*/React__default.createElement(PassInput, {
+    show: show,
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }) : /*#__PURE__*/React__default.createElement(TextInput, {
+    value: value,
+    inputChange: change,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',

package/dist/index.js

@@ -1626,14 +1626,15 @@ const TD = ({
       optionIndex
     });
   };
-  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
+  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex, contentListInnerItem) => {
     handleContentListClick(e, {
       item,
       index,
       innerIndex,
       listContentId,
       listContent,
-      listContentIndex
+      listContentIndex,
+      contentListInnerItem
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("td", {
@@ -1793,20 +1794,46 @@ const TD = ({
       height: item.status === 'close' ? '0px' : 'auto'
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement("p", {
-      key: `${innerItem}_${innerItemIndex}`,
-      className: styles$9['list-text'],
-      style: {
-        maxWidth: '100%',
-        color: openListColor,
-        textAlign: tBodyTextAlign,
-        fontSize: openListFontSize,
-        fontStyle: openListFontStyle,
-        fontWeight: openListFontWeight,
-        fontFamily: openListFontFamily
-      },
-      onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
-    }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    if (Array.isArray(innerItem.content)) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: `__${innerItemIndex}__`,
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      }, innerItem.content.map((contInnerItem, contInnerIndex) => {
+        return /*#__PURE__*/React__default["default"].createElement("p", {
+          key: `${contInnerItem}_${contInnerIndex}`,
+          className: styles$9['list-text'],
+          style: {
+            maxWidth: '100%',
+            color: openListColor,
+            textAlign: tBodyTextAlign,
+            fontSize: openListFontSize,
+            fontStyle: openListFontStyle,
+            fontWeight: openListFontWeight,
+            fontFamily: openListFontFamily,
+            marginRight: contInnerIndex === innerItem.content.length - 1 ? '0px' : '10px'
+          },
+          onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex, contInnerItem)
+        }, contInnerItem.content === 0 ? contInnerItem.content.toString() : contInnerItem.content ? contInnerItem.content : '');
+      }));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        key: `${innerItem}_${innerItemIndex}`,
+        className: styles$9['list-text'],
+        style: {
+          maxWidth: '100%',
+          color: openListColor,
+          textAlign: tBodyTextAlign,
+          fontSize: openListFontSize,
+          fontStyle: openListFontStyle,
+          fontWeight: openListFontWeight,
+          fontFamily: openListFontFamily
+        },
+        onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
+      }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    }
   }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
@@ -2286,7 +2313,8 @@ const Table = ({
       listItemId: data.listContentId,
       listItemContent: data.listContent,
       itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
-      listItemInnerIndex: data.listContentIndex
+      listItemInnerIndex: data.listContentIndex,
+      contentListInnerItem: data.contentListInnerItem
     };
     getData(listData);
   };
@@ -2954,6 +2982,287 @@ Modal.defaultProps = {
   type: 'content'
 };
 
+const handleCheckTypeTel = (val, prevVal) => {
+  const phoneNumberRegex = /^\d{0,8}$/;
+  if (!phoneNumberRegex.test(val)) {
+    val = prevVal;
+  }
+  return val;
+};
+const handleCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+  if (maxLength && maxLength > 0) {
+    if (val.length > maxLength) {
+      val = val.substr(0, maxLength);
+    }
+  } else {
+    const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+    if (val.length > 16 && !val.includes('.')) {
+      val = val.substr(0, 16);
+    }
+    if (val < Number.MIN_SAFE_INTEGER || val > Number.MAX_SAFE_INTEGER || innerMinNumSize && val < innerMinNumSize || maxNumSize && val > maxNumSize) {
+      val = prevVal;
+    }
+    const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+    const int = floatNumParts[0];
+    const float = floatNumParts[1];
+    if (floatToFix > 0) {
+      if (float && float.length > 0) {
+        let floatResult = '';
+        [...float].map((item, index) => {
+          if (index + 1 <= floatToFix) {
+            floatResult += item;
+          }
+        });
+        floatResult !== '' ? val = `${int}.${floatResult}` : val = `${int}`;
+      }
+    } else {
+      if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+        val = `${int}`;
+      }
+    }
+    if (!regNum.test(val)) {
+      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+        return b + c.replace(/\./g, '');
+      });
+      val = newStr;
+    }
+  }
+  if (withoutDot && !/^\d+$/.test(val)) {
+    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+      return b + c.replace(/\./g, '');
+    });
+    val = newStr;
+  }
+  return val;
+};
+
+const TelInput = ({
+  type,
+  value,
+  radius,
+  inputChange,
+  isHover,
+  disabled,
+  inpStyles,
+  errorColor,
+  phoneDisplay,
+  inpAttributes,
+  phoneAlignItems,
+  innerErrorMessage,
+  telBorderRightWidth,
+  telBorderRightColor,
+  telBorderRightStyle,
+  phoneJustifyContent,
+  telBorderRightColorHover
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    currentValue = handleCheckTypeTel(currentValue, prevValue);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = handleCheckTypeTel(value, newValue);
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      ...inpStyles,
+      width: 'auto',
+      display: phoneDisplay,
+      alignItems: phoneAlignItems,
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius,
+      justifyContent: phoneJustifyContent,
+      pointerEvents: disabled ? 'none' : 'auto',
+      borderRight: `${telBorderRightWidth} ${telBorderRightStyle}`,
+      borderColor: innerErrorMessage ? errorColor : isHover ? telBorderRightColorHover : telBorderRightColor
+    }
+  }, "+374"), /*#__PURE__*/React__default["default"].createElement("input", {
+    type: type,
+    value: innerValue,
+    disabled: disabled,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  }));
+};
+
+const TextInput = ({
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = value;
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "text",
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const PassInput = ({
+  show,
+  value,
+  radius,
+  inputChange,
+  maxLength,
+  inpAttributes,
+  inpStyles
+}) => {
+  const [innerShow, setInnerShow] = React.useState('');
+  const [innerValue, setInnerValue] = React.useState('');
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    if (maxLength && currentValue.length > maxLength) {
+      currentValue = currentValue.substr(0, maxLength);
+    }
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      newValue = value;
+      if (maxLength && value.length > maxLength) {
+        newValue = value.substr(0, maxLength);
+      }
+    }
+    setInnerValue(() => newValue);
+  }, [value]);
+  React.useEffect(() => {
+    setInnerShow(show);
+  }, [show]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: innerShow ? 'text' : 'password',
+    value: innerValue,
+    onInput: handleChange,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    }
+  });
+};
+
+const NumberInput = ({
+  dots,
+  value,
+  float,
+  radius,
+  inputChange,
+  maxLength,
+  inpStyles,
+  inpAttributes,
+  minNumSize,
+  maxNumSize
+}) => {
+  const [innerValue, setInnerValue] = React.useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
+  const handleChange = event => {
+    let prevValue = innerValue;
+    let currentValue = event.target.value;
+    const max = maxLength ? maxLength : null;
+    currentValue = handleCheckTypeNumber(currentValue, prevValue, max, float, maxNumSize, dots, innerMinNumSize);
+    setInnerValue(() => currentValue);
+    if (inputChange && currentValue !== prevValue) {
+      inputChange(currentValue);
+    }
+  };
+  React.useEffect(() => {
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if ((maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
+  }, [maxLength, minNumSize, maxNumSize]);
+  React.useEffect(() => {
+    let newValue = '';
+    if (value !== undefined && value !== null) {
+      const max = maxLength ? maxLength : null;
+      newValue = handleCheckTypeNumber(value, newValue, max, float, maxNumSize, dots, innerMinNumSize);
+    }
+    setInnerValue(() => newValue);
+  }, [dots, value, float, maxNumSize, minNumSize]);
+  return /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "text",
+    value: innerValue,
+    name: inpAttributes?.iName,
+    placeholder: inpAttributes?.placeholder,
+    autoComplete: inpAttributes?.autoComplete,
+    style: {
+      ...inpStyles,
+      border: 'none',
+      outline: 'none',
+      borderRadius: radius
+    },
+    min: minNumSize,
+    max: maxNumSize,
+    onInput: handleChange
+  });
+};
+
 var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.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$7 = {"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$9);
@@ -3031,15 +3340,29 @@ const Input = ({
   telBorderRightColor,
   backgroundDisableColor,
   errorAnimationDuration,
-  telBorderRightColorHover,
-  ...props
+  telBorderRightColorHover
 }) => {
-  const phoneNumberRegex = /^\d+$/;
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
-  const [innerValue, setInnerValue] = React.useState('');
-  const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
+  const inpStyles = {
+    width: width ?? merge.INPUT.width,
+    cursor: disabled ? 'not-allowed' : 'auto',
+    height: height ?? merge.INPUT.height,
+    padding: padding ?? merge.INPUT.padding,
+    fontSize: size ?? merge.INPUT.font.size,
+    fontStyle: style ?? merge.INPUT.font.style,
+    fontWeight: weight ?? merge.INPUT.font.weight,
+    fontFamily: family ?? merge.INPUT.font.family,
+    boxSizing: boxSizing ?? merge.INPUT.box.sizing,
+    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
+    backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
+  };
+  const inpAttributes = {
+    placeholder: placeholder ?? '',
+    iName: name ? name : `tui_${random}_tui`,
+    autoComplete: autoComplete ?? merge.INPUT.autoComplete
+  };
   const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames__default["default"](className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = styled.keyframes`
@@ -3055,104 +3378,6 @@ const Input = ({
   const animation = () => styled.css`
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
     `;
-  const handleCheckTypeTel = (val, prevVal) => {
-    if (type === 'tel') {
-      if (!phoneNumberRegex.test(val)) {
-        if (errorMessage) {
-          setInnerErrorMessage(errorMessage);
-        }
-        if (val !== '') {
-          val = prevVal;
-        }
-      } else {
-        setInnerErrorMessage('');
-        if (val.length > 8) {
-          val = val.substr(0, 8);
-        }
-      }
-    }
-    return val;
-  };
-  const handleCheckTypeNumber = (val, prevVal) => {
-    if (type === 'number') {
-      if (maxLength && maxLength > 0) {
-        if (val.length > maxLength) {
-          val = val.substr(0, maxLength);
-        }
-      } else {
-        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-        if (val.length > 16 && !val.includes('.')) {
-          val = val.substr(0, 16);
-        }
-        if (val > Number.MAX_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (val < Number.MIN_SAFE_INTEGER) {
-          val = prevVal;
-        }
-        if (innerMinNumSize && val < innerMinNumSize) {
-          val = prevVal;
-        }
-        if (maxNumSize && val > maxNumSize) {
-          val = prevVal;
-        }
-        if (floatToFix > 0) {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          const float = floatNumParts[1];
-          if (float && float.length > 0) {
-            let floatResult = '';
-            [...float].map((item, index) => {
-              if (index + 1 <= floatToFix) {
-                floatResult += item;
-              }
-            });
-            if (floatResult !== '') {
-              val = `${int}.${floatResult}`;
-            } else {
-              val = `${int}`;
-            }
-          }
-        } else {
-          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-          const int = floatNumParts[0];
-          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-            val = `${int}`;
-          }
-        }
-        if (!regNum.test(val)) {
-          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-            return b + c.replace(/\./g, '');
-          });
-          val = newStr;
-        }
-      }
-      if (withoutDot && !/^\d+$/.test(val)) {
-        const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
-    }
-    return val;
-  };
-  const handleChange = event => {
-    let prevValue = innerValue;
-    let currentValue = event.target.value;
-    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-    currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue, prevValue);
-    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
-      currentValue = currentValue.substr(0, max);
-    }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-      !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-    }
-    setInnerValue(() => currentValue);
-    if (change && currentValue !== prevValue) {
-      change(currentValue);
-    }
-  };
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -3163,41 +3388,15 @@ const Input = ({
     setShow(!show);
   };
   React.useEffect(() => {
-    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    if (minNumSize && minNumSize < 0) {
-      setInnerMinNumSize(0);
-      alert("minNumSize prop can't be less then 0");
-    } else if (minNumSize && minNumSize >= 0) {
-      setInnerMinNumSize(minNumSize);
-    }
-    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
-      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
-    }
-    if (type === 'number' && maxNumSize < minNumSize) {
-      alert("maxNumSize prop can't be less then minNumSize");
-    }
-    if (value !== undefined) {
-      if (value === null) {
-        newValue = '';
-      } else {
-        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : merge.INPUT.maxLength;
-        newValue = handleCheckTypeTel(value, newValue);
-        newValue = handleCheckTypeNumber(value, newValue);
-        if (max && value.length > max && type !== 'tel' && type !== 'number') {
-          newValue = value.substr(0, max);
-        }
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
-          !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-        }
-      }
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+      !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
     }
-    setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
+  }, [type, regexp, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -3235,56 +3434,50 @@ const Input = ({
       borderBottomLeftRadius: radius ?? merge.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      // border: 'none',
-      pointerEvents: disabled ? 'none' : 'auto',
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      borderTopLeftRadius: radius ?? merge.INPUT.radius,
-      borderBottomLeftRadius: radius ?? merge.INPUT.radius,
-      display: phoneDisplay ?? merge.INPUT.tel.display,
-      borderRight: `
-                                ${telBorderRightWidth ?? merge.INPUT.tel.borderRight.width}
-                                ${telBorderRightStyle ?? merge.INPUT.tel.borderRight.style}`,
-      alignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
-      borderColor: innerErrorMessage ? errorColor ? errorColor : merge.INPUT.error.color : isHover ? telBorderRightColorHover ? telBorderRightColorHover : merge.INPUT.tel.borderRight.colors.hover : telBorderRightColor ? telBorderRightColor : merge.INPUT.tel.borderRight.color,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      justifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
-    value: innerValue,
-    onInput: handleChange,
-    disabled: disabled ? disabled : '',
-    name: name ? name : `tui_${random}_tui`,
-    placeholder: placeholder ? placeholder : '',
-    type: show || type === 'number' ? 'text' : type,
-    min: type === 'number' && minNumSize ? minNumSize : '',
-    max: type === 'number' && maxNumSize ? maxNumSize : '',
-    autoComplete: autoComplete ? autoComplete : merge.INPUT.autoComplete,
-    style: {
-      border: 'none',
-      outline: 'none',
-      cursor: disabled ? 'not-allowed' : 'auto',
-      width: width ?? merge.INPUT.width,
-      fontSize: size ?? merge.INPUT.font.size,
-      fontStyle: style ?? merge.INPUT.font.style,
-      fontWeight: weight ?? merge.INPUT.font.weight,
-      fontFamily: family ?? merge.INPUT.font.family,
-      height: height ?? merge.INPUT.height,
-      padding: padding ?? merge.INPUT.padding,
-      borderRadius: radius ?? merge.INPUT.radius,
-      boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-      color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
-      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
-    }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius,
+    phoneDisplay: phoneDisplay ?? merge.INPUT.tel.display,
+    phoneAlignItems: phoneAlignItems ?? merge.INPUT.tel.alignItems,
+    phoneJustifyContent: phoneJustifyContent ?? merge.INPUT.tel.justifyContent,
+    telBorderRightWidth: telBorderRightWidth ?? merge.INPUT.tel.borderRight.width,
+    telBorderRightStyle: telBorderRightStyle ?? merge.INPUT.tel.borderRight.style,
+    telBorderRightColor: telBorderRightColor ?? merge.INPUT.tel.borderRight.color,
+    telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
+  }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
+    value: value,
+    inputChange: change,
+    dots: withoutDot,
+    float: floatToFix,
+    maxLength: maxLength,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    minNumSize: minNumSize ? minNumSize : '',
+    maxNumSize: maxNumSize ? maxNumSize : '',
+    radius: radius ?? merge.INPUT.radius
+  }) : type === 'password' ? /*#__PURE__*/React__default["default"].createElement(PassInput, {
+    show: show,
+    type: type,
+    value: value,
+    inputChange: change,
+    isHover: isHover,
+    disabled: disabled,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
+    value: value,
+    inputChange: change,
+    inpStyles: inpStyles,
+    inpAttributes: inpAttributes,
+    radius: radius ?? merge.INPUT.radius
+  }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
       display: 'flex',

package/package.json

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