@xaypay/tui 0.0.69 → 0.0.70

package/src/components/newAutocomplete/index.js

@@ -0,0 +1,407 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { keyframes, css } from 'styled-components';
+
+import { compereConfigs } from './../../utils';
+
+export const NewAutocomplete = ({
+    label,
+    options,
+    getItem,
+    required,
+    disabled,
+    errorSize,
+    labelSize,
+    errorColor,
+    labelColor,
+    labelWeight,
+    searchCount,
+    placeHolder,
+    errorMessage,
+    autoComplete,
+    labelDisplay,
+    contentDisplay,
+    contentTopSize,
+    contentPosition,
+    contentTopColor,
+    labelLineHeight,
+    contentDirection,
+    contentTopWeight,
+    contentTopRadius,
+    contentTopHeight,
+    contentTopBorder,
+    labelMarginBottom,
+    contentTopDisplay,
+    contentTopPadding,
+    contentBottomLeft,
+    showOptionDuration,
+    labelRequiredColor,
+    contentTopMaxWidth,
+    labelTextTransform,
+    contentBottomWidth,
+    contentBottomZindex,
+    contentBottomRadius,
+    contentTopDirection,
+    contentTopBoxSizing,
+    contentTopLineHeight,
+    contentTopBorderColor,
+    contentBottomMaxWidth,
+    contentBottomOverflow,
+    contentBottomPosition,
+    contentBottomRowColor,
+    contentBottomMinHeight,
+    contentBottomBoxShadow,
+    contentBottomRowHeight,
+    contentBottomRowCursor,
+    contentBottomRowDisplay,
+    contentBottomRowPadding,
+    contentBottomRowFontSize,
+    contentBottomRowBoxSizing,
+    contentBottomInnerDisplay,
+    contentBottomRowFontWeight,
+    contentBottomRowLineHeight,
+    contentBottomRowAlignItems,
+    contentBottomRowTransition,
+    contentBottomRowHoverColor,
+    contentTopBorderHoverColor,
+    contentTopBorderActiveColor,
+    contentBottomInnerOverflowY,
+    contentBottomInnerOverflowX,
+    contentBottomInnerMaxHeight,
+    contentBottomInnerDirection,
+    contentBottomBackgroundColor,
+    contentBottomRowMarginBottom,
+    contentBottomRowBackgroundColor,
+    contentBottomRowHoverBackgroundColor,
+    ...props
+}) => {
+    const [show, setShow] = useState(false);
+    const [isHover, setIsHover] = useState(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [innerValue, setInnerValue] = useState('');
+    const configStyles = compereConfigs();
+
+    const showOption = keyframes`
+        100% {
+            max-height: 400px;
+        }
+    `;
+
+    const animation = _ => css`
+        ${showOption} ${showOptionDuration ? showOptionDuration : configStyles.NEWAUTOCOMPLETE.showOptionDuration} linear forwards
+    `;
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
+
+    const handleRowMouseEnter = (e) => {
+        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;
+    };
+
+    const handleFocus = () => {
+        setIsFocus(true);
+    };
+
+    const handleBlur = () => {
+        setIsFocus(false);
+    };
+
+    const handleChange = (e) => {
+        const value = e.target.value;
+        value.length > 0 ? setShow(true) : setShow(false);
+        setInnerValue(value);
+    };
+
+    const handleClick = (selectedValue) => {
+        setShow(false);
+        getItem(selectedValue);
+        setInnerValue(selectedValue.value);
+    };
+
+    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
+                                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
+                                }}
+                            >
+                                {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');
+        }
+
+        options && options.length > 0 && options.map(item => {
+            if (!item.hasOwnProperty('value')) {
+                alert('Please add value property in items of options array');
+            }
+        });
+
+        if (!getItem) {
+            alert('Please add getItem function for get choosen item from autocomplete');
+        }
+    }, [options, getItem]);
+
+    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,
+                            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
+                }}
+            >
+                <input
+                    type='text'
+                    value={innerValue}
+                    disabled={disabled}
+                    onBlur={handleBlur}
+                    onFocus={handleFocus}
+                    onInput={handleChange}
+                    placeholder={placeHolder ? placeHolder : ''}
+                    autoComplete={autoComplete ? autoComplete : configStyles.NEWAUTOCOMPLETE.autoComplete}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    style={{
+                        transition: 'all 240ms',
+                        cursor: disabled ? 'not-allowed' : 'auto',
+                        color: contentTopColor ? contentTopColor : configStyles.NEWAUTOCOMPLETE.contentTopColor,
+                        fontSize: contentTopSize ? contentTopSize : configStyles.NEWAUTOCOMPLETE.contentTopSize,
+                        height: contentTopHeight ? contentTopHeight : configStyles.NEWAUTOCOMPLETE.contentTopHeight,
+                        border: contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder,
+                        padding: contentTopPadding ? contentTopPadding : configStyles.NEWAUTOCOMPLETE.contentTopPadding,
+                        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,
+                        borderColor:
+                            errorMessage ? errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor :
+                            isFocus ? contentTopBorderActiveColor ? contentTopBorderActiveColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderActiveColor :
+                            isHover ? contentTopBorderHoverColor ? contentTopBorderHoverColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderHoverColor :
+                            contentTopBorderColor ? contentTopBorderColor : configStyles.NEWAUTOCOMPLETE.contentTopBorderColor,
+                    }}
+                    {...props}
+                />
+
+                {
+                    errorMessage
+                        ? <span
+                            style={{
+                                color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
+                                fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize
+                            }}
+                          >
+                            {errorMessage}
+                          </span>
+                        : ''
+                }
+
+                {
+                    optionList
+                }
+            </div>
+        </>
+    );
+};
+
+NewAutocomplete.propTypes = {
+    label: PropTypes.string,
+    required: PropTypes.bool,
+    disabled: PropTypes.bool,
+    errorSize: PropTypes.string,
+    labelSize: PropTypes.string,
+    errorColor: PropTypes.string,
+    labelColor: PropTypes.string,
+    searchCount: PropTypes.number,
+    placeHolder: PropTypes.string,
+    labelWeight: PropTypes.number,
+    errorMessage: PropTypes.string,
+    labelDisplay: PropTypes.string,
+    autoComplete: PropTypes.string,
+    contentDisplay: PropTypes.string,
+    contentTopSize: PropTypes.string,
+    contentPosition: PropTypes.string,
+    labelLineHeight: PropTypes.string,
+    contentTopColor: PropTypes.string,
+    contentDirection: PropTypes.string,
+    contentTopWeight: PropTypes.number,
+    contentTopRadius: PropTypes.string,
+    contentTopHeight: PropTypes.string,
+    contentTopBorder: PropTypes.string,
+    getItem: PropTypes.func.isRequired,
+    contentTopDisplay: PropTypes.string,
+    contentTopPadding: PropTypes.string,
+    contentBottomLeft: PropTypes.string,
+    options: PropTypes.array.isRequired,
+    labelMarginBottom: PropTypes.string,
+    labelRequiredColor: PropTypes.string,
+    labelTextTransform: PropTypes.string,
+    showOptionDuration: PropTypes.string,
+    contentTopMaxWidth: PropTypes.string,
+    contentBottomWidth: PropTypes.string,
+    contentTopDirection: PropTypes.string,
+    contentTopBoxSizing: PropTypes.string,
+    contentBottomZindex: PropTypes.number,
+    contentBottomRadius: PropTypes.string,
+    contentTopLineHeight: PropTypes.string,
+    contentTopBorderColor: PropTypes.string,
+    contentBottomRowColor: PropTypes.string,
+    contentBottomMaxWidth: PropTypes.string,
+    contentBottomOverflow: PropTypes.string,
+    contentBottomPosition: PropTypes.string,
+    contentBottomMinHeight: PropTypes.string,
+    contentBottomBoxShadow: PropTypes.string,
+    contentBottomRowHeight: PropTypes.string,
+    contentBottomRowCursor: PropTypes.string,
+    contentBottomRowDisplay: PropTypes.string,
+    contentBottomRowPadding: PropTypes.string,
+    contentBottomRowFontSize: PropTypes.string,
+    contentBottomRowBoxSizing: PropTypes.string,
+    contentBottomInnerDisplay: PropTypes.string,
+    contentBottomRowFontWeight: PropTypes.number,
+    contentBottomRowLineHeight: PropTypes.string,
+    contentBottomRowAlignItems: PropTypes.string,
+    contentBottomRowTransition: PropTypes.string,
+    contentBottomRowHoverColor: PropTypes.string,
+    contentTopBorderHoverColor: PropTypes.string,
+    contentTopBorderActiveColor: PropTypes.string,
+    contentBottomInnerOverflowY: PropTypes.string,
+    contentBottomInnerOverflowX: PropTypes.string,
+    contentBottomInnerMaxHeight: PropTypes.string,
+    contentBottomInnerDirection: PropTypes.string,
+    contentBottomRowMarginBottom: PropTypes.string,
+    contentBottomBackgroundColor: PropTypes.string,
+    contentBottomRowBackgroundColor: PropTypes.string,
+    contentBottomRowHoverBackgroundColor: PropTypes.string,
+};
+
+NewAutocomplete.defaultProps = {
+    searchCount: 3,
+    disabled: false
+};

package/src/index.js

@@ -10,9 +10,10 @@ export * from './components/tooltip';
 export * from './components/captcha';
 export * from './components/stepper';
 export * from './components/checkbox';
+export * from './components/textarea';
 export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
 export * from './components/autocomplate';
 export * from './components/singleCheckbox';
-export * from './components/textarea'
+export * from './components/newAutocomplete';

package/src/stories/configuration.stories.mdx

@@ -432,4 +432,90 @@ import StackAlt from './assets/stackalt.svg';
   borderFocusColor: '#00236A',                          // for boredr color when focus action is happaning
   labelRequiredColor: '#ee0000',                        // for label required mark color
 }
+```
+
+### New AutoComplete
+
+```
+{
+  labelWeight: 500,                                     // for label font weight
+  labelSize: '16px',                                    // for label font size
+  labelColor: '#3c393e',                                // for label color
+  labelDisplay: 'block',                                // for label display
+  labelLineHeight: '22px',                              // for label line height
+  labelMarginBottom: '6px',                             // for label margin bottom
+  labelTextTransform: 'none',                           // for label text transform
+  labelRequiredColor: '#ee0000',                        // for label required mark color
+
+  searchCount: 3,                                       // for autocomplete show result logic 
+  errorSize: '16px',                                    // for error font size
+  autoComplete: 'off',                                  // for off auto fill functionality ( browser specific, maybe will not work )
+  errorColor: '#ee0000',                                // for error color
+
+  contentDisplay: 'flex',                               // for autocomplete parent block display
+  contentDirection: 'column',                           // for autocomplete parent block flex direction
+  contentPosition: 'relative',                          // for autocomplete parent block position
+  showOptionDuration: '640ms',                          // for autocomplete parent block animation duration
+
+  contentTopWeight: 500,                                // for autocomplate top block font weight
+  contentTopSize: '16px',                               // for autocomplate top block font size
+  contentTopRadius: '6px',                              // for autocomplate top block border radius
+  contentTopHeight: '46px',                             // for autocomplate top block height
+  contentTopDisplay: 'flex',                            // for autocomplate top block display
+  contentTopDirection: 'row',                           // for autocomplate top block flex direction
+  contentTopColor: '#3C393E',                           // for autocomplate top block color
+  contentTopMaxWidth: '400px',                          // for autocomplate top block max width
+  contentTopLineHeight: '22px',                         // for autocomplate top block line height
+  contentTopPadding: '0px 15px',                        // for autocomplate top block padding
+  contentTopBorder: '2px solid',                        // for autocomplate top block border
+  contentTopBorderColor: '#D1D1D1',                     // for autocomplate top block border color
+  contentTopBoxSizing: 'border-box',                    // for autocomplate top block box sizing
+  contentTopBorderHoverColor: '#3C393E',                // for autocomplate top block border hover color
+  contentTopBorderActiveColor: '#00236A',               // for autocomplate top block border active color
+
+  contentBottomZindex: 1,                               // for autocomplete bottom block z-index
+  contentBottomLeft: '0px',                             // for autocomplete bottom block left
+  contentBottomRadius: '6px',                           // for autocomplete bottom block border radius
+  contentBottomWidth: '100%',                           // for autocomplete bottom block width
+  contentBottomMinHeight: '0px',                        // for autocomplete bottom block minimal height
+  contentBottomMaxWidth: '400px',                       // for autocomplete bottom block maximum width
+  contentBottomOverflow: 'hidden',                      // for autocomplete bottom block overflow
+  contentBottomPosition: 'absolute',                    // for autocomplete bottom block position
+  contentBottomBackgroundColor: '#FBFBFB',              // for autocomplete bottom block background color
+  contentBottomBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)', // for autocomplete bottom block box shadow
+
+  contentBottomInnerDisplay: 'flex',                    // for autocomplete bottom block inner display
+  contentBottomInnerOverflowY: 'auto',                  // for autocomplete bottom block inner overflow y
+  contentBottomInnerMaxHeight: '234px',                 // for autocomplete bottom block inner maximum height
+  contentBottomInnerOverflowX: 'hidden',                // for autocomplete bottom block inner overflow x
+  contentBottomInnerDirection: 'column',                // for autocomplete bottom block inner flex direction
+
+  contentBottomRowHeight: '46px',                       // for autocomplete bottom block inner row height 
+  contentBottomRowDisplay: 'flex',                      // for autocomplete bottom block inner row display
+  contentBottomRowFontWeight: 500,                      // for autocomplete bottom block inner row font weight
+  contentBottomRowColor: '#3C393E',                     // for autocomplete bottom block inner row color
+  contentBottomRowFontSize: '16px',                     // for autocomplete bottom block inner row font size
+  contentBottomRowCursor: 'pointer',                    // for autocomplete bottom block inner row cursor
+  contentBottomRowLineHeight: '22px',                   // for autocomplete bottom block inner row line height
+  contentBottomRowMarginBottom: '2px',                  // for autocomplete bottom block inner row margin bottom
+  contentBottomRowPadding: '0px 15px',                  // for autocomplete bottom block inner row padding
+  contentBottomRowAlignItems: 'center',                 // for autocomplete bottom block inner row align items ( flex )
+  contentBottomRowHoverColor: '#00236A',                // for autocomplete bottom block inner row hove color
+  contentBottomRowBoxSizing: 'border-box',              // for autocomplete bottom block inner row box sizing
+  contentBottomRowTransition: 'all 240ms',              // for autocomplete bottom block inner row transition
+  contentBottomRowBackgroundColor: '#ffffff',           // for autocomplete bottom block inner row background color
+  contentBottomRowHoverBackgroundColor: 'initial',      // for autocomplete bottom block inner row hover background color
+}
+```
+
+### Captcha
+
+```
+{
+  size: '16px',                                         // for captcha label font size       (configurable from config.js)
+  color: '#3C393E',                                     // for captcha label color           (configurable from config.js)
+  label: 'for example. Captcha',                        // for captcha label                 (add itself on each component)
+  range: 'for example. 72',                             // for captcha range                 (add itself on each component)
+  getRange: 'is must be function',                      // for captcha get current range     (add itself on each component)
+}
 ```

package/src/stories/usage.stories.mdx

@@ -8,12 +8,14 @@ import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';
 
+import captcha from './static/captcha-usage.png';
 import buttonImage from './static/button-usage.png';
 import selectImage from './static/select-usage.png';
-import inputTooltipImage from './static/input-tooltip-usage.png';
-import toasterImage from './static/toaster-container-usage.png';
 import toastImage from './static/toaster-usage.png';
 import textareaImage from './static/textarea-usage.png';
+import toasterImage from './static/toaster-container-usage.png';
+import inputTooltipImage from './static/input-tooltip-usage.png';
+import newAutocompleteImage from './static/new-autocomplete-usage.png';
 
 <Meta title="Intro/Usage" />
 
@@ -148,5 +150,10 @@ import textareaImage from './static/textarea-usage.png';
 <img src={toastImage} alt="toaster image" />
 
 ### Textarea
-
 <img src={textareaImage} alt="textarea image" />
+
+### NewAutocomplete
+<img src={newAutocompleteImage} alt="autocomplete image" />
+
+### Captcha
+<img src={captcha} alt="captcha image" />