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

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -32,6 +32,22 @@ 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')) {
@@ -54,22 +70,6 @@ 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,

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

@@ -144,7 +144,15 @@ class SelectOptionGroup extends _react.Component {
       return this.filterOptions.map((opt, i) => {
         let key = opt.value.column ? opt.value.column.key : i;
         let isActive = this.state.activeIndex === i;
-        const isSelected = value && (opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value));
+        let isSelected = false;
+        if (value) {
+          // Handle both single value and array of values
+          if (Array.isArray(value.value)) {
+            isSelected = value.value.includes(opt.value);
+          } else {
+            isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
+          }
+        }
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
           index: i,
           isActive: isActive,

package/lib/DTableSelect/index.js

@@ -89,9 +89,18 @@ class DTableSelect extends _react.default.Component {
     };
     this.handleSelectChange = val => {
       const {
-        onChange
+        onChange,
+        isMulti
       } = this.props;
-      if (!val.value) {
+
+      // Handle multi-select case
+      if (isMulti) {
+        onChange(val || []);
+        return;
+      }
+
+      // Handle single select case
+      if (!val || !val.value) {
         onChange('');
         return;
       }

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 _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
+var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
 var _ClickOutside = _interopRequireDefault(require("../ClickOutside"));
 require("./index.css");
@@ -261,15 +261,27 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-search-input-multiple",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
+          className: "option-group-search",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+            className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
-            value: searchVal,
-            clearValue: () => this.onChangeSearch(''),
             autoFocus: true,
+            ref: this.searchInputRef,
+            clearValue: this.clearValue,
             isClearable: true,
-            isMultiple: 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();
+                  }
+                });
+              }
+            }
           })
         }), /*#__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.24",
+  "version": "6.0.110oot.26",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",