contentoh-components-library 21.4.130 → 21.4.132

package/dist/components/organisms/Table/styles.js

@@ -15,34 +15,40 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: auto;\n  width: 100%;\n  margin-right: 30px;\n  .checkbox_fixed {\n    left: 0px;\n    position: sticky;\n    z-index: 5;\n  }\n\n  .custom-table {\n    border-collapse: collapse;\n    box-sizing: border-box;\n    width: 100%;\n    & > thead {\n      top: 0;\n      height: 45px;\n      position: sticky;\n      z-index: 5;\n      & > tr {\n        background-color: #f7f7fc;\n        border-radius: 5px 5px 0px 0px;\n        height: 45px;\n      }\n    }\n    & > tbody > tr {\n      height: 70px;\n      &:last-child {\n        border-radius: 0px 0px 5px 5px;\n      }\n    }\n  }\n\n  .custom-table th,\n  .custom-table td {\n    padding: 8px;\n    border: 0;\n  }\n\n  .custom-table th {\n    border-radius: 5px 0 0 5px;\n    border: 0;\n    color: var(--black-main, #262626);\n    font-family: Roboto;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n    text-align: left;\n  }\n\n  .custom-table tr {\n    background: var(--white-main, #fff);\n    border-bottom: 1px solid var(--grey-light, #f0f0f0);\n    border-left: 1px solid var(--grey-light, #f0f0f0);\n    border-right: 1px solid var(--grey-light, #f0f0f0);\n    & > td {\n      color: var(--grey-main, #707070);\n      font-family: Roboto;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n    }\n    display: flex;\n    align-items: center;\n    ", "\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: auto;\n  width: 100%;\n  margin-right: 30px;\n  .checkbox_fixed {\n    left: 0px;\n    position: sticky;\n    z-index: 5;\n  }\n\n  .custom-table {\n    border-collapse: collapse;\n    box-sizing: border-box;\n    width: 100%;\n    & > thead {\n      top: 0;\n      height: 45px;\n      position: sticky;\n      z-index: 10;\n      & > tr {\n        background-color: #f7f7fc;\n        border-radius: 5px 5px 0px 0px;\n        height: 45px;\n      }\n    }\n    & > tbody > tr {\n      height: 70px;\n      &:last-child {\n        border-radius: 0px 0px 5px 5px;\n      }\n    }\n  }\n\n  .custom-table th,\n  .custom-table td {\n    padding: 8px;\n    border: 0;\n  }\n\n  .custom-table th {\n    border-radius: 5px 0 0 5px;\n    border: 0;\n    color: var(--black-main, #262626);\n    font-family: Roboto;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n    text-align: left;\n  }\n\n  .custom-table tr {\n    background: var(--white-main, #fff);\n    border-bottom: 1px solid var(--grey-light, #f0f0f0);\n    border-left: 1px solid var(--grey-light, #f0f0f0);\n    border-right: 1px solid var(--grey-light, #f0f0f0);\n    & > td {\n      color: var(--grey-main, #707070);\n      font-family: Roboto;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n      gap:5px;\n    }\n    display: flex;\n    align-items: center;\n    ", "\n  }\n"])), function (_ref) {
   var withCheckbox = _ref.withCheckbox;
   return withCheckbox && "padding-left: 10px;";
 });
 
 exports.Container = Container;
 
-var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: inherit;\n  min-height: ", ";\n  min-width: ", ";\n  position: sticky;\n  left: 20px;\n  ", "\n"])), function (_ref2) {
+var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background: inherit;\n  min-height: ", ";\n  min-width: ", ";\n  position: sticky;\n  left: ", ";\n  ", "\n"])), function (_ref2) {
   var height = _ref2.height;
   return height !== null && height !== void 0 ? height : "auto";
 }, function (_ref3) {
   var width = _ref3.width;
   return width !== null && width !== void 0 ? width : "auto";
 }, function (_ref4) {
-  var fixedToLeft = _ref4.fixedToLeft,
-      withCheckbox = _ref4.withCheckbox;
-  return fixedToLeft >= 0 && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      left: ", "px;\n      z-index: 5;\n    "])), withCheckbox ? 20 + fixedToLeft : fixedToLeft);
+  var fixedToLeft = _ref4.fixedToLeft;
+  return fixedToLeft >= 0 ? "".concat(fixedToLeft, "px") : "20px";
+}, function (_ref5) {
+  var fixedToLeft = _ref5.fixedToLeft,
+      withCheckbox = _ref5.withCheckbox;
+  return fixedToLeft >= 0 && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      left: ", "px;\n      z-index: 10;\n    "])), withCheckbox ? 20 + fixedToLeft : fixedToLeft);
 });
 
 exports.TH = TH;
 
-var TD = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: inherit;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  min-width: ", ";\n  text-align: center;\n  vertical-align: middle;\n  z-index: 5;\n  position: sticky;\n  left: 20px;\n  .content {\n    white-space: nowrap;\n    overflow: hidden;\n    /* text-overflow: ellipsis; */\n  }\n  ", "\n"])), function (_ref5) {
-  var width = _ref5.width;
+var TD = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  background: inherit;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  min-width: ", ";\n  text-align: center;\n  vertical-align: middle;\n  z-index: 5;\n  position: sticky;\n  left: ", ";\n  .content {\n    white-space: nowrap;\n    overflow: hidden;\n    /* text-overflow: ellipsis; */\n  }\n  ", "\n"])), function (_ref6) {
+  var width = _ref6.width;
   return width !== null && width !== void 0 ? width : "auto";
-}, function (_ref6) {
-  var fixedToLeft = _ref6.fixedToLeft,
-      withCheckbox = _ref6.withCheckbox;
-  return fixedToLeft >= 0 && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n      left: ", "px;\n      z-index: 5;\n    "])), withCheckbox ? 20 + fixedToLeft : fixedToLeft);
+}, function (_ref7) {
+  var fixedToLeft = _ref7.fixedToLeft;
+  return fixedToLeft >= 0 ? "".concat(fixedToLeft, "px") : "20px";
+}, function (_ref8) {
+  var fixedToLeft = _ref8.fixedToLeft,
+      withCheckbox = _ref8.withCheckbox;
+  return fixedToLeft >= 0 && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n      left: ", "px;\n      z-index: 10;\n    "])), withCheckbox ? 20 + fixedToLeft : fixedToLeft);
 });
 
 exports.TD = TD;

package/dist/components/pages/MultipleEdition/index.js

@@ -174,8 +174,9 @@ var MultipleEdition = function MultipleEdition(_ref) {
         src: _closeMagenta.default,
         alt: "Cerrar",
         onClick: function onClick() {
-          return onClose && onClose();
-        }
+          window.location.href = "/products";
+        } //onClick={() => onClose && onClose()}
+
       }), " "]
     }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "table",

package/dist/components/pages/MultipleEdition/styles.js

@@ -15,9 +15,9 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: -10%;\n    left: 50px;\n    z-index: 100;\n  }\n\n  .validation-button{\n    width: 30px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n  }\n\n  .validation-option {\n    width: 82px;\n    height: 20px;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    left: 7px;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 5px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .tooltiptext {\n    visibility: hidden;\n    width: 200px;\n    background-color: #ffffff;\n    color: #000000;\n    text-align: center;\n    border-radius: 6px;\n    position: absolute;\n    z-index: 6 important!;\n    bottom: 100%;\n    left: 20%;\n    margin-left: -80px;\n    opacity: 0;\n    transition: opacity 0.3s;\n    box-shadow: 0px 2px 4px 0px #00000040;\n    font-family: Roboto;\n    font-size: 12px;\n    padding: 10px;\n    text-align: justify;\n  }\n  \n\n  \n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: -10%;\n    left: 50px;\n    z-index: 100;\n  }\n\n  .validation-button{\n    width: 30px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n  }\n\n  .validation-option {\n    width: 82px;\n    height: 20px;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    left: 7px;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 5px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  .general-input {\n    width: 100%;\n    height:27px;\n    max-height:100px;\n  }\n\n  .select-edition-multiple {\n    padding: 5px 10px;\n    border-radius: 5px;\n    gap: 10px;\n    border:1px solid ", ";\n    border-width: 1px 2px 1px 1px;\n    outline: none;\n    border-image: initial;\n    width: 100%;\n    min-height:27px;\n    cursor: pointer;\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    overflow:hidden; \n    white-space:nowrap; \n    text-overflow:ellipsis;\n    :focus{\n      border:1px solid ", ";\n    }\n  }\n\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .tooltiptext {\n    visibility: hidden;\n    width: 200px;\n    background-color: #ffffff;\n    color: #000000;\n    text-align: center;\n    border-radius: 6px;\n    position: absolute;\n    z-index: 6 important!;\n    bottom: 100%;\n    left: 20%;\n    margin-left: -80px;\n    opacity: 0;\n    transition: opacity 0.3s;\n    box-shadow: 0px 2px 4px 0px #00000040;\n    font-family: Roboto;\n    font-size: 12px;\n    padding: 10px;\n    text-align: justify;\n  }\n  \n\n  \n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2);
 
 exports.Container = Container;

package/dist/components/pages/MultipleEdition/utils.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -48,6 +50,8 @@ var _saveWhiteGray = _interopRequireDefault(require("../../../assets/images/Icon
 
 var _iconsMaterial = require("@mui/icons-material");
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 // variables
@@ -558,6 +562,24 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             value: des.value,
             inputType: inputTypeValue(des.type)
           };
+          var inputComponent;
+
+          if (des.option_list.length > 0) {
+            inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
+              id: item.id + "_" + rules[des.attributeId].attributeId + "_" + item.version,
+              name: item.id + "-" + rules[des.attributeId].attributeId + "-" + item.version,
+              className: "select-edition-multiple",
+              children: des.option_list.map(function (option, index) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                  value: option,
+                  children: option
+                }, index);
+              })
+            });
+          } else {
+            inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props));
+          }
+
           if (!attributesReviewed.find(function (e) {
             return e.articleId == item.id && e.attributeId == des.attributeId && e.versionId == item.version;
           })) attributesReviewed.push({
@@ -629,7 +651,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
               }), " "]
             }), " ", des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               class: "tooltip",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: [inputComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                 class: "tooltiptext",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
@@ -640,7 +662,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
                 })]
               })]
             }), !des.comment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props))
+              children: inputComponent
             })]
           });
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.130",
+  "version": "21.4.132",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/organisms/Table/styles.js

@@ -21,7 +21,7 @@ export const Container = styled.div`
       top: 0;
       height: 45px;
       position: sticky;
-      z-index: 5;
+      z-index: 10;
       & > tr {
         background-color: #f7f7fc;
         border-radius: 5px 5px 0px 0px;
@@ -66,6 +66,7 @@ export const Container = styled.div`
       font-style: normal;
       font-weight: 400;
       line-height: normal;
+      gap:5px;
     }
     display: flex;
     align-items: center;
@@ -78,12 +79,12 @@ export const TH = styled.th`
   min-height: ${({ height }) => height ?? "auto"};
   min-width: ${({ width }) => width ?? "auto"};
   position: sticky;
-  left: 20px;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
   ${({ fixedToLeft, withCheckbox }) =>
     fixedToLeft >= 0 &&
     css`
       left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
+      z-index: 10;
     `}
 `;
 
@@ -98,7 +99,7 @@ export const TD = styled.td`
   vertical-align: middle;
   z-index: 5;
   position: sticky;
-  left: 20px;
+  left: ${({ fixedToLeft }) => (fixedToLeft >= 0 ? `${fixedToLeft}px` : "20px")};
   .content {
     white-space: nowrap;
     overflow: hidden;
@@ -108,6 +109,6 @@ export const TD = styled.td`
     fixedToLeft >= 0 &&
     css`
       left: ${withCheckbox ? 20 + fixedToLeft : fixedToLeft}px;
-      z-index: 5;
+      z-index: 10;
     `}
 `;

package/src/components/pages/MultipleEdition/index.js

@@ -111,7 +111,10 @@ export const MultipleEdition = ({ articles, versions, onClose, token }) => {
         <img
           src={closeMagenta}
           alt="Cerrar"
-          onClick={() => onClose && onClose()}
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+          //onClick={() => onClose && onClose()}
         />{" "}
       </div>{" "}
       <div className="table">

package/src/components/pages/MultipleEdition/styles.js

@@ -125,6 +125,34 @@ export const Container = styled.div`
     }
   }
 
+  .general-input {
+    width: 100%;
+    height:27px;
+    max-height:100px;
+  }
+
+  .select-edition-multiple {
+    padding: 5px 10px;
+    border-radius: 5px;
+    gap: 10px;
+    border:1px solid ${GlobalColors.gray_light};
+    border-width: 1px 2px 1px 1px;
+    outline: none;
+    border-image: initial;
+    width: 100%;
+    min-height:27px;
+    cursor: pointer;
+    color: ${GlobalColors.deep_gray};
+    font-size: 12px;
+    line-height: 21px;
+    overflow:hidden; 
+    white-space:nowrap; 
+    text-overflow:ellipsis;
+    :focus{
+      border:1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
   .tooltip {
     position: relative;
     display: inline-block;

package/src/components/pages/MultipleEdition/utils.js

@@ -11,6 +11,7 @@ import infoIcon from "../../../assets/images/Icons/info.svg";
 import saveWhite from "../../../assets/images/Icons/save-white.svg";
 import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
 import { DockSharp } from "@mui/icons-material";
+import React, { useState } from 'react';
 
 // variables
 export const optionsSelect = [
@@ -533,6 +534,26 @@ export function setDataColumns(
             inputType:inputTypeValue(des.type),
           };
         
+
+          let inputComponent;
+          if (des.option_list.length>0) {
+            inputComponent = (
+              <select id={item.id + "_" + rules[des.attributeId].attributeId + "_" + item.version}
+                name={item.id + "-" + rules[des.attributeId].attributeId + "-" + item.version}
+                className="select-edition-multiple"
+              >
+                {des.option_list.map((option, index) => (
+                  <option key={index} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            );
+            
+          } else {
+            inputComponent = <TagAndInput {...props} />;
+          }
+        
           if (
             !attributesReviewed.find(
               (e) =>
@@ -644,11 +665,11 @@ export function setDataColumns(
                   </div>
                 )}{" "}
               {des.comment && <div class="tooltip">
-               <TagAndInput {...props} />
+              {inputComponent}
                 <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
               </div>}
               {!des.comment && <div>
-               <TagAndInput {...props} />
+                {inputComponent}
                </div>}
             </>
           );