dtable-ui-component 5.0.9-beta.2 → 5.0.9-beta.4

package/lib/FieldDisplaySetting/index.js

@@ -11,7 +11,6 @@ var _reactstrap = require("reactstrap");
 var _reactTransitionGroup = require("react-transition-group");
 var _fieldItem = _interopRequireDefault(require("./field-item"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 const FIELD_ITEM_HEIGHT = 30;
 const BANNER_HEIGHT = 24;
 const DURATION = 300;
@@ -51,51 +50,43 @@ function FieldDisplaySetting(_ref) {
       height: 0
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "field-setting",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "field-setting-header d-flex align-items-center justify-content-between",
-      onClick: expandAllFields,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
-        className: "mb-0",
-        children: textProperties.titleValue
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
-      nodeRef: nodeRef,
-      in: !isCollapsed,
-      timeout: DURATION,
-      children: state => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "field-setting-wrapper",
-        ref: nodeRef,
-        style: {
-          ...defaultStyle,
-          ...transitionStyles[state]
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2"),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Label, {
-            className: "mb-0",
-            children: textProperties.bannerValue
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "show-all-button",
-            onClick: onToggleFieldsVisibility,
-            children: fieldAllShown ? textProperties.hideValue : textProperties.showValue
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "field-setting-body",
-          children: fields.map((field, index) => {
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_fieldItem.default, {
-              field: field,
-              isCollapsed: isCollapsed,
-              onClickField: onClickField,
-              onMoveField: onMoveField
-            }, "".concat(field.key, "-").concat(index));
-          })
-        })]
-      })
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-setting"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-setting-header d-flex align-items-center justify-content-between",
+    onClick: expandAllFields
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    className: "mb-0"
+  }, textProperties.titleValue), /*#__PURE__*/_react.default.createElement("span", {
+    className: "dtable-font dtable-icon-right expand-button ".concat(isCollapsed ? '' : 'revolving')
+  })), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+    nodeRef: nodeRef,
+    in: !isCollapsed,
+    timeout: DURATION
+  }, state => /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-setting-wrapper",
+    ref: nodeRef,
+    style: {
+      ...defaultStyle,
+      ...transitionStyles[state]
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-setting-banner ".concat(isCollapsed ? 'd-none' : 'd-flex', " align-items-center justify-content-between h-5 mt-2 mb-2")
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Label, {
+    className: "mb-0"
+  }, textProperties.bannerValue), /*#__PURE__*/_react.default.createElement("span", {
+    className: "show-all-button",
+    onClick: onToggleFieldsVisibility
+  }, fieldAllShown ? textProperties.hideValue : textProperties.showValue)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "field-setting-body"
+  }, fields.map((field, index) => {
+    return /*#__PURE__*/_react.default.createElement(_fieldItem.default, {
+      key: "".concat(field.key, "-").concat(index),
+      field: field,
+      isCollapsed: isCollapsed,
+      onClickField: onClickField,
+      onMoveField: onMoveField
+    });
+  })))));
 }
 var _default = exports.default = FieldDisplaySetting;

package/lib/FileEditor/index.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactstrap = require("reactstrap");
 var _lang = require("../lang");
-var _jsxRuntime = require("react/jsx-runtime");
 class FileEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -18,16 +17,14 @@ class FileEditor extends _react.default.Component {
     let {
       closeEditor
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Modal, {
+    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
       isOpen: true,
-      toggle: closeEditor,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalHeader, {
-        toggle: closeEditor,
-        children: (0, _lang.getLocale)('Add_Files')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.ModalBody, {
-        className: "file-editor-container"
-      })]
-    });
+      toggle: closeEditor
+    }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+      toggle: closeEditor
+    }, (0, _lang.getLocale)('Add_Files')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+      className: "file-editor-container"
+    }));
   }
 }
 FileEditor.defaultProps = {

package/lib/FileFormatter/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _FileItemFormatter = _interopRequireDefault(require("../FileItemFormatter"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class FileFormatter extends _react.default.PureComponent {
   render() {
     let {
@@ -23,24 +22,22 @@ class FileFormatter extends _react.default.PureComponent {
     let className = (0, _classnames.default)('dtable-ui cell-formatter-container file-formatter', containerClassName);
     if (isSample) {
       let item = value[0];
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: className,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileItemFormatter.default, {
-          file: item
-        }), value.length !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "file-item-count",
-          children: "+".concat(value.length)
-        })]
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+        file: item
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "file-item-count"
+      }, "+".concat(value.length)));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: className,
-      children: value.map((item, index) => {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileItemFormatter.default, {
-          file: item
-        }, index);
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, value.map((item, index) => {
+      return /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
+        file: item,
+        key: index
+      });
+    }));
   }
 }
 exports.default = FileFormatter;

package/lib/FileItemFormatter/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
 class FileItemFormatter extends _react.Component {
   constructor() {
     super(...arguments);
@@ -21,7 +20,7 @@ class FileItemFormatter extends _react.Component {
     const {
       file
     } = this.props;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    return /*#__PURE__*/_react.default.createElement("img", {
       className: "file-item-icon",
       src: this.getFileIconData(file),
       alt: file.name

package/lib/FileUploader/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _jsxRuntime = require("react/jsx-runtime");
 class FileUploader extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -23,7 +22,7 @@ class FileUploader extends _react.default.Component {
     this.uploadFiles = [];
   }
   render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    return /*#__PURE__*/_react.default.createElement("input", {
       type: "file",
       onChange: this.onFilesChanged
     });

package/lib/FormulaFormatter/index.js

@@ -12,7 +12,6 @@ var _TextFormatter = _interopRequireDefault(require("../TextFormatter"));
 var _utils = require("./utils");
 var _cellValueValidator = _interopRequireDefault(require("./cell-value-validator"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class FormulaFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -56,16 +55,15 @@ class FormulaFormatter extends _react.default.Component {
         cellValue = (0, _cellValueValidator.default)(value, array_type) ? [value] : [];
       }
       const contentItemClassName = "formula-formatter-content-item ".concat(_isSimpleCellFormatterColumn ? 'simple-cell-formatter' : '');
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "dtable-ui formula-formatter multiple",
-        children: cellValue.map((v, index) => {
-          formatterProps.value = v;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: contentItemClassName,
-            children: this.createColumnFormatter(Formatter, formatterProps)
-          }, "formula-formatter-content-item-".concat(index));
-        })
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "dtable-ui formula-formatter multiple"
+      }, cellValue.map((v, index) => {
+        formatterProps.value = v;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: contentItemClassName,
+          key: "formula-formatter-content-item-".concat(index)
+        }, this.createColumnFormatter(Formatter, formatterProps));
+      }));
     };
     this.getFormatterProps = (array_type, array_data, collaborators) => {
       switch (array_type) {
@@ -102,13 +100,9 @@ class FormulaFormatter extends _react.default.Component {
         ...formatterProps
       });
     } else if ((0, _utils.isFunction)(Formatter)) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
-        ...formatterProps
-      });
+      return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {
-      ...formatterProps
-    });
+    return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);
   }
   render() {
     const {
@@ -140,12 +134,11 @@ class FormulaFormatter extends _react.default.Component {
     const formattedValue = (0, _dtableUtils.getFormulaDisplayString)(value, data, {
       collaborators
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
       title: formattedValue,
-      "aria-label": formattedValue,
-      children: formattedValue
-    });
+      "aria-label": formattedValue
+    }, formattedValue);
   }
 }
 var _default = exports.default = FormulaFormatter;

package/lib/GeolocationFormatter/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class GeolocationFormatter extends _react.default.Component {
   render() {
     let {
@@ -22,13 +21,12 @@ class GeolocationFormatter extends _react.default.Component {
     if (typeof value !== 'object') {
       return null;
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: className,
-      children: (0, _dtableUtils.getGeolocationDisplayString)(value, data, {
-        isBaiduMap,
-        hyphen: ' '
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, (0, _dtableUtils.getGeolocationDisplayString)(value, data, {
+      isBaiduMap,
+      hyphen: ' '
+    }));
   }
 }
 GeolocationFormatter.defaultProps = {

package/lib/HtmlLongTextFormatter/index.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _seafileEditor = require("@seafile/seafile-editor");
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class HtmlLongTextFormatter extends _react.Component {
   constructor(_props) {
     super(_props);
@@ -67,7 +66,7 @@ class HtmlLongTextFormatter extends _react.Component {
     } = this.props;
     const className = (0, _classnames.default)('dtable-ui cell-formatter-container long-text-formatter', containerClassName);
     if (!innerHtml) return null;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(className, " article"),
       dangerouslySetInnerHTML: {
         __html: innerHtml

package/lib/ImageFormatter/images-lazy-load.js

@@ -8,7 +8,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Loading = _interopRequireDefault(require("../Loading"));
 var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
 class ImagesLazyLoad extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -105,20 +104,20 @@ class ImagesLazyLoad extends _react.default.Component {
       let style = {
         marginLeft: '4px'
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         style: style,
-        className: "d-flex align-items-center",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
-      });
+        className: "d-flex align-items-center"
+      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
     }
     return loadedImages.map((image, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      return /*#__PURE__*/_react.default.createElement("img", {
+        key: index,
         className: "image-item",
         src: image.src,
         onMouseDown: this.onMouseDown,
         onClick: event => this.onImageClick(event, index),
         alt: ""
-      }, index);
+      });
     });
   }
 }

package/lib/ImageFormatter/index.js

@@ -12,7 +12,6 @@ var _imagesLazyLoad = _interopRequireDefault(require("./images-lazy-load"));
 var _utils = require("./utils");
 var _ImagePreviewerLightbox = _interopRequireDefault(require("../ImagePreviewerLightbox"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class ImageFormatter extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -81,41 +80,36 @@ class ImageFormatter extends _react.default.Component {
     if (isSample) {
       let item = value[0];
       let url = (0, _utils.getImageThumbnailUrl)(item, server);
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: className,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-          className: "image-item",
-          src: url,
-          alt: ""
-        }), value.length !== 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "image-item-count",
-          children: "+".concat(value.length)
-        })]
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, /*#__PURE__*/_react.default.createElement("img", {
+        className: "image-item",
+        src: url,
+        alt: ""
+      }), value.length !== 1 && /*#__PURE__*/_react.default.createElement("span", {
+        className: "image-item-count"
+      }, "+".concat(value.length)));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: className,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_imagesLazyLoad.default, {
-          images: value,
-          server: server,
-          onImageClick: this.onImageClick
-        })
-      }), isPreviewImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewerLightbox.default, {
-        imageItems: value,
-        imageIndex: previewImageIndex,
-        closeImagePopup: this.closeImagePopup,
-        moveToPrevImage: this.movePrev,
-        moveToNextImage: this.moveNext,
-        deleteImage: this.canDelete ? this.deleteImage : null,
-        downloadImage: this.downloadImage,
-        onRotateImage: this.canRotate ? this.onRotateImage : null,
-        readOnly: readOnly,
-        server: server,
-        moveToPrevRowImage: this.props.moveToPrevRowImage,
-        moveToNextRowImage: this.props.moveToNextRowImage
-      })]
-    });
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: className
+    }, /*#__PURE__*/_react.default.createElement(_imagesLazyLoad.default, {
+      images: value,
+      server: server,
+      onImageClick: this.onImageClick
+    })), isPreviewImage && /*#__PURE__*/_react.default.createElement(_ImagePreviewerLightbox.default, {
+      imageItems: value,
+      imageIndex: previewImageIndex,
+      closeImagePopup: this.closeImagePopup,
+      moveToPrevImage: this.movePrev,
+      moveToNextImage: this.moveNext,
+      deleteImage: this.canDelete ? this.deleteImage : null,
+      downloadImage: this.downloadImage,
+      onRotateImage: this.canRotate ? this.onRotateImage : null,
+      readOnly: readOnly,
+      server: server,
+      moveToPrevRowImage: this.props.moveToPrevRowImage,
+      moveToNextRowImage: this.props.moveToNextRowImage
+    }));
   }
 }
 ImageFormatter.defaultProps = {

package/lib/ImagePreviewerLightbox/index.js

@@ -10,7 +10,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactImageLightbox = _interopRequireDefault(require("@seafile/react-image-lightbox"));
 var _utils = require("./utils");
 require("@seafile/react-image-lightbox/style.css");
-var _jsxRuntime = require("react/jsx-runtime");
 function ImagePreviewerLightbox(props) {
   const {
     imageItems,
@@ -29,17 +28,14 @@ function ImagePreviewerLightbox(props) {
   const imageTitle = URL ? decodeURI(URL.slice(URL.lastIndexOf('/') + 1)) : '';
   // svg image is vectorgraph and can't rotate, external image can't rotate
   const canRotateImage = onRotateImage && !readOnly && !(0, _utils.checkSVGImage)(URL) && (0, _utils.isInternalImg)(URL, server);
-  const imageTitleEl = /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: "d-flex",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: "text-truncate",
-      children: imageTitle
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-      className: "flex-shrink-0",
-      children: ["(", imageIndex + 1, "/", imageItemsLength, ")"]
-    })]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageLightbox.default, {
+  const imageTitleEl = /*#__PURE__*/_react.default.createElement("span", {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text-truncate"
+  }, imageTitle), /*#__PURE__*/_react.default.createElement("span", {
+    className: "flex-shrink-0"
+  }, "(", imageIndex + 1, "/", imageItemsLength, ")"));
+  return /*#__PURE__*/_react.default.createElement(_reactImageLightbox.default, {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
     imageTitle: imageTitleEl,
     mainSrc: imageItems[imageIndex],

package/lib/LastModifierFormatter/index.js

@@ -10,7 +10,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _CollaboratorItem = _interopRequireDefault(require("../CollaboratorItem"));
 var _default_avatar = _interopRequireDefault(require("../assets/images/avatar/default_avatar.png"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 // there will be there conditions
 // 1 value is not exist, typeof value is array, but it's length is 0
 // 2 value is exist, but can't find in collaborators
@@ -36,9 +35,10 @@ class LastModifierFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
+          key: index,
           collaborator: collaborator
-        }, index);
+        });
       });
     };
   }
@@ -49,15 +49,14 @@ class LastModifierFormatter extends _react.default.PureComponent {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container last-modified-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: classname,
-      children: collaborators
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classname
+    }, collaborators);
   }
 }
 LastModifierFormatter.defaultProps = {

package/lib/LinkEditor/index.js

@@ -16,7 +16,6 @@ var _linkEditorOption = _interopRequireDefault(require("./link-editor-option"));
 var _pcLinkEditorPopover = _interopRequireDefault(require("./pc-link-editor-popover"));
 var _mbLinkEditorPopover = _interopRequireDefault(require("./mb-link-editor-popover"));
 require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
 class LinkEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -222,44 +221,39 @@ class LinkEditor extends _react.default.Component {
     let options = this.getAvailableLinkedOptions();
     let selectedOptions = this.formatLinkedValuesToOptions();
     let isShowRemoveIcon = !isReadOnly;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.setEditorContainerRef,
-      className: "dtable-ui-link-editor",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        ref: this.setEditorRef,
-        className: "dtable-ui-link-editor-container",
-        onClick: this.onAddOptionToggle,
-        children: [selectedOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEditorButton.default, {
-          text: (0, _lang.getLocale)('Add_an_option')
-        }), selectedOptions.length !== 0 && selectedOptions.map(option => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_linkEditorOption.default, {
-            option: option,
-            isShowRemoveIcon: isShowRemoveIcon,
-            onDeleteLinkOption: this.onDeleteOption
-          }, option.id);
-        })]
-      }), isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: "(min-width: 768px)",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcLinkEditorPopover.default, {
-            popoverPosition: popoverPosition,
-            options: options,
-            selectedOptions: selectedOptions,
-            onOptionItemToggle: this.onOptionItemToggle
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
-          query: "(max-width: 767.8px)",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbLinkEditorPopover.default, {
-            isReadOnly: this.props.isReadOnly,
-            value: this.state.newValue,
-            column: this.props.column,
-            options: options,
-            onOptionItemToggle: this.onOptionItemToggle,
-            onClosePopover: this.onClosePopover
-          })
-        })]
-      })]
-    });
+      className: "dtable-ui-link-editor"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      ref: this.setEditorRef,
+      className: "dtable-ui-link-editor-container",
+      onClick: this.onAddOptionToggle
+    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
+      text: (0, _lang.getLocale)('Add_an_option')
+    }), selectedOptions.length !== 0 && selectedOptions.map(option => {
+      return /*#__PURE__*/_react.default.createElement(_linkEditorOption.default, {
+        key: option.id,
+        option: option,
+        isShowRemoveIcon: isShowRemoveIcon,
+        onDeleteLinkOption: this.onDeleteOption
+      });
+    })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: "(min-width: 768px)"
+    }, /*#__PURE__*/_react.default.createElement(_pcLinkEditorPopover.default, {
+      popoverPosition: popoverPosition,
+      options: options,
+      selectedOptions: selectedOptions,
+      onOptionItemToggle: this.onOptionItemToggle
+    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
+      query: "(max-width: 767.8px)"
+    }, /*#__PURE__*/_react.default.createElement(_mbLinkEditorPopover.default, {
+      isReadOnly: this.props.isReadOnly,
+      value: this.state.newValue,
+      column: this.props.column,
+      options: options,
+      onOptionItemToggle: this.onOptionItemToggle,
+      onClosePopover: this.onClosePopover
+    }))));
   }
 }
 LinkEditor.defaultProps = {