dtable-ui-component 6.0.49 → 6.0.50

package/lib/AsyncUserSelect/user-item.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lang = require("../lang");
+var _jsxRuntime = require("react/jsx-runtime");
+const UserItem = _ref => {
+  let {
+    className,
+    user,
+    deleteUser,
+    enableShowIDInOrgWhenSearchUser = false
+  } = _ref;
+  const name = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.name) || '', [user]);
+  const avatarUrl = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.avatar_url) || '', [user]);
+  const idInOrg = (0, _react.useMemo)(() => (user === null || user === void 0 ? void 0 : user.id_in_org) || '', [user]);
+  const onDeleteUser = event => {
+    event.stopPropagation();
+    event && event.nativeEvent.stopImmediatePropagation();
+    deleteUser(user);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('dtable-ui-user-item', className),
+    title: name,
+    "aria-label": name,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-avatar",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        className: "user-avatar-icon",
+        alt: name,
+        src: avatarUrl
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-name text-truncate",
+      children: name
+    }), enableShowIDInOrgWhenSearchUser && !deleteUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: "user-id-in-org text-truncate",
+      children: ["(", idInOrg, ")"]
+    }), deleteUser && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "user-remove ml-2",
+      onClick: onDeleteUser,
+      title: (0, _lang.getLocale)('Remove'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+        className: "dtable-font dtable-icon-x",
+        "aria-hidden": "true"
+      })
+    })]
+  });
+};
+var _default = exports.default = UserItem;

package/lib/AutoNumberFormatter/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 AutoNumberFormatter extends _react.default.Component {
   render() {
     const {
@@ -15,10 +16,11 @@ class AutoNumberFormatter extends _react.default.Component {
       value
     } = this.props;
     let classname = (0, _classnames.default)('dtable-ui cell-formatter-container auto-number-formatter', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: value,
-      className: classname
-    }, value);
+      className: classname,
+      children: value
+    });
   }
 }
 AutoNumberFormatter.defaultProps = {

package/lib/Badge/index.js

@@ -9,6 +9,7 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var React = _interopRequireWildcard(require("react"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class Badge extends React.Component {
   render() {
     // tslint:disable:prefer-const
@@ -45,14 +46,17 @@ class Badge extends React.Component {
       ["".concat(prefixCls, "-hot")]: !!hot,
       ["".concat(prefixCls, "-corner-wrapper-large")]: corner && size === 'large'
     });
-    return /*#__PURE__*/React.createElement("span", {
-      className: badgeCls
-    }, children, (text || dot) &&
-    /*#__PURE__*/
-    // tslint:disable-next-line:jsx-no-multiline-js
-    React.createElement("sup", Object.assign({
-      className: scrollNumberCls
-    }, restProps), text));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      className: badgeCls,
+      children: [children, (text || dot) &&
+      /*#__PURE__*/
+      // tslint:disable-next-line:jsx-no-multiline-js
+      (0, _jsxRuntime.jsx)("sup", {
+        className: scrollNumberCls,
+        ...restProps,
+        children: text
+      })]
+    });
   }
 }
 exports.default = Badge;

package/lib/ButtonFormatter/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");
 const WHITE = '#FFFFFF';
 class ButtonFormatter extends _react.default.Component {
   constructor() {
@@ -35,16 +36,20 @@ class ButtonFormatter extends _react.default.Component {
       borderColor: colorObj.BORDER_COLOR,
       color
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
-      style: btnStyle,
-      onClick: this.handleClick
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "text-truncate",
-      style: {
-        color
-      }
-    }, button_name)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        className: (0, _classnames.default)('dtable-ui cell-formatter-container button-formatter', containerClassName),
+        style: btnStyle,
+        onClick: this.handleClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "text-truncate",
+          style: {
+            color
+          },
+          children: button_name
+        })
+      })
+    });
   }
 }
 var _default = exports.default = ButtonFormatter;

package/lib/CTimeFormatter/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 CTimeFormatter extends _react.default.Component {
   constructor() {
     super(...arguments);
@@ -25,10 +26,11 @@ class CTimeFormatter extends _react.default.Component {
     if (date) {
       date = this.formatDate(date);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       title: date,
-      className: classname
-    }, date);
+      className: classname,
+      children: date
+    });
   }
 }
 CTimeFormatter.defaultProps = {

package/lib/CheckboxEditor/index.js

@@ -11,25 +11,34 @@ 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 CheckboxEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isMobile,
     ...props
   } = _ref;
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     ref: 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 = CheckboxEditor;

package/lib/CheckboxEditor/mb-editor.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class MBCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -52,14 +53,14 @@ class MBCheckboxEditor extends _react.Component {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "dtable-font ".concat(symbol, " ").concat(className || ''),
           style: {
             color
           }
         });
       }
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -93,11 +94,12 @@ class MBCheckboxEditor extends _react.Component {
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
       style: style || {},
-      onClick: this.onChangeCheckboxValue
-    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+      onClick: this.onChangeCheckboxValue,
+      children: value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 var _default = exports.default = MBCheckboxEditor;

package/lib/CheckboxEditor/pc-editor.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCCheckboxEditor extends _react.Component {
   constructor(props) {
     super(props);
@@ -65,14 +66,14 @@ class PCCheckboxEditor extends _react.Component {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon'))
       });
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "dtable-font ".concat(symbol, " ").concat(className || ''),
           style: {
             color
           }
         });
       }
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -112,11 +113,12 @@ class PCCheckboxEditor extends _react.Component {
     if (!checkboxStyle || Object.keys(checkboxStyle).length < 2) {
       checkboxStyle = _constants.DEFAULT_CHECKBOX_MARK_STYLE;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('dtable-ui-checkbox-editor', className),
       style: style || {},
-      onClick: this.onChangeCheckboxValue
-    }, value && this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+      onClick: this.onChangeCheckboxValue,
+      children: value && this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 var _default = exports.default = PCCheckboxEditor;

package/lib/CheckboxFormatter/index.js

@@ -10,13 +10,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _constants = require("../constants");
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class CheckboxFormatter extends _react.default.PureComponent {
   constructor() {
     super(...arguments);
     this.renderIcon = (symbol, color) => {
       let className = 'dtable-ui-checkbox-check-mark';
       if (symbol.startsWith('dtable-icon')) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "dtable-font ".concat(symbol, " ").concat(className || ''),
           style: {
             color
@@ -27,7 +28,7 @@ class CheckboxFormatter extends _react.default.PureComponent {
         'dtable-ui-checkbox-check-svg': !(symbol !== null && symbol !== void 0 && symbol.startsWith('dtable-icon')),
         'scale-icon': _constants.isMobile
       });
-      return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgIcon.default, {
         className: className,
         symbol: symbol,
         color: color
@@ -46,9 +47,10 @@ class CheckboxFormatter extends _react.default.PureComponent {
     const currentValue = !!value;
     if (!currentValue) return null;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container checkbox-formatter d-flex align-items-center justify-content-center', containerClassName);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classname
-    }, this.renderIcon(checkboxStyle.type, checkboxStyle.color));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classname,
+      children: this.renderIcon(checkboxStyle.type, checkboxStyle.color)
+    });
   }
 }
 CheckboxFormatter.defaultProps = {

package/lib/CollaboratorEditor/index.js

@@ -11,6 +11,7 @@ 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 CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     isMobile,
@@ -18,24 +19,32 @@ const CollaboratorEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...props
   } = _ref;
   const value = Array.isArray(oldValue) ? oldValue : [];
-  if (isMobile === false) return /*#__PURE__*/_react.default.createElement(_pcEditor.default, Object.assign({}, props, {
+  if (isMobile === false) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_pcEditor.default, {
+    ...props,
     value: value,
     ref: ref
-  }));
-  if (isMobile === true) return /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
+  });
+  if (isMobile === true) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+    ...props,
     value: value,
     ref: 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, {
-    value: value,
-    ref: ref
-  }))), /*#__PURE__*/_react.default.createElement(_reactResponsive.default, {
-    query: "(max-width: 768px)"
-  }, /*#__PURE__*/_react.default.createElement(_mbEditor.default, Object.assign({}, props, {
-    value: value,
-    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,
+        value: value,
+        ref: ref
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
+      query: "(max-width: 768px)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mbEditor.default, {
+        ...props,
+        value: value,
+        ref: ref
+      })
+    })]
+  });
 });
 var _default = exports.default = CollaboratorEditor;

package/lib/CollaboratorEditor/mb-editor/index.js

@@ -11,6 +11,7 @@ var _MobileSelector = _interopRequireDefault(require("../../MobileSelector"));
 var _lang = require("../../lang");
 var _CollaboratorItem = _interopRequireDefault(require("../../CollaboratorItem"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 const {
   Search,
   Option,
@@ -42,13 +43,13 @@ class MBCollaboratorEditor extends _react.default.Component {
       } = this.props;
       return collaborators.map(collaborator => {
         const isSelected = value.includes(collaborator.email);
-        return /*#__PURE__*/_react.default.createElement(Option, {
-          key: collaborator.email,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
           isSelected: isSelected,
-          onChange: this.onChange.bind(this, collaborator)
-        }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-          collaborator: collaborator
-        }));
+          onChange: this.onChange.bind(this, collaborator),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+            collaborator: collaborator
+          })
+        }, collaborator.email);
       });
     };
     this.state = {
@@ -71,15 +72,20 @@ class MBCollaboratorEditor extends _react.default.Component {
       searchVal
     } = this.state;
     const displayCollaborators = searchVal ? (0, _dtableUtils.searchCollaborators)(collaborators, searchVal) : collaborators;
-    return /*#__PURE__*/_react.default.createElement(_MobileSelector.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_MobileSelector.default, {
       onClose: this.props.onClose,
       title: column.name,
-      className: "dtable-ui-mobile-collaborator-editor"
-    }, collaborators.length > 10 && /*#__PURE__*/_react.default.createElement(Search, {
-      value: searchVal,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      onChange: this.onChangeSearch
-    }), /*#__PURE__*/_react.default.createElement(Options, null, displayCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement(Empty, null, (0, _lang.getLocale)('No_collaborators_available')), displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)));
+      className: "dtable-ui-mobile-collaborator-editor",
+      children: [collaborators.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Search, {
+        value: searchVal,
+        placeholder: (0, _lang.getLocale)('Search_collaborator'),
+        onChange: this.onChangeSearch
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Options, {
+        children: [displayCollaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Empty, {
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        }), displayCollaborators.length > 0 && this.renderCollaborators(displayCollaborators)]
+      })]
+    });
   }
 }
 MBCollaboratorEditor.defaultProps = {

package/lib/CollaboratorEditor/pc-editor/index.js

@@ -15,6 +15,7 @@ var _lang = require("../../lang");
 var _constants = require("../../constants");
 var _objectUtils = _interopRequireDefault(require("../../utils/object-utils"));
 require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 class PCCollaboratorEditor extends _react.default.Component {
   constructor(props) {
     super(props);
@@ -206,50 +207,57 @@ class PCCollaboratorEditor extends _react.default.Component {
       value = [],
       target
     } = this.props;
-    const dom = /*#__PURE__*/_react.default.createElement("div", {
+    const dom = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "dtable-ui-editor-container dtable-ui-collaborator-editor-container",
-      ref: ref => this.ref = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-search-container"
-    }, /*#__PURE__*/_react.default.createElement(_DTableSearchInput.default, {
-      autoFocus: true,
-      placeholder: (0, _lang.getLocale)('Search_collaborator'),
-      value: searchValue,
-      onChange: this.onValueChanged,
-      onKeyDown: this.onKeyDown
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: "collaborator-list-container",
-      ref: ref => this.container = ref
-    }, this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
-      const isSelected = value.includes(collaborator.email);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: collaborator.email,
-        className: (0, _classnames.default)('collaborator-item-container', {
-          'collaborator-item-container-highlight': index === highlightIndex
-        }),
-        ref: ref => this.collaboratorItem = ref,
-        onClick: this.onCollaboratorClick.bind(this, collaborator)
-      }, /*#__PURE__*/_react.default.createElement(_CollaboratorItem.default, {
-        collaborator: collaborator
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: "collaborator-checked"
-      }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
-        className: "dtable-font dtable-icon-check-mark"
-      })));
-    }), this.filteredCollaborators.length === 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "dtable-ui-editor-no-search-result"
-    }, (0, _lang.getLocale)('No_collaborators_available'))));
+      ref: ref => this.ref = ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "collaborator-search-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+          autoFocus: true,
+          placeholder: (0, _lang.getLocale)('Search_collaborator'),
+          value: searchValue,
+          onChange: this.onValueChanged,
+          onKeyDown: this.onKeyDown
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "collaborator-list-container",
+        ref: ref => this.container = ref,
+        children: [this.filteredCollaborators.length > 0 && this.filteredCollaborators.map((collaborator, index) => {
+          const isSelected = value.includes(collaborator.email);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: (0, _classnames.default)('collaborator-item-container', {
+              'collaborator-item-container-highlight': index === highlightIndex
+            }),
+            ref: ref => this.collaboratorItem = ref,
+            onClick: this.onCollaboratorClick.bind(this, collaborator),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CollaboratorItem.default, {
+              collaborator: collaborator
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "collaborator-checked",
+              children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check-mark"
+              })
+            })]
+          }, collaborator.email);
+        }), this.filteredCollaborators.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-editor-no-search-result",
+          children: (0, _lang.getLocale)('No_collaborators_available')
+        })]
+      })]
+    });
     if (isInModal) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: ref => this.parent = ref
-      }, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
-        placement: "bottom-start",
-        isOpen: true,
-        target: target,
-        hideArrow: true,
-        fade: false,
-        className: "dtable-ui dtable-ui-row-expand-select-editor-popover"
-      }, dom));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref => this.parent = ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+          placement: "bottom-start",
+          isOpen: true,
+          target: target,
+          hideArrow: true,
+          fade: false,
+          className: "dtable-ui dtable-ui-row-expand-select-editor-popover",
+          children: dom
+        })
+      });
     }
     return dom;
   }

package/lib/CollaboratorFormatter/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
@@ -36,12 +37,11 @@ class CollaboratorFormatter 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,
           enableDeleteCollaborator: enableDeleteCollaborator,
           onDeleteCollaborator: onDeleteCollaborator
-        });
+        }, index);
       });
     };
   }
@@ -52,14 +52,15 @@ class CollaboratorFormatter extends _react.default.PureComponent {
     } = this.props;
     const classname = (0, _classnames.default)('dtable-ui cell-formatter-container collaborator-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
+    });
   }
 }
 CollaboratorFormatter.defaultProps = {