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

package/lib/FieldDisplaySetting/index.js

@@ -11,6 +11,7 @@ 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;
@@ -50,43 +51,51 @@ function FieldDisplaySetting(_ref) {
       height: 0
     }
   };
-  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
-    });
-  })))));
+  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));
+          })
+        })]
+      })
+    })]
+  });
 }
 var _default = exports.default = FieldDisplaySetting;

package/lib/FileEditor/index.js

@@ -8,6 +8,7 @@ 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);
@@ -17,14 +18,16 @@ class FileEditor extends _react.default.Component {
     let {
       closeEditor
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactstrap.Modal, {
       isOpen: true,
-      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"
-    }));
+      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"
+      })]
+    });
   }
 }
 FileEditor.defaultProps = {

package/lib/FileFormatter/index.js

@@ -9,6 +9,7 @@ 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 {
@@ -22,22 +23,24 @@ 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__*/_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__*/_react.default.createElement("div", {
-      className: className
-    }, value.map((item, index) => {
-      return /*#__PURE__*/_react.default.createElement(_FileItemFormatter.default, {
-        file: item,
-        key: index
+      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__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: value.map((item, index) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileItemFormatter.default, {
+          file: item
+        }, index);
+      })
+    });
   }
 }
 exports.default = FileFormatter;

package/lib/FileItemFormatter/index.js

@@ -7,6 +7,7 @@ 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);
@@ -20,7 +21,7 @@ class FileItemFormatter extends _react.Component {
     const {
       file
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("img", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       className: "file-item-icon",
       src: this.getFileIconData(file),
       alt: file.name

package/lib/FileUploader/index.js

@@ -6,6 +6,7 @@ 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);
@@ -22,7 +23,7 @@ class FileUploader extends _react.default.Component {
     this.uploadFiles = [];
   }
   render() {
-    return /*#__PURE__*/_react.default.createElement("input", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "file",
       onChange: this.onFilesChanged
     });

package/lib/FormulaFormatter/index.js

@@ -12,6 +12,7 @@ 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);
@@ -55,15 +56,16 @@ 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__*/_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));
-      }));
+      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));
+        })
+      });
     };
     this.getFormatterProps = (array_type, array_data, collaborators) => {
       switch (array_type) {
@@ -100,9 +102,13 @@ class FormulaFormatter extends _react.default.Component {
         ...formatterProps
       });
     } else if ((0, _utils.isFunction)(Formatter)) {
-      return /*#__PURE__*/_react.default.createElement(Formatter, formatterProps);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Formatter, {
+        ...formatterProps
+      });
     }
-    return /*#__PURE__*/_react.default.createElement(_TextFormatter.default, formatterProps);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {
+      ...formatterProps
+    });
   }
   render() {
     const {
@@ -134,11 +140,12 @@ class FormulaFormatter extends _react.default.Component {
     const formattedValue = (0, _dtableUtils.getFormulaDisplayString)(value, data, {
       collaborators
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-ui cell-formatter-container formula-formatter ".concat(containerClassName, " ").concat(gridCellClassName),
       title: formattedValue,
-      "aria-label": formattedValue
-    }, formattedValue);
+      "aria-label": formattedValue,
+      children: formattedValue
+    });
   }
 }
 var _default = exports.default = FormulaFormatter;

package/lib/GeolocationFormatter/index.js

@@ -9,6 +9,7 @@ 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 {
@@ -21,12 +22,13 @@ class GeolocationFormatter extends _react.default.Component {
     if (typeof value !== 'object') {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, (0, _dtableUtils.getGeolocationDisplayString)(value, data, {
-      isBaiduMap,
-      hyphen: ' '
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: (0, _dtableUtils.getGeolocationDisplayString)(value, data, {
+        isBaiduMap,
+        hyphen: ' '
+      })
+    });
   }
 }
 GeolocationFormatter.defaultProps = {

package/lib/HtmlLongTextFormatter/index.js

@@ -10,6 +10,7 @@ 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);
@@ -66,7 +67,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__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "".concat(className, " article"),
       dangerouslySetInnerHTML: {
         __html: innerHtml

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

@@ -8,6 +8,7 @@ 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);
@@ -104,20 +105,20 @@ class ImagesLazyLoad extends _react.default.Component {
       let style = {
         marginLeft: '4px'
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: style,
-        className: "d-flex align-items-center"
-      }, /*#__PURE__*/_react.default.createElement(_Loading.default, null));
+        className: "d-flex align-items-center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.default, {})
+      });
     }
     return loadedImages.map((image, index) => {
-      return /*#__PURE__*/_react.default.createElement("img", {
-        key: index,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
         className: "image-item",
         src: image.src,
         onMouseDown: this.onMouseDown,
         onClick: event => this.onImageClick(event, index),
         alt: ""
-      });
+      }, index);
     });
   }
 }

package/lib/ImageFormatter/index.js

@@ -12,6 +12,7 @@ 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);
@@ -80,36 +81,41 @@ class ImageFormatter extends _react.default.Component {
     if (isSample) {
       let item = value[0];
       let url = (0, _utils.getImageThumbnailUrl)(item, server);
-      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)("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(_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
-    }));
+    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
+      })]
+    });
   }
 }
 ImageFormatter.defaultProps = {

package/lib/ImagePreviewerLightbox/index.js

@@ -10,6 +10,7 @@ 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,
@@ -28,14 +29,17 @@ 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__*/_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, {
+  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, {
     wrapperClassName: (0, _classnames.default)('dtable-ui-component', className),
     imageTitle: imageTitleEl,
     mainSrc: imageItems[imageIndex],

package/lib/LastModifierFormatter/index.js

@@ -10,6 +10,7 @@ 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
@@ -35,10 +36,9 @@ class LastModifierFormatter extends _react.default.PureComponent {
             avatar_url: _default_avatar.default
           };
         }
-        return /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          key: index,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
           collaborator: collaborator
-        });
+        }, index);
       });
     };
   }
@@ -49,14 +49,15 @@ 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__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     const collaborators = this.getCollaborators();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, collaborators);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: collaborators
+    });
   }
 }
 LastModifierFormatter.defaultProps = {

package/lib/LinkEditor/index.js

@@ -16,6 +16,7 @@ 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);
@@ -221,39 +222,44 @@ class LinkEditor extends _react.default.Component {
     let options = this.getAvailableLinkedOptions();
     let selectedOptions = this.formatLinkedValuesToOptions();
     let isShowRemoveIcon = !isReadOnly;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorContainerRef,
-      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
-    }))));
+      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
+          })
+        })]
+      })]
+    });
   }
 }
 LinkEditor.defaultProps = {