dtable-ui-component 7.0.9-beta.3 → 7.0.10

package/lib/AsyncUserSelect/index.css

@@ -2,9 +2,9 @@
   flex-wrap: wrap;
   height: auto !important;
   min-height: 38px;
-  max-width: calc(100% - 10px);
   padding: .375rem 40px .375rem 1rem;
   position: relative;
+  border-radius: 4px;
 }
 
 .dtable-ui-selected-users-container.focus {
@@ -12,7 +12,7 @@
 }
 
 .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
-  color: var(--bs-icon-color);
+  color: var(--bs-bg-placeholder-color)
 }
 
 .select-dropdown-indicator {
@@ -29,10 +29,13 @@
   height: 12px;
 }
 
-.dtable-ui-user-select-popover .popover {
-  width: 385px;
-  max-width: 385px;
+.dtable-ui-user-select-popover {
+  z-index: 1060;
   margin-top: -4px;
+  background-color: var(--bs-popover-bg);
+  box-shadow: var(--bs-border-secondary-shadow);
+  border: 1px solid var(--bs-border-secondary-color);
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container {
@@ -58,8 +61,11 @@
   border-radius: 4px;
 }
 
-.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 {
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container .dtable-ui-user-item {
+  background: none !important;
+}
+
+.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover {
   background-color: var(--bs-btn-background-hover);
   cursor: pointer;
 }

package/lib/AsyncUserSelect/index.js

@@ -8,8 +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 _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
+var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
 var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
@@ -18,7 +17,6 @@ var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const AsyncUserSelect = _ref => {
-  var _selectorRef$current;
   let className = _ref.className,
     _ref$emptyPlaceholder = _ref.emptyPlaceholder,
     emptyPlaceholder = _ref$emptyPlaceholder === void 0 ? '' : _ref$emptyPlaceholder,
@@ -58,6 +56,10 @@ const AsyncUserSelect = _ref => {
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
     itemHeight = _useState10[0],
     setItemHeight = _useState10[1];
+  const _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    popoverPosition = _useState12[0],
+    setPopoverPosition = _useState12[1];
   const selectorRef = (0, _react.useRef)(null);
   const userSelectContainerRef = (0, _react.useRef)(null);
   const userListContainerRef = (0, _react.useRef)(null);
@@ -67,12 +69,6 @@ const AsyncUserSelect = _ref => {
     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()) || '';
@@ -85,7 +81,6 @@ const AsyncUserSelect = _ref => {
       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 => {
@@ -190,108 +185,127 @@ 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 popoverContainer = ((_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.closest('.modal[aria-modal="true"]')) || 'body';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-    onClickOutside: onClickOutside,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "dtable-ui-users-input",
-          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')
-          }), !showDeptBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            className: "select-dropdown-indicator d-inline-flex align-items-center",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
-              symbol: "down",
-              color: "var(--bs-icon-color)"
-            })
-          })]
-        })
-      }), 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",
-        container: popoverContainer,
-        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')
-            })]
+  (0, _react.useEffect)(() => {
+    if (!isPopoverOpen) return;
+    const isInside = target => {
+      if (!target) return false;
+      if (selectorRef.current && selectorRef.current.contains(target)) return true;
+      if (userSelectContainerRef.current && userSelectContainerRef.current.contains(target)) return true;
+      return false;
+    };
+    const handleDocumentMouseDown = e => {
+      if (isInside(e.target)) return;
+      setIsPopoverOpen(false);
+      clearStatus();
+    };
+    document.addEventListener('mousedown', handleDocumentMouseDown, true);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentMouseDown, true);
+    };
+  }, [isPopoverOpen, clearStatus]);
+  const getSelectorRect = () => {
+    if (!selectorRef.current) return null;
+    return selectorRef.current.getBoundingClientRect();
+  };
+  (0, _react.useLayoutEffect)(() => {
+    if (!isPopoverOpen) {
+      setPopoverPosition(null);
+      return;
+    }
+    const rect = getSelectorRect();
+    if (!rect) return;
+    setPopoverPosition({
+      position: 'fixed',
+      top: rect.bottom + 8,
+      left: rect.left,
+      width: rect.width
+    });
+  }, [isPopoverOpen, selectedUsers]);
+  const popoverStyle = popoverPosition;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("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: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "dtable-ui-users-input",
+        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')
+        }), !showDeptBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "select-dropdown-indicator d-inline-flex align-items-center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+            symbol: "down",
+            color: "var(--bs-icon-color)"
+          })
+        })]
+      })
+    }), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
+      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')
           })]
-        })
-      })]
-    })
+        })]
+      })
+    })]
   });
 };
 var _default = exports.default = AsyncUserSelect;

package/lib/DTableCustomizeSearchInput/index.css

@@ -13,6 +13,10 @@
   height: 32px;
 }
 
+.select-search-control::placeholder {
+  color: var(--bs-bg-placeholder-color);
+}
+
 .select-search-control {
   height: 100%;
   border: none;
@@ -62,7 +66,7 @@
   height: 20px;
   width: 20px;
   cursor: pointer;
-  border-radius: 3px;
+  border-radius: 4px;
 }
 
 .clear-icon-x .multicolor-icon {

package/lib/DTableCustomizeSelect/index.css

@@ -15,6 +15,10 @@
   border: 1px solid rgba(0, 40, 100, 0.12);
 }
 
+.seatable-select-search .select-search-control::placeholder {
+  color: var(--bs-bg-placeholder-color);
+}
+
 .seatable-customize-select:focus,
 .seatable-customize-select.focus {
   border: 1px solid var(--bs-bg-border-color) !important;
@@ -101,7 +105,7 @@
   line-height: 20px;
   margin-right: 8px;
   width: calc(100% - 20px);
-  display: flex;
+  display: block;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

package/lib/DTableCustomizeSelect/index.js

@@ -122,7 +122,7 @@ class DTableCustomizeSelect extends _react.Component {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "select-placeholder",
           children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "d-inline-flex align-items-center",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
             symbol: "down",

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

@@ -19,5 +19,8 @@
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+}
+
+.btn-add-custom-permission {
+  height: 16px;
 }

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.9-beta.3",
+  "version": "7.0.10",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",
-    "@seafile/seafile-calendar": "^1.0.10",
+    "@seafile/seafile-calendar": "^1.0.13",
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",
-    "dtable-utils": "~5.0.32",
+    "dtable-utils": "~5.0.33",
     "is-hotkey": "0.2.0",
     "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",