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

package/lib/LinkEditor/link-editor-option.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 LinkEditorOption extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -61,27 +62,31 @@ class LinkEditorOption extends _react.default.Component {
     let optionStyle = this.getOptionStyle();
     let optionNameStyle = this.getOptionNameStyle();
     let operationStyle = this.getOperationStyle();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui link-option-item",
-      style: containerStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-info",
-      style: optionStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-name",
-      style: optionNameStyle,
-      title: option.name
-    }, option.name)), isShowRemoveIcon && /*#__PURE__*/_react.default.createElement("div", {
-      className: "option-remove",
-      style: operationStyle,
-      onClick: this.onDeleteOption
-    }, /*#__PURE__*/_react.default.createElement("i", {
-      className: "dtable-font dtable-icon-fork-number",
-      style: {
-        fontSize: '12px',
-        lineHeight: '20px'
-      }
-    })));
+      style: containerStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "option-info",
+        style: optionStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "option-name",
+          style: optionNameStyle,
+          title: option.name,
+          children: option.name
+        })
+      }), isShowRemoveIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "option-remove",
+        style: operationStyle,
+        onClick: this.onDeleteOption,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "dtable-font dtable-icon-fork-number",
+          style: {
+            fontSize: '12px',
+            lineHeight: '20px'
+          }
+        })
+      })]
+    });
   }
 }
 LinkEditorOption.defaultProps = {

package/lib/LinkEditor/mb-link-editor-popover/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 var _MBEditorHeader = _interopRequireDefault(require("../../MBEditorHeader"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class MBLinkEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -68,18 +69,20 @@ class MBLinkEditorPopover extends _react.default.Component {
       } = this.props;
       return options.map((option, index) => {
         let isSelect = value.some(item => item === option.id);
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "mb-link-option-item",
-          key: index,
-          onMouseDown: this.onSelectOption.bind(this, option)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "mb-option-info"
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: "option-name",
-          title: option.name
-        }, option.name)), isSelect && /*#__PURE__*/_react.default.createElement("i", {
-          className: "mb-option-checked dtable-font dtable-icon-check-mark"
-        }));
+          onMouseDown: this.onSelectOption.bind(this, option),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "mb-option-info",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "option-name",
+              title: option.name,
+              children: option.name
+            })
+          }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "mb-option-checked dtable-font dtable-icon-check-mark"
+          })]
+        }, index);
       });
     };
     this.setEditorPopover = editorPopover => {
@@ -104,38 +107,47 @@ class MBLinkEditorPopover extends _react.default.Component {
       searchVal
     } = this.state;
     let filterOptions = this.getFilterOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorPopover,
       className: "dtable-ui-mb-editor-popover mb-link-editor-popover",
-      onClick: this.onContainerClick
-    }, /*#__PURE__*/_react.default.createElement(_MBEditorHeader.default, {
-      title: column.name,
-      leftContent: /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-return"
-      }),
-      rightContent: /*#__PURE__*/_react.default.createElement("span", null, (0, _lang.getLocale)('Done')),
-      onLeftClick: this.props.onClosePopover,
-      onRightClick: this.props.onClosePopover
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-body dtable-ui-mb-link-editor-body"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "mb-search-link-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-link-container"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "title"
-    }, (0, _lang.getLocale)('Choose_an_option')), /*#__PURE__*/_react.default.createElement("div", {
-      className: "content"
-    }, filterOptions.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "search-result-none"
-    }, (0, _lang.getLocale)('No_options_available')), filterOptions.length > 0 && this.renderFilteredOptions(filterOptions)))));
+      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"
+        }),
+        rightContent: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: (0, _lang.getLocale)('Done')
+        }),
+        onLeftClick: this.props.onClosePopover,
+        onRightClick: this.props.onClosePopover
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-mb-editor-body dtable-ui-mb-link-editor-body",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "mb-search-link-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-link-container",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "title",
+            children: (0, _lang.getLocale)('Choose_an_option')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "content",
+            children: [filterOptions.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "search-result-none",
+              children: (0, _lang.getLocale)('No_options_available')
+            }), filterOptions.length > 0 && this.renderFilteredOptions(filterOptions)]
+          })]
+        })]
+      })]
+    });
   }
 }
 MBLinkEditorPopover.defaultProps = {

package/lib/LinkEditor/pc-link-editor-popover/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _lang = require("../../lang");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCLinkEditorPopover extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -54,40 +55,47 @@ class PCLinkEditorPopover extends _react.default.Component {
     }, {
       position: 'absolute'
     });
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-editor-popover dtable-ui-link-editor-popover",
-      style: popoverStyle
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-options-search"
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      className: "form-control",
-      value: searchValue,
-      onChange: this.onValueChanged,
-      onClick: this.onInputClick,
-      placeholder: (0, _lang.getLocale)('Search_option')
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-options-container"
-    }, options.length > 0 && options.map((option, index) => {
-      let isSelect = selectedOptions.some(selectedOption => {
-        return selectedOption.id === option.id;
-      });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: "link-option-item",
-        onClick: this.onOptionItemToggle.bind(this, option)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "option-info"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: "option-name",
-        title: option.name
-      }, option.name)), /*#__PURE__*/_react.default.createElement("div", {
-        className: "option-checked"
-      }, isSelect && /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      })));
-    }), options.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-option-null"
-    }, (0, _lang.getLocale)('No_options_available'))));
+      style: popoverStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "link-options-search",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+          className: "form-control",
+          value: searchValue,
+          onChange: this.onValueChanged,
+          onClick: this.onInputClick,
+          placeholder: (0, _lang.getLocale)('Search_option')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "link-options-container",
+        children: [options.length > 0 && options.map((option, index) => {
+          let isSelect = selectedOptions.some(selectedOption => {
+            return selectedOption.id === option.id;
+          });
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "link-option-item",
+            onClick: this.onOptionItemToggle.bind(this, option),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "option-info",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "option-name",
+                title: option.name,
+                children: option.name
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "option-checked",
+              children: isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check-mark"
+              })
+            })]
+          }, index);
+        }), options.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "link-option-null",
+          children: (0, _lang.getLocale)('No_options_available')
+        })]
+      })]
+    });
   }
 }
 PCLinkEditorPopover.defaultProps = {

package/lib/LinkFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
+var _jsxRuntime = require("react/jsx-runtime");
 // link value is  get form parant's interface
 class LinkFormatter extends _react.default.Component {
   constructor(props) {
@@ -54,14 +55,15 @@ class LinkFormatter extends _react.default.Component {
             display_column_key: displayColumnKey
           } = column.data;
           let displayValue = this.getDisplayValue(linkedTable, row, displayColumnKey);
-          return /*#__PURE__*/_react.default.createElement("div", {
-            key: index,
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "link-item",
-            onClick: this.expandLinkedTableRow.bind(this, row)
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: "link-name",
-            title: displayValue
-          }, displayValue));
+            onClick: this.expandLinkedTableRow.bind(this, row),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "link-name",
+              title: displayValue,
+              children: displayValue
+            })
+          }, index);
         });
         return result;
       }
@@ -114,9 +116,10 @@ class LinkFormatter extends _react.default.Component {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container link-formatter', containerClassName);
     let displayValues = this.getDisplayValues();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, displayValues);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: displayValues
+    });
   }
 }
 LinkFormatter.defaultProps = {

package/lib/Loading/index.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Loading;
 var _react = _interopRequireDefault(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 function Loading() {
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: "loading-icon loading-tip"
   });
 }

package/lib/LongTextFormatter/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _HtmlLongTextFormatter = _interopRequireDefault(require("../HtmlLongTextFormatter"));
 var _SimpleLongTextFormatter = _interopRequireDefault(require("../SimpleLongTextFormatter"));
+var _jsxRuntime = require("react/jsx-runtime");
 function LongTextFormatter(props) {
   const {
     isSample,
@@ -15,12 +16,12 @@ function LongTextFormatter(props) {
     containerClassName
   } = props;
   if (isSample) {
-    return /*#__PURE__*/_react.default.createElement(_SimpleLongTextFormatter.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SimpleLongTextFormatter.default, {
       value: value,
       containerClassName: containerClassName
     });
   }
-  return /*#__PURE__*/_react.default.createElement(_HtmlLongTextFormatter.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HtmlLongTextFormatter.default, {
     value: value,
     containerClassName: containerClassName
   });

package/lib/MBEditorHeader/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 MBEditorHeader extends _react.default.Component {
   render() {
     let {
@@ -16,20 +17,24 @@ class MBEditorHeader extends _react.default.Component {
       onLeftClick,
       onRightClick
     } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : '')
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-left-content",
-      onClick: onLeftClick
-    }, leftContent), /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-title"
-    }, title), /*#__PURE__*/_react.default.createElement("span", {
-      className: "editor-header-right-content",
-      onClick: onRightClick,
-      style: {
-        color: '#f09f3f'
-      }
-    }, rightContent));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "dtable-ui-mb-editor-header ".concat(titleClass ? titleClass : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "editor-header-left-content",
+        onClick: onLeftClick,
+        children: leftContent
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "editor-header-title",
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "editor-header-right-content",
+        onClick: onRightClick,
+        style: {
+          color: '#f09f3f'
+        },
+        children: rightContent
+      })]
+    });
   }
 }
 var _default = exports.default = MBEditorHeader;

package/lib/MTimeFormatter/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class MTimeFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -25,9 +26,10 @@ class MTimeFormatter extends _react.default.Component {
     if (date) {
       date = this.formatDate(date);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, date);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: date
+    });
   }
 }
 MTimeFormatter.defaultProps = {

package/lib/MultipleSelectEditor/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 MultipleSelectEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -141,44 +142,49 @@ class MultipleSelectEditor extends _react.default.Component {
     } = this.state;
     let options = this.options;
     let selectedOptions = this.getFormattedOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: this.setEditorContainerRef,
-      className: "cell-editor dtable-ui-multiple-select-editor"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: this.setEditorRef,
-      className: "dtable-ui-select-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(_selectEditor.SelectEditorOption, {
-        key: option.id,
-        option: option,
-        isShowRemoveIcon: true,
-        onDeleteSelectOption: this.onDeleteOption
-      });
-    })), 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: "cell-editor dtable-ui-multiple-select-editor",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: this.setEditorRef,
+        className: "dtable-ui-select-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)(_selectEditor.SelectEditorOption, {
+            option: option,
+            isShowRemoveIcon: true,
+            onDeleteSelectOption: 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)(_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
+          })
+        })]
+      })]
+    });
   }
 }
 MultipleSelectEditor.defaultProps = {

package/lib/MultipleSelectFormatter/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 MultipleSelectFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
@@ -21,10 +22,9 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
       let selectedOptions = options.filter(option => value.includes(option.id) || value.includes(option.name));
       if (selectedOptions.length === 0) return [];
       return selectedOptions.map(option => {
-        return /*#__PURE__*/_react.default.createElement(_SelectItem.default, {
-          key: "multiple-".concat(option.id),
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectItem.default, {
           option: option
-        });
+        }, "multiple-".concat(option.id));
       });
     };
   }
@@ -35,14 +35,15 @@ class MultipleSelectFormatter extends _react.default.PureComponent {
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container multiple-select-formatter', containerClassName);
     if (!value || Array.isArray(value) && value.length === 0) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classname
       });
     }
     let options = this.getOptions();
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, options);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: options
+    });
   }
 }
 MultipleSelectFormatter.defaultProps = {