@digi-frontend/dgate-api-documentation 1.0.12 → 1.0.15

package/dist/src/components/table/tags-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags-table.js","sources":["../../../../src/components/table/tags-table.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport './style.scss'\r\nimport _styles from '../InfoForm/InfoForm.module.scss'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport Tooltip from '../Tooltip/Tooltip'\r\nimport SVGLoader from '../SVGLoader/SVGLoader'\r\nimport { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'\r\nimport styles from '../MethodAccordion/MethodAccordion.module.scss'\r\nimport { useFormik } from 'formik'\r\nimport * as yup from 'yup'\r\n\r\nconst TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {\r\n  const [text, setText] = useState('')\r\n  const [externalDesc, setExternalDesc] = useState('')\r\n  const [externalUrl, setExternalUrl] = useState('')\r\n  const [tooltipRef, setTooltipRef] = useState(null)\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)\r\n  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({\r\n    initialValues: {\r\n      name: '',\r\n      description: '',\r\n      externalDocs: {\r\n        url: '',\r\n        description: '',\r\n      },\r\n    },\r\n    validationSchema: yup.object().shape({\r\n      name: yup.string().required('Tag name is required'),\r\n      description: yup.string().optional(),\r\n      externalDocs: yup.object().optional(),\r\n    }),\r\n    onSubmit: (values) => {\r\n      setText('')\r\n      setExternalDesc('')\r\n      setExternalUrl('')\r\n      resetForm()\r\n      setIsFormOpen(false)\r\n      saveNewRow(values)\r\n    },\r\n  })\r\n  return (\r\n    <div className=\"tableSectionContainer\">\r\n      <div className=\"tableContainer\">\r\n        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>\r\n          <thead className=\"tableHead\">\r\n            <tr>\r\n              {headCells?.map((headCell) => (\r\n                <th\r\n                  key={headCell.id}\r\n                  className={`tableHeadCell ${headCell.classes || ''}`}\r\n                  style={{ width: headCell.width, minWidth: headCell.minWidth }}\r\n                >\r\n                  <div\r\n                    className=\"headContainer\"\r\n                    data-id={`${\r\n                      typeof headCell.label === 'string'\r\n                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')\r\n                        : 'UNKNOWN_LABEL'\r\n                    }_COLUMN`}\r\n                  >\r\n                    {headCell.label}\r\n                  </div>\r\n                </th>\r\n              ))}\r\n            </tr>\r\n          </thead>\r\n          <tbody className=\"tableBody\" data-id=\"TABLE_BODY\">\r\n            {data?.map((row, rowIndex) => {\r\n              return (\r\n                <tr key={rowIndex} data-i={rowIndex} className={`row`}>\r\n                  {headCells?.map((headCell) => {\r\n                    const cellContent = row[headCell.id] !== '_' && (\r\n                      <div\r\n                        data-id=\"TEXT_DESCRIPTION\"\r\n                        className=\"tableData\"\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {row[headCell.id]}\r\n                      </div>\r\n                    )\r\n\r\n                    return (\r\n                      <td\r\n                        key={headCell.id}\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {cellContent}\r\n                      </td>\r\n                    )\r\n                  })}\r\n                </tr>\r\n              )\r\n            })}\r\n            {isFormOpen ? (\r\n              <tr key={''} data-i={''} className={`row`}>\r\n                <td key={'tag name'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <Input\r\n                      placeholder=\"Tag name\"\r\n                      size=\"large\"\r\n                      type=\"text\"\r\n                      onChange={(value) => {\r\n                        setFieldValue('name', value)\r\n                      }} // Pass the value directly\r\n                      value={values.name} // Bind value to the state\r\n                      disabled={readOnly}\r\n                    />\r\n                  </div>\r\n                </td>\r\n\r\n                <td key={'tagDescRequired'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <div className={styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setTooltipRef(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>Description</p>\r\n                            <TextArea\r\n                              value={text || values.description}\r\n                              onChange={(value) => {\r\n                                setText(value)\r\n                              }}\r\n                              disabled={readOnly}\r\n                              placeholder=\"Describe Tag...\"\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue('description', text)\r\n                                  tooltipRef?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        <Button\r\n                          className={_styles.editDescBtn}\r\n                          style={{ paddingLeft: 0 }}\r\n                          variant=\"link\"\r\n                          color=\"action\"\r\n                          endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                        >\r\n                          {readOnly ? 'View ' : 'Add '} Description\r\n                        </Button>\r\n                      </Tooltip>\r\n                    </div>{' '}\r\n                  </div>\r\n                </td>\r\n                <td key={'tagExternal'}>\r\n                  <div className=\"tableData\">\r\n                    <div className={_styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setExternalTooltipRefs(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Description\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"Describe External Doc...\"\r\n                              value={externalDesc || values.externalDocs.description}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalDesc(value)}\r\n                            />\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Link\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"External Docs Link...\"\r\n                              value={externalUrl || values.externalDocs.url}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalUrl(value)}\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue(`externalDocs`, {\r\n                                    description: externalDesc,\r\n                                    url: externalUrl,\r\n                                  })\r\n                                  setExternalDesc('')\r\n                                  setExternalUrl('')\r\n                                  externalTooltipRefs?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        {readOnly ? (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            onClick={() => {\r\n                              const a = document.createElement('a')\r\n                              a.href = values.externalDocs?.url\r\n                              a.target = '_blank'\r\n                              a.click()\r\n                            }}\r\n                          >\r\n                            {values?.externalDocs?.description\r\n                              ? values?.externalDocs?.description?.substring(0, 12)\r\n                              : '-'}\r\n                            {values?.externalDocs?.description &&\r\n                            values?.externalDocs?.description?.length > 12\r\n                              ? '...'\r\n                              : ''}\r\n                          </Button>\r\n                        ) : (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                          >\r\n                            {readOnly ? 'View ' : 'Add '} External Docs Link\r\n                          </Button>\r\n                        )}\r\n                      </Tooltip>\r\n                      <div className={_styles.paramDescContainer_separator}></div>\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"error\"\r\n                          endIcon={\r\n                            <SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />\r\n                          }\r\n                          onClick={() => {\r\n                            resetForm()\r\n                            setText('')\r\n                            setIsFormOpen(false)\r\n                          }} // Correctly delete the new row\r\n                        />\r\n                      )}\r\n\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"success\"\r\n                          disabled={!isValid}\r\n                          endIcon={<SVGLoader src={AddRow} width=\"0.125rem\" height=\"0.125rem\" />}\r\n                          onClick={() => {\r\n                            setText('')\r\n                            submitForm()\r\n                          }} // Save the new row when clicked\r\n                        />\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              <>\r\n                {!readOnly && (\r\n                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>\r\n                    <td colSpan={5}>\r\n                      <Button\r\n                        variant=\"link\"\r\n                        color=\"primary\"\r\n                        onClick={() => {\r\n                          setIsFormOpen((prev) => !prev)\r\n                        }}\r\n                      >\r\n                        + Add Tag\r\n                      </Button>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </>\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default TagsTable\r\n"],"names":["TagsTable","id","headCells","data","isFormOpen","setIsFormOpen","saveNewRow","readOnly","text","setText","useState","externalDesc","setExternalDesc","externalUrl","setExternalUrl","tooltipRef","setTooltipRef","externalTooltipRefs","setExternalTooltipRefs","values","errors","setFieldValue","isValid","submitForm","resetForm","useFormik","initialValues","name","description","externalDocs","url","validationSchema","yup.object","shape","yup.string","required","optional","onSubmit","_jsx","className","_jsxs","jsxs","children","map","headCell","classes","style","width","minWidth","jsx","label","toUpperCase","replace","row","rowIndex","cellContent","Input","placeholder","size","type","onChange","value","disabled","styles","paramDescContainer","Tooltip","arrowWithBorder","placement","trigger","delay","onCreate","instance","content","_styles","editDescTooltipContent","editDescTooltipContent_header","TextArea","Button","editDescTooltipContent_btn","variant","onClick","hide","editDescBtn","paddingLeft","color","endIcon","SVGLoader","src","EditIcon","height","a","document","createElement","href","_a","target","click","_c","_b","substring","_d","_f","_e","length","paramDescContainer_separator","deleteParamBtn","DeleteIcon","AddRow","_Fragment","Fragment","colSpan","prev"],"mappings":"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"}
+{"version":3,"file":"tags-table.js","sources":["../../../../src/components/table/tags-table.tsx"],"sourcesContent":["import { useState } from 'react'\r\nimport './style.scss'\r\nimport _styles from '../InfoForm/InfoForm.module.scss'\r\nimport { Button, Input, TextArea } from 'digitinary-ui'\r\nimport Tooltip from '../Tooltip/Tooltip'\r\nimport SVGLoader from '../SVGLoader/SVGLoader'\r\nimport { AddRow, EditIcon, DeleteIcon } from '../../assets/icons'\r\nimport styles from '../MethodAccordion/MethodAccordion.module.scss'\r\nimport { useFormik } from 'formik'\r\nimport * as yup from 'yup'\r\n\r\nconst TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow, readOnly }) => {\r\n  const [text, setText] = useState('')\r\n  const [externalDesc, setExternalDesc] = useState('')\r\n  const [externalUrl, setExternalUrl] = useState('')\r\n  const [tooltipRef, setTooltipRef] = useState(null)\r\n  const [externalTooltipRefs, setExternalTooltipRefs] = useState(null)\r\n  const { values, errors, setFieldValue, isValid, submitForm, resetForm } = useFormik({\r\n    initialValues: {\r\n      name: '',\r\n      description: '',\r\n      externalDocs: {\r\n        url: '',\r\n        description: '',\r\n      },\r\n    },\r\n    validationSchema: yup.object().shape({\r\n      name: yup.string().required('Tag name is required'),\r\n      description: yup.string().optional(),\r\n      externalDocs: yup.object().optional(),\r\n    }),\r\n    onSubmit: (values) => {\r\n      setText('')\r\n      setExternalDesc('')\r\n      setExternalUrl('')\r\n      resetForm()\r\n      setIsFormOpen(false)\r\n      saveNewRow(values)\r\n    },\r\n  })\r\n  return (\r\n    <div className=\"tableSectionContainer\">\r\n      <div className=\"tableContainer\">\r\n        <table id={id || ''} className={`table borderRadiusTop borderRadiusBottom`}>\r\n          <thead className=\"tableHead\">\r\n            <tr>\r\n              {headCells?.map((headCell) => (\r\n                <th\r\n                  key={headCell.id}\r\n                  className={`tableHeadCell ${headCell.classes || ''}`}\r\n                  style={{ width: headCell.width, minWidth: headCell.minWidth }}\r\n                >\r\n                  <div\r\n                    className=\"headContainer\"\r\n                    data-id={`${\r\n                      typeof headCell.label === 'string'\r\n                        ? headCell.label.toUpperCase().replace(/[^a-zA-Z0-9]+/g, '_')\r\n                        : 'UNKNOWN_LABEL'\r\n                    }_COLUMN`}\r\n                  >\r\n                    {headCell.label}\r\n                  </div>\r\n                </th>\r\n              ))}\r\n            </tr>\r\n          </thead>\r\n          <tbody className=\"tableBody\" data-id=\"TABLE_BODY\">\r\n            {data?.map((row, rowIndex) => {\r\n              return (\r\n                <tr key={rowIndex} data-i={rowIndex} className={`row`}>\r\n                  {headCells?.map((headCell) => {\r\n                    const cellContent = row[headCell.id] !== '_' && (\r\n                      <div\r\n                        data-id=\"TEXT_DESCRIPTION\"\r\n                        className=\"tableData\"\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {row[headCell.id]}\r\n                      </div>\r\n                    )\r\n\r\n                    return (\r\n                      <td\r\n                        key={headCell.id}\r\n                        style={{\r\n                          width: headCell.width,\r\n                          minWidth: headCell.minWidth,\r\n                        }}\r\n                      >\r\n                        {cellContent}\r\n                      </td>\r\n                    )\r\n                  })}\r\n                </tr>\r\n              )\r\n            })}\r\n            {isFormOpen ? (\r\n              <tr key={''} data-i={''} className={`row`}>\r\n                <td key={'tag name'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <Input\r\n                      placeholder=\"Tag name\"\r\n                      size=\"large\"\r\n                      type=\"text\"\r\n                      onChange={(value) => {\r\n                        setFieldValue('name', value)\r\n                      }} // Pass the value directly\r\n                      value={values.name} // Bind value to the state\r\n                      disabled={readOnly}\r\n                    />\r\n                  </div>\r\n                </td>\r\n\r\n                <td key={'tagDescRequired'}>\r\n                  <div data-id=\"TEXT_DESCRIPTION\" className=\"tableData\">\r\n                    <div className={styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setTooltipRef(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>Description</p>\r\n                            <TextArea\r\n                              value={text || values.description}\r\n                              onChange={(value) => {\r\n                                setText(value)\r\n                              }}\r\n                              disabled={readOnly}\r\n                              placeholder=\"Describe Tag...\"\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue('description', text)\r\n                                  tooltipRef?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        <Button\r\n                          className={_styles.editDescBtn}\r\n                          style={{ paddingLeft: 0 }}\r\n                          variant=\"link\"\r\n                          color=\"action\"\r\n                          endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                        >\r\n                          {readOnly ? 'View ' : 'Add '} Description\r\n                        </Button>\r\n                      </Tooltip>\r\n                    </div>{' '}\r\n                  </div>\r\n                </td>\r\n                <td key={'tagExternal'}>\r\n                  <div className=\"tableData\">\r\n                    <div className={_styles.paramDescContainer}>\r\n                      <Tooltip\r\n                        arrowWithBorder\r\n                        placement=\"bottom-end\"\r\n                        type=\"function\"\r\n                        trigger=\"click\"\r\n                        delay={[0, 0]}\r\n                        onCreate={(instance) => setExternalTooltipRefs(instance)}\r\n                        content={\r\n                          <div className={_styles.editDescTooltipContent}>\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Description\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"Describe External Doc...\"\r\n                              value={externalDesc || values.externalDocs.description}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalDesc(value)}\r\n                            />\r\n                            <p className={_styles.editDescTooltipContent_header}>\r\n                              External Docs Link\r\n                            </p>\r\n                            <TextArea\r\n                              placeholder=\"External Docs Link...\"\r\n                              value={externalUrl || values.externalDocs.url}\r\n                              disabled={readOnly}\r\n                              onChange={(value) => setExternalUrl(value)}\r\n                            />\r\n                            {!readOnly && (\r\n                              <Button\r\n                                className={_styles.editDescTooltipContent_btn}\r\n                                variant=\"outlined\"\r\n                                size=\"small\"\r\n                                onClick={() => {\r\n                                  setFieldValue(`externalDocs`, {\r\n                                    description: externalDesc,\r\n                                    url: externalUrl,\r\n                                  })\r\n                                  setExternalDesc('')\r\n                                  setExternalUrl('')\r\n                                  externalTooltipRefs?.hide()\r\n                                }}\r\n                              >\r\n                                Apply\r\n                              </Button>\r\n                            )}\r\n                          </div>\r\n                        }\r\n                      >\r\n                        {readOnly ? (\r\n                          <a\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            href={values.externalDocs?.url}\r\n                            target='_blank'\r\n                         \r\n                          >\r\n                            {values?.externalDocs?.description\r\n                              ? values?.externalDocs?.description?.substring(0, 12)\r\n                              : '-'}\r\n                            {values?.externalDocs?.description &&\r\n                            values?.externalDocs?.description?.length > 12\r\n                              ? '...'\r\n                              : ''}\r\n                          </a>\r\n                        ) : (\r\n                          <Button\r\n                            className={_styles.editDescBtn}\r\n                            variant=\"link\"\r\n                            color=\"action\"\r\n                            endIcon={<SVGLoader src={EditIcon} width=\"1.5rem\" height=\"1.5rem\" />}\r\n                          >\r\n                            {readOnly ? 'View ' : 'Add '} External Docs Link\r\n                          </Button>\r\n                        )}\r\n                      </Tooltip>\r\n                      <div className={_styles.paramDescContainer_separator}></div>\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"error\"\r\n                          endIcon={\r\n                            <SVGLoader src={DeleteIcon} width=\"1.125rem\" height=\"1.125rem\" />\r\n                          }\r\n                          onClick={() => {\r\n                            resetForm()\r\n                            setText('')\r\n                            setIsFormOpen(false)\r\n                          }} // Correctly delete the new row\r\n                        />\r\n                      )}\r\n\r\n                      {!readOnly && (\r\n                        <Button\r\n                          className={_styles.deleteParamBtn}\r\n                          variant=\"link\"\r\n                          color=\"success\"\r\n                          disabled={!isValid}\r\n                          endIcon={<SVGLoader src={AddRow} width=\"0.125rem\" height=\"0.125rem\" />}\r\n                          onClick={() => {\r\n                            setText('')\r\n                            submitForm()\r\n                          }} // Save the new row when clicked\r\n                        />\r\n                      )}\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            ) : (\r\n              <>\r\n                {!readOnly && (\r\n                  <tr key={'addNew'} data-i={'addNew'} className={`row`}>\r\n                    <td colSpan={5}>\r\n                      <Button\r\n                        variant=\"link\"\r\n                        color=\"primary\"\r\n                        onClick={() => {\r\n                          setIsFormOpen((prev) => !prev)\r\n                        }}\r\n                      >\r\n                        + Add Tag\r\n                      </Button>\r\n                    </td>\r\n                  </tr>\r\n                )}\r\n              </>\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default TagsTable\r\n"],"names":["TagsTable","id","headCells","data","isFormOpen","setIsFormOpen","saveNewRow","readOnly","text","setText","useState","externalDesc","setExternalDesc","externalUrl","setExternalUrl","tooltipRef","setTooltipRef","externalTooltipRefs","setExternalTooltipRefs","values","errors","setFieldValue","isValid","submitForm","resetForm","useFormik","initialValues","name","description","externalDocs","url","validationSchema","yup.object","shape","yup.string","required","optional","onSubmit","_jsx","className","_jsxs","jsxs","children","map","headCell","classes","style","width","minWidth","jsx","label","toUpperCase","replace","row","rowIndex","cellContent","Input","placeholder","size","type","onChange","value","disabled","styles","paramDescContainer","Tooltip","arrowWithBorder","placement","trigger","delay","onCreate","instance","content","_styles","editDescTooltipContent","editDescTooltipContent_header","TextArea","Button","editDescTooltipContent_btn","variant","onClick","hide","editDescBtn","paddingLeft","color","endIcon","SVGLoader","src","EditIcon","height","href","_a","target","_b","_d","_c","substring","_e","_g","_f","length","paramDescContainer_separator","deleteParamBtn","DeleteIcon","AddRow","_Fragment","Fragment","colSpan","prev"],"mappings":"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"}

package/dist/styles.css

@@ -1,27 +1,4 @@
-.containerTitleDrawer {
-  height: 64px;
-  min-height: 64px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f1f2f6;
-  padding: 0 30px 0 30px;
-  width: 100%;
-}
-.containerTitleDrawer span {
-  color: #12131a;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 25px;
-  letter-spacing: 0em;
-}
-.containerTitleDrawer svg path {
-  stroke: #000 !important;
-}
-.containerTitleDrawer .closeIcon {
-  cursor: pointer;
-}.tooltip-custom-wrapper {
+.tooltip-custom-wrapper {
   display: flex;
 }
 
@@ -111,6 +88,29 @@
   z-index: 20000000000;
   top: -0.6rem;
   transform-origin: center !important;
+}.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+}
+.containerTitleDrawer span {
+  color: #12131a;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  letter-spacing: 0em;
+}
+.containerTitleDrawer svg path {
+  stroke: #000 !important;
+}
+.containerTitleDrawer .closeIcon {
+  cursor: pointer;
 }.methodAccordion {
   border: none !important;
   box-shadow: none !important;
@@ -375,6 +375,10 @@
 }
 .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
   background-color: #ebecf2;
+}p.apiName {
+  font-size: 40px;
+  line-height: 30px;
+  font-weight: 500;
 }.apiInfoForm {
   display: grid;
   padding: 1.25rem 1.875rem;
@@ -694,87 +698,6 @@
 .tableSectionContainer .descArrow path,
 .tableSectionContainer .defaultSortArrow path {
   fill: var(--Gray-50);
-}p.apiName {
-  font-size: 40px;
-  line-height: 30px;
-  font-weight: 500;
-}#common-dialog.dialog-content-wrapper {
-  overflow: visible !important;
-  max-height: 100%;
-  width: 22.1875rem;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root {
-  overflow: visible !important;
-  border-radius: 0.625rem;
-  max-height: 100%;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
-  padding: 0 1.875rem !important;
-  overflow: visible !important;
-  max-height: 100%;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
-  position: relative;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
-  position: absolute;
-  z-index: 1;
-  top: 1.5rem;
-  right: 0;
-  transform: translate(0.625rem, -0.625rem);
-  cursor: pointer;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
-  display: flex;
-  padding-top: 0.5rem;
-  position: relative;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
-  margin-top: 1rem;
-  margin-bottom: 1.5rem;
-  margin-inline: auto;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
-  stroke: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
-  stroke: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
-  fill: #12131a;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
-  stroke: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
-  stroke: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
-  stroke: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
-  stroke: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
-  fill: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.875rem;
-  text-align: center;
-  margin-bottom: 0.625rem;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
-  color: #da3f3f;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
-  color: #faad14;
-}
-#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
-  display: flex;
-  gap: 1.25rem;
-  margin-top: 1.875rem;
 }:root {
   --white: #fff;
   --Gray-5: #f1f2f6;
@@ -880,6 +803,83 @@
 }
 .drawerItemContainer .color-red {
   color: var(--color-error);
+}#common-dialog.dialog-content-wrapper {
+  overflow: visible !important;
+  max-height: 100%;
+  width: 22.1875rem;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root {
+  overflow: visible !important;
+  border-radius: 0.625rem;
+  max-height: 100%;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content {
+  padding: 0 1.875rem !important;
+  overflow: visible !important;
+  max-height: 100%;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog {
+  position: relative;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .close-icon {
+  position: absolute;
+  z-index: 1;
+  top: 1.5rem;
+  right: 0;
+  transform: translate(0.625rem, -0.625rem);
+  cursor: pointer;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header {
+  display: flex;
+  padding-top: 0.5rem;
+  position: relative;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon {
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  margin-inline: auto;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info path {
+  stroke: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line {
+  stroke: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.info line + path {
+  fill: #12131a;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning path {
+  stroke: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.warning line {
+  stroke: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error path {
+  stroke: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line {
+  stroke: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-header .icon.error line + path {
+  fill: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.875rem;
+  text-align: center;
+  margin-bottom: 0.625rem;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.error-title {
+  color: #da3f3f;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-title.warning-title {
+  color: #faad14;
+}
+#common-dialog.dialog-content-wrapper .dialog-content-root .dialog-content .common-dialog .confirmation-dialog-footer {
+  display: flex;
+  gap: 1.25rem;
+  margin-top: 1.875rem;
 }.json-editor-container {
   overflow: hidden;
   border-bottom-right-radius: 0.3125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InfoForm/InfoForm.tsx

@@ -49,6 +49,10 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
   const confirmDeleteTag = () => {
     if (selectedTagIndex !== null) {
       setTableData((prev) => prev.filter((_, i) => i !== selectedTagIndex))
+      setFieldValue(
+        `tags`,
+        values.tags?.filter((_, i) => i !== selectedTagIndex)
+      )
     }
     setOpenDeleteDialog(false)
     setSelectedTagIndex(null)
@@ -213,6 +217,7 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 onClick={() => {
                   const a = document.createElement('a')
                   a.href = item.externalDocs?.url
+                  a.target="_blank"
                   a.click()
                 }}
               >
@@ -230,7 +235,8 @@ const InfoForm = ({ readOnly }: { readOnly?: boolean }) => {
                 color="action"
                 endIcon={<SVGLoader src={EditIcon} width="1.5rem" height="1.5rem" />}
                 onClick={() => {
-                  console.log('Move to url')
+                  setDescription(item.externalDocs?.description)
+                  setURL(item.externalDocs?.url)
                 }}
               >
                 {readOnly ||

package/src/components/LivePreview/LivePreview.tsx

@@ -29,7 +29,6 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
       : null
 
   useEffect(() => {
-    console.log({updated: values.tags})
     if (values.tags && values.tags.length) {
       setTableRecords(generateTableData(values.tags, true))
       setTableData(values.tags)
@@ -42,79 +41,24 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
       tagName: item.name,
       description: (
         <div className={styles.paramDescContainer}>
-          <Tooltip
-            arrowWithBorder
-            placement="bottom-end"
-            type="function"
-            trigger="click"
-            delay={[0, 0]}
-            onCreate={(instance) =>
-              setTooltipRefs((prev) => ({
-                ...prev,
-                [index]: instance,
-              }))
-            }
-            content={
-              <div className={styles.editDescTooltipContent}>
-                <p className={styles.editDescTooltipContent_header}>Description</p>
-                <TextArea
-                  placeholder="Describe parameter..."
-                  value={item.description}
-                  disabled={readOnly}
-                  onChange={(value) => null}
-                />
-              </div>
-            }
-          >
-            <Button className={styles.editDescBtn} variant="link" color="action">
-              {item.description ? item.description.substring(0, 12) : '-'}
-              {item.description && item.description.length > 12 ? '...' : ''}
-            </Button>
-          </Tooltip>
+          <Button className={styles.editDescBtn} variant="link" color="action">
+            {item.description ? item.description.substring(0, 12) : '-'}
+            {item.description && item.description.length > 12 ? '...' : ''}
+          </Button>
         </div>
       ),
       externalDocs: (
         <div className={styles.paramDescContainer}>
-          <Tooltip
-            arrowWithBorder
-            placement="bottom-end"
-            type="function"
-            trigger="click"
-            delay={[0, 0]}
-            onCreate={(instance) =>
-              setExternalTooltipRefs((prev) => ({
-                ...prev,
-                [index]: instance,
-              }))
-            }
-            content={
-              <div className={styles.editDescTooltipContent}>
-                <p className={styles.editDescTooltipContent_header}>External Docs Description</p>
-                <TextArea
-                  placeholder="Describe External Doc..."
-                  value={item.externalDocs?.description}
-                  disabled={readOnly}
-                  onChange={(value) => null}
-                />
-                <p className={styles.editDescTooltipContent_header}>External Docs Link</p>
-                <TextArea
-                  placeholder="External Docs Link..."
-                  value={item.externalDocs?.url}
-                  disabled={readOnly}
-                  onChange={(value) => null}
-                />
-              </div>
-            }
-          >
-            <Button
+          {item.externalDocs && item.externalDocs.url && item.externalDocs.url != '-' ? (
+            <a
               className={styles.editDescBtn}
-              variant="link"
-              color="action"
-              onClick={() => {
-                const a = document.createElement('a')
-                a.href = item.externalDocs?.url
-                a.click()
-              }}
+              href={
+                item.externalDocs?.url && item.externalDocs?.url.indexOf('http') > -1
+                  ? item.externalDocs?.url
+                  : `https://${item.externalDocs?.url}`
+              }
+              rel="noopener noreferrer"
+              target="_blank"
             >
               {item?.externalDocs?.description
                 ? item?.externalDocs?.description?.substring(0, 12)
@@ -122,8 +66,15 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
               {item?.externalDocs?.description && item?.externalDocs?.description?.length > 12
                 ? '...'
                 : ''}
+            </a>
+          ) : (
+            <Button className={styles.editDescBtn} variant="link" color="action">
+              {item.description ? item.description.substring(0, 12) : '-'}
+              {item.description && item.description.length > 12 ? '...' : ''}
             </Button>
-          </Tooltip>
+          )}
+
+          {/* </Tooltip> */}
 
           {!readOnly && <div className={styles.paramDescContainer_separator}></div>}
 
@@ -156,12 +107,9 @@ const LivePreview: React.FC<LivePreviewProps> = ({ transformedData }) => {
             value={info?.description || '-'}
           />
 
-          <SimpleLabelValue
-            key={'tags'}
-            label={'Tags: '}
-          />
+          <SimpleLabelValue key={'tags'} label={'Tags: '} />
           <TagsTable
-          id="tags-table"
+            id="tags-table"
             data={tableRecords}
             headCells={tagsTableHeaders}
             isFormOpen={false}

package/src/components/table/tags-table.tsx

@@ -216,16 +216,13 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                         }
                       >
                         {readOnly ? (
-                          <Button
+                          <a
                             className={_styles.editDescBtn}
                             variant="link"
                             color="action"
-                            onClick={() => {
-                              const a = document.createElement('a')
-                              a.href = values.externalDocs?.url
-                              a.target = '_blank'
-                              a.click()
-                            }}
+                            href={values.externalDocs?.url}
+                            target='_blank'
+                         
                           >
                             {values?.externalDocs?.description
                               ? values?.externalDocs?.description?.substring(0, 12)
@@ -234,7 +231,7 @@ const TagsTable = ({ id, headCells, data, isFormOpen, setIsFormOpen, saveNewRow,
                             values?.externalDocs?.description?.length > 12
                               ? '...'
                               : ''}
-                          </Button>
+                          </a>
                         ) : (
                           <Button
                             className={_styles.editDescBtn}