@xaypay/tui 0.0.71 → 0.0.73

package/package.json

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

package/src/components/autocomplate/autocomplate.stories.js

@@ -21,7 +21,7 @@ Default.args = {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6Ijk2Mjk0MjJkNTY1ZTQ3MGM3MjFkZjY5NDgzMzE3ZThmYjdlMDJmMjI4YjY5MzZhYzdiM2EzMWM4ODZkMWQwZDk2YjIzNzYwMmJhMWE0MTE0IiwiaWF0IjoxNjY5MTgyOTI5LjczMjIwOCwibmJmIjoxNjY5MTgyOTI5LjczMjIzLCJleHAiOjE2NjkyMDgxMjkuNzEyNDczLCJzdWIiOiJtaW5hcyIsInNjb3BlcyI6WyJlbWFpbCJdfQ.NsFsqDHOBYzgReUtW9iumbEvYCB8O7yCIJ2UTz0-AeVEjdUxE-htZMBYF8pP3m-lM1IQ3iN2ude7AZhTzVLMAhTt-5tKJr8YAxhX28yCBLYsFHE-e0k7-FLKBkkZxt9yrvX_Rz8aSQ39-3HrkyB-BYHzV5-GnMgAhnrWKYlTmrVFi9SWu0WBYPHvblMTEh3Vkkd1ESn7fUhy8gf8qma0ChRAMbkozLffbVVYfnWlU0eySD2PUWrZ26JtKAX6k-q7TiMd6HMjOEFUi80JH7aoKDI1vdg8kKlPqcjYTEJK3hzIJrtOHTTUoW4m1-k5x9Le3ULdT4Hctr0bh--ERShnTTg-DBJh0zIoBol4hFHZnA35_FEqKBkDAJ3EOt9DusBTJ9Iad-JzrxJqb-4uhzWjTg8f3F_IedPgG3pwqGkSw2U2dVqzwdqy3yaElp7SGWpicNxJWJsr5Vfa8gLhMkmDMooOHNBUNkS-4Z8Cn6dPc-1mg2JZxrBuSMElkp8-DQr9Xe9VBf8wCUEdHDvQmb-6LIEL8njS2XGL82m827uO-BOVVOIiZO-BVGn_VjIwdhywrjmudPWBy2CVUxHEft64Bz3VkS2FnFoSN7_zsaCE6dpXWTRJKv-4IeBv8pn4-lYw67jMINza7Om9_6BOlnk1VvjixmulPyTobgEO7PQ6FeE',
+        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
       },
     }).then((res)=> {
       return res.json()

package/src/components/icon/ListItemJpeg.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemJpeg = ({ title, titleId, ...props }) => (
+  <svg
+    width="33"
+    height="42"
+    viewBox="0 0 33 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m32.384 10.667-.022-.026-.021-.025a.356.356 0 0 0-.052-.058L21.896.21 21.87.188l-.025-.021-.029-.026a.477.477 0 0 1-.029-.025L21.678 0H3.41c-.771 0-1.511.305-2.057.848A2.891 2.891 0 0 0 .5 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 3.409 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H3.41a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.588 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.588Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.98a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.588a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.588 11.99a.724.724 0 1 1 0-1.448H17.02a.724.724 0 0 1 0 1.449H5.588Zm17.974-1.643A1.451 1.451 0 0 1 22.107 8.9V2.47l7.913 7.878h-6.458ZM8.576 32.088v4.478c0 .246-.042.454-.127.624a.91.91 0 0 1-.352.382.99.99 0 0 1-.505.128c-.2 0-.374-.034-.523-.101a.755.755 0 0 1-.343-.334c-.079-.156-.119-.36-.119-.611H5.5c0 .436.09.797.268 1.08.179.285.425.496.738.634.317.137.679.206 1.086.206.398 0 .754-.079 1.068-.237.313-.158.56-.387.742-.686.182-.299.273-.66.273-1.085v-4.478H8.576Zm3.472 4.012h1.327c.495 0 .915-.079 1.261-.237.349-.158.614-.386.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.741-.272-1.046a1.849 1.849 0 0 0-.796-.72c-.345-.176-.766-.264-1.261-.264h-2.43v6.398h1.103V36.1Zm0-.874v-2.26h1.327c.29 0 .524.055.703.163a.97.97 0 0 1 .391.431c.085.176.128.365.128.567 0 .214-.043.404-.128.571a.876.876 0 0 1-.39.387c-.18.094-.414.14-.704.14h-1.327Zm14.545.087v2.444c-.09.12-.233.252-.426.395-.19.141-.444.263-.76.365-.317.103-.71.154-1.182.154-.402 0-.77-.068-1.103-.202a2.415 2.415 0 0 1-.866-.602 2.755 2.755 0 0 1-.558-.963 3.964 3.964 0 0 1-.198-1.3v-.444c0-.484.06-.914.18-1.292.123-.381.299-.703.527-.967.229-.264.504-.463.827-.598a2.805 2.805 0 0 1 1.103-.206c.524 0 .958.088 1.3.263.346.173.613.413.8.721.188.308.307.66.356 1.055h-1.08a1.7 1.7 0 0 0-.207-.598 1.046 1.046 0 0 0-.431-.413c-.185-.102-.425-.154-.72-.154-.256 0-.48.049-.673.145a1.271 1.271 0 0 0-.483.426 2.093 2.093 0 0 0-.286.686c-.065.27-.097.577-.097.923v.452c0 .352.037.664.11.937.076.272.185.502.325.69.144.187.318.33.523.426.205.093.437.14.695.14.252 0 .458-.02.62-.061.16-.044.288-.095.381-.154.097-.062.172-.12.225-.176v-1.27h-1.332v-.822h2.43ZM16.7 32.085h3.791v.884h-2.78v1.754h2.618v.875H17.71v2.033h2.781v.884h-3.79v-6.43Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemJpeg;

package/src/components/icon/ListItemPng.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgListItemPng = ({ title, titleId, ...props }) => (
+  <svg
+    width="32"
+    height="42"
+    viewBox="0 0 32 42"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m31.873 10.655-.011-.014c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.476.476 0 0 0-.029-.025l-.029-.026L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108a.21.21 0 0 1-.01-.012Zm-1.327 28.449a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458ZM9.103 36.012h1.327c.495 0 .916-.079 1.261-.237.349-.158.614-.385.796-.681.181-.296.272-.65.272-1.064 0-.392-.09-.74-.272-1.046a1.85 1.85 0 0 0-.796-.72c-.345-.176-.766-.264-1.26-.264H8v6.398h1.103v-2.386Zm0-.874v-2.26h1.327c.29 0 .525.055.703.163.179.109.31.253.391.431.085.176.128.365.128.567 0 .214-.043.404-.128.571a.877.877 0 0 1-.39.387c-.18.094-.414.14-.704.14H9.103ZM13.7 32h1.09l3.292 5.106a63.566 63.566 0 0 1-.044-1.379V32h.956v6.398h-1.1l-3.303-4.9.002.044c.012.134.02.279.027.435l.018.468c.006.163.009.327.009.49v3.463H13.7V32Zm11.393 5.66v-2.443h-2.43v.822h1.332v1.27a1.19 1.19 0 0 1-.225.175c-.093.059-.22.11-.382.154a2.578 2.578 0 0 1-.62.062c-.257 0-.489-.047-.694-.14a1.408 1.408 0 0 1-.523-.427 2.062 2.062 0 0 1-.325-.69 3.614 3.614 0 0 1-.11-.936v-.453c0-.346.032-.653.097-.923.064-.27.16-.498.285-.685.13-.188.29-.33.484-.426.193-.097.417-.146.672-.146.296 0 .536.052.721.154.188.1.331.238.43.413a1.7 1.7 0 0 1 .207.598h1.081a2.633 2.633 0 0 0-.356-1.055 1.913 1.913 0 0 0-.8-.72c-.342-.176-.776-.264-1.3-.264-.41 0-.778.069-1.103.206a2.204 2.204 0 0 0-.826.598 2.742 2.742 0 0 0-.528.967c-.12.378-.18.809-.18 1.292v.444c0 .486.066.92.198 1.3.132.378.318.7.558.963.243.264.532.464.866.602.334.135.701.202 1.103.202.471 0 .865-.051 1.182-.154.316-.102.57-.224.76-.364.193-.144.335-.276.426-.396Z"
+      fill="#051942"
+    />
+  </svg>
+);
+export default SvgListItemPng;

package/src/components/icon/index.js

@@ -1 +1,2 @@
-export { default as ListItemDelete } from "./ListItemDelete";
+export { default as Jpeg } from "./Jpeg";
+export { default as Png } from "./Png";

package/src/components/input/index.js

@@ -12,6 +12,10 @@ export const InputTypes = {
     PASSWORD: "password",
 };
 
+const P = styled.p`
+    animation: ${props => props.errorAnimation ? props.animation : 'none'};
+`;
+
 export const Input = ({
     type,
     size,
@@ -23,12 +27,12 @@ export const Input = ({
     regexp,
     height,
     radius,
+    change,
     padding,
     tooltip,
     leftIcon,
     required,
     disabled,
-    onChange,
     transform,
     iconWidth,
     rightIcon,
@@ -91,14 +95,14 @@ export const Input = ({
         ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
     `;
 
-    const P = styled.p`
-        animation: ${errorAnimation ? animation : 'none'};
-    `;
-
     const handleChange = (event) => {
         const currentValue = event.target.value;
         
         setInnerValue(currentValue);
+        if (change) {
+            change(currentValue);
+        }
+        
         if (type === 'tel') {
             if (!phoneNumberRegex.test(currentValue)) {
                 telErrorMessage && setInnerErrorMessage(telErrorMessage);
@@ -107,13 +111,13 @@ export const Input = ({
                 setInnerErrorMessage('');
                 if (currentValue.length > 8) {
                     setInnerValue(currentValue.substr(0, 8));
-                    if (onChange) {
-                        onChange(currentValue.substr(0, 8));
+                    if (change) {
+                        change(currentValue.substr(0, 8));
                     }
                 } else {
                     setInnerValue(currentValue);
-                    if (onChange) {
-                        onChange(currentValue);
+                    if (change) {
+                        change(currentValue);
                     }
                 }
             }
@@ -121,15 +125,15 @@ export const Input = ({
 
         if (maxLength && currentValue.length > maxLength && type !== 'tel') {
             setInnerValue(currentValue.substr(0, maxLength));
-            if (onChange) {
-                onChange(currentValue.substr(0, maxLength));
+            if (change) {
+                change(currentValue.substr(0, maxLength));
             }
         }
 
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
             !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
-            if (onChange) {
-                onChange(currentValue);
+            if (change) {
+                change(currentValue);
             }
         }
     };
@@ -152,7 +156,7 @@ export const Input = ({
         if (value !== undefined && value !== null) {
             setInnerValue(value);
             if (type === 'tel') {
-                if (!phoneNumberRegex.test(currentValue)) {
+                if (!phoneNumberRegex.test(value)) {
                     telErrorMessage && setInnerErrorMessage(telErrorMessage);
                     setInnerValue('');
                 } else {
@@ -296,7 +300,10 @@ export const Input = ({
             {
                 innerErrorMessage ?
                     <P
+                        errorAnimation={errorAnimation}
+                        animation={animation}
                         style={{
+                            margin: '0px',
                             left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
                             color: errorColor ? errorColor : configStyles.INPUT.errorColor,
                             fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
@@ -318,11 +325,11 @@ export const Input = ({
 
 Input.propTypes = {
     name: PropTypes.string,
+    change: PropTypes.func,
     color: PropTypes.string,
     value: PropTypes.string,
     width: PropTypes.string,
     label: PropTypes.string,
-    onChange: PropTypes.func,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
     height: PropTypes.string,

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

@@ -1,21 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import { Input, InputTypes } from "./index";
 
 export default {
   component: Input,
   title: "Components/Input",
   argsType: {
-    onChange: {
+    change: {
       control: { type: 'function' }
     }
   }
 };
 
-const Template = (args) => <Input {...args} />;
+const Template = (args) => {
+  const [newVal, setNewVal] = useState('');
+  const handleChange = (val) => {
+    setNewVal(val);
+    console.log(val);
+  };
+  return <Input value={newVal} change={handleChange} {...args} />;
+}
 
 export const Default = Template.bind({});
 Default.args = {
-  type: InputTypes.TEXT,
-  onChange: (val) => {}
+  type: InputTypes.TEXT
 };
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { NewAutocomplete } from './index';
 
 export default {
@@ -10,41 +10,41 @@ export default {
     },
     getItem: {
       control: 'function'
+    },
+    change: {
+      control: 'function'
     }
   }
 };
 
 const Template = (args) => {
+  const [newOptions, setNewOptions] = useState([]);
   const handleClick = (selected) => {
     console.log(selected, 'selected');
   };
 
-  return <NewAutocomplete {...args} getItem={handleClick} />
+  const handleChange = (value) => {
+      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
+        },
+      }).then((res)=> {
+        return res.json()
+      }).then((data)=> {
+        if (data.data.success === false) {
+          setNewOptions([]);
+        } else {
+          setNewOptions(data.data.companies);
+        }
+        console.log(data, 'data')
+      });
+  };
+
+  return <NewAutocomplete {...args} getItem={handleClick} options={newOptions} change={handleChange} />
 };
 export const Default = Template.bind({});
 Default.args = {
-  searchCount: 3,
-  options: [
-    {"bbb":"0", "value":"dfsag"},
-    {"bbb":"1", "value":"asdfgh"},
-    {"bbb":"2", "value":"ghjjjh"},
-    {"bbb":"3", "value":"qwembm"},
-    {"bbb":"4", "value":"ertmbn"},
-    {"bbb":"5", "value":"tyuvxvc"},
-    {"bbb":"6", "value":"uiozcvx"},
-    {"bbb":"7", "value":"jkljhdfg"},
-    {"bbb":"8", "value":"asdfghcxvbcb"},
-    {"bbb":"9", "value":"asdfghcxvkbcb"},
-    {"bbb":"10", "value":"asdfghcxkkvbcb"},
-    {"bbb":"11", "value":"asdfghcxvmmmbcb"},
-    {"bbb":"12", "value":"asdfghcxkhjvbcb"},
-    {"bbb":"13", "value":"asdfghcxhjkvbcsb"},
-    {"bbb":"14", "value":"asdfghcxvbzxccxzcb"},
-    {"bbb":"15", "value":"asdfghcxjklljklvbcb"},
-    {"bbb":"16", "value":"asdfghcxvbljkljkljkcb"},
-    {"bbb":"17", "value":"asdfghcxljkljkljkljvbcb"},
-    {"bbb":"18", "value":"asdfghcxiouiouiouiouovbcb"},
-    {"bbb":"19", "value":"asdfghcuoiouiouiouiouxvbcb"},
-    {"bbb":"20", "value":"asdfghcuiouiouioiouiouixvbcb"}
-  ]
+  searchCount: 3
 }

package/src/components/newAutocomplete/index.js

@@ -7,6 +7,7 @@ import { compereConfigs } from './../../utils';
 
 export const NewAutocomplete = ({
     label,
+    change,
     options,
     getItem,
     required,
@@ -80,6 +81,7 @@ export const NewAutocomplete = ({
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
     const [innerValue, setInnerValue] = useState('');
+    const [innerOptions, setInnerOptions] = useState([]);
     const configStyles = compereConfigs();
 
     const showOption = keyframes`
@@ -122,124 +124,137 @@ export const NewAutocomplete = ({
         const value = e.target.value;
         value.length > 0 ? setShow(true) : setShow(false);
         setInnerValue(value);
+        if (value.length >= searchCount) {
+            change(value);
+        } else {
+            change('');
+        }
     };
 
     const handleClick = (selectedValue) => {
         setShow(false);
         getItem(selectedValue);
-        setInnerValue(selectedValue.value);
+        setInnerValue(selectedValue.name);
     };
 
     const optionList = (
         <>
             {
-                show && options && options.length > 0 && <div
-                    style={{
-                        left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
-                        width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
-                        zIndex: contentBottomZindex ? contentBottomZindex : configStyles.NEWAUTOCOMPLETE.contentBottomZindex,
-                        borderRadius: contentBottomRadius ? contentBottomRadius : configStyles.NEWAUTOCOMPLETE.contentBottomRadius,
-                        maxWidth: contentBottomMaxWidth ? contentBottomMaxWidth : configStyles.NEWAUTOCOMPLETE.contentBottomMaxWidth,
-                        overflow: contentBottomOverflow ? contentBottomOverflow : configStyles.NEWAUTOCOMPLETE.contentBottomOverflow,
-                        position: contentBottomPosition ? contentBottomPosition : configStyles.NEWAUTOCOMPLETE.contentBottomPosition,
-                        minHeight: contentBottomMinHeight ? contentBottomMinHeight : configStyles.NEWAUTOCOMPLETE.contentBottomMinHeight,
-                        boxShadow: contentBottomBoxShadow ? contentBottomBoxShadow : configStyles.NEWAUTOCOMPLETE.contentBottomBoxShadow,
-                        backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
-                        top: contentTopHeight ? 
-                                contentTopHeight.includes('rem') ?
-                                    parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' :
-                                    parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px'
-                                : configStyles.NEWAUTOCOMPLETE.contentTopHeight.includes('rem') ?
-                                    parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 3)) + 0.6 + 'rem' :
-                                    parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 2)) + 6 + 'px',
-                        animation
-                    }}
-                >
-                    <div
-                        style={{
-                            display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDisplay,
-                            overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowY,
-                            overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowX,
-                            maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
-                            flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection
-                        }}
-                    >
-                        {
-                            innerValue.length >= searchCount ?
-                                options.filter(item => item.value.includes(innerValue)).length > 0 ?
-                                options.filter(item => item.value.includes(innerValue)).map((item, index) => {
-                                    return (
-                                        <p
-                                            key={`${item}_${index}`}
-                                            onMouseEnter={handleRowMouseEnter}
-                                            onMouseLeave={handleRowMouseLeave}
-                                            onClick={() => handleClick(item)}
-                                            style={{
-                                                flexShrink: 0,
-                                                color: contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor,
-                                                height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                                cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.NEWAUTOCOMPLETE.contentBottomRowCursor,
-                                                display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomRowDisplay,
-                                                padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-                                                fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontSize,
-                                                boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.NEWAUTOCOMPLETE.contentBottomRowBoxSizing,
-                                                fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontWeight,
-                                                lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowLineHeight,
-                                                alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.NEWAUTOCOMPLETE.contentBottomRowAlignItems,
-                                                transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.NEWAUTOCOMPLETE.contentBottomRowTransition,
-                                                marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
-                                                backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
-                                            }}
-                                        >
-                                            {item.value}
-                                        </p>
-                                    )
-                                }) : <p
-                                    style={{
-                                        color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                                        fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-                                        height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                        padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-                                        lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
-                                    }}
-                                >Նման տվյալ առկա չէ</p>
-                            : <p
+                show && innerOptions
+                ?
+                    innerOptions.length > 0
+                    ?
+                        <div
+                            style={{
+                                left: contentBottomLeft ? contentBottomLeft : configStyles.NEWAUTOCOMPLETE.contentBottomLeft,
+                                width: contentBottomWidth ? contentBottomWidth : configStyles.NEWAUTOCOMPLETE.contentBottomWidth,
+                                zIndex: contentBottomZindex ? contentBottomZindex : configStyles.NEWAUTOCOMPLETE.contentBottomZindex,
+                                borderRadius: contentBottomRadius ? contentBottomRadius : configStyles.NEWAUTOCOMPLETE.contentBottomRadius,
+                                maxWidth: contentBottomMaxWidth ? contentBottomMaxWidth : configStyles.NEWAUTOCOMPLETE.contentBottomMaxWidth,
+                                overflow: contentBottomOverflow ? contentBottomOverflow : configStyles.NEWAUTOCOMPLETE.contentBottomOverflow,
+                                position: contentBottomPosition ? contentBottomPosition : configStyles.NEWAUTOCOMPLETE.contentBottomPosition,
+                                minHeight: contentBottomMinHeight ? contentBottomMinHeight : configStyles.NEWAUTOCOMPLETE.contentBottomMinHeight,
+                                boxShadow: contentBottomBoxShadow ? contentBottomBoxShadow : configStyles.NEWAUTOCOMPLETE.contentBottomBoxShadow,
+                                backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
+                                top: contentTopHeight ? 
+                                        contentTopHeight.includes('rem') ?
+                                            parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 3)) + 0.6 + 'rem' :
+                                            parseFloat(contentTopHeight.substr(0, contentTopHeight.length - 2)) + 6 + 'px'
+                                        : configStyles.NEWAUTOCOMPLETE.contentTopHeight.includes('rem') ?
+                                            parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 3)) + 0.6 + 'rem' :
+                                            parseFloat(configStyles.NEWAUTOCOMPLETE.contentTopHeight.substr(0, configStyles.NEWAUTOCOMPLETE.contentTopHeight.length - 2)) + 6 + 'px',
+                                animation
+                            }}
+                        >
+                            <div
+                                style={{
+                                    display: contentBottomInnerDisplay ? contentBottomInnerDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDisplay,
+                                    overflowY: contentBottomInnerOverflowY ? contentBottomInnerOverflowY : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowY,
+                                    overflowX: contentBottomInnerOverflowX ? contentBottomInnerOverflowX : configStyles.NEWAUTOCOMPLETE.contentBottomInnerOverflowX,
+                                    maxHeight: contentBottomInnerMaxHeight ? contentBottomInnerMaxHeight : configStyles.NEWAUTOCOMPLETE.contentBottomInnerMaxHeight,
+                                    flexDirection: contentBottomInnerDirection ? contentBottomInnerDirection : configStyles.NEWAUTOCOMPLETE.contentBottomInnerDirection
+                                }}
+                            >
+                                {
+                                    innerOptions.map(item => {
+                                        return (
+                                            <p
+                                                key={item.id}
+                                                onMouseEnter={handleRowMouseEnter}
+                                                onMouseLeave={handleRowMouseLeave}
+                                                onClick={() => handleClick(item)}
+                                                style={{
+                                                    flexShrink: 0,
+                                                    color: contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor,
+                                                    height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                                    cursor: contentBottomRowCursor ? contentBottomRowCursor : configStyles.NEWAUTOCOMPLETE.contentBottomRowCursor,
+                                                    display: contentBottomRowDisplay ? contentBottomRowDisplay : configStyles.NEWAUTOCOMPLETE.contentBottomRowDisplay,
+                                                    padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
+                                                    fontSize: contentBottomRowFontSize ? contentBottomRowFontSize : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontSize,
+                                                    boxSizing: contentBottomRowBoxSizing ? contentBottomRowBoxSizing : configStyles.NEWAUTOCOMPLETE.contentBottomRowBoxSizing,
+                                                    fontWeight: contentBottomRowFontWeight ? contentBottomRowFontWeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowFontWeight,
+                                                    lineHeight: contentBottomRowLineHeight ? contentBottomRowLineHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowLineHeight,
+                                                    alignItems: contentBottomRowAlignItems ? contentBottomRowAlignItems : configStyles.NEWAUTOCOMPLETE.contentBottomRowAlignItems,
+                                                    transition: contentBottomRowTransition ? contentBottomRowTransition : configStyles.NEWAUTOCOMPLETE.contentBottomRowTransition,
+                                                    marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
+                                                    backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
+                                                }}
+                                            >
+                                                {item.name}
+                                            </p>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </div>
+                    : innerOptions.length <= 0
+                        ?
+                            <p
                                 style={{
+                                    margin: '0px',
                                     color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
                                     fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
                                     height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
                                     padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
-                                    lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight
+                                    lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                    backgroundColor: contentBottomBackgroundColor ? contentBottomBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomBackgroundColor,
                                 }}
                             >
-                                {innerValue.length < searchCount && `Լրացնել առնվազն ${searchCount} նիշ`}
+                                {
+                                    innerValue.length >= searchCount
+                                    ? 'Նման տվյալ առկա չէ'
+                                    : `Լրացնել առնվազն ${searchCount} նիշ`
+                                }
                             </p>
-                        }
-                    </div>
-                </div>
+                        : ''
+                : ''
             }
         </>
     );
 
     useEffect(() => {
-        if (!options) {
-            alert('Please add array of options');
-        }
-
-        if (options.length === 0) {
-            alert('Please fill options array');
+        if (options === undefined) {
+            alert('Please add options prop');
         }
 
         options && options.length > 0 && options.map(item => {
-            if (!item.hasOwnProperty('value')) {
-                alert('Please add value property in items of options array');
+            if (!item.hasOwnProperty('name')) {
+                alert('Please add name property in items of options array');
             }
         });
 
         if (!getItem) {
             alert('Please add getItem function for get choosen item from autocomplete');
         }
-    }, [options, getItem]);
+
+        options && setInnerOptions(options);
+    }, [options, options.length, getItem]);
+
+    useEffect(() => {
+        if (!change) {
+            alert('Please add change prop on New Autocomplete component');
+        }
+    }, [change]);
 
     return (
         <>
@@ -252,8 +267,9 @@ export const NewAutocomplete = ({
                             display: labelDisplay ? labelDisplay : configStyles.NEWAUTOCOMPLETE.labelDisplay,
                             fontWeight: labelWeight ? labelWeight : configStyles.NEWAUTOCOMPLETE.labelWeight,
                             lineHeight: labelLineHeight ? labelLineHeight : configStyles.NEWAUTOCOMPLETE.labelLineHeight,
+                            maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                             marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
-                            textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
+                            textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform,
                         }}
                       >
                         {label}
@@ -271,7 +287,8 @@ export const NewAutocomplete = ({
                 style={{
                     display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
                     position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
-                    flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection
+                    flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection,
+                    maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
                 }}
             >
                 <input
@@ -281,11 +298,12 @@ export const NewAutocomplete = ({
                     onBlur={handleBlur}
                     onFocus={handleFocus}
                     onInput={handleChange}
-                    placeholder={placeHolder ? placeHolder : ''}
-                    autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    placeholder={placeHolder ? placeHolder : ''}
+                    autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
                     style={{
+                        maxWidth: '100%',
                         transition: 'all 240ms',
                         cursor: disabled ? 'not-allowed' : 'auto',
                         color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
@@ -296,7 +314,6 @@ export const NewAutocomplete = ({
                         display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
                         fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
                         borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
-                        maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                         boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
                         lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
                         flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
@@ -313,8 +330,11 @@ export const NewAutocomplete = ({
                     errorMessage
                         ? <span
                             style={{
+                                margin: '0px',
+                                display: 'inline-block',
                                 color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
+                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                             }}
                           >
                             {errorMessage}
@@ -349,6 +369,7 @@ NewAutocomplete.propTypes = {
     contentPosition: PropTypes.string,
     labelLineHeight: PropTypes.string,
     contentTopColor: PropTypes.string,
+    change: PropTypes.func.isRequired,
     contentDirection: PropTypes.string,
     contentTopWeight: PropTypes.number,
     contentTopRadius: PropTypes.string,