@xaypay/tui 0.0.82 → 0.0.83

package/dist/index.es.js

@@ -1185,6 +1185,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
@@ -1387,7 +1388,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 +1455,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 +3738,7 @@ const NewAutocomplete = ({
   change,
   options,
   getItem,
+  keyNames,
   required,
   disabled,
   selected,
@@ -3775,6 +3778,7 @@ const NewAutocomplete = ({
   contentTopBoxSizing,
   contentTopLineHeight,
   contentBottomMaxWidth,
+  contentTopBorderHover,
   contentBottomOverflow,
   contentBottomPosition,
   contentBottomRowColor,
@@ -3782,6 +3786,7 @@ const NewAutocomplete = ({
   contentBottomBoxShadow,
   contentBottomRowHeight,
   contentBottomRowCursor,
+  contentTopBorderActive,
   contentBottomRowDisplay,
   contentBottomRowPadding,
   contentBottomRowFontSize,
@@ -3792,8 +3797,6 @@ const NewAutocomplete = ({
   contentBottomRowAlignItems,
   contentBottomRowTransition,
   contentBottomRowHoverColor,
-  contentTopBorderHover,
-  contentTopBorderActive,
   contentBottomInnerOverflowY,
   contentBottomInnerOverflowX,
   contentBottomInnerMaxHeight,
@@ -3804,6 +3807,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 +3844,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 +3907,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 +3941,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 +3971,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 +4015,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

@@ -1215,6 +1215,7 @@ const Select = ({
   closeIcon,
   errorZindex,
   errorMessage,
+  showCloseIcon,
   defaultOption,
   multipleCheckbox,
   label,
@@ -1417,7 +1418,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 +1485,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 +3768,7 @@ const NewAutocomplete = ({
   change,
   options,
   getItem,
+  keyNames,
   required,
   disabled,
   selected,
@@ -3805,6 +3808,7 @@ const NewAutocomplete = ({
   contentTopBoxSizing,
   contentTopLineHeight,
   contentBottomMaxWidth,
+  contentTopBorderHover,
   contentBottomOverflow,
   contentBottomPosition,
   contentBottomRowColor,
@@ -3812,6 +3816,7 @@ const NewAutocomplete = ({
   contentBottomBoxShadow,
   contentBottomRowHeight,
   contentBottomRowCursor,
+  contentTopBorderActive,
   contentBottomRowDisplay,
   contentBottomRowPadding,
   contentBottomRowFontSize,
@@ -3822,8 +3827,6 @@ const NewAutocomplete = ({
   contentBottomRowAlignItems,
   contentBottomRowTransition,
   contentBottomRowHoverColor,
-  contentTopBorderHover,
-  contentTopBorderActive,
   contentBottomInnerOverflowY,
   contentBottomInnerOverflowX,
   contentBottomInnerMaxHeight,
@@ -3834,6 +3837,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 +3874,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 +3937,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 +3971,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 +4001,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 +4045,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.83",
   "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/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

@@ -298,16 +298,30 @@ const bodyData = [
             content: '27.05.2022'
         },
         actions: [
-            {
-                id: 21031,
-                type: 'minus',
-                content: <ReactSVGMinus />
-            },
-            {
-                id: 21031,
-                type: 'delete',
-                content: <ReactSVGDelete />
-            }
+            [
+                {
+                    id: 20037,
+                    type: 'attach',
+                    content: <ReactSVGAttach />
+                },
+                {
+                    id: 20037,
+                    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,28 @@ const TD = ({
                                     { newItem.content }
                                 </span>
                             )
+                        } else if (newItem && Array.isArray(newItem)) {
+                            const x = item[newIndex].map((iT, iN) => {
+                                // console.log(iT, ' - - - ->>>>>>>>>>>>>>>>>>>>>>>');
+                                // return <span key={`${iT.id}_${iN}`}>
+                                //     {iT}
+                                // </span>;
+                                return <span
+                                    style={{
+                                        width: '32px',
+                                        height: '32px',
+                                        marginRight: '10px'
+                                    }}
+                                    id={iT.id}
+                                    type={iT.type}
+                                    className={styles['td-span']}
+                                    key={`${iT.id}_${iN}`}
+                                    onClick={handleBodyActionClick}
+                                >
+                                    { iT.content }
+                                </span>
+                            });
+                            console.log(x, 'x');
                         } else {
                             return <span
                                 key={`${newItem}_${newIndex}`}