dtable-ui-component 7.0.5-pal.11 → 7.0.5-pal.16

package/lib/AsyncUserSelect/index.js

@@ -71,27 +71,13 @@ const AsyncUserSelect = _ref => {
     setSearchValue('');
     setHighlightIndex(-1);
   }, []);
-  const isEventInsideComponent = (0, _react.useCallback)(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 onClickOutside = (0, _react.useCallback)(e => {
-    if (isPopoverOpen && !isEventInsideComponent(e.target)) {
+    console.log(111);
+    if (isPopoverOpen && (!selectorRef.current || !selectorRef.current.contains(e.target))) {
       setIsPopoverOpen(false);
       clearStatus();
     }
-  }, [isPopoverOpen, clearStatus, isEventInsideComponent]);
-  const onClickOutsideMenu = (0, _react.useCallback)(event => {
-    if (isPopoverOpen && (0, _utils.getEventClassName)(event).includes('icon-fork-number')) {
-      return;
-    }
-    if (!isEventInsideComponent(event.target)) {
-      setIsPopoverOpen(false);
-      clearStatus();
-    }
-  }, [isPopoverOpen, clearStatus, isEventInsideComponent]);
+  }, [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()) || '';
@@ -270,51 +256,48 @@ const AsyncUserSelect = _ref => {
           })]
         })
       }), isPopoverOpen && popoverStyle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-          onClickOutside: onClickOutsideMenu,
-          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')
-              })]
+        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/DTableCustomizeSearchInput/index.css

@@ -28,6 +28,18 @@
   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;

package/lib/DTableCustomizeSelect/index.css

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

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

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

package/package.json

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