@xaypay/tui 0.0.82 → 0.0.84

package/dist/index.es.js

@@ -657,13 +657,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled.span`
@@ -697,6 +698,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -731,7 +734,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames(className ? className : configStyles.INPUT.className);
+  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -773,13 +776,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -892,6 +915,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -960,6 +985,8 @@ Input.propTypes = {
   errorLeft: PropTypes.string,
   labelSize: PropTypes.string,
   maxLength: PropTypes.number,
+  minNumSize: PropTypes.number,
+  maxNumSize: PropTypes.number,
   errorColor: PropTypes.string,
   labelColor: PropTypes.string,
   borderRight: PropTypes.string,
@@ -1185,6 +1212,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
@@ -1387,7 +1415,7 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
@@ -1454,6 +1482,7 @@ Select.propTypes = {
   className: PropTypes.string,
   arrowIcon: PropTypes.element,
   closeIcon: PropTypes.element,
+  showCloseIcon: PropTypes.bool,
   errorZindex: PropTypes.number,
   errorMessage: PropTypes.string,
   defaultOption: PropTypes.string,
@@ -3736,6 +3765,7 @@ const NewAutocomplete = ({
   change,
   options,
   getItem,
+  keyNames,
   required,
   disabled,
   selected,
@@ -3775,6 +3805,7 @@ const NewAutocomplete = ({
   contentTopBoxSizing,
   contentTopLineHeight,
   contentBottomMaxWidth,
+  contentTopBorderHover,
   contentBottomOverflow,
   contentBottomPosition,
   contentBottomRowColor,
@@ -3782,6 +3813,7 @@ const NewAutocomplete = ({
   contentBottomBoxShadow,
   contentBottomRowHeight,
   contentBottomRowCursor,
+  contentTopBorderActive,
   contentBottomRowDisplay,
   contentBottomRowPadding,
   contentBottomRowFontSize,
@@ -3792,8 +3824,6 @@ const NewAutocomplete = ({
   contentBottomRowAlignItems,
   contentBottomRowTransition,
   contentBottomRowHoverColor,
-  contentTopBorderHover,
-  contentTopBorderActive,
   contentBottomInnerOverflowY,
   contentBottomInnerOverflowX,
   contentBottomInnerMaxHeight,
@@ -3804,6 +3834,7 @@ const NewAutocomplete = ({
   contentBottomRowHoverBackgroundColor,
   ...props
 }) => {
+  const [id, setId] = useState('');
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
@@ -3840,18 +3871,23 @@ const NewAutocomplete = ({
   };
   const handleChange = e => {
     const value = e.target.value;
+    const currentId = e.target.id;
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerValue(value);
     if (value.length >= searchCount) {
-      change(value);
+      change({
+        name: value,
+        id: currentId
+      });
     } else {
       change('');
     }
   };
   const handleClick = selectedValue => {
     setShow(false);
-    getItem(selectedValue);
+    setId(selectedValue.id);
     setInnerValue(selectedValue.name);
+    getItem(selectedValue);
   };
   const optionList = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -3898,7 +3934,7 @@ const NewAutocomplete = ({
         marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
-    }, item.name);
+    }, item[keyNames.name]);
   }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
@@ -3932,11 +3968,13 @@ const NewAutocomplete = ({
   }, [change]);
   useEffect(() => {
     if (selected) {
-      setInnerValue(selected);
+      setId(selected[keyNames.id]);
+      setInnerValue(selected[keyNames.name]);
     } else {
+      setId('');
       setInnerValue('');
     }
-  }, [selected, selected?.length]);
+  }, [selected]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -3960,6 +3998,7 @@ const NewAutocomplete = ({
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, /*#__PURE__*/React__default.createElement("input", _extends({
+    id: id,
     type: "text",
     value: innerValue,
     disabled: disabled,
@@ -4003,7 +4042,8 @@ NewAutocomplete.propTypes = {
   label: PropTypes.string,
   required: PropTypes.bool,
   disabled: PropTypes.bool,
-  selected: PropTypes.string,
+  keyNames: PropTypes.object,
+  selected: PropTypes.object,
   errorSize: PropTypes.string,
   marginTop: PropTypes.string,
   labelSize: PropTypes.string,

package/dist/index.js

@@ -687,13 +687,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled__default["default"].span`
@@ -727,6 +728,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -761,7 +764,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
+  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -803,13 +806,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -922,6 +945,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -990,6 +1015,8 @@ Input.propTypes = {
   errorLeft: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
+  minNumSize: PropTypes__default["default"].number,
+  maxNumSize: PropTypes__default["default"].number,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   borderRight: PropTypes__default["default"].string,
@@ -1215,6 +1242,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
@@ -1417,7 +1445,7 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
@@ -1484,6 +1512,7 @@ Select.propTypes = {
   className: PropTypes__default["default"].string,
   arrowIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
+  showCloseIcon: PropTypes__default["default"].bool,
   errorZindex: PropTypes__default["default"].number,
   errorMessage: PropTypes__default["default"].string,
   defaultOption: PropTypes__default["default"].string,
@@ -3766,6 +3795,7 @@ const NewAutocomplete = ({
   change,
   options,
   getItem,
+  keyNames,
   required,
   disabled,
   selected,
@@ -3805,6 +3835,7 @@ const NewAutocomplete = ({
   contentTopBoxSizing,
   contentTopLineHeight,
   contentBottomMaxWidth,
+  contentTopBorderHover,
   contentBottomOverflow,
   contentBottomPosition,
   contentBottomRowColor,
@@ -3812,6 +3843,7 @@ const NewAutocomplete = ({
   contentBottomBoxShadow,
   contentBottomRowHeight,
   contentBottomRowCursor,
+  contentTopBorderActive,
   contentBottomRowDisplay,
   contentBottomRowPadding,
   contentBottomRowFontSize,
@@ -3822,8 +3854,6 @@ const NewAutocomplete = ({
   contentBottomRowAlignItems,
   contentBottomRowTransition,
   contentBottomRowHoverColor,
-  contentTopBorderHover,
-  contentTopBorderActive,
   contentBottomInnerOverflowY,
   contentBottomInnerOverflowX,
   contentBottomInnerMaxHeight,
@@ -3834,6 +3864,7 @@ const NewAutocomplete = ({
   contentBottomRowHoverBackgroundColor,
   ...props
 }) => {
+  const [id, setId] = React.useState('');
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3870,18 +3901,23 @@ const NewAutocomplete = ({
   };
   const handleChange = e => {
     const value = e.target.value;
+    const currentId = e.target.id;
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerValue(value);
     if (value.length >= searchCount) {
-      change(value);
+      change({
+        name: value,
+        id: currentId
+      });
     } else {
       change('');
     }
   };
   const handleClick = selectedValue => {
     setShow(false);
-    getItem(selectedValue);
+    setId(selectedValue.id);
     setInnerValue(selectedValue.name);
+    getItem(selectedValue);
   };
   const optionList = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, show && innerOptions && !disabled ? innerOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -3928,7 +3964,7 @@ const NewAutocomplete = ({
         marginBottom: contentBottomRowMarginBottom ? contentBottomRowMarginBottom : configStyles.NEWAUTOCOMPLETE.contentBottomRowMarginBottom,
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
-    }, item.name);
+    }, item[keyNames.name]);
   }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
@@ -3962,11 +3998,13 @@ const NewAutocomplete = ({
   }, [change]);
   React.useEffect(() => {
     if (selected) {
-      setInnerValue(selected);
+      setId(selected[keyNames.id]);
+      setInnerValue(selected[keyNames.name]);
     } else {
+      setId('');
       setInnerValue('');
     }
-  }, [selected, selected?.length]);
+  }, [selected]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -3990,6 +4028,7 @@ const NewAutocomplete = ({
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
+    id: id,
     type: "text",
     value: innerValue,
     disabled: disabled,
@@ -4033,7 +4072,8 @@ NewAutocomplete.propTypes = {
   label: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
-  selected: PropTypes__default["default"].string,
+  keyNames: PropTypes__default["default"].object,
+  selected: PropTypes__default["default"].object,
   errorSize: PropTypes__default["default"].string,
   marginTop: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,

package/package.json

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

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

@@ -21,7 +21,7 @@ Default.args = {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6ImY2N2FjNmNiYjI2YWM3NTRhMDhhOTgxOTZkOTZjNjFjNWI3YTA1NzUyN2U4MGE3NzM0ZDJlOGFlZjNkMjY0ZmRiMGZkN2QwZjllZjA1MmE4IiwiaWF0IjoxNjgwNzYzMzU3LjUyMzI5OCwibmJmIjoxNjgwNzYzMzU3LjUyMzMwNSwiZXhwIjoxNjgwNzg4NTU3LjQ5NjQzLCJzdWIiOiJtaW5hc0BtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.XLp4N1C9XYnX8EITknJs-j684GkppCVrREA5ttTAEyloxCftJUEo6KQGp-2grZDZvWvwvsgD9NF5lecdPOIYuSEgp7NPgbAQ34-hRn0u6TGoC5LQI6Vjc_PijH9YoH2a2V9q58jAJrxSbwNjKsMixiHmAsahIKl_XRL1ZoDxpKDE23avnndCZZ9Fw_oe8ypkEscfgrpK9iT9EhxWXZWC9MJ-iAxHox6b6XWsVHkJg5oN5MApJt1h9h-oZQmrKNn_274z3evPChlrvSjTyqLzGWy3zlVUMgGQWBE5RsKiuUh1O3TsF4PYvANKp0a_urOFtU9Q-umyfFNlWfgoLsTtKIQE0xmlLi8Kr5OutSna-a0Eu2hzgTM47_x-cJb7ImokTxdgoh1DDODmLDKkfTTXhEQ-KNTQ4J5T8UDn6a11E6EzBEfJYOIv9eXz5bQBf5H14x4mzXEkHNeC10EAsUFH7b9JT8DPJISwazeAA5zloj39dVFVDLoJS2TvZAxMRLQuyoMSs7eEXp4i7TTWPyrDhMLJ-YUgxmbAhWfwQ9J1ULkLyzFCrmvUz4xPmeRp9gnUNCXOo52jjSVD8x5q3cokFhCEUuWP6fE_DSgChe18j5w75Xi7BjGAIHRJjYtyvJQHy0DIQf2qd6YbbKkyP4iW_PvLfJah9JTlOU1_QGhUWqc',
+        'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
       },
     }).then((res)=> {
       return res.json()

package/src/components/input/index.js

@@ -9,6 +9,7 @@ import styles from "./input.module.css";
 export const InputTypes = {
     TEL: 'tel',
     TEXT: "text",
+    NUMBER: 'number',
     PASSWORD: "password",
 };
 
@@ -44,6 +45,8 @@ export const Input = ({
     errorSize,
     labelSize,
     maxLength,
+    minNumSize,
+    maxNumSize,
     labelColor,
     errorColor,
     borderRight,
@@ -80,7 +83,8 @@ export const Input = ({
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
     const classProps = classnames(
-        className ? className : configStyles.INPUT.className
+        className ? className : configStyles.INPUT.className,
+        type === 'number' ? styles['inp-num'] : ''
     );
 
     const errorShow = keyframes`
@@ -128,16 +132,37 @@ export const Input = ({
                     }
                 }
             }
-        } 
+        }
+
+        if (type === 'number') {
+            if (minNumSize && currentValue < minNumSize) {
+                setInnerValue(minNumSize);
+                if (change) {
+                    change(minNumSize);
+                }
+            }
+            if (maxNumSize && currentValue > maxNumSize) {
+                setInnerValue(maxNumSize);
+                if (change) {
+                    change(maxNumSize);
+                }
+            }
+            if (currentValue === '') {
+                setInnerValue('');
+                if (change) {
+                    change('');
+                }
+            }
+        }
 
-        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+        if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
             setInnerValue(currentValue.substr(0, maxLength));
             if (change) {
                 change(currentValue.substr(0, maxLength));
             }
         }
 
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
             !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
             if (change) {
                 change(currentValue);
@@ -280,6 +305,8 @@ export const Input = ({
                     name={name ? name : `tui_${random}_tui`}
                     placeholder={placeholder ? placeholder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    min={type === 'number' && minNumSize ? minNumSize: ''}
+                    max={type === 'number' && maxNumSize ? maxNumSize : ''}
                     style={{
                         border: 'none',
                         outline: 'none',
@@ -368,6 +395,8 @@ Input.propTypes = {
     errorLeft: PropTypes.string,
     labelSize: PropTypes.string,
     maxLength: PropTypes.number,
+    minNumSize: PropTypes.number,
+    maxNumSize: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
     borderRight: PropTypes.string,

package/src/components/input/input.module.css

@@ -20,6 +20,18 @@ input:-webkit-autofill:active  {
     animation-fill-mode: forwards;
 }
 
+/* Works for Chrome, Safari, Edge, Opera */
+.inp-num::-webkit-outer-spin-button,
+.inp-num::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+.inp-num[type="number"] {
+  -moz-appearance: textfield;
+}
+
 @keyframes error-show {
     100% {
         bottom: -20px;

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

@@ -22,6 +22,8 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  type: InputTypes.TEXT
+  type: InputTypes.TEXT,
+  minNumSize: 1,
+  maxNumSize: 8.8
 };
 

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

@@ -24,11 +24,11 @@ const Template = (args) => {
   };
 
   const handleChange = (value) => {
-      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value}`, {
+      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value.name ? value.name : ''}`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjRlZTI2OGU3NjhkMjA0YTdiMWM1NjU4NzE2Mjg0OTdjNTlmMmZjYjc4YzdiZTRjYTYzZGUyYjZmNjZjMzU3YjI0MzMwZjRhOTc5OGRjZDY4IiwiaWF0IjoxNjgxMzYzNDI2LjE0NDc0NywibmJmIjoxNjgxMzYzNDI2LjE0NDc1NCwiZXhwIjoxNjgxMzg4NjI2LjExODkzNywic3ViIjoibWluYXNAbWFpbC5ydSIsInNjb3BlcyI6WyJlbWFpbCJdfQ.nGU1Jf4XeVEqOHCXfDsjL-q--jTDrjlACMolSISUpviSaEDVLCI6BpY5_YYjOWRBUr4Utl_guFqpnb9jxbWdugL6_uFBANj1v0bi_g-RlzzeqF0FqlUqf1YZ_8S4c-l8nLsqfSDzPJs3nRB6oJVo7Di2O3fS_ka5MCkTXShzI6UJUZEvV4j60_QD7SmqmnDiij2rnfWt76YrNXZpDHt-zWMw6d7gD_pnX5RJ0YHUaXi2-M9ip-OcJfX4e_w7iMnckecaCfUolIO_rYNnHy6mleHX6Dimu6_niyMr0dj1ph9glv7fOHrIDwXx69AfJ4nuUQBa-G_AE9abot8cVzlPXAkwVa8WVkvH2mtzDgQuBLbQDM2VISqxO8j5jZhC9JDuXKN8TGukiBbePkWmpd9ASYaLQC02OqzZxqCaBBXCd72XMrwIynyjyTAW9t-VeraxFJgZwlqCnwZ7eTiIWSpPT7B5CLVumC24kz_ll8Tdbz4tMo0xdHNggD-hdPhciyVsaLk0q0Hx-vyIlKMS0KPez4EULQT2C3HaR5t81Pf4Qq06zLPXnKXXnoFc_p3u8TGDdqVXQBPdV1W8ck_3-hwIe-QzM5TbqTJjehiiH64QMcFTsJs--2APXNy3nBmU0D98is_eBGgHbgLJgck5v7MgYBaAaPjPf2lxtS-DF76ynQQ',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
         },
       }).then((res)=> {
         return res.json()
@@ -47,5 +47,6 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   searchCount: 3,
-  selected: 'Jhon'
+  keyNames: { name: 'name', id: 'bbb' },
+  selected: { "bbb":"0", "name":"gasdfgdsfgdsg" },
 }

package/src/components/newAutocomplete/index.js

@@ -10,6 +10,7 @@ export const NewAutocomplete = ({
     change,
     options,
     getItem,
+    keyNames,
     required,
     disabled,
     selected,
@@ -49,6 +50,7 @@ export const NewAutocomplete = ({
     contentTopBoxSizing,
     contentTopLineHeight,
     contentBottomMaxWidth,
+    contentTopBorderHover,
     contentBottomOverflow,
     contentBottomPosition,
     contentBottomRowColor,
@@ -56,6 +58,7 @@ export const NewAutocomplete = ({
     contentBottomBoxShadow,
     contentBottomRowHeight,
     contentBottomRowCursor,
+    contentTopBorderActive,
     contentBottomRowDisplay,
     contentBottomRowPadding,
     contentBottomRowFontSize,
@@ -66,8 +69,6 @@ export const NewAutocomplete = ({
     contentBottomRowAlignItems,
     contentBottomRowTransition,
     contentBottomRowHoverColor,
-    contentTopBorderHover,
-    contentTopBorderActive,
     contentBottomInnerOverflowY,
     contentBottomInnerOverflowX,
     contentBottomInnerMaxHeight,
@@ -78,6 +79,7 @@ export const NewAutocomplete = ({
     contentBottomRowHoverBackgroundColor,
     ...props
 }) => {
+    const [id, setId] = useState('');
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
@@ -123,10 +125,11 @@ export const NewAutocomplete = ({
 
     const handleChange = (e) => {
         const value = e.target.value;
+        const currentId = e.target.id;
         value.length > 0 ? setShow(true) : setShow(false);
         setInnerValue(value);
         if (value.length >= searchCount) {
-            change(value);
+            change({ name: value, id: currentId });
         } else {
             change('');
         }
@@ -134,8 +137,9 @@ export const NewAutocomplete = ({
 
     const handleClick = (selectedValue) => {
         setShow(false);
-        getItem(selectedValue);
+        setId(selectedValue.id);
         setInnerValue(selectedValue.name);
+        getItem(selectedValue);
     };
 
     const optionList = (
@@ -201,7 +205,7 @@ export const NewAutocomplete = ({
                                                     backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
                                                 }}
                                             >
-                                                {item.name}
+                                                {item[keyNames.name]}
                                             </p>
                                         )
                                     })
@@ -260,11 +264,13 @@ export const NewAutocomplete = ({
 
     useEffect(() => {
         if (selected) {
-            setInnerValue(selected);
+            setId(selected[keyNames.id]);
+            setInnerValue(selected[keyNames.name]);
         } else {
+            setId('');
             setInnerValue('');
         }
-    }, [selected, selected?.length]);
+    }, [selected]);
 
     return (
         <>
@@ -302,6 +308,7 @@ export const NewAutocomplete = ({
                 }}
             >
                 <input
+                    id={id}
                     type='text'
                     value={innerValue}
                     disabled={disabled}
@@ -366,7 +373,8 @@ NewAutocomplete.propTypes = {
     label: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
-    selected: PropTypes.string,
+    keyNames: PropTypes.object,
+    selected: PropTypes.object,
     errorSize: PropTypes.string,
     marginTop: PropTypes.string,
     labelSize: PropTypes.string,

package/src/components/select/index.js

@@ -23,6 +23,7 @@ export const Select = ({
     closeIcon,
     errorZindex,
     errorMessage,
+    showCloseIcon,
     defaultOption,
     multipleCheckbox,
 
@@ -263,11 +264,11 @@ export const Select = ({
                                 !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
                             }
 
-                            {!disabled && newSelected && newSelected.length > 0 && 
+                            {showCloseIcon && !disabled && newSelected && newSelected.length > 0 && 
                                 <div
-                                className={`${styles['close-icon']}`}
-                                onClick={disabled ? _ => _ : handleClearSelect}
-                                style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
+                                    className={`${styles['close-icon']}`}
+                                    onClick={disabled ? _ => _ : handleClearSelect}
+                                    style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
                                     { closeIcon ? closeIcon : <ReactCloseIcon /> }
                                 </div>
@@ -367,6 +368,7 @@ Select.propTypes = {
     className: PropTypes.string,
     arrowIcon: PropTypes.element,
     closeIcon: PropTypes.element,
+    showCloseIcon: PropTypes.bool,
     errorZindex: PropTypes.number,
     errorMessage: PropTypes.string,
     defaultOption: PropTypes.string,

package/src/components/select/select.stories.js

@@ -17,6 +17,7 @@ const Template = (args) => <Select label='' {...args} >Default</Select>;
 
 export const Default = Template.bind({});
 Default.args = {
+    showCloseIcon: true,
     label: 'վարչական շրջան',
     options: [{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     onChange: (newValue)=> {

package/src/components/table/table.stories.js

@@ -294,20 +294,43 @@ const bodyData = [
                 'text for => test',
             ]
         },
-        create: {
-            content: '27.05.2022'
-        },
+        create: [
+            [
+                {
+                    content: '21'
+                }
+            ],
+            [
+                {
+                    content: '13'
+                }
+            ]
+        ],
         actions: [
-            {
-                id: 21031,
-                type: 'minus',
-                content: <ReactSVGMinus />
-            },
-            {
-                id: 21031,
-                type: 'delete',
-                content: <ReactSVGDelete />
-            }
+            [
+                {
+                    id: 21031,
+                    type: 'attach',
+                    content: <ReactSVGAttach />
+                },
+                {
+                    id: 21031,
+                    type: 'plus',
+                    content: <ReactSVGPlus />
+                }
+            ],
+            [
+                {
+                    id: 21031,
+                    type: 'minus',
+                    content: <ReactSVGMinus />
+                },
+                {
+                    id: 21031,
+                    type: 'delete',
+                    content: <ReactSVGDelete />
+                }
+            ]
         ]
     }
 ];

package/src/components/table/td.js

@@ -57,6 +57,35 @@ const TD = ({
                                     { newItem.content }
                                 </span>
                             )
+                        } else if (newItem && Array.isArray(newItem)) {
+                            return (
+                                <span
+                                    style={{
+                                        display: 'inline-block',
+                                        marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
+                                        borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
+                                    }}
+                                >
+                                    {
+                                        item[newIndex].map((iT, iN) => {
+                                            return <span
+                                                style={{
+                                                    width: '32px',
+                                                    height: '32px',
+                                                    marginRight: '10px',
+                                                }}
+                                                id={iT.id ? iT.id : ''}
+                                                type={iT.type ? iT.type : ''}
+                                                className={styles['td-span']}
+                                                onClick={handleBodyActionClick}
+                                                key={`${iT.id || iT.content}_${iN}`}
+                                            >
+                                                { iT.content }
+                                            </span>
+                                        })
+                                    }
+                                </span>
+                            );
                         } else {
                             return <span
                                 key={`${newItem}_${newIndex}`}