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

package/lib/SimpleLongTextFormatter/widgets/LongTextPreview.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableMarkdownViewer = _interopRequireDefault(require("./dtable-markdown-viewer"));
 require("./longTextEditor.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class LongTextPreview extends _react.default.PureComponent {
   constructor(props) {
     super(props);
@@ -74,18 +75,20 @@ class LongTextPreview extends _react.default.PureComponent {
       value
     } = this.props;
     const markdownContent = value ? value.text : '';
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('longtext-modal-dialog longtext-preview', className),
       style: this.getStyle(),
       ref: ref => this.ref = ref,
       onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "longtext-container longtext-container-scroll"
-    }, /*#__PURE__*/_react.default.createElement(_dtableMarkdownViewer.default, {
-      markdownContent: markdownContent,
-      showTOC: false
-    })));
+      onMouseLeave: this.onMouseLeave,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "longtext-container longtext-container-scroll",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dtableMarkdownViewer.default, {
+          markdownContent: markdownContent,
+          showTOC: false
+        })
+      })
+    });
   }
 }
 var _default = exports.default = LongTextPreview;

package/lib/SimpleLongTextFormatter/widgets/dtable-markdown-viewer.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _seafileEditor = require("@seafile/seafile-editor");
+var _jsxRuntime = require("react/jsx-runtime");
 // Windows old Wechat (3.0 or earlier) inner core is chrome 53 and don't support ECMA6, can't use seafile-editor markdownViewer
 // Windows new Wechat (lastest version 3.3.5) support seafile-editor markdownViewer
 // so use dangerouslySetInnerHTML to preview
@@ -43,7 +44,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
   }
   render() {
     if (this.isWindowsWechat) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "long-text-container article",
         dangerouslySetInnerHTML: {
           __html: this.state.innerHtml
@@ -54,7 +55,7 @@ class DtableMarkdownViewer extends _react.default.PureComponent {
       showTOC,
       markdownContent
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_seafileEditor.MarkdownViewer, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_seafileEditor.MarkdownViewer, {
       value: markdownContent,
       isShowOutline: showTOC
     });

package/lib/SingleSelectEditor/index.js

@@ -12,6 +12,7 @@ var _lang = require("../lang");
 var _EditEditorButton = _interopRequireDefault(require("../EditEditorButton"));
 var _selectEditor = require("../select-editor");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class SingleSelectEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -123,41 +124,48 @@ class SingleSelectEditor extends _react.default.Component {
     let option = this.formatOption();
     let options = this.options;
     let selectedOptions = option ? [option] : [];
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorContainerRef,
-      className: "dtable-ui-single-select-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorRef,
-      className: option ? '' : 'd-inline-block',
-      onClick: this.onAddOptionToggle
-    }, option ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-single-select-option-container"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.SelectEditorOption, {
-      option: option
-    })) : /*#__PURE__*/_react.default.createElement(_EditEditorButton.default, {
-      text: (0, _lang.getLocale)('Add_an_option')
-    })), isPopoverShow && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(min-width: 768px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.PCSelectEditorPopover, {
-      popoverPosition: popoverPosition,
-      options: options,
-      selectedOptions: selectedOptions,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption
-    })), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-      query: "(max-width: 767.8px)"
-    }, /*#__PURE__*/_react.default.createElement(_selectEditor.MBSelectEditorPopover, {
-      isReadOnly: this.props.isReadOnly,
-      value: [this.state.newValue],
-      column: this.props.column,
-      options: options,
-      onOptionItemToggle: this.onOptionItemToggle,
-      isShowRemoveIcon: true,
-      isSupportNewOption: this.props.isSupportNewOption,
-      onAddNewOption: this.onAddNewOption,
-      onClosePopover: this.onClosePopover
-    }))));
+      className: "dtable-ui-single-select-editor",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: this.setEditorRef,
+        className: option ? '' : 'd-inline-block',
+        onClick: this.onAddOptionToggle,
+        children: option ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-single-select-option-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.SelectEditorOption, {
+            option: option
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditEditorButton.default, {
+          text: (0, _lang.getLocale)('Add_an_option')
+        })
+      }), isPopoverShow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+          query: "(min-width: 768px)",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.PCSelectEditorPopover, {
+            popoverPosition: popoverPosition,
+            options: options,
+            selectedOptions: selectedOptions,
+            onOptionItemToggle: this.onOptionItemToggle,
+            isSupportNewOption: this.props.isSupportNewOption,
+            onAddNewOption: this.onAddNewOption
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+          query: "(max-width: 767.8px)",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditor.MBSelectEditorPopover, {
+            isReadOnly: this.props.isReadOnly,
+            value: [this.state.newValue],
+            column: this.props.column,
+            options: options,
+            onOptionItemToggle: this.onOptionItemToggle,
+            isShowRemoveIcon: true,
+            isSupportNewOption: this.props.isSupportNewOption,
+            onAddNewOption: this.onAddNewOption,
+            onClosePopover: this.onClosePopover
+          })
+        })]
+      })]
+    });
   }
 }
 SingleSelectEditor.defaultProps = {

package/lib/SingleSelectFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SelectItem = _interopRequireDefault(require("../SelectItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class SingleSelectFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -20,7 +21,7 @@ class SingleSelectFormatter extends _react.default.PureComponent {
       } = this.props;
       let option = options.find(item => item.id === value || item.name === value);
       if (option) {
-        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
           option: option,
           fontSize: fontSize
         });
@@ -33,9 +34,10 @@ class SingleSelectFormatter extends _react.default.PureComponent {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container single-select-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, value ? this.getOption() : '');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: value ? this.getOption() : ''
+    });
   }
 }
 SingleSelectFormatter.defaultProps = {

package/lib/TextEditor/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _isHotkey = _interopRequireDefault(require("is-hotkey"));
 var _reactstrap = require("reactstrap");
+var _jsxRuntime = require("react/jsx-runtime");
 class TextEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -61,7 +62,7 @@ class TextEditor extends _react.default.Component {
     const {
       isReadOnly
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Input, {
       ref: this.setInputRef,
       type: "text",
       value: this.state.newValue,

package/lib/TextFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class TextFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -28,10 +29,11 @@ class TextFormatter extends _react.default.Component {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container text-formatter', containerClassName);
     const formattedValue = this.getFormattedValue(value);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: classname,
-      title: formattedValue
-    }, formattedValue);
+      title: formattedValue,
+      children: formattedValue
+    });
   }
 }
 var _default = exports.default = TextFormatter;

package/lib/UrlFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class UrlFormatter extends _react.default.Component {
   render() {
     const {
@@ -15,9 +16,10 @@ class UrlFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container url-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, value);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: value
+    });
   }
 }
 var _default = exports.default = UrlFormatter;

package/lib/common/delete-tip.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _modalPortal = _interopRequireDefault(require("./modal-portal"));
 var _lang = require("../lang");
 require("./delete-tip.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class DeleteTip extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -31,25 +32,32 @@ class DeleteTip extends _react.default.Component {
       position,
       deleteTip
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_modalPortal.default, null, /*#__PURE__*/_react.default.createElement("div", {
-      ref: node => this.tipContainer = node,
-      className: "dtable-tip tip-container",
-      style: {
-        top: position.top,
-        left: position.left
-      },
-      onClick: e => e.stopPropagation()
-    }, /*#__PURE__*/_react.default.createElement("b", {
-      className: "mb-4"
-    }, deleteTip), /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex justify-content-end"
-    }, /*#__PURE__*/_react.default.createElement("button", {
-      className: "btn btn-secondary mr-2",
-      onClick: toggle
-    }, (0, _lang.getLocale)('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
-      className: "btn btn-primary",
-      onClick: onDelete
-    }, (0, _lang.getLocale)('Delete')))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modalPortal.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: node => this.tipContainer = node,
+        className: "dtable-tip tip-container",
+        style: {
+          top: position.top,
+          left: position.left
+        },
+        onClick: e => e.stopPropagation(),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+          className: "mb-4",
+          children: deleteTip
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex justify-content-end",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "btn btn-secondary mr-2",
+            onClick: toggle,
+            children: (0, _lang.getLocale)('Cancel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            className: "btn btn-primary",
+            onClick: onDelete,
+            children: (0, _lang.getLocale)('Delete')
+          })]
+        })]
+      })
+    });
   }
 }
 exports.default = DeleteTip;

package/lib/formatterConfig/base-formatter-config.js

@@ -28,28 +28,29 @@ var _EmailFormatter = _interopRequireDefault(require("../EmailFormatter"));
 var _DurationFormatter = _interopRequireDefault(require("../DurationFormatter"));
 var _RateFormatter = _interopRequireDefault(require("../RateFormatter"));
 var _ButtonFormatter = _interopRequireDefault(require("../ButtonFormatter"));
+var _jsxRuntime = require("react/jsx-runtime");
 const BaseFormatterConfig = {
-  [_constants.CellType.DEFAULT]: /*#__PURE__*/_react.default.createElement(_TextFormatter.default, null),
-  [_constants.CellType.TEXT]: /*#__PURE__*/_react.default.createElement(_TextFormatter.default, null),
-  [_constants.CellType.CHECKBOX]: /*#__PURE__*/_react.default.createElement(_CheckboxFormatter.default, null),
-  [_constants.CellType.LONG_TEXT]: /*#__PURE__*/_react.default.createElement(_SimpleLongTextFormatter.default, null),
-  [_constants.CellType.SINGLE_SELECT]: /*#__PURE__*/_react.default.createElement(_SingleSelectFormatter.default, null),
-  [_constants.CellType.IMAGE]: /*#__PURE__*/_react.default.createElement(_ImageFormatter.default, null),
-  [_constants.CellType.FILE]: /*#__PURE__*/_react.default.createElement(_FileFormatter.default, null),
-  [_constants.CellType.MULTIPLE_SELECT]: /*#__PURE__*/_react.default.createElement(_MultipleSelectFormatter.default, null),
-  [_constants.CellType.COLLABORATOR]: /*#__PURE__*/_react.default.createElement(_CollaboratorFormatter.default, null),
-  [_constants.CellType.NUMBER]: /*#__PURE__*/_react.default.createElement(_NumberFormatter.default, null),
-  [_constants.CellType.DATE]: /*#__PURE__*/_react.default.createElement(_DateFormatter.default, null),
-  [_constants.CellType.CREATOR]: /*#__PURE__*/_react.default.createElement(_CreatorFormatter.default, null),
-  [_constants.CellType.CTIME]: /*#__PURE__*/_react.default.createElement(_CTimeFormatter.default, null),
-  [_constants.CellType.LAST_MODIFIER]: /*#__PURE__*/_react.default.createElement(_LastModifierFormatter.default, null),
-  [_constants.CellType.MTIME]: /*#__PURE__*/_react.default.createElement(_MTimeFormatter.default, null),
-  [_constants.CellType.GEOLOCATION]: /*#__PURE__*/_react.default.createElement(_GeolocationFormatter.default, null),
-  [_constants.CellType.AUTO_NUMBER]: /*#__PURE__*/_react.default.createElement(_AutoNumberFormatter.default, null),
-  [_constants.CellType.URL]: /*#__PURE__*/_react.default.createElement(_UrlFormatter.default, null),
-  [_constants.CellType.EMAIL]: /*#__PURE__*/_react.default.createElement(_EmailFormatter.default, null),
-  [_constants.CellType.DURATION]: /*#__PURE__*/_react.default.createElement(_DurationFormatter.default, null),
-  [_constants.CellType.RATE]: /*#__PURE__*/_react.default.createElement(_RateFormatter.default, null),
-  [_constants.CellType.BUTTON]: /*#__PURE__*/_react.default.createElement(_ButtonFormatter.default, null)
+  [_constants.CellType.DEFAULT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {}),
+  [_constants.CellType.TEXT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFormatter.default, {}),
+  [_constants.CellType.CHECKBOX]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxFormatter.default, {}),
+  [_constants.CellType.LONG_TEXT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleLongTextFormatter.default, {}),
+  [_constants.CellType.SINGLE_SELECT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelectFormatter.default, {}),
+  [_constants.CellType.IMAGE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFormatter.default, {}),
+  [_constants.CellType.FILE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FileFormatter.default, {}),
+  [_constants.CellType.MULTIPLE_SELECT]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectFormatter.default, {}),
+  [_constants.CellType.COLLABORATOR]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorFormatter.default, {}),
+  [_constants.CellType.NUMBER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberFormatter.default, {}),
+  [_constants.CellType.DATE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateFormatter.default, {}),
+  [_constants.CellType.CREATOR]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CreatorFormatter.default, {}),
+  [_constants.CellType.CTIME]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CTimeFormatter.default, {}),
+  [_constants.CellType.LAST_MODIFIER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LastModifierFormatter.default, {}),
+  [_constants.CellType.MTIME]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MTimeFormatter.default, {}),
+  [_constants.CellType.GEOLOCATION]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeolocationFormatter.default, {}),
+  [_constants.CellType.AUTO_NUMBER]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoNumberFormatter.default, {}),
+  [_constants.CellType.URL]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_UrlFormatter.default, {}),
+  [_constants.CellType.EMAIL]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmailFormatter.default, {}),
+  [_constants.CellType.DURATION]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DurationFormatter.default, {}),
+  [_constants.CellType.RATE]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RateFormatter.default, {}),
+  [_constants.CellType.BUTTON]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonFormatter.default, {})
 };
 var _default = exports.default = BaseFormatterConfig;

package/lib/formatterConfig/index.js

@@ -10,9 +10,10 @@ var _constants = require("../constants");
 var _baseFormatterConfig = _interopRequireDefault(require("./base-formatter-config"));
 var _LinkFormatter = _interopRequireDefault(require("../LinkFormatter"));
 var _FormulaFormatter = _interopRequireDefault(require("../FormulaFormatter"));
+var _jsxRuntime = require("react/jsx-runtime");
 const FormatterConfig = {
   ..._baseFormatterConfig.default,
-  [_constants.CellType.FORMULA]: /*#__PURE__*/_react.default.createElement(_FormulaFormatter.default, null),
-  [_constants.CellType.LINK]: /*#__PURE__*/_react.default.createElement(_LinkFormatter.default, null)
+  [_constants.CellType.FORMULA]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormulaFormatter.default, {}),
+  [_constants.CellType.LINK]: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkFormatter.default, {})
 };
 var _default = exports.default = FormatterConfig;

package/lib/select-editor/mb-select-editor-popover/index.js

@@ -11,6 +11,7 @@ var _lang = require("../../lang");
 var _selectEditorOption = _interopRequireDefault(require("../select-editor-option"));
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class MBSelectEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -83,21 +84,24 @@ class MBSelectEditorPopover extends _react.default.Component {
           backgroundColor: option.color,
           color: option.textColor || null
         };
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "mb-select-option-item",
-          key: index,
-          onMouseDown: this.onSelectOption.bind(this, option)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-select-item"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "item-name",
-          style: style,
-          title: option.name
-        }, option.name)), /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-item-checked"
-        }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-check-mark"
-        })));
+          onMouseDown: this.onSelectOption.bind(this, option),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "mb-select-item",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "item-name",
+              style: style,
+              title: option.name,
+              children: option.name
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "mb-item-checked",
+            children: isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+              className: "dtable-font dtable-icon-check-mark"
+            })
+          })]
+        }, index);
       });
     };
     this.setEditorPopover = editorPopover => {
@@ -131,61 +135,77 @@ class MBSelectEditorPopover extends _react.default.Component {
     if (isShowCreateBtn) {
       isShowCreateBtn = filteredOptions.length === 0;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-select-editor-popover",
       style: {
         zIndex: 99
       },
-      onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
-      title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-return"
-      }),
-      onLeftClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-selected-item"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, (0, _lang.getLocale)('Current_option')), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, selectedOptions.length === 0 && /*#__PURE__*/_react.default.createElement("span", {
-      className: "empty-placeholder"
-    }, (0, _lang.getLocale)('No_option')), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
-      return /*#__PURE__*/_react.default.createElement(_selectEditorOption.default, {
-        key: selectedOption.id,
-        option: selectedOption,
-        isShowRemoveIcon: isShowRemoveBtn,
-        onDeleteSelectOption: this.onRemoveOption
-      });
-    }))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-search-select-items"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      type: "text",
-      placeholder: (0, _lang.getLocale)('Search_option'),
-      value: searchVal,
-      onChange: this.onChangeSearch,
-      onClick: this.onInputClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-select-options-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Choose_an_option'))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, filteredOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-result-none"
-    }, (0, _lang.getLocale)('No_options_available')), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)))), isShowCreateBtn && /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-create-select-item",
-      onClick: this.onAddNewOption
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-add-table"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dtable-ui-add-new-option"
-    }, "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)))));
+      onClick: this.onContainerClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MBEditorHeader.default, {
+        title: column.name,
+        leftContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-return"
+        }),
+        onLeftClick: this.props.onClosePopover
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-mb-editor-body dtable-ui-mb-select-editor-body",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "mb-selected-item",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "title",
+            children: (0, _lang.getLocale)('Current_option')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "content",
+            children: [selectedOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "empty-placeholder",
+              children: (0, _lang.getLocale)('No_option')
+            }), selectedOptions.length > 0 && selectedOptions.map(selectedOption => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectEditorOption.default, {
+                option: selectedOption,
+                isShowRemoveIcon: isShowRemoveBtn,
+                onDeleteSelectOption: this.onRemoveOption
+              }, selectedOption.id);
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "mb-search-select-items",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            className: "form-control",
+            type: "text",
+            placeholder: (0, _lang.getLocale)('Search_option'),
+            value: searchVal,
+            onChange: this.onChangeSearch,
+            onClick: this.onInputClick
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "mb-select-options-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "title",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: (0, _lang.getLocale)('Choose_an_option')
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "content",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+              children: [filteredOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "search-result-none",
+                children: (0, _lang.getLocale)('No_options_available')
+              }), filteredOptions.length > 0 && this.renderSelectOptions(filteredOptions)]
+            })
+          })]
+        }), isShowCreateBtn && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "mb-create-select-item",
+          onClick: this.onAddNewOption,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-add-table"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-ui-add-new-option",
+            children: "".concat((0, _lang.getLocale)('Add_an_option'), " ").concat(searchVal)
+          })]
+        })]
+      })]
+    });
   }
 }
 MBSelectEditorPopover.defaultProps = {