@xaypay/tui 0.0.70 → 0.0.72

package/src/components/icon/Upload.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+const SvgUpload = ({ title, titleId, ...props }) => (
+  <svg
+    width="51"
+    height="35"
+    viewBox="0 0 51 35"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M41.54 11.842h-.017c-.23-3.225-2.902-5.772-6.167-5.772-1.08 0-2.095.28-2.979.77C30.267 2.774 26.041 0 21.167 0 14.318 0 8.742 5.483 8.534 12.326 3.758 12.708 0 16.726 0 21.63c0 5.155 4.153 9.334 9.277 9.334h22.625a10.987 10.987 0 0 1-.888-4.334c0-6.059 4.899-10.987 10.918-10.987 3.773 0 7.106 1.938 9.068 4.875-.444-4.864-4.508-8.675-9.46-8.675ZM15.654 6.975c-.072.06-.144.12-.211.185-.266.259-.512.53-.705.849-.741 1.218-.882 2.523-.72 3.927.156 1.35-1.942 1.334-2.095 0-.289-2.493.504-5.307 2.664-6.775 1.12-.763 2.164 1.052 1.067 1.814Zm-.022.015c-.047.035-.111.093 0 0Z"
+      fill="#D1D1D1"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M41.822 17.245c-4.864 0-8.822 3.982-8.822 8.878C33 31.018 36.958 35 41.822 35c4.864 0 8.822-3.982 8.822-8.877 0-4.896-3.959-8.878-8.822-8.878Zm-.536 13.005v-6.689l-3.067 3.22a.69.69 0 0 1-1.01 0 .777.777 0 0 1 0-1.06l4.286-4.5A.71.71 0 0 1 42 21a.684.684 0 0 1 .505.22l4.286 4.5a.777.777 0 0 1 0 1.06.69.69 0 0 1-1.01 0l-3.067-3.22v6.69c0 .414-.32.75-.714.75-.395 0-.714-.336-.714-.75Z"
+      fill="#0DA574"
+    />
+  </svg>
+);
+export default SvgUpload;

package/src/components/icon/index.js

@@ -1,15 +1,2 @@
-export { default as Pdf } from './PDF';
-export { default as Dots } from './Dots';
-export { default as Arrow } from './Arrow';
-export { default as Tooltip } from './Tooltip';
-export { default as NextArrow } from './NextArrow';
-export { default as CloseIcon } from './CloseIcon';
-export { default as HeartFilled } from './HeartFilled';
-export { default as ToasterInfo } from './ToasterInfo';
-export { default as HeartOutline } from './HeartOutline';
-export { default as ToasterClose } from './ToasterClose';
-export { default as ToasterError } from './ToasterError';
-export { default as ToasterSuccess } from './ToasterSuccess';
-export { default as ToasterWarning } from './ToasterWarning';
-export { default as CheckboxChecked } from './CheckboxChecked';
-export { default as CheckboxUnchecked } from './CheckboxUnchecked';
+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,
@@ -64,7 +68,7 @@ export const Input = ({
     errorAnimationDuration,
     ...props
 }) => {
-    const phoneNumberRegex = /^\d{8}$/;
+    const phoneNumberRegex = /^\d+$/;
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [innerValue, setInnerValue] = useState('');
@@ -91,42 +95,45 @@ 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 (currentValue.length > 8) {
-                setInnerValue(currentValue.substr(0, 8));
-            }
-
-            if (!phoneNumberRegex.test(currentValue) && telErrorMessage) {
-                setInnerErrorMessage(telErrorMessage);
+            if (!phoneNumberRegex.test(currentValue)) {
+                telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                setInnerValue('');
             } else {
                 setInnerErrorMessage('');
+                if (currentValue.length > 8) {
+                    setInnerValue(currentValue.substr(0, 8));
+                    if (change) {
+                        change(currentValue.substr(0, 8));
+                    }
+                } else {
+                    setInnerValue(currentValue);
+                    if (change) {
+                        change(currentValue);
+                    }
+                }
             }
         } 
 
         if (maxLength && currentValue.length > maxLength && type !== 'tel') {
             setInnerValue(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 (type === 'tel' && currentValue.length > 8) {
-                onChange(currentValue.substr(0, 8));
-            }
-
-            if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-                onChange(currentValue.substr(0, maxLength));
+            !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
+            if (change) {
+                change(currentValue);
             }
         }
     };
@@ -140,19 +147,27 @@ export const Input = ({
     };
 
     useEffect(() => {
+        if (errorMessage) {
+            setInnerErrorMessage(errorMessage);
+        } else {
+            setInnerErrorMessage('');
+        }
+
         if (value !== undefined && value !== null) {
             setInnerValue(value);
             if (type === 'tel') {
-                if (value.length > 8) {
-                    setInnerValue(value.substr(0, 8));
-                }
-
-                if (!phoneNumberRegex.test(value) && telErrorMessage) {
-                    setInnerErrorMessage(telErrorMessage);
+                if (!phoneNumberRegex.test(value)) {
+                    telErrorMessage && setInnerErrorMessage(telErrorMessage);
+                    setInnerValue('');
                 } else {
                     setInnerErrorMessage('');
+                    if (value.length > 8) {
+                        setInnerValue(value.substr(0, 8));
+                    } else {
+                        setInnerValue(value);
+                    }
                 }
-            }
+            } 
 
             if (maxLength && value.length > maxLength && type !== 'tel') {
                 setInnerValue(value.substr(0, maxLength));
@@ -162,12 +177,6 @@ export const Input = ({
                 !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
             }
         }
-
-        if (errorMessage) {
-            setInnerErrorMessage(errorMessage);
-        } else {
-            setInnerErrorMessage('');
-        }
     }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage]);
     
     return (
@@ -291,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,
@@ -313,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,