dtable-ui-component 6.0.125-xhs.2 → 6.0.125-xhs.4

package/lib/AsyncUserSelect/index.css

@@ -39,14 +39,12 @@
 
 .dtable-ui-user-select-container .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 1rem !important;
 }
 
 .dtable-ui-user-select-container .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
 }
 

package/lib/AsyncUserSelect/index.js

@@ -9,7 +9,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactstrap = require("reactstrap");
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _userItem = _interopRequireDefault(require("./user-item"));
 var _lang = require("../lang");
 var _keyCodes = _interopRequireDefault(require("../constants/key-codes"));
@@ -219,24 +219,17 @@ const AsyncUserSelect = _ref => {
           className: "dtable-ui-user-select-container",
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "dtable-ui-user-search-container",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-              autoFocus: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "seatable-option-group-search",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+              className: "option-search-control",
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),
-              value: searchValue,
-              wait: 200,
               onChange: onSearchValueChanged,
-              onKeyDown: onKeyDown
-            }), searchValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "search-clear-btn position-absolute",
-              onClick: () => onSearchValueChanged(''),
-              title: (0, _lang.getLocale)('Clear_search_text'),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                "aria-hidden": "true",
-                className: "dtable-font dtable-icon-x"
-              })
-            })]
+              clearValue: () => onSearchValueChanged(''),
+              autoFocus: true,
+              isClearable: true,
+              value: searchValue
+            })
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-list-container",
             ref: userListContainerRef,

package/lib/DTableCustomizeSelect/select-option-group/index.css

@@ -12,17 +12,20 @@
   z-index: 10001;
 }
 
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
 .seatable-option-group .seatable-option-group-search {
   width: 100%;
   min-width: 170px;
   position: relative;
   padding: 0;
   height: 32px;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-option-group .seatable-option-group-search .form-control {
-  height: 32px;
+  height: 100%;
   border: none;
   padding: .375rem 1rem;
   cursor: pointer;

package/lib/DTableGroupSelect/index.css

@@ -106,7 +106,6 @@
 
 .seatable-group-select .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 0 .375rem 1rem;
   height: 32px;
@@ -114,7 +113,6 @@
 
 .seatable-group-select .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
 }
 

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

@@ -1,10 +1,10 @@
 .dtable-select-check-icon {
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 14px;
   text-align: center;
 }
 
 .dtable-select-check-icon .dtable-font {
-  font-size: 12px;
-  color: #798d99;
+  font-size: 14px;
+  color: #666;
 }

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

@@ -21,7 +21,7 @@ function DTableSelectLabel(_ref) {
     }), isSelect && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "dtable-select-check-icon",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "dtable-font dtable-icon-check-mark"
+        className: "dtable-font dtable-icon-check"
       })
     })]
   });

package/lib/SelectOptionGroup/index.css

@@ -66,7 +66,6 @@
 
 .option-group .option-group-search .form-control {
   border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
   padding: .375rem 0 .375rem 1rem;
   height: 32px;
@@ -74,7 +73,6 @@
 
 .option-group .option-group-search .form-control:focus {
   border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   box-shadow: none !important;
 }
 

package/package.json

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