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

package/lib/AsyncUserSelect/index.css

@@ -30,14 +30,12 @@
 }
 
 .dtable-ui-user-select-popover {
-  z-index: 1060;
-  width: 385px;
-  max-width: 385px;
-  margin-top: -4px;
-  background-color: var(--bs-popover-bg);
-  box-shadow: var(--bs-border-secondary-shadow);
-  border: 1px solid var(--bs-border-secondary-color);
+  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 {
@@ -45,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;
@@ -63,10 +60,6 @@
   border-radius: 4px;
 }
 
-.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,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
   background-color: var(--bs-btn-background-hover);

package/lib/AsyncUserSelect/index.js

@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
@@ -56,10 +57,6 @@ 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);
@@ -69,6 +66,12 @@ 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()) || '';
@@ -200,113 +203,98 @@ const AsyncUserSelect = _ref => {
       document.removeEventListener('keydown', onHotKey, true);
     };
   }, [onHotKey]);
-  (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 popoverStyle = (() => {
+    if (!isPopoverOpen) return null;
     const rect = getSelectorRect();
-    if (!rect) return;
-    setPopoverPosition({
+    if (!rect) return null;
+    return {
       position: 'fixed',
-      top: rect.bottom + 8,
+      top: rect.bottom + 4,
       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')
+      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, {
+      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.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')
+              })]
+            })]
+          })
+        })
+      })]
+    })
   });
 };
 var _default = exports.default = AsyncUserSelect;

package/lib/DTableCustomizeSearchInput/index.css

@@ -28,18 +28,6 @@
   border-top-right-radius: 4px;
 }
 
-.select-search-control:-webkit-autofill,
-.select-search-control:-webkit-autofill:hover,
-.select-search-control:-webkit-autofill:focus,
-.select-search-control:-webkit-autofill:active,
-.select-search-control:-internal-autofill-previewed,
-.select-search-control:-internal-autofill-selected {
-  -webkit-box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
-  box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
-  -webkit-text-fill-color: var(--bs-body-color) !important;
-  transition: background-color 5000s ease-in-out 0s !important;
-}
-
 .select-search-control:focus {
   outline: none;
   box-shadow: none;
@@ -82,6 +70,6 @@
 
 .dtable-ui-user-select-popover .select-search-control,
 .dtable-popover .select-search-control {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }

package/lib/DTableCustomizeSelect/index.css

@@ -161,9 +161,7 @@
 }
 
 .selector-group-select {
-  height: auto;
-  min-height: 38px;
-  padding: 6px 16px 6px 8px;
+  padding: 7px 16px 7px 8px;
 }
 
 .selector-group-select .selected-option {
@@ -176,3 +174,7 @@
   height: auto;
   min-height: 24px
 }
+
+.selector-group-select {
+  height: 38px;
+}

package/lib/DTableCustomizeSelect/index.js

@@ -45,13 +45,6 @@ class DTableCustomizeSelect extends _react.Component {
         isShowSelectOptions: false
       });
     };
-    this.handleDocumentMouseDown = event => {
-      if (!this.state.isShowSelectOptions) return;
-      const target = event.target;
-      if (this.selector && this.selector.contains(target)) return;
-      if (target && target.closest && target.closest('.seatable-option-group')) return;
-      this.closeSelect();
-    };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
       const _this$selector$getBou = this.selector.getBoundingClientRect(),
@@ -87,12 +80,6 @@ class DTableCustomizeSelect extends _react.Component {
       isShowSelectOptions: false
     };
   }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
-  }
   render() {
     let _this$props2 = this.props,
       className = _this$props2.className,

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

@@ -9,7 +9,7 @@
   color: var(--bs-icon-color);
 }
 
-.seatable-option .seatable-tip-default {
+.seatable-option .select-option-name .seatable-tip-default {
   font-size: 12px;
   margin-top: 4px
 }

package/lib/SelectOptionGroup/index.css

@@ -66,9 +66,6 @@
 
 .select-label {
   width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
 .seatable-option-group-selector-multiple-select .select-label,

package/package.json

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