@xaypay/tui 0.0.105 → 0.0.107

package/src/components/newAutocomplete/index.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 
-import classnames from 'classnames';
-import { keyframes, css } from 'styled-components';
+import classnames from 'classnames'
+import { keyframes, css } from 'styled-components'
 
-import { compereConfigs } from './../../utils';
+import { compereConfigs } from './../../utils'
+
+import styles from './autocomplete.module.css'
 
-import styles from './autocomplete.module.css';
- 
 export const NewAutocomplete = ({
     label,
     change,
@@ -83,250 +83,353 @@ export const NewAutocomplete = ({
     contentBottomRowMarginBottom,
     contentBottomRowBackgroundColor,
     contentBottomRowHoverBackgroundColor,
+    backgroundDisableColor,
     ...props
 }) => {
-    const [id, setId] = useState('');
-    const [show, setShow] = useState(false);
-    const [isHover, setIsHover] = useState(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [innerError, setInnerError] = useState('');
-    const [innerValue, setInnerValue] = useState('');
-    const [innerOptions, setInnerOptions] = useState([]);
-    const configStyles = compereConfigs();
+    const [id, setId] = useState('')
+    const [show, setShow] = useState(false)
+    const [isHover, setIsHover] = useState(false)
+    const [isFocus, setIsFocus] = useState(false)
+    const [innerError, setInnerError] = useState('')
+    const [innerValue, setInnerValue] = useState('')
+    const [innerOptions, setInnerOptions] = useState([])
+    const configStyles = compereConfigs()
     const classProps = classnames(
         className ? className : configStyles.NEWAUTOCOMPLETE.className,
         styles['auto-complete']
-    );
+    )
 
     const showOption = keyframes`
         100% {
             max-height: 400px;
         }
-    `;
+    `
 
-    const animation = _ => css`
-        ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
-    `;
+    const animation = () => css`
+        ${showOption} ${showOptionDuration
+            ? showOptionDuration
+            : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
+    `
 
     const handleMouseEnter = () => {
-        setIsHover(true);
-    };
-      
+        setIsHover(true)
+    }
+
     const handleMouseLeave = () => {
-        setIsHover(false);
-    };
+        setIsHover(false)
+    }
 
     const handleRowMouseEnter = (e) => {
-        e.target.style.color = contentBottomRowHoverColor ? contentBottomRowHoverColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverColor;
-        e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor ? contentBottomRowHoverBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverBackgroundColor;
-    };
-      
+        e.target.style.color = contentBottomRowHoverColor
+            ? contentBottomRowHoverColor
+            : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverColor
+        e.target.style.backgroundColor = contentBottomRowHoverBackgroundColor
+            ? contentBottomRowHoverBackgroundColor
+            : configStyles.NEWAUTOCOMPLETE.contentBottomRowHoverBackgroundColor
+    }
+
     const handleRowMouseLeave = (e) => {
-        e.target.style.color = contentBottomRowColor ? contentBottomRowColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor;
-        e.target.style.backgroundColor = contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor;
-    };
+        e.target.style.color = contentBottomRowColor
+            ? contentBottomRowColor
+            : configStyles.NEWAUTOCOMPLETE.contentBottomRowColor
+        e.target.style.backgroundColor = contentBottomRowBackgroundColor
+            ? contentBottomRowBackgroundColor
+            : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
+    }
 
     const handleFocus = () => {
-        setIsFocus(true);
-    };
+        setIsFocus(true)
+    }
 
     const handleBlur = () => {
-        setIsFocus(false);
-    };
+        setIsFocus(false)
+    }
 
     const handleChange = (e) => {
-        const value = e.target.value;
-        const currentId = e.target.id;
-        value.length > 0 ? setShow(true) : setShow(false);
-        setInnerError('');
-        setInnerValue(value);
+        const value = e.target.value
+        const currentId = e.target.id
+        value.length > 0 ? setShow(true) : setShow(false)
+        setInnerError('')
+        setInnerValue(value)
         if (value.length >= searchCount) {
-            change({ name: value, id: currentId });
+            change({ name: value, id: currentId })
         } else {
-            change({ name: '', id: '' });
+            change({ name: '', id: '' })
         }
-    };
+    }
 
     const handleClick = (selectedValue) => {
-        setShow(false);
-        setId(selectedValue[keyNames.id]);
-        setInnerValue(selectedValue[keyNames.name]);
-        getItem(selectedValue);
-    };
+        setShow(false)
+        setId(selectedValue[keyNames.id])
+        setInnerValue(selectedValue[keyNames.name])
+        getItem(selectedValue)
+    }
 
     const optionList = (
         <>
-            {
-                show && innerOptions && !disabled
-                ?
-                    innerOptions.length > 0
-                    ?
+            {show && innerOptions && !disabled ? (
+                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={{
-                                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
+                                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,
                             }}
                         >
-                            <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[keyNames.name]}
-                                            </p>
-                                        )
-                                    })
-                                }
-                            </div>
+                            {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[keyNames.name]}
+                                    </p>
+                                )
+                            })}
                         </div>
-                    : innerOptions.length <= 0
-                        ?
-                        innerError ? '' : <span
-                                style={{
-                                    position: 'absolute',
-                                    zIndex: '9999999999',
-                                    color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                                    fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-                                    top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                                    padding: innerErrorPadding ? innerErrorPadding : configStyles.NEWAUTOCOMPLETE.innerErrorPadding,
-                                    height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                    lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
-                                    backgroundColor: innerErrorBackgroundColor ? innerErrorBackgroundColor : configStyles.NEWAUTOCOMPLETE.innerErrorBackgroundColor,
-                                }}
-                            >
-                                {
-                                    innerValue.length >= searchCount
-                                    ? 'Նման տվյալ առկա չէ'
-                                    : `Լրացնել առնվազն ${searchCount} նիշ`
-                                }
-                            </span>
-                        : ''
-                : ''
-            }
+                    </div>
+                ) : innerOptions.length <= 0 ? (
+                    innerError ? (
+                        ''
+                    ) : (
+                        <span
+                            style={{
+                                position: 'absolute',
+                                zIndex: '1',
+                                color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                top: marginTop
+                                    ? `calc(100% + ${marginTop})`
+                                    : `calc(100% + ${configStyles.INPUT.marginTop})`,
+                                padding: innerErrorPadding
+                                    ? innerErrorPadding
+                                    : configStyles.NEWAUTOCOMPLETE.innerErrorPadding,
+                                height: contentBottomRowHeight
+                                    ? contentBottomRowHeight
+                                    : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                lineHeight: contentBottomRowHeight
+                                    ? contentBottomRowHeight
+                                    : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
+                                backgroundColor: innerErrorBackgroundColor
+                                    ? innerErrorBackgroundColor
+                                    : configStyles.NEWAUTOCOMPLETE.innerErrorBackgroundColor,
+                            }}
+                        >
+                            {innerValue.length >= searchCount
+                                ? 'Նման տվյալ առկա չէ'
+                                : `Լրացնել առնվազն ${searchCount} նիշ`}
+                        </span>
+                    )
+                ) : (
+                    ''
+                )
+            ) : (
+                ''
+            )}
         </>
-    );
+    )
 
     useEffect(() => {
         if (options === undefined) {
-            alert('Please add options prop');
+            alert('Please add options prop')
         }
 
-        options && options.length > 0 && options.map(item => {
-            if (!item.hasOwnProperty(keyNames.name)) {
-                alert(`Please add ${keyNames.name} property in items of options array`);
-            }
-        });
+        options &&
+            options.length > 0 &&
+            options.map((item) => {
+                // eslint-disable-next-line no-prototype-builtins
+                if (!item.hasOwnProperty(keyNames.name)) {
+                    alert(`Please add ${keyNames.name} property in items of options array`)
+                }
+            })
 
         if (!getItem) {
-            alert('Please add getItem function for get choosen item from autocomplete');
+            alert('Please add getItem function for get choosen item from autocomplete')
         }
 
-        options && setInnerOptions(options);
-    }, [options, options?.length, getItem]);
+        options && setInnerOptions(options)
+    }, [options, options?.length, getItem])
 
     useEffect(() => {
         if (!change) {
-            alert('Please add change prop on New Autocomplete component');
+            alert('Please add change prop on New Autocomplete component')
         }
-    }, [change]);
+    }, [change])
 
     useEffect(() => {
         if (selected) {
-            setId(selected[keyNames.id]);
-            setInnerValue(selected[keyNames.name]);
+            setId(selected[keyNames.id])
+            setInnerValue(selected[keyNames.name])
         } else {
-            setId('');
-            setInnerValue('');
+            setId('')
+            setInnerValue('')
         }
-    }, [selected]);
+    }, [selected])
 
     useEffect(() => {
-        setInnerError(errorMessage);
-    }, [errorMessage]);
-    
+        setInnerError(errorMessage)
+    }, [errorMessage])
+
     return (
         <>
-            {
-                label
-                    ? <label
-                        style={{
-                            color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
-                            fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
-                            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,
-                        }}
-                      >
-                        {label}
-                        {
-                            required && <sup
-                                            style={{
-                                                color: labelRequiredColor ? labelRequiredColor : configStyles.NEWAUTOCOMPLETE.labelRequiredColor
-                                            }}
-                                        >*</sup>
-                        }
-                      </label>
-                    : ''
-            }
+            {label ? (
+                <label
+                    style={{
+                        color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
+                        fontSize: labelSize ? labelSize : configStyles.NEWAUTOCOMPLETE.labelSize,
+                        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,
+                    }}
+                >
+                    {label}
+                    {required && (
+                        <sup
+                            style={{
+                                color: labelRequiredColor
+                                    ? labelRequiredColor
+                                    : configStyles.NEWAUTOCOMPLETE.labelRequiredColor,
+                            }}
+                        >
+                            *
+                        </sup>
+                    )}
+                </label>
+            ) : (
+                ''
+            )}
             <div
                 style={{
                     display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
                     position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
                     flexDirection: contentDirection ? contentDirection : configStyles.NEWAUTOCOMPLETE.contentDirection,
-                    maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
+                    maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                 }}
             >
                 <input
                     id={id}
-                    type='text'
+                    type="text"
                     value={innerValue}
                     disabled={disabled}
                     onBlur={handleBlur}
@@ -345,47 +448,69 @@ export const NewAutocomplete = ({
                         cursor: disabled ? 'not-allowed' : 'auto',
                         color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
                         fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
+                        backgroundColor:
+                            disabled && (backgroundDisableColor ?? configStyles.NEWAUTOCOMPLETE.backgroundDisableColor),
                         height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
                         padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
                         display: contentTopDisplay ? contentTopDisplay : configStyles.NEWAUTOCOMPLETE.contentTopDisplay,
                         fontWeight: contentTopWeight ? contentTopWeight : configStyles.NEWAUTOCOMPLETE.contentTopWeight,
-                        borderRadius: contentTopRadius ? contentTopRadius : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
-                        boxSizing: contentTopBoxSizing ? contentTopBoxSizing : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
-                        lineHeight: contentTopLineHeight ? contentTopLineHeight : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
-                        flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
-                        boxShadow:
-                            errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` :
-                            isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive :
-                            isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover :
-                            contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
+                        borderRadius: contentTopRadius
+                            ? contentTopRadius
+                            : configStyles.NEWAUTOCOMPLETE.contentTopRadius,
+                        boxSizing: contentTopBoxSizing
+                            ? contentTopBoxSizing
+                            : configStyles.NEWAUTOCOMPLETE.contentTopBoxSizing,
+                        lineHeight: contentTopLineHeight
+                            ? contentTopLineHeight
+                            : configStyles.NEWAUTOCOMPLETE.contentTopLineHeight,
+                        flexDirection: contentTopDirection
+                            ? contentTopDirection
+                            : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
+                        boxShadow: errorMessage
+                            ? errorColor
+                                ? `0 0 0 2px ${errorColor}`
+                                : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}`
+                            : isFocus
+                            ? contentTopBorderActive
+                                ? contentTopBorderActive
+                                : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive
+                            : isHover
+                            ? contentTopBorderHover
+                                ? contentTopBorderHover
+                                : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover
+                            : contentTopBorder
+                            ? contentTopBorder
+                            : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
                     }}
                     {...props}
                 />
 
-                {
-                    innerError
-                        ? <span
-                            style={{
-                                left: '0px',
-                                position: 'absolute',
-                                color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
-                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
-                                top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
-                                maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
-                            }}
-                          >
-                            {innerError}
-                          </span>
-                        : ''
-                }
+                {innerError ? (
+                    <span
+                        style={{
+                            left: '0px',
+                            position: 'absolute',
+                            color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                            fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                            top: marginTop
+                                ? `calc(100% + ${marginTop})`
+                                : `calc(100% + ${configStyles.INPUT.marginTop})`,
+                            maxWidth: contentTopMaxWidth
+                                ? contentTopMaxWidth
+                                : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
+                        }}
+                    >
+                        {innerError}
+                    </span>
+                ) : (
+                    ''
+                )}
 
-                {
-                    optionList
-                }
+                {optionList}
             </div>
         </>
-    );
-};
+    )
+}
 
 NewAutocomplete.propTypes = {
     label: PropTypes.string,
@@ -462,9 +587,10 @@ NewAutocomplete.propTypes = {
     contentBottomBackgroundColor: PropTypes.string,
     contentBottomRowBackgroundColor: PropTypes.string,
     contentBottomRowHoverBackgroundColor: PropTypes.string,
-};
+    backgroundDisableColor: PropTypes.string,
+}
 
 NewAutocomplete.defaultProps = {
     searchCount: 3,
-    disabled: false
-};
+    disabled: false,
+}