dtable-ui-component 6.0.110-oot.22 → 6.0.110-oot.24

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -54,6 +54,22 @@ class CollaboratorSelect extends _react.Component {
       if (!searchable) return options || [];
       return (0, _dtableUtils.searchCollaborators)(options, searchValue);
     };
+    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.renderOptionGroup = () => {
       const {
         value,
@@ -81,7 +97,8 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true
+          isShowSelected: true,
+          onClickOutside: this.onClick
         });
       }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
@@ -106,7 +123,8 @@ class CollaboratorSelect extends _react.Component {
           getFilterOptions: this.getFilterOptions,
           supportMultipleSelect: this.props.supportMultipleSelect,
           stopClickEvent: true,
-          isShowSelected: true
+          isShowSelected: true,
+          onClickOutside: this.onClick
         })
       });
     };

package/lib/DTableCustomizeSearchInput/index.css

@@ -12,7 +12,7 @@
 .seatable-search-input .form-control {
   height: 32px;
   border: none;
-  padding: .375rem 1rem;
+  padding: .375rem 0 .375rem 1rem;
   cursor: pointer;
   border-bottom: 1px solid var(--bs-border-color);
 }
@@ -26,7 +26,7 @@
 .seatable-search-input .input-icon-addon {
   z-index: 1;
   pointer-events: auto;
-  min-width: 2.5rem !important;
+  min-width: 2.75rem !important;
 }
 
 .seatable-search-input .input-icon-addon svg {
@@ -59,7 +59,7 @@
 .seatable-search-input-multiple .input-icon-addon {
   z-index: 1;
   pointer-events: auto;
-  min-width: 2.5rem !important;
+  min-width: 2.75rem !important;
   top: 10px;
   height: 30px;
   right: 10px;

package/lib/DTableCustomizeSelect/index.css

@@ -88,6 +88,7 @@
   font-size: 14px;
   white-space: nowrap;
   color: #868E96;
+  margin-right: 8px;
 }
 
 .seatable-customize-select .selected-option-show {

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

@@ -14,7 +14,6 @@
 
 .seatable-option-group .seatable-option-group-search {
   width: 100%;
-  padding: 6px 10px;
   min-width: 170px;
   position: relative;
   padding: 0;
@@ -25,7 +24,7 @@
 .seatable-option-group .seatable-option-group-search .form-control {
   height: 32px;
   border: none;
-  padding: .375rem 1rem;
+  padding: .375rem 0 .375rem 1rem;
   cursor: pointer;
   border-bottom: 1px solid var(--bs-border-color);
 }
@@ -38,7 +37,7 @@
 .seatable-option-group .seatable-option-group-search .input-icon-addon {
   z-index: 1;
   pointer-events: auto;
-  min-width: 2.5rem !important;
+  min-width: 2.75rem !important;
 }
 
 .seatable-option-group .seatable-option-group-search .input-icon-addon svg {
@@ -84,21 +83,6 @@
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-/* .seatable-select-option .seatable-multicolor-icon-tick {
-  right: 10px;
-  position: absolute;
-  color: inherit;
-}
-
-.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .seatable-multicolor-icon {
-  fill: #aaa;
-}
-
-.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .sf2-icon-tick {
-  color: #aaa;
-} */
-
-
 .seatable-select-option .select-option-name .multiple-select-option {
   margin: 0;
 }

package/lib/DTableGroupSelect/index.css

@@ -108,7 +108,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem 1rem !important;
+  padding: .375rem 0 .375rem 1rem;
   height: 32px;
 }
 

package/lib/DTableSelect/index.js

@@ -106,7 +106,7 @@ class DTableSelect extends _react.default.Component {
       placeholder = '',
       isMulti = false,
       menuPosition,
-      isClearable = true,
+      isClearable = false,
       noOptionsMessage = () => {
         return null;
       },

package/lib/SelectOptionGroup/index.css

@@ -68,7 +68,7 @@
   border: none;
   border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
   border-radius: 4px 4px 0 0;
-  padding: .375rem 1rem !important;
+  padding: .375rem 0 .375rem 1rem;
   height: 32px;
 }
 

package/lib/SelectOptionGroup/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _option = _interopRequireDefault(require("./option"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./index.css");
@@ -261,27 +261,15 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-search",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-            className: "option-search-control",
+          className: "seatable-search-input-multiple",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
+            value: searchVal,
+            clearValue: () => this.onChangeSearch(''),
             autoFocus: true,
-            ref: this.searchInputRef,
-            clearValue: this.clearValue,
             isClearable: true,
-            components: {
-              ClearIndicator: props => {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: (0, _classnames.default)('select-search-text-clear input-icon-addon seatable-icon dtable-font dtable-icon-x'),
-                  onClick: e => {
-                    e.stopPropagation();
-                    e.nativeEvent.stopImmediatePropagation();
-                    props.clearValue();
-                  }
-                });
-              }
-            }
+            isMultiple: true
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "option-group-content ".concat(!searchable && !supportMultipleSelect ? 'option-group-top' : ''),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.110oot.22",
+  "version": "6.0.110oot.24",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",