@complat/react-spectra-editor 1.3.5 → 1.4.1

package/dist/components/panel/info.js

@@ -17,6 +17,7 @@ var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore
 var _styles = require("@mui/styles");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _meta = require("../../actions/meta");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable no-mixed-operators, react/function-component-definition,
 react/require-default-props, max-len */
 
@@ -110,13 +111,12 @@ const aucValue = integration => {
   }
   return values.join(', ');
 };
-const SECData = _ref => {
-  let {
-    classes,
-    layout,
-    detector,
-    secData
-  } = _ref;
+const SECData = ({
+  classes,
+  layout,
+  detector,
+  secData
+}) => {
   if (_format.default.isSECLayout(layout) && secData) {
     const {
       d,
@@ -124,37 +124,54 @@ const SECData = _ref => {
       mp,
       mw
     } = secData;
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "Detector: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, detector)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "D: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, d)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MN: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mn)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MP: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mp)), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "MW: "), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-    }, mw)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Detector: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: detector
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "D: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: d
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MN: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mn
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MP: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mp
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "MW: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: mw
+        })]
+      })]
+    });
   }
   return null;
 };
@@ -164,13 +181,12 @@ SECData.propTypes = {
   detector: _propTypes.default.object.isRequired,
   secData: _propTypes.default.object.isRequired
 };
-const DSCData = _ref2 => {
-  let {
-    classes,
-    layout,
-    dscMetaData,
-    updateAction
-  } = _ref2;
+const DSCData = ({
+  classes,
+  layout,
+  dscMetaData,
+  updateAction
+}) => {
   if (_format.default.isDSCLayout(layout) && dscMetaData !== undefined) {
     const {
       meltingPoint,
@@ -188,27 +204,33 @@ const DSCData = _ref2 => {
       dataToUpdate[name] = value;
       updateAction(dataToUpdate);
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "Melting Point: "), /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      name: "meltingPoint",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
-      value: meltingPoint,
-      onChange: onChange
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-    }, "TG: "), /*#__PURE__*/_react.default.createElement("input", {
-      type: "text",
-      name: "tg",
-      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
-      value: tg,
-      onChange: onChange
-    })));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Melting Point: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          name: "meltingPoint",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          value: meltingPoint,
+          onChange: onChange
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "TG: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          type: "text",
+          name: "tg",
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          value: tg,
+          onChange: onChange
+        })]
+      })]
+    });
   }
   return null;
 };
@@ -218,27 +240,26 @@ DSCData.propTypes = {
   dscMetaData: _propTypes.default.object.isRequired,
   updateAction: _propTypes.default.func.isRequired
 };
-const InfoPanel = _ref3 => {
-  let {
-    classes,
-    expand,
-    feature,
-    integration,
-    editorOnly,
-    molSvg,
-    descriptions,
-    layoutSt,
-    simulationSt,
-    shiftSt,
-    curveSt,
-    exactMass,
-    onExapnd,
-    canChangeDescription,
-    onDescriptionChanged,
-    detectorSt,
-    metaSt,
-    updateDSCMetaDataAct
-  } = _ref3;
+const InfoPanel = ({
+  classes,
+  expand,
+  feature,
+  integration,
+  editorOnly,
+  molSvg,
+  descriptions,
+  layoutSt,
+  simulationSt,
+  shiftSt,
+  curveSt,
+  exactMass,
+  onExapnd,
+  canChangeDescription,
+  onDescriptionChanged,
+  detectorSt,
+  metaSt,
+  updateDSCMetaDataAct
+}) => {
   if (!feature) return null;
   const {
     title,
@@ -278,7 +299,7 @@ const InfoPanel = _ref3 => {
   if (integration) {
     originStack = integration.originStack; // eslint-disable-line
   }
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
     "data-testid": "PanelInfo",
     expanded: expand,
     onChange: onExapnd,
@@ -286,74 +307,100 @@ const InfoPanel = _ref3 => {
     TransitionProps: {
       unmountOnExit: true
     } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Info"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Title : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, title)), _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowEven)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Freq : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `${parseInt(observeFrequency, 10)} Hz` || ' - ')) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Solv : "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, showSolvName)) : null, _format.default.isMsLayout(layoutSt) && exactMass ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Exact mass: "), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `${parseFloat(exactMass).toFixed(6)} g/mol`)) : null, /*#__PURE__*/_react.default.createElement(SECData, {
-    classes: classes,
-    layout: layoutSt,
-    detector: selectedDetector,
-    secData: secData
-  }), !molSvg ? null : /*#__PURE__*/_react.default.createElement(_reactSvgFileZoomPan.default, {
-    svg: molSvg,
-    duration: 300,
-    resize: true
-  }), _format.default.isHplcUvVisLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, "Area under curve (AUC):"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, aucValue(integration))) : null, /*#__PURE__*/_react.default.createElement(DSCData, {
-    classes: classes,
-    layout: layoutSt,
-    dscMetaData: dscMetaData,
-    updateAction: updateDSCMetaDataAct
-  })), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement(_reactQuill.default, {
-    className: (0, _classnames.default)(classes.quill, 'card-sv-quill'),
-    value: descriptions,
-    modules: {
-      toolbar: false
-    },
-    onChange: onDescriptionChanged,
-    readOnly: canChangeDescription !== undefined ? !canChangeDescription : true
-  }) : null, /*#__PURE__*/_react.default.createElement("div", null, !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim)
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt')
-  }, simTitle(), ":"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt')
-  }, simContent(simulationSt.nmrSimPeaks))) : null));
+    ,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Info"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Title : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: title
+        })]
+      }), _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowEven),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Freq : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: `${parseInt(observeFrequency, 10)} Hz` || ' - '
+        })]
+      }) : null, _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Solv : "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: showSolvName
+        })]
+      }) : null, _format.default.isMsLayout(layoutSt) && exactMass ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOdd),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Exact mass: "
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+          children: `${parseFloat(exactMass).toFixed(6)} g/mol`
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(SECData, {
+        classes: classes,
+        layout: layoutSt,
+        detector: selectedDetector,
+        secData: secData
+      }), !molSvg ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSvgFileZoomPan.default, {
+        svg: molSvg,
+        duration: 300,
+        resize: true
+      }), _format.default.isHplcUvVisLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: "Area under curve (AUC):"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
+          children: aucValue(integration)
+        })]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(DSCData, {
+        classes: classes,
+        layout: layoutSt,
+        dscMetaData: dscMetaData,
+        updateAction: updateDSCMetaDataAct
+      })]
+    }), !_format.default.isCyclicVoltaLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, {
+      className: (0, _classnames.default)(classes.quill, 'card-sv-quill'),
+      value: descriptions,
+      modules: {
+        toolbar: false
+      },
+      onChange: onDescriptionChanged,
+      readOnly: canChangeDescription !== undefined ? !canChangeDescription : true
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: !editorOnly && _format.default.isNmrLayout(layoutSt) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(classes.rowRoot, classes.rowOddSim),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tHead, 'txt-sv-panel-txt'),
+          children: [simTitle(), ":"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.tTxt, classes.tTxtSim, 'txt-sv-panel-txt'),
+          children: simContent(simulationSt.nmrSimPeaks)
+        })]
+      }) : null
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line

package/dist/components/panel/multiplicity.js

@@ -19,6 +19,7 @@ var _multiplicity = require("../../actions/multiplicity");
 var _multiplicity_select = _interopRequireDefault(require("./multiplicity_select"));
 var _multiplicity_coupling = _interopRequireDefault(require("./multiplicity_coupling"));
 var _multiplicity_calc = require("../../helpers/multiplicity_calc");
+var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable function-paren-newline,
 function-call-argument-newline, react/function-component-definition */
 
@@ -138,31 +139,36 @@ const pkList = (classes, row, shift, digits, rmMpyPeakByPanelAct) => row.peaks.m
     peak: pk,
     xExtent
   });
-  const rmBtn = /*#__PURE__*/_react.default.createElement(_HighlightOff.default, {
+  const rmBtn = /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightOff.default, {
     onClick: cb,
     className: classes.rmBtn
   });
-  return /*#__PURE__*/_react.default.createElement(_material.TableRow, {
-    key: pk.x,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
     className: classes.tRow,
-    hover: true
-  }, /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, `(${(pk.x - shift).toFixed(digits)}, ${pk.y.toExponential(2)})`), /*#__PURE__*/_react.default.createElement(_material.TableCell, {
-    align: "right",
-    className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt')
-  }, rmBtn));
+    hover: true,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      children: `(${(pk.x - shift).toFixed(digits)}, ${pk.y.toExponential(2)})`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+      align: "right",
+      className: (0, _classnames.default)(classes.tTxt, 'txt-sv-panel-txt'),
+      children: rmBtn
+    })]
+  }, pk.x);
 });
-const refreshBtn = (classes, onRefresh) => /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+const refreshBtn = (classes, onRefresh) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
   placement: "left",
-  title: /*#__PURE__*/_react.default.createElement("span", {
-    className: "txt-sv-tp"
-  }, "Calculate Multiplicity")
-}, /*#__PURE__*/_react.default.createElement(_material.Button, {
-  className: classes.btnRf,
-  onClick: onRefresh
-}, /*#__PURE__*/_react.default.createElement(_RefreshOutlined.default, null)));
+  title: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "txt-sv-tp",
+    children: "Calculate Multiplicity"
+  }),
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+    className: classes.btnRf,
+    onClick: onRefresh,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RefreshOutlined.default, {})
+  })
+});
 const mpyList = (classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct) => {
   const {
     curveIdx
@@ -203,58 +209,74 @@ const mpyList = (classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpy
     };
     return createData(idx, xExtent, peaks, shift, smExtext, mpyType, js, onClick, onRefresh);
   });
-  return /*#__PURE__*/_react.default.createElement("div", null, rows.map(row => /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.moCard,
-    key: row.idx
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: classes.moCardHead
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(MUCheckbox, {
-    className: classes.moCBox,
-    checked: row.isCheck,
-    onChange: row.onClick
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moExtTxt, classes.moExtId, 'txt-sv-panel-head')
-  }, row.idx), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moExtTxt, 'txt-sv-panel-head')
-  }, `${row.center.toFixed(3)} (ppm)`), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.moSelect, 'txt-sv-panel-head')
-  }, /*#__PURE__*/_react.default.createElement(_multiplicity_select.default, {
-    target: row
-  })), refreshBtn(classes, row.onRefresh)), /*#__PURE__*/_react.default.createElement(_multiplicity_coupling.default, {
-    row: row
-  })), /*#__PURE__*/_react.default.createElement(_material.Table, {
-    className: classes.table
-  }, /*#__PURE__*/_react.default.createElement(_material.TableBody, null, pkList(classes, row, shift, digits, rmMpyPeakByPanelAct))))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: rows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: classes.moCard,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.moCardHead,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MUCheckbox, {
+            className: classes.moCBox,
+            checked: row.isCheck,
+            onChange: row.onClick
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moExtTxt, classes.moExtId, 'txt-sv-panel-head'),
+            children: row.idx
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moExtTxt, 'txt-sv-panel-head'),
+            children: `${row.center.toFixed(3)} (ppm)`
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.moSelect, 'txt-sv-panel-head'),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity_select.default, {
+              target: row
+            })
+          }), refreshBtn(classes, row.onRefresh)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_multiplicity_coupling.default, {
+          row: row
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Table, {
+        className: classes.table,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+          children: pkList(classes, row, shift, digits, rmMpyPeakByPanelAct)
+        })
+      })]
+    }, row.idx))
+  });
 };
-const MultiplicityPanel = _ref => {
-  let {
-    classes,
-    expand,
-    onExapnd,
-    multiplicitySt,
-    curveSt,
-    clickMpyOneAct,
-    rmMpyPeakByPanelAct,
-    resetMpyOneAct
-  } = _ref;
+const MultiplicityPanel = ({
+  classes,
+  expand,
+  onExapnd,
+  multiplicitySt,
+  curveSt,
+  clickMpyOneAct,
+  rmMpyPeakByPanelAct,
+  resetMpyOneAct
+}) => {
   const digits = 4;
-  return /*#__PURE__*/_react.default.createElement(_material.Accordion, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Accordion, {
     expanded: expand,
     onChange: onExapnd,
     className: (0, _classnames.default)(classes.panel),
     TransitionProps: {
       unmountOnExit: true
     } // increase Accordion performance
-  }, /*#__PURE__*/_react.default.createElement(_material.AccordionSummary, {
-    expandIcon: /*#__PURE__*/_react.default.createElement(_ExpandMore.default, null),
-    className: (0, _classnames.default)(classes.panelSummary)
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    className: "txt-panel-header"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title')
-  }, "Multiplicity"))), /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(classes.panelDetail)
-  }, mpyList(classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct)));
+    ,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.AccordionSummary, {
+      expandIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {}),
+      className: (0, _classnames.default)(classes.panelSummary),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "txt-panel-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classnames.default)(classes.txtBadge, 'txt-sv-panel-title'),
+          children: "Multiplicity"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(classes.panelDetail),
+      children: mpyList(classes, digits, multiplicitySt, curveSt, clickMpyOneAct, rmMpyPeakByPanelAct, resetMpyOneAct)
+    })]
+  });
 };
 const mapStateToProps = (state, props) => (
 // eslint-disable-line