dtable-ui-component 7.0.5-pal.2 → 7.0.5-pal.6

package/lib/AsyncUserSelect/index.css

@@ -29,10 +29,13 @@
   height: 12px;
 }
 
-.dtable-ui-user-select-popover .popover {
-  width: 385px;
-  max-width: 385px;
-  margin-top: -4px;
+.dtable-ui-user-select-popover {
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1060;
+  min-width: 260px;
 }
 
 .dtable-ui-user-select-container {
@@ -40,8 +43,7 @@
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container {
-  min-height: 160px;
-  max-height: 200px;
+  min-height: 32px;
   padding: 8px;
   overflow: auto;
   position: relative;

package/lib/AsyncUserSelect/index.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactstrap = require("reactstrap");
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
@@ -189,28 +189,36 @@ const AsyncUserSelect = _ref => {
     }
   }, [onEnter, onUpArrow, onDownArrow, onEsc]);
   (0, _react.useEffect)(() => {
-    if (userSelectContainerRef.current) {
-      const _userSelectContainerR = userSelectContainerRef.current.getBoundingClientRect(),
-        bottom = _userSelectContainerR.bottom;
-      if (bottom > window.innerHeight) {
-        userSelectContainerRef.current.style.top = "".concat(window.innerHeight - bottom, "px");
-      }
-    }
+    if (!isPopoverOpen) return;
     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);
+      const userItemHeight = userItemContainerRef.current.getBoundingClientRect().height;
+      const listMaxHeight = userListContainerRef.current.clientHeight;
       setItemHeight(userItemHeight);
+      setMaxItemNum(Math.max(1, Math.floor(listMaxHeight / userItemHeight)));
     }
-  }, []);
+  }, [isPopoverOpen, searchedUsers]);
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', onHotKey, true);
     return () => {
       document.removeEventListener('keydown', onHotKey, true);
     };
   }, [onHotKey]);
+  const getSelectorRect = () => {
+    if (!selectorRef.current) return null;
+    return selectorRef.current.getBoundingClientRect();
+  };
+  const popoverStyle = (() => {
+    if (!isPopoverOpen) return null;
+    const rect = getSelectorRect();
+    if (!rect) return null;
+    return {
+      position: 'fixed',
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width,
+      maxHeight: Math.max(160, window.innerHeight - rect.bottom - 8)
+    };
+  })();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
     onClickOutside: onClickOutside,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -238,54 +246,52 @@ const AsyncUserSelect = _ref => {
             })
           })]
         })
-      }), 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: "seatable-select-search",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
-              className: "option-search-control",
-              placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
-              onChange: onSearchValueChanged,
-              clearValue: () => onSearchValueChanged(''),
-              autoFocus: true,
-              isClearable: true,
-              value: searchValue
-            })
-          }), /*#__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",
-                    "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')
+      }), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
+          onClickOutside: onClickOutside,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "dtable-ui-user-select-popover dtable-ui-user-select-container",
+            ref: userSelectContainerRef,
+            style: popoverStyle,
+            onMouseDown: e => e.stopPropagation(),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "seatable-select-search",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+                className: "option-search-control",
+                placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
+                onChange: onSearchValueChanged,
+                clearValue: () => onSearchValueChanged(''),
+                autoFocus: true,
+                isClearable: true,
+                value: searchValue
+              })
+            }), /*#__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: index === 0 ? userItemContainerRef : null,
+                  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",
+                      "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')
+              })]
             })]
-          })]
+          })
         })
       })]
     })

package/lib/DTableCustomizeSelect/index.css

@@ -107,10 +107,6 @@
   white-space: nowrap;
 }
 
-.seatable-customize-select .selected-option .multicolor-icon {
-  font-size: 12px;
-}
-
 .seatable-customize-select .multiple-check-icon,
 .seatable-customize-select .header-icon .dtable-font,
 .seatable-option-group .select-label .header-icon .dtable-font {
@@ -125,8 +121,10 @@
   margin-left: 0 !important;
 }
 
-.seatable-customize-select .selected-option .dtable-icon-down3 {
+.seatable-customize-select .selected-option .dtable-icon-down3,
+.seatable-customize-select .selected-option .multicolor-icon {
   color: var(--bs-icon-color) !important;
+  font-size: 12px;
 }
 
 .selector-group-select .selected-option-show .selected-option-item {

package/lib/DTableCustomizeSelect/index.js

@@ -25,7 +25,6 @@ class DTableCustomizeSelect extends _react.Component {
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
       const eventClassName = (0, _utils.getEventClassName)(event);
-      console.log('eventClassName', eventClassName);
       if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-select-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;

package/lib/DTableSelect/dtable-select-label.css

@@ -13,3 +13,10 @@
   font-size: 12px;
   margin-top: 4px
 }
+
+.seatable-option.option-name {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/DTableSelect/utils.js

@@ -214,7 +214,7 @@ const Option = props => {
         whiteSpace: 'pre-line'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "seatable-option",
+        className: "seatable-option option-name",
         children: label
       }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font dtable-icon-check",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.5pal.2",
+  "version": "7.0.5pal.6",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",