dtable-ui-component 6.0.110-oot.25 → 6.0.110-oot.27

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

@@ -8,8 +8,8 @@ exports.MenuSelectStyle = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 // Seahub select is based on seafile-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px',
+  fontSize: '12px',
+  padding: '0 8px',
   border: '1px solid var(--bs-border-color) !important',
   boxShadow: 'none',
   backgroundColor: 'var(--bs-popover-bg)',
@@ -17,8 +17,8 @@ const DEFAULT_CONTROL_STYLE = {
   outline: '0'
 };
 const FOCUS_CONTROL_STYLE = {
-  fontSize: '14px',
-  padding: '0 4px',
+  fontSize: '12px',
+  padding: '0 8px',
   border: '1px solid #3e84f7',
   boxShadow: 'none',
   backgroundColor: 'var(--bs-popover-bg)',
@@ -43,7 +43,7 @@ const controlCallback = (provided, state) => {
     });
   }
   return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    fontSize: '14px',
+    fontSize: '12px',
     lineHeight: '1.5',
     cursor: 'pointer'
   }, DEFAULT_CONTROL_STYLE), {}, {
@@ -130,5 +130,8 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     return {
       'display': 'none'
     };
-  }
+  },
+  indicatorsContainer: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: '0'
+  })
 };

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.25",
+  "version": "6.0.110oot.27",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.4",