dtable-ui-component 6.0.125-xhs.9 → 6.0.126-beta.s1

package/lib/AsyncUserSelect/index.css

@@ -35,6 +35,7 @@
   padding: 8px !important;
   overflow: auto;
   position: relative;
+  margin: 0 !important;
 }
 
 .dtable-ui-user-select-container .form-control {
@@ -84,21 +85,17 @@
   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;
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+  height: 32px;
 }
 
-.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 .input-icon-addon {
+  z-index: 1;
+  pointer-events: auto;
+  min-width: 2.75rem !important;
+  width: 40px;
+  height: 32px;
 }
 
 /* user-item */
@@ -128,7 +125,7 @@
 }
 
 .dtable-ui-user-item .user-name {
-  margin-left: 5px;
+  margin-left: 4px;
 }
 
 .dtable-ui-user-item .user-avatar img {
@@ -155,7 +152,3 @@
   color: #666666;
   cursor: pointer;
 }
-
-.dtable-ui-selected-users-container .dtable-ui-users-input {
-  padding-right: 37px;
-}

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -32,22 +32,6 @@ class CollaboratorSelect extends _react.Component {
         isShowSelectOptions: !this.state.isShowSelectOptions
       });
     };
-    this.onClick = event => {
-      const target = event.target;
-      const name = target.className;
-      const {
-        isShowSelectOptions
-      } = this.state;
-      if (!isShowSelectOptions || name === 'select-placeholder' || name.includes('icon-fork-number') || this.selector.contains(target)) {
-        return;
-      }
-      const {
-        isUsePopover
-      } = this.props;
-      if (isUsePopover && !this.collaboratorSelectPopoverRef.contains(target) || !isUsePopover && !this.selector.contains(target)) {
-        this.closeSelect();
-      }
-    };
     this.onMousedown = event => {
       const name = event.target.className;
       if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
@@ -97,8 +81,7 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true,
-          onClickOutside: this.onClick
+          isShowSelected: true
         });
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
@@ -123,8 +106,7 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true,
-          onClickOutside: this.onClick
+          isShowSelected: true
         })
       });
     };

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,7 @@
   border: 1px solid rgba(0, 40, 100, 0.12);
   border-radius: 4px;
   z-index: 10001;
+  margin-top: 4px;
 }
 
 .seatable-option-group-search {
@@ -106,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/DTableFiltersPopover/widgets/filter-list/index.css

@@ -419,13 +419,13 @@
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #999;
+  color: var(--bs-icon-secondary-color);
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #999;
+  color: var(--bs-icon-secondary-color);
 }
 
 .dtable-ui-filters-list .single-select-option,

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/index.js

@@ -65,8 +65,7 @@ class DTableSelect extends _react.default.Component {
       ref: innerRef,
       filterOption: customFilterOption,
       form: form,
-      autoFocus: autoFocus,
-      menuIsOpen: true
+      autoFocus: autoFocus
     });
   }
 }

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

@@ -134,3 +134,8 @@
 .option-group-selector-single-select .form-control {
   padding: .375rem .5rem !important;
 }
+
+.pre-fill-dialog .single-select-option,
+.pre-fill-dialog .multiple-select-option {
+  padding: 0 !important;
+}

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.9",
+  "version": "6.0.126-beta.s1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",