dtable-ui-component 6.0.49 → 6.0.50

package/lib/RowExpandEditor/multiple-select-editor/pc-editor/index.js

@@ -13,6 +13,7 @@ var _MultipleSelectEditor = _interopRequireDefault(require("../../../MultipleSel
 var _lang = require("../../../lang");
 var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandPCMultipleSelectEditor extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -95,51 +96,57 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
       const invalidOptionIds = value.filter(optionId => !selectedOptionIds.includes(optionId));
       return selectedOptions.map((option, optionIdx) => {
         let textColor = option.textColor || null;
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-select-option dtable-ui-multiple-select-option",
           style: {
             backgroundColor: option.color,
             color: textColor
           },
           title: option.name,
-          key: optionIdx
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-ui-select-option-name"
-        }, option.name), /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option-remove"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "remove-icon",
-          onClick: this.removeOption.bind(this, option),
-          "aria-label": (0, _lang.getLocale)('Delete')
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-fork-number",
-          style: {
-            color: textColor === '#FFFFFF' ? textColor : null
-          },
-          "aria-hidden": "true"
-        }))));
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-ui-select-option-name",
+            children: option.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-select-option-remove",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "remove-icon",
+              onClick: this.removeOption.bind(this, option),
+              "aria-label": (0, _lang.getLocale)('Delete'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-fork-number",
+                style: {
+                  color: textColor === '#FFFFFF' ? textColor : null
+                },
+                "aria-hidden": "true"
+              })
+            })
+          })]
+        }, optionIdx);
       }).concat(invalidOptionIds.map((optionId, index) => {
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-select-option dtable-ui-multiple-select-option",
           style: {
             backgroundColor: _constants.DELETED_OPTION_BACKGROUND_COLOR
           },
           title: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS),
-          key: "deleted-multiple-select-".concat(index)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-ui-select-option-name"
-        }, (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS)), /*#__PURE__*/_react.default.createElement("div", {
-          className: "dtable-ui-select-option-remove"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "remove-icon",
-          onClick: this.removeOption.bind(this, {
-            id: optionId
-          }),
-          "aria-label": (0, _lang.getLocale)('Delete')
-        }, /*#__PURE__*/_react.default.createElement("i", {
-          className: "dtable-font dtable-icon-fork-number",
-          "aria-hidden": "true"
-        }))));
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-ui-select-option-name",
+            children: (0, _lang.getLocale)(_constants.DELETED_OPTION_TIPS)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-select-option-remove",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "remove-icon",
+              onClick: this.removeOption.bind(this, {
+                id: optionId
+              }),
+              "aria-label": (0, _lang.getLocale)('Delete'),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-fork-number",
+                "aria-hidden": "true"
+              })
+            })
+          })]
+        }, "deleted-multiple-select-".concat(index));
       }));
     };
     this.renderOptions = () => {
@@ -149,7 +156,7 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
         placeholder
       } = this.props;
       const options = this.getMultipleSelectList();
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         tabIndex: 0,
         onFocus: this.onFocus,
         onClick: this.onToggleSelect,
@@ -157,23 +164,29 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
         className: (0, _classnames.default)('dtable-ui dtable-ui-row-expand-select-editor custom-select', {
           'focus': isEditorFocus,
           ["".concat(classNamePrefix, "-select-editor")]: classNamePrefix
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
+            ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)('', {
+              ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
+            }),
+            children: [options.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
+                ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
+              }),
+              children: options
+            }), options.length === 0 && placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: placeholder
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            "aria-hidden": "true",
+            className: "dtable-font dtable-icon-down3"
+          })]
         })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('dtable-ui-row-expand-select-editor-inner', {
-          ["".concat(classNamePrefix, "-select-editor-inner")]: classNamePrefix
-        })
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('', {
-          ["".concat(classNamePrefix, "-select-editor-inner-container")]: classNamePrefix
-        })
-      }, options.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)('dtable-ui-row-expand-select-options', {
-          ["".concat(classNamePrefix, "-select-editor-options")]: classNamePrefix
-        })
-      }, options), options.length === 0 && placeholder && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, placeholder)), /*#__PURE__*/_react.default.createElement("i", {
-        "aria-hidden": "true",
-        className: "dtable-font dtable-icon-down3"
-      })));
+      });
     };
     this.state = {
       value: _props.value || [],
@@ -224,24 +237,25 @@ class RowExpandPCMultipleSelectEditor extends _react.default.Component {
       showSelectPopover,
       value
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "position-relative w-100",
-      ref: ref => this.ref = ref
-    }, this.renderOptions(), /*#__PURE__*/_react.default.createElement("span", {
-      ref: ref => this.targetRef = ref
-    }), showSelectPopover && /*#__PURE__*/_react.default.createElement(_MultipleSelectEditor.default, {
-      isInModal: true,
-      options: this.options,
-      column: column,
-      value: value,
-      valueKey: this.key,
-      target: this.targetRef,
-      classNamePrefix: classNamePrefix,
-      onCommit: this.onChange,
-      isSupportNewOption: isSupportNewOption,
-      onAddNewOption: onAddNewOption,
-      onClose: this.closeEditor
-    }));
+      ref: ref => this.ref = ref,
+      children: [this.renderOptions(), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        ref: ref => this.targetRef = ref
+      }), showSelectPopover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MultipleSelectEditor.default, {
+        isInModal: true,
+        options: this.options,
+        column: column,
+        value: value,
+        valueKey: this.key,
+        target: this.targetRef,
+        classNamePrefix: classNamePrefix,
+        onCommit: this.onChange,
+        isSupportNewOption: isSupportNewOption,
+        onAddNewOption: onAddNewOption,
+        onClose: this.closeEditor
+      })]
+    });
   }
 }
 var _default = exports.default = RowExpandPCMultipleSelectEditor;

package/lib/RowExpandEditor/number-editor/index.js

@@ -10,15 +10,22 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _jsxRuntime = require("react/jsx-runtime");
 const RowExpandNumberEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = RowExpandNumberEditor;

package/lib/RowExpandEditor/number-editor/mb-editor/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _NumberEditor = _interopRequireDefault(require("../../../NumberEditor"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandMBNumberEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -58,19 +59,21 @@ class RowExpandMBNumberEditor extends _react.default.Component {
       } = column;
       formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
     }
-    const dom = isShowEditor ? /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+    const dom = isShowEditor ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberEditor.default, {
       isInModal: true,
       column: column,
       value: value,
       onBlur: this.onBlur,
       onCommit: this.onCommit
-    }) : /*#__PURE__*/_react.default.createElement("div", {
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "w-100 h-100",
-      onClick: this.toggleEditor
-    }, formatValue);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mobile-row-expand-input-editor-container dtable-ui-mobile-row-expand-number-editor-container"
-    }, dom);
+      onClick: this.toggleEditor,
+      children: formatValue
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-mobile-row-expand-input-editor-container dtable-ui-mobile-row-expand-number-editor-container",
+      children: dom
+    });
   }
 }
 var _default = exports.default = RowExpandMBNumberEditor;

package/lib/RowExpandEditor/number-editor/pc-editor.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _NumberEditor = _interopRequireDefault(require("../../NumberEditor"));
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandPCNumberEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -74,7 +75,7 @@ class RowExpandPCNumberEditor extends _react.default.Component {
       isShowEditor
     } = this.state;
     if (isShowEditor) {
-      return /*#__PURE__*/_react.default.createElement(_NumberEditor.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberEditor.default, {
         isInModal: isInModal,
         column: column,
         value: value,
@@ -89,7 +90,7 @@ class RowExpandPCNumberEditor extends _react.default.Component {
       } = column;
       formatValue = (0, _dtableUtils.getNumberDisplayString)(value, data);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       tabIndex: 0,
       onClick: this.toggleEditor,
       onFocus: this.toggleEditor,
@@ -98,8 +99,9 @@ class RowExpandPCNumberEditor extends _react.default.Component {
         width: 320,
         lineHeight: '1.625rem'
       },
-      "aria-label": formatValue
-    }, formatValue);
+      "aria-label": formatValue,
+      children: formatValue
+    });
   }
 }
 var _default = exports.default = RowExpandPCNumberEditor;

package/lib/RowExpandEditor/rate-editor/index.js

@@ -11,15 +11,22 @@ var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const RowExpandRateEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = RowExpandRateEditor;

package/lib/RowExpandEditor/rate-editor/mb-editor.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandMBRateEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -41,16 +42,16 @@ class RowExpandMBRateEditor extends _react.default.Component {
           color: value >= rateItemIndex ? rate_style_color : '#e5e5e5',
           opacity: 0.4
         };
-        const rateItem = /*#__PURE__*/_react.default.createElement("div", {
-          key: i,
+        const rateItem = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onClick: this.onChangeRateNumber.bind(this, rateItemIndex),
           style: style,
           className: (0, _classnames.default)('dtable-ui-mobile-row-expand-rate-item', {
             'rate-item-active': value >= rateItemIndex
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-font ".concat(rateShowType)
           })
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(rateShowType)
-        }));
+        }, i);
         rateList.push(rateItem);
       }
       return rateList;
@@ -84,9 +85,10 @@ class RowExpandMBRateEditor extends _react.default.Component {
   }
   render() {
     const rateList = this.getRateMaxStar();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mobile-row-expand-rate-editor dtable-ui dtable-ui-row-expand-rate-editor"
-    }, rateList);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "dtable-ui-mobile-row-expand-rate-editor dtable-ui dtable-ui-row-expand-rate-editor",
+      children: rateList
+    });
   }
 }
 var _default = exports.default = RowExpandMBRateEditor;

package/lib/RowExpandEditor/rate-editor/pc-editor.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lang = require("../../lang");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandPCRateEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -85,16 +86,16 @@ class RowExpandPCRateEditor extends _react.default.Component {
             opacity: 0.4
           };
         }
-        let rateItem = /*#__PURE__*/_react.default.createElement("div", {
-          key: i,
+        let rateItem = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           onMouseEnter: this.onMouseEnterRateItem.bind(this, rateItemIndex),
           onMouseLeave: this.onMouseLeaveRateItem.bind(this, rateItemIndex),
           onClick: this.onChangeRateNumber.bind(this, rateItemIndex),
           style: style,
-          className: value >= rateItemIndex ? 'rate-item-active' : ''
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "dtable-font ".concat(rateShowType)
-        }));
+          className: value >= rateItemIndex ? 'rate-item-active' : '',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "dtable-font ".concat(rateShowType)
+          })
+        }, i);
         rateList.push(rateItem);
       }
       return rateList;
@@ -136,7 +137,7 @@ class RowExpandPCRateEditor extends _react.default.Component {
       style.boxShadow = 'rgba(70, 127, 207, 0.25) 0px 0px 0px 2px';
       style.borderColor = 'rgb(25, 145, 235)';
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       tabIndex: 0,
       style: style,
       onKeyDown: this.onKeyDown,
@@ -144,8 +145,9 @@ class RowExpandPCRateEditor extends _react.default.Component {
       "aria-label": "".concat(this.state.value, ", ").concat((0, _lang.getLocale)('Press_the_number_keys_to_enter_the_corresponding_value')),
       className: (0, _classnames.default)('form-control dtable-ui dtable-ui-row-expand-rate-editor', {
         'disabled': !this.canEdit
-      })
-    }, rateList);
+      }),
+      children: rateList
+    });
   }
 }
 var _default = exports.default = RowExpandPCRateEditor;

package/lib/RowExpandEditor/right-angle/index.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = RightAngle;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 function RightAngle() {
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "dtable-ui-mobile-row-expand-angle-right"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    "aria-hidden": "true",
-    className: "dtable-font dtable-icon-right"
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "dtable-ui-mobile-row-expand-angle-right",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      "aria-hidden": "true",
+      className: "dtable-font dtable-icon-right"
+    })
+  });
 }

package/lib/RowExpandEditor/single-select-editor/index.js

@@ -10,15 +10,22 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactResponsive = _interopRequireDefault(require("react-responsive"));
 var _pcEditor = _interopRequireDefault(require("./pc-editor"));
 var _mbEditor = _interopRequireDefault(require("./mb-editor"));
+var _jsxRuntime = require("react/jsx-runtime");
 const RowExpandSingleSelectEditor = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(min-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    ref: ref
-  }))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(min-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+        ...props,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = RowExpandSingleSelectEditor;

package/lib/RowExpandEditor/single-select-editor/mb-editor/index.js

@@ -15,6 +15,7 @@ var _objectUtils = _interopRequireDefault(require("../../../utils/object-utils")
 var _constants = require("../../../constants");
 var _addBtn = _interopRequireDefault(require("../../add-btn"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class RowExpandMBSingleSelectEditor extends _react.default.Component {
   constructor(_props) {
     super(_props);
@@ -77,16 +78,19 @@ class RowExpandMBSingleSelectEditor extends _react.default.Component {
         color: _constants.DELETED_OPTION_BACKGROUND_COLOR,
         ...option
       };
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value ? /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          height: 50,
-          padding: '10px 0'
-        }
-      }, /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
-        option: option
-      })) : /*#__PURE__*/_react.default.createElement(_addBtn.default, {
-        text: (0, _lang.getLocale)('Select_an_option')
-      }));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: value ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            height: 50,
+            padding: '10px 0'
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
+            option: option
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_addBtn.default, {
+          text: (0, _lang.getLocale)('Select_an_option')
+        })
+      });
     };
     this.state = {
       value: _props.value,
@@ -118,19 +122,22 @@ class RowExpandMBSingleSelectEditor extends _react.default.Component {
       showEditor,
       value
     } = this.state;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui dtable-ui-mobile-row-expand-options-editor position-relative",
-      onClick: this.openEditor
-    }, this.renderOption(), /*#__PURE__*/_react.default.createElement(_rightAngle.default, null)), showEditor && /*#__PURE__*/_react.default.createElement(_SingleSelectEditor.default, {
-      value: value,
-      column: column,
-      valueKey: this.key,
-      options: this.options,
-      onCommit: this.onChange,
-      onClose: this.closeEditor,
-      isSupportNewOption: isSupportNewOption,
-      onAddNewOption: onAddNewOption
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui dtable-ui-mobile-row-expand-options-editor position-relative",
+        onClick: this.openEditor,
+        children: [this.renderOption(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rightAngle.default, {})]
+      }), showEditor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelectEditor.default, {
+        value: value,
+        column: column,
+        valueKey: this.key,
+        options: this.options,
+        onCommit: this.onChange,
+        onClose: this.closeEditor,
+        isSupportNewOption: isSupportNewOption,
+        onAddNewOption: onAddNewOption
+      })]
+    });
   }
 }
 var _default = exports.default = RowExpandMBSingleSelectEditor;