dtable-ui-component 6.0.48 → 6.0.50

package/lib/ActionSheet/index.js

@@ -14,6 +14,7 @@ var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
 var _getDataAttr = _interopRequireDefault(require("../utils/getDataAttr"));
 var _Badge = _interopRequireDefault(require("../Badge"));
 require("./style/index.css");
+var _jsxRuntime = require("react/jsx-runtime");
 /* tslint:disable:jsx-no-multiline-js */
 
 const NORMAL = 'NORMAL';
@@ -70,13 +71,13 @@ function createActionSheet(flag, config, callback) {
     cancelButtonText,
     badges = []
   } = props;
-  const titleMsg = [title ? /*#__PURE__*/React.createElement("h3", {
-    key: "0",
-    className: "".concat(prefixCls, "-title")
-  }, title) : null, message ? /*#__PURE__*/React.createElement("div", {
-    key: "1",
-    className: "".concat(prefixCls, "-message")
-  }, message) : null];
+  const titleMsg = [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+    className: "".concat(prefixCls, "-title"),
+    children: title
+  }, "0") : null, message ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "".concat(prefixCls, "-message"),
+    children: message
+  }, "1") : null];
   let children = null;
   let mode = 'normal';
   switch (flag) {
@@ -87,82 +88,106 @@ function createActionSheet(flag, config, callback) {
       if (badges && badges.length > 0) {
         badges.forEach(element => {
           if (element.index >= 0) {
-            badgesMap[element.index] = /*#__PURE__*/React.createElement(_Badge.default, element);
+            badgesMap[element.index] = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+              ...element
+            });
           }
         });
       }
-      children = /*#__PURE__*/React.createElement("div", (0, _getDataAttr.default)(props), titleMsg, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-button-list"),
-        role: "group"
-      }, normalOptions.map((item, index) => {
-        const itemProps = {
-          className: (0, _classnames.default)("".concat(prefixCls, "-button-list-item"), {
-            ["".concat(prefixCls, "-destructive-button")]: destructiveButtonIndex === index,
-            ["".concat(prefixCls, "-cancel-button")]: cancelButtonIndex === index
-          }),
-          onClick: () => cb(index),
-          role: 'button'
-        };
-        let bContent = /*#__PURE__*/React.createElement("div", itemProps, item);
-        // 仅在设置徽标的情况下修改dom结构
-        if (badgesMap[index]) {
-          bContent = /*#__PURE__*/React.createElement("div", Object.assign({}, itemProps, {
-            className: "".concat(itemProps.className, " ").concat(prefixCls, "-button-list-badge")
-          }), /*#__PURE__*/React.createElement("span", {
-            className: "".concat(prefixCls, "-button-list-item-content")
-          }, item), badgesMap[index]);
-        }
-        let bItem = /*#__PURE__*/React.createElement(_rmcFeedback.default, {
-          key: index,
-          activeClassName: "".concat(prefixCls, "-button-list-item-active")
-        }, bContent);
-        if (cancelButtonIndex === index || destructiveButtonIndex === index) {
-          bItem = /*#__PURE__*/React.createElement(_rmcFeedback.default, {
-            key: index,
-            activeClassName: "".concat(prefixCls, "-button-list-item-active")
-          }, /*#__PURE__*/React.createElement("div", itemProps, item, cancelButtonIndex === index ? /*#__PURE__*/React.createElement("span", {
-            className: "".concat(prefixCls, "-cancel-button-mask")
-          }) : null));
-        }
-        return bItem;
-      })));
+      children = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ...(0, _getDataAttr.default)(props),
+        children: [titleMsg, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(prefixCls, "-button-list"),
+          role: "group",
+          children: normalOptions.map((item, index) => {
+            const itemProps = {
+              className: (0, _classnames.default)("".concat(prefixCls, "-button-list-item"), {
+                ["".concat(prefixCls, "-destructive-button")]: destructiveButtonIndex === index,
+                ["".concat(prefixCls, "-cancel-button")]: cancelButtonIndex === index
+              }),
+              onClick: () => cb(index),
+              role: 'button'
+            };
+            let bContent = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              ...itemProps,
+              children: item
+            });
+            // 仅在设置徽标的情况下修改dom结构
+            if (badgesMap[index]) {
+              bContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                ...itemProps,
+                className: "".concat(itemProps.className, " ").concat(prefixCls, "-button-list-badge"),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "".concat(prefixCls, "-button-list-item-content"),
+                  children: item
+                }), badgesMap[index]]
+              });
+            }
+            let bItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
+              activeClassName: "".concat(prefixCls, "-button-list-item-active"),
+              children: bContent
+            }, index);
+            if (cancelButtonIndex === index || destructiveButtonIndex === index) {
+              bItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
+                activeClassName: "".concat(prefixCls, "-button-list-item-active"),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  ...itemProps,
+                  children: [item, cancelButtonIndex === index ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "".concat(prefixCls, "-cancel-button-mask")
+                  }) : null]
+                })
+              }, index);
+            }
+            return bItem;
+          })
+        })]
+      });
       break;
     case SHARE:
       mode = 'share';
       const multipleLine = options.length && Array.isArray(options[0]) || false;
       const createList = function (item, index) {
         let rowIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "".concat(prefixCls, "-share-list-item"),
           role: "button",
-          key: index,
-          onClick: () => cb(index, rowIndex)
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-share-list-item-icon")
-        }, item.icon), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-share-list-item-title")
-        }, item.title));
+          onClick: () => cb(index, rowIndex),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-share-list-item-icon"),
+            children: item.icon
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-share-list-item-title"),
+            children: item.title
+          })]
+        }, index);
       };
-      children = /*#__PURE__*/React.createElement("div", (0, _getDataAttr.default)(props), titleMsg, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-share")
-      }, multipleLine ? options.map((item, index) => /*#__PURE__*/React.createElement("div", {
-        key: index,
-        className: "".concat(prefixCls, "-share-list")
-      }, item.map((ii, ind) => createList(ii, ind, index)))) : /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-share-list")
-      }, options.map((item, index) => createList(item, index))), /*#__PURE__*/React.createElement(_rmcFeedback.default, {
-        activeClassName: "".concat(prefixCls, "-share-cancel-button-active")
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixCls, "-share-cancel-button"),
-        role: "button",
-        onClick: () => cb(-1)
-      }, cancelButtonText))));
+      children = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ...(0, _getDataAttr.default)(props),
+        children: [titleMsg, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "".concat(prefixCls, "-share"),
+          children: [multipleLine ? options.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-share-list"),
+            children: item.map((ii, ind) => createList(ii, ind, index))
+          }, index)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-share-list"),
+            children: options.map((item, index) => createList(item, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcFeedback.default, {
+            activeClassName: "".concat(prefixCls, "-share-cancel-button-active"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "".concat(prefixCls, "-share-cancel-button"),
+              role: "button",
+              onClick: () => cb(-1),
+              children: cancelButtonText
+            })
+          })]
+        })]
+      });
       break;
     default:
       break;
   }
   const rootCls = (0, _classnames.default)("".concat(prefixCls, "-").concat(mode), className);
-  root.render( /*#__PURE__*/React.createElement(_rmcDialog.default, {
+  root.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rmcDialog.default, {
     visible: true,
     title: "",
     footer: "",
@@ -172,8 +197,9 @@ function createActionSheet(flag, config, callback) {
     maskTransitionName: maskTransitionName || 'am-fade',
     onClose: () => cb(cancelButtonIndex || -1),
     maskClosable: maskClosable,
-    wrapProps: props.wrapProps || {}
-  }, children));
+    wrapProps: props.wrapProps || {},
+    children: children
+  }));
   return {
     close
   };

package/lib/ActivityIndicator/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");
 /* tslint:disable:jsx-no-multiline-js */
 
 class ActivityIndicator extends React.Component {
@@ -31,35 +32,42 @@ class ActivityIndicator extends React.Component {
     });
     if (animating) {
       if (toast) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: wrapClass
-        }, text ? /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-content")
-        }, /*#__PURE__*/React.createElement("span", {
-          className: spinnerClass,
-          "aria-hidden": "true"
-        }), /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-toast")
-        }, text)) : /*#__PURE__*/React.createElement("div", {
-          className: "".concat(prefixCls, "-content")
-        }, /*#__PURE__*/React.createElement("span", {
-          className: spinnerClass,
-          "aria-label": "Loading"
-        })));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: wrapClass,
+          children: text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "".concat(prefixCls, "-content"),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: spinnerClass,
+              "aria-hidden": "true"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "".concat(prefixCls, "-toast"),
+              children: text
+            })]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "".concat(prefixCls, "-content"),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: spinnerClass,
+              "aria-label": "Loading"
+            })
+          })
+        });
       } else {
-        return text ? /*#__PURE__*/React.createElement("div", {
-          className: wrapClass
-        }, /*#__PURE__*/React.createElement("span", {
-          className: spinnerClass,
-          "aria-hidden": "true"
-        }), /*#__PURE__*/React.createElement("span", {
-          className: "".concat(prefixCls, "-tip")
-        }, text)) : /*#__PURE__*/React.createElement("div", {
-          className: wrapClass
-        }, /*#__PURE__*/React.createElement("span", {
-          className: spinnerClass,
-          "aria-label": "loading"
-        }));
+        return text ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: wrapClass,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: spinnerClass,
+            "aria-hidden": "true"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "".concat(prefixCls, "-tip"),
+            children: text
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: wrapClass,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: spinnerClass,
+            "aria-label": "loading"
+          })
+        });
       }
     } else {
       return null;

package/lib/AsyncUserSelect/index.css

@@ -0,0 +1,122 @@
+.dtable-ui-selected-users-container {
+  flex-wrap: wrap;
+  height: auto !important;
+  min-height: 38px;
+  max-width: calc(100% - 10px);
+}
+
+.dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
+  color: #808080;
+}
+
+.dtable-ui-user-select-popover .popover {
+  width: 385px;
+  max-width: 385px;
+}
+
+.dtable-ui-user-select-container {
+  position: relative;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container {
+  padding: 10px 10px 0 10px;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-search-container input {
+  height: 28px;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container {
+  min-height: 160px;
+  max-height: 200px;
+  margin: 10px 0;
+  overflow: auto;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  padding: 0 10px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
+  background: #f5f5f5;
+  cursor: pointer;
+}
+
+.no-user-search-result {
+  color: #666666;
+  font-size: 14px;
+  padding-left: 10px;
+  padding: 10px;
+  overflow: auto;
+}
+
+.dtable-ui-user-select-popover .popover .dtable-ui-user-item {
+  background: transparent;
+}
+
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
+  color: #798d99;
+  font-size: 12px;
+}
+
+/* user-item */
+.dtable-ui-user-item {
+  display: inline-flex;
+  align-items: center;
+  margin: 2px 10px 2px 0;
+  padding: 0 8px 0 2px;
+  height: 20px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+  overflow: hidden;
+}
+
+.dtable-ui-user-item .user-item .user-avatar img {
+  width: 16px;
+  height: 16px;
+}
+
+.dtable-ui-user-item .user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(0);
+  flex-shrink: 0;
+}
+
+.dtable-ui-user-item .user-name {
+  margin-left: 5px;
+}
+
+.dtable-ui-user-item .user-avatar img {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.dtable-ui-user-item .user-remove {
+  display: inline-block;
+  width: 14px;
+  margin: 0 -2px 0 2px;
+}
+
+.dtable-ui-user-item .user-remove .dtable-font {
+  display: inline-block;
+  font-size: 16px;
+  color: #909090;
+  transform: scale(.8);
+  cursor: pointer;
+}
+
+.dtable-ui-user-item .user-remove .dtable-font:hover {
+  color: #666666;
+  cursor: pointer;
+}

package/lib/AsyncUserSelect/index.js

@@ -0,0 +1,260 @@
+"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 _reactstrap = require("reactstrap");
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _userItem = _interopRequireDefault(require("./user-item"));
+var _lang = require("../lang");
+var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const AsyncUserSelect = _ref => {
+  let {
+    className,
+    emptyPlaceholder = '',
+    searchPlaceholder = '',
+    isMulti = true,
+    enableShowIDInOrgWhenSearchUser = false,
+    selectedUsers = [],
+    loadOptions,
+    modifySelectedUsers
+  } = _ref;
+  const [isPopoverOpen, setIsPopoverOpen] = (0, _react.useState)(false);
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [searchedUsers, setSearchedUsers] = (0, _react.useState)([]);
+  const [highlightIndex, setHighlightIndex] = (0, _react.useState)(-1);
+  const [maxItemNum, setMaxItemNum] = (0, _react.useState)(0);
+  const [itemHeight, setItemHeight] = (0, _react.useState)(0);
+  const selectorRef = (0, _react.useRef)(null);
+  const userSelectContainerRef = (0, _react.useRef)(null);
+  const userListContainerRef = (0, _react.useRef)(null);
+  const userItemContainerRef = (0, _react.useRef)(null);
+  const clearStatus = (0, _react.useCallback)(() => {
+    setSearchedUsers([]);
+    setSearchValue('');
+    setHighlightIndex(-1);
+  }, []);
+  const onClickOutside = (0, _react.useCallback)(e => {
+    if (isPopoverOpen && (!selectorRef.current || !selectorRef.current.contains(e.target))) {
+      setIsPopoverOpen(false);
+      clearStatus();
+    }
+  }, [isPopoverOpen, clearStatus]);
+  const searchUsers = (0, _react.useCallback)(function () {
+    let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const trimmedSearchValue = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim()) || '';
+    if (!trimmedSearchValue) {
+      setSearchedUsers([]);
+      setHighlightIndex(-1);
+      return;
+    }
+    loadOptions && loadOptions(searchValue, function () {
+      let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      // [{ email, name, avatar_url }, ...]
+      setSearchedUsers(options);
+      setHighlightIndex(options.length > 0 ? 0 : -1);
+    });
+  }, [loadOptions]);
+  const onSearchValueChanged = (0, _react.useCallback)(newSearchValue => {
+    setSearchValue(newSearchValue);
+    searchUsers(newSearchValue);
+  }, [searchUsers]);
+  const onTogglePopover = (0, _react.useCallback)(() => {
+    const isOpen = !isPopoverOpen;
+    setIsPopoverOpen(isOpen);
+    if (!isOpen) {
+      clearStatus();
+    } else {
+      searchUsers('');
+    }
+  }, [isPopoverOpen, clearStatus, searchUsers]);
+  const deselectUser = (0, _react.useCallback)(user => {
+    const newSelectedUsers = selectedUsers.filter(item => item.email !== user.email);
+    modifySelectedUsers(newSelectedUsers);
+  }, [selectedUsers, modifySelectedUsers]);
+  const onKeyDown = (0, _react.useCallback)(e => {
+    if (e.keyCode === _keyCodes.default.LeftArrow || e.keyCode === _keyCodes.default.RightArrow) {
+      e.stopPropagation();
+    }
+  }, []);
+  const selectUser = (0, _react.useCallback)(user => {
+    const index = selectedUsers.findIndex(item => item.email === user.email);
+    let newSelectedUsers = selectedUsers.slice(0);
+    if (isMulti) {
+      if (index > -1) {
+        newSelectedUsers.splice(index, 1);
+      } else {
+        newSelectedUsers.push(user);
+      }
+    } else {
+      if (index > -1) {
+        newSelectedUsers = [];
+      } else {
+        newSelectedUsers = [user];
+      }
+    }
+    modifySelectedUsers(newSelectedUsers);
+  }, [selectedUsers, isMulti, modifySelectedUsers]);
+  const onUserClick = (0, _react.useCallback)(user => {
+    selectUser(user);
+  }, [selectUser]);
+  const onEnter = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    let user;
+    if (searchedUsers.length === 1) {
+      user = searchedUsers[0];
+    } else if (highlightIndex > -1) {
+      user = searchedUsers[highlightIndex];
+    }
+    if (user) {
+      selectUser(user);
+    }
+  }, [highlightIndex, searchedUsers, selectUser]);
+  const onUpArrow = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (highlightIndex > 0) {
+      const newHighlightIndex = highlightIndex - 1;
+      setHighlightIndex(newHighlightIndex);
+      if (newHighlightIndex < searchedUsers.length - maxItemNum) {
+        userListContainerRef.current.scrollTop -= itemHeight;
+      }
+    } else {
+      const newHighlightIndex = searchedUsers.length - 1;
+      setHighlightIndex(newHighlightIndex);
+      userListContainerRef.current.scrollTop = userListContainerRef.current.scrollHeight;
+    }
+  }, [highlightIndex, maxItemNum, itemHeight, searchedUsers]);
+  const onDownArrow = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (highlightIndex < searchedUsers.length - 1) {
+      const newHighlightIndex = highlightIndex + 1;
+      setHighlightIndex(newHighlightIndex);
+      if (newHighlightIndex >= maxItemNum) {
+        userListContainerRef.current.scrollTop += itemHeight;
+      }
+    } else {
+      setHighlightIndex(0);
+      userListContainerRef.current.scrollTop = 0;
+    }
+  }, [highlightIndex, maxItemNum, itemHeight, searchedUsers]);
+  const onEsc = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsPopoverOpen(false);
+    clearStatus();
+  }, [clearStatus]);
+  const onHotKey = (0, _react.useCallback)(e => {
+    if (e.keyCode === _keyCodes.default.Enter) {
+      onEnter(e);
+    } else if (e.keyCode === _keyCodes.default.UpArrow) {
+      onUpArrow(e);
+    } else if (e.keyCode === _keyCodes.default.DownArrow) {
+      onDownArrow(e);
+    } else if (e.keyCode === _keyCodes.default.Escape) {
+      onEsc(e);
+    }
+  }, [onEnter, onUpArrow, onDownArrow, onEsc]);
+  (0, _react.useEffect)(() => {
+    if (userSelectContainerRef.current) {
+      const {
+        bottom
+      } = userSelectContainerRef.current.getBoundingClientRect();
+      if (bottom > window.innerHeight) {
+        userSelectContainerRef.current.style.top = "".concat(window.innerHeight - bottom, "px");
+      }
+    }
+    if (userListContainerRef.current && userItemContainerRef.current) {
+      const userContainerStyle = getComputedStyle(userListContainerRef.current, null);
+      const userItemStyle = getComputedStyle(userItemContainerRef.current, null);
+      const userItemHeight = parseInt(userItemStyle.height);
+      const maxContainerItemNum = Math.floor(parseInt(userContainerStyle.maxHeight) / userItemHeight);
+      setMaxItemNum(maxContainerItemNum);
+      setItemHeight(userItemHeight);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', onHotKey, true);
+    return () => {
+      document.removeEventListener('keydown', onHotKey, true);
+    };
+  }, [onHotKey]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
+    onClickOutside: onClickOutside,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
+          'focus': isPopoverOpen
+        }),
+        onClick: onTogglePopover,
+        ref: selectorRef,
+        children: [selectedUsers.map((user, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+            user: user,
+            deleteUser: deselectUser
+          }, "dtable-ui-user-selector-selected-user-".concat(index));
+        }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "dtable-ui-user-select-placeholder",
+          children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
+        })]
+      }), selectorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
+        placement: "bottom-start",
+        isOpen: isPopoverOpen,
+        target: selectorRef.current,
+        hideArrow: true,
+        fade: false,
+        className: "dtable-ui-user-select-popover",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-user-select-container",
+          ref: userSelectContainerRef,
+          onMouseDown: e => e.stopPropagation(),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-user-search-container",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+              autoFocus: true,
+              placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
+              value: searchValue,
+              wait: 200,
+              onChange: onSearchValueChanged,
+              onKeyDown: onKeyDown
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-user-list-container",
+            ref: userListContainerRef,
+            children: [searchedUsers.length > 0 && searchedUsers.map((user, index) => {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                className: (0, _classnames.default)('dtable-ui-user-item-container', {
+                  'dtable-ui-user-item-container-highlight': index === highlightIndex
+                }),
+                ref: userItemContainerRef,
+                onClick: () => onUserClick(user),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+                  user: user,
+                  enableShowIDInOrgWhenSearchUser: enableShowIDInOrgWhenSearchUser
+                }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "dtable-ui-collaborator-check-icon",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                    className: "dtable-font dtable-icon-check-mark",
+                    "aria-hidden": "true"
+                  })
+                })]
+              }, user.email);
+            }), searchedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "no-user-search-result",
+              children: searchValue ? (0, _lang.getLocale)('User_not_found') : (0, _lang.getLocale)('Enter_characters_to_start_searching')
+            })]
+          })]
+        })
+      })]
+    })
+  });
+};
+var _default = exports.default = AsyncUserSelect;