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

package/lib/AsyncUserSelect/index.css

@@ -39,15 +39,15 @@
 
 .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;
+  height: 100%;
 }
 
 .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;
+  height: 100%;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
@@ -80,25 +80,13 @@
 }
 
 .dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
-  color: #666666;
+  color: var(--bs-icon-color);
   font-size: 14px;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-search-container .search-clear-btn {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  height: 22px;
-  line-height: 22px;
-  width: 28px;
-  text-align: center;
-  color: #999;
-  cursor: pointer;
-}
-
-.dtable-ui-user-select-container .dtable-ui-user-search-container .search-clear-btn .dtable-icon-x {
-  font-size: 12px;
-  color: #999999;
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+  height: 32px;
 }
 
 /* user-item */
@@ -155,7 +143,3 @@
   color: #666666;
   cursor: pointer;
 }
-
-.dtable-ui-selected-users-container .dtable-ui-users-input {
-  padding-right: 37px;
-}

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/DTableCustomizeSearchInput/index.css

@@ -10,11 +10,10 @@
 }
 
 .seatable-search-input .form-control {
-  height: 32px;
+  height: 100%;
   border: none;
-  padding: .375rem 0 .375rem 1rem;
+  padding: .375rem 1rem;
   cursor: pointer;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-search-input-multiple .form-control:focus,

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

@@ -10,6 +10,12 @@
   border: 1px solid rgba(0, 40, 100, 0.12);
   border-radius: 4px;
   z-index: 10001;
+  margin-top: 4px;
+}
+
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+  height: 32px;
 }
 
 .seatable-option-group .seatable-option-group-search {
@@ -17,16 +23,13 @@
   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;
-  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .seatable-option-group .seatable-option-group-search .form-control:focus {
@@ -34,10 +37,13 @@
   box-shadow: none;
 }
 
+.seatable-option-group-search .input-icon-addon,
 .seatable-option-group .seatable-option-group-search .input-icon-addon {
   z-index: 1;
   pointer-events: auto;
   min-width: 2.75rem !important;
+  width: 40px;
+  height: 32px;
 }
 
 .seatable-option-group .seatable-option-group-search .input-icon-addon svg {
@@ -101,11 +107,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 
 .seatable-option-group-selector-multiple-select .multiple-check-icon {
   display: inline-flex;
-  width: 20px;
   text-align: center;
   color: var(--bs-icon-color);
 }

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

@@ -225,7 +225,6 @@ class SelectOptionGroup extends _react.Component {
         opacity: 0
       };
     }
-    style.top = style.top + 4;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
       onClickOutside: this.props.onClickOutside,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/DTableGroupSelect/index.css

@@ -95,7 +95,7 @@
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: #666666;
+  color: var(--bs-icon-color);
   font-size: 12px;
   margin-right: 6px;
 }
@@ -106,15 +106,13 @@
 
 .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;
+  height: 100%;
 }
 
 .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/DTableGroupSelect/index.js

@@ -91,7 +91,7 @@ class DTableGroupSelect extends _react.Component {
               className: "selected-option-item-name",
               children: item.name
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-x ml-1",
+              className: "dtable-font dtable-icon-x",
               onClick: () => {
                 this.props.onDeleteOption(item);
               }

package/lib/DTableGroupSelect/select-option-group.css

@@ -19,7 +19,7 @@
 
 .group-selector .option .dtable-icon-check{
   font-size: 14px;
-  color: #666666;
+  color: var(--bs-icon-color);
   height: 14px !important;
   display: flex;
   align-items: center;

package/lib/DTableGroupSelect/select-option-group.js

@@ -207,7 +207,7 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height + 4,
+        top: position.y + position.height,
         minWidth: position.width,
         opacity: 0
       };

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/DTableSelect/utils.js

@@ -217,7 +217,8 @@ const Option = props => {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
-        width: '100%'
+        width: '100%',
+        whiteSpace: 'pre-line'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label

package/lib/SelectOptionGroup/index.css

@@ -66,15 +66,13 @@
 
 .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;
+  height: 100%;
 }
 
 .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;
 }
 
@@ -114,7 +112,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: #666666;
+  color: var(--bs-icon-color);
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,

package/lib/SelectOptionGroup/index.js

@@ -240,7 +240,7 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: "".concat(position.y + position.height + 4, "px"),
+        top: position.y + position.height,
         minWidth: position.width,
         opacity: 0
       };

package/package.json

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