dtable-ui-component 6.0.114 → 6.0.115-beta.1

package/lib/AsyncUserSelect/index.css

@@ -3,6 +3,7 @@
   height: auto !important;
   min-height: 38px;
   max-width: calc(100% - 10px);
+  padding: 0.4375rem 1rem 0.4375rem 0.5rem;
 }
 
 .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
@@ -12,40 +13,57 @@
 .dtable-ui-user-select-popover .popover {
   width: 385px;
   max-width: 385px;
+  border-radius: 4px;
+  fill: #FFFFFF 100%;
+  background-color: #FFFFFF;
+  border: 1px solid #EEEEEE;
+  border-radius: 4px;
+  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1);
 }
 
 .dtable-ui-user-select-container {
   position: relative;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-search-container {
-  padding: 10px 10px 0 10px;
-}
-
 .dtable-ui-user-select-container .dtable-ui-user-search-container input {
-  height: 28px;
+  height: 32px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container {
   min-height: 160px;
   max-height: 200px;
-  margin: 10px 0;
+  padding: 8px !important;
   overflow: auto;
+  position: relative;
+}
+
+.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;
+}
+
+.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;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 30px;
-  padding: 0 10px;
+  height: 32px;
+  padding: 0 8px;
   font-size: 14px;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
-  background: #f5f5f5;
+  background-color: rgba(0, 0, 0, 0.04);
   cursor: pointer;
 }
 
@@ -61,16 +79,33 @@
   background: transparent;
 }
 
-.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
-  color: #798d99;
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
+  color: #666666;
+  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;
 }
 
 /* user-item */
 .dtable-ui-user-item {
   display: inline-flex;
   align-items: center;
-  margin: 2px 10px 2px 0;
+  margin: 2px 4px 2px 0;
   padding: 0 8px 0 2px;
   height: 20px;
   font-size: 13px;
@@ -120,3 +155,7 @@
   color: #666666;
   cursor: pointer;
 }
+
+.dtable-ui-selected-users-container .dtable-ui-users-input {
+  padding-right: 37px;
+}

package/lib/AsyncUserSelect/index.js

@@ -190,21 +190,24 @@ const AsyncUserSelect = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
     onClickOutside: onClickOutside,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames.default)('dtable-ui-selected-users-container form-control d-flex align-items-center', className, {
           'focus': isPopoverOpen
         }),
         onClick: onTogglePopover,
         ref: selectorRef,
-        children: [selectedUsers.map((user, index) => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
-            user: user,
-            deleteUser: deselectUser
-          }, "dtable-ui-user-selector-selected-user-".concat(index));
-        }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "dtable-ui-user-select-placeholder",
-          children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
-        })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "dtable-ui-users-input",
+          children: [selectedUsers.map((user, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_userItem.default, {
+              user: user,
+              deleteUser: deselectUser
+            }, "dtable-ui-user-selector-selected-user-".concat(index));
+          }), selectedUsers.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "dtable-ui-user-select-placeholder",
+            children: emptyPlaceholder || (0, _lang.getLocale)('Search_users')
+          })]
+        })
       }), selectorRef.current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
         placement: "bottom-start",
         isOpen: isPopoverOpen,
@@ -216,16 +219,24 @@ const AsyncUserSelect = _ref => {
           className: "dtable-ui-user-select-container",
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-search-container",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
               autoFocus: true,
               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"
+              })
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "dtable-ui-user-list-container",
             ref: userListContainerRef,
@@ -242,7 +253,7 @@ const AsyncUserSelect = _ref => {
                 }, "dtable-ui-user-selector-searched-user-".concat(index)), selectedUsers.find(u => u.email === user.email) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                   className: "dtable-ui-collaborator-check-icon",
                   children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                    className: "dtable-font dtable-icon-check-mark",
+                    className: "dtable-font dtable-icon-check",
                     "aria-hidden": "true"
                   })
                 })]

package/lib/DTableCustomizeSelect/index.css

@@ -4,7 +4,7 @@
 
 .dtable-select.custom-select {
   display: flex;
-  padding: 0 10px;
+  padding: 0 16px;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -39,14 +39,10 @@
 .dtable-select .dtable-icon-down3 {
   display: inline-block;
   font-size: 12px;
-  color: #999;
+  color: #666666;
   transition: all 0.1s;
 }
 
-.dtable-select .dtable-icon-down3:hover {
-  color: #555;
-}
-
 .dtable-select .selected-option {
   display: flex;
   flex: 1;
@@ -98,3 +94,24 @@
   font-size: 14px;
   white-space: nowrap;
 }
+
+.option-group .option-group-selector-multiple-select .option-group-search,
+.option-group .option-group-selector-single-select .option-group-search {
+  padding: 0 0 8px 0 !important;
+}
+
+.option-group-selector-multiple-select .form-control,
+.option-group-selector-single-select .form-control {
+  border: none;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem .5rem !important;
+  height: 32px;
+}
+
+.option-group-selector-multiple-select .form-control:focus,
+.option-group-selector-single-select .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -107,7 +107,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-check-icon",
           children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })
@@ -132,7 +132,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-check-icon",
           children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -49,7 +49,7 @@ class CollaboratorFilter extends _react.Component {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-check-icon",
                 children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check-mark"
+                  className: "option-edit dtable-font dtable-icon-check"
                 })
               })]
             })

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -205,7 +205,7 @@
 .option-group-dtable-ui-collaborator-selector .option:hover,
 .option-group-dtable-ui-collaborator-selector .option.option-active {
   color: #212529;
-  background-color: #f7f7f7;
+  background-color: #f5f5f5;
 }
 
 .dtable-ui-filters-list .dtable-ui-multiple-select-selector .option.option-active .select-option-name,
@@ -333,7 +333,7 @@
   display: inline-flex;
   align-items: center;
   height: 20px;
-  margin-right: 10px;
+  margin-right: 4px;
   padding: 0 8px 0 2px;
   font-size: 13px;
   border-radius: 10px;
@@ -412,20 +412,20 @@
 
 .filter-header-icon {
   display: inline-block;
-  padding: 0 0.3125rem;
+  padding-right: 0.5rem;
   margin-left: -0.3125rem;
 }
 
 .filter-header-icon .dtable-font,
 .filter-header-icon .multicolor-icon {
   font-size: 14px;
-  color: #aaa;
+  color: #999;
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #fff;
+  color: #999;
 }
 
 .dtable-ui-filters-list .single-select-option,

package/lib/DTableGroupSelect/index.css

@@ -4,7 +4,7 @@
 
 .group-select.custom-select {
   display: flex;
-  padding: 5px 10px;
+  padding: 7px 8px !important;
   border-radius: 3px;
   align-items: center;
   justify-content: space-between;
@@ -79,18 +79,47 @@
 }
 
 .group-select .selected-option-show .selected-option-item {
-  background-color: rgb(240, 240, 240);
-  border-radius: 16px;
+  background-color: #F7F7F5;
+  border-radius: 4px !important;
   display: flex;
   align-items: center;
+  height: 24px;
 }
 
 .group-select .selected-option-show .selected-option-item .selected-option-item-name {
-  font-size: 13px;
+  font-size: 14px !important;
   color: #212529;
+  margin-left: 6px;
+  margin-right: 8px
 }
 
 .group-select .selected-option-show .selected-option-item .dtable-icon-x {
   cursor: pointer;
-  color: rgb(103, 103, 103);
+  color: #666666;
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+.seatable-group-select .option-group-search {
+  padding: 0 !important;
+}
+
+.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 1rem !important;
+  height: 32px;
+}
+
+.seatable-group-select .form-control:focus {
+  border-color: transparent !important;
+  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
+  box-shadow: none !important;
+}
+
+.option-group-content .dtable-icon-check {
+  color: #666666;
+  font-size: 14px;
+  margin-left: 16px;
 }

package/lib/DTableGroupSelect/index.js

@@ -86,7 +86,7 @@ class DTableGroupSelect extends _react.Component {
         children: [selectedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "selected-option-show",
           children: selectedOptions.map(item => /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            className: "selected-option-item mr-1 pr-1 pl-2",
+            className: "selected-option-item",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
               className: "selected-option-item-name",
               children: item.name

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

@@ -2,7 +2,6 @@
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 6px 10px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -14,26 +13,26 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.25rem 8px;
 }
 
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
+.group-selector .option .dtable-icon-check{
+  font-size: 14px;
+  color: #666666;
+  height: 14px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .group-selector .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
+  background-color: #f5f5f5;
+  color: #212529;
   cursor: pointer;
 }
 
-.group-selector .option.option-active .dtable-icon-check-mark,
-.group-selector .option.option-active .select-option-name {
-  color: #fff !important;
-}
-
-.group-selector .option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.group-selector .option.option-active .dtable-icon-check-mark {
+  color: #666666 !important;
 }
 
 .group-selector .option .select-option-name .multiple-select-option {

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

@@ -11,6 +11,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _lang = require("../lang");
 require("./select-option-group.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const OPTION_HEIGHT = 32;
@@ -152,7 +154,7 @@ class SelectOptionGroup extends _react.Component {
             title: option.label,
             children: option.label
           }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "dtable-font dtable-icon-check-mark"
+            className: "dtable-font dtable-icon-check"
           })]
         }, "".concat(option.id, "-").concat(index));
       });
@@ -207,23 +209,37 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: position.y + position.height + 4,
         minWidth: position.width,
         opacity: 0
       };
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: (0, _classnames.default)('option-group group-selector', className ? 'option-group-' + className : ''),
+      className: (0, _classnames.default)('option-group group-selector seatable-group-select', className ? 'option-group-' + className : ''),
       ref: ref => this.optionGroupRef = ref,
       style: style,
       onMouseDown: this.onMouseDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "option-group-search position-relative",
+        className: "position-relative",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
           className: "option-search-control",
           placeholder: searchPlaceholder,
           onChange: this.onChangeSearch,
-          ref: this.searchInputRef
+          ref: this.searchInputRef,
+          isClearable: true,
+          clearValue: this.clearValue,
+          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",

package/lib/DTableSelect/index.js

@@ -30,23 +30,23 @@ class DTableSelect extends _react.default.Component {
       autoFocus,
       className
     } = this.props;
+    const processedOptions = (0, _utils.processOptionsWithClear)(options, isClearable);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.default, {
       value: value,
-      onChange: onChange,
-      options: options,
+      onChange: (0, _utils.createHandleChange)(onChange, isMulti),
+      options: processedOptions,
       isMulti: isMulti,
+      isClearable: false,
       className: className,
       classNamePrefix: classNamePrefix,
       styles: style || _utils.MenuSelectStyle,
       components: {
         Option: _utils.Option,
         DropdownIndicator: _utils.DropdownIndicator,
-        MenuList: _utils.MenuList,
-        ClearIndicator: _utils.ClearIndicator
+        MenuList: _utils.MenuList
       },
       placeholder: placeholder,
       isSearchable: isSearchable,
-      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
+exports.processOptionsWithClear = exports.handleSelectChange = exports.createHandleChange = exports.UserSelectStyle = exports.Option = exports.MenuSelectStyle = exports.MenuList = exports.DropdownIndicator = exports.ClearIndicator = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
@@ -100,18 +100,24 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       isFocused
     } = state;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      fontSize: '13px',
+      padding: '8px',
+      fontSize: '14px',
       color: '#212529',
       cursor: isDisabled ? 'default' : 'pointer',
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
+      borderRadius: '4px',
       ':active': {
         backgroundColor: '#f5f5f5'
       },
       '.header-icon .dtable-font': {
-        color: '#aaa'
+        color: '#999'
       },
       '.header-icon .multicolor-icon': {
-        color: '#aaa'
+        color: '#999'
+      },
+      '.seatable-ui-select-tip': {
+        fontSize: '12px',
+        color: '#666666'
       }
     });
   },
@@ -119,7 +125,16 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
   menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
     zIndex: 9999
   }),
-  indicatorSeparator: noneCallback
+  indicatorSeparator: noneCallback,
+  menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: '8px'
+  }),
+  valueContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: '2px 8px 2px 16px'
+  }),
+  dropdownIndicator: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: 0
+  })
 };
 const DropdownIndicator = props => {
   return _reactSelect.components.DropdownIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.DropdownIndicator, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
@@ -127,7 +142,9 @@ const DropdownIndicator = props => {
       className: "dtable-font dtable-icon-down3",
       style: {
         fontSize: '12px',
-        marginLeft: '-2px'
+        marginLeft: '-2px',
+        color: '#666666',
+        paddingRight: '16px'
       }
     })
   }));
@@ -165,9 +182,63 @@ const MenuList = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
 });
 exports.MenuList = MenuList;
 const Option = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: props.data.style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)({}, props))
-  });
+  const {
+    isSelected,
+    label
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSelect.components.Option, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: label
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "dtable-font dtable-icon-check",
+        style: {
+          fontSize: '14px',
+          color: '#666666',
+          paddingLeft: '16px'
+        }
+      })]
+    })
+  }));
+};
+exports.Option = Option;
+const processOptionsWithClear = (options, isClearable) => {
+  if (isClearable && options && options.length > 0) {
+    return [{
+      label: '--',
+      value: '__clear__'
+    }, ...options];
+  }
+  return options;
+};
+exports.processOptionsWithClear = processOptionsWithClear;
+const handleSelectChange = (selectedOption, actionMeta, onChangeCallback, isMulti) => {
+  if (isMulti && Array.isArray(selectedOption)) {
+    const hasClear = selectedOption && selectedOption.some(opt => opt && opt.value === '__clear__');
+    if (hasClear) {
+      onChangeCallback([], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
+        action: 'clear'
+      }));
+      return;
+    }
+  } else if (selectedOption && selectedOption.value === '__clear__') {
+    onChangeCallback(null, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, actionMeta), {}, {
+      action: 'clear'
+    }));
+    return;
+  }
+  onChangeCallback(selectedOption, actionMeta);
+};
+exports.handleSelectChange = handleSelectChange;
+const createHandleChange = (onChange, isMulti) => {
+  return (selectedOption, actionMeta) => {
+    handleSelectChange(selectedOption, actionMeta, onChange, isMulti);
+  };
 };
-exports.Option = Option;
+exports.createHandleChange = createHandleChange;

package/lib/FormulaFormatter/index.css

@@ -45,3 +45,10 @@
 .dtable-ui.formula-formatter.multiple .formula-formatter-content-item .collaborator {
   margin-right: 0;
 }
+
+.dtable-ui.formula-formatter {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.5 !important;
+}
+

package/lib/RowExpandFormatter/index.css

@@ -15,7 +15,13 @@
   margin: 5px 10px 5px 0;
 }
 
-.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.formula-formatter,
+.dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.formula-formatter {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  text-decoration: none;
+}
+
 .dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.text-formatter,
 .dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.url-formatter,
 .dtable-ui.dtable-ui-row-expand-formatter .dtable-ui.email-formatter {

package/lib/SelectOptionGroup/index.css

@@ -6,7 +6,7 @@
   min-height: 60px;
   min-width: 100%;
   max-width: 15rem;
-  padding: 0.5rem 0;
+  padding-top: 0;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   background: #fff;
   border: 1px solid rgba(0, 40, 100, 0.12);
@@ -17,17 +17,23 @@
 .option-group .option-group-search {
   width: 100%;
   min-width: 170px;
-  padding: 0 10px 6px;
+}
+
+.option-group .option-group-content .label-space {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 }
 
 .option-group-search .form-control {
-  height: 31px;
+  height: 32px;
+  border-radius: 4px;
 }
 
 .option-group .none-search-result {
   height: 100px;
   width: 100%;
-  padding: 10px;
   color: #666666;
 }
 
@@ -35,13 +41,18 @@
   flex: 1;
   max-height: 252px;
   overflow-y: auto;
+  padding: 8px;
+}
+
+.option-group .option-group-top {
+  padding-top: 8px !important;
 }
 
 .option {
   display: block;
   width: 100%;
   line-height: 24px;
-  padding: 0.25rem 10px;
+  padding: 0.25rem 8px;
   clear: both;
   font-weight: 400;
   text-align: inherit;
@@ -50,34 +61,40 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  border-radius: 4px;
 }
 
-.option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
-  cursor: pointer;
+.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 1rem !important;
+  height: 32px;
 }
 
-.option:hover .header-icon .dtable-font,
-.option:hover .header-icon .multicolor-icon,
-.option.option-active .select-option-name {
-  color: #fff;
+.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;
 }
 
-.option.option-active .header-icon .dtable-font,
-.option.option-active .header-icon .multicolor-icon {
-  color: #fff;
+
+.option-group-content .label-check-icon {
+  margin-left: 16px;
 }
 
-.option:not(.option-active):hover .header-icon .dtable-font,
-.option:not(.option-active):hover .header-icon .multicolor-icon {
-  color: #aaa;
+.option-group-content .dtable-icon-check {
+  font-size: 14px !important;
+  color: #666666;
 }
 
-.option .select-option-name .single-select-option {
-  margin: 0 0 0 12px;
+.option.option-active {
+  background-color: #f5f5f5;
+  color: #212529;
+  cursor: pointer;
 }
 
+
 .option .select-option-name .multiple-select-option {
   margin: 0;
 }
@@ -97,7 +114,7 @@
 
 .option-group-dtable-ui-multiple-select-selector .multiple-check-icon .dtable-icon-check-mark {
   font-size: 12px;
-  color: #798d99;
+  color: #666666;
 }
 
 .option-group-dtable-ui-single-select-selector .option:hover,
@@ -111,3 +128,11 @@
 .option-group-selector-multiple-select .option.option-active .select-option-name {
   color: #212529;
 }
+
+.option-group-selector-single-select .option .select-option-name .single-select-option {
+  margin: 0;
+}
+
+.option-group-selector-single-select .form-control {
+  padding: .375rem .5rem !important;
+}

package/lib/SelectOptionGroup/index.js

@@ -132,10 +132,17 @@ class SelectOptionGroup extends _react.Component {
         });
       }
     };
+    this.isEqual = (obj1, obj2) => {
+      if (obj1 === obj2) return true;
+      if (!obj1 || !obj2) return false;
+      return JSON.stringify(obj1) === JSON.stringify(obj2);
+    };
     this.renderOptGroup = searchVal => {
       let {
         noOptionsPlaceholder,
-        onSelectOption
+        onSelectOption,
+        value,
+        supportMultipleSelect
       } = this.props;
       this.filterOptions = this.props.getFilterOptions(searchVal);
       if (this.filterOptions.length === 0) {
@@ -147,6 +154,7 @@ 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;
+        let isSelected = value && typeof value === 'object' && !supportMultipleSelect ? this.isEqual(value.value, opt.value) : Array.isArray(value.value) ? value.value.includes(opt.value.column_key) : false;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_option.default, {
           index: i,
           isActive: isActive,
@@ -155,10 +163,26 @@ class SelectOptionGroup extends _react.Component {
           changeIndex: this.changeIndex,
           supportMultipleSelect: this.props.supportMultipleSelect,
           disableHover: this.state.disableHover,
-          children: opt.label
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "label-space",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [" ", opt.label]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "label-check-icon",
+              children: [" ", isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+                className: "dtable-font dtable-icon-check"
+              })]
+            })]
+          })
         }, "".concat(key, "-").concat(i));
       });
     };
+    this.clearValue = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
     this.state = {
       searchVal: '',
       activeIndex: -1,
@@ -192,7 +216,8 @@ class SelectOptionGroup extends _react.Component {
       position,
       className,
       addOptionAble,
-      component
+      component,
+      supportMultipleSelect
     } = this.props;
     const {
       AddOption
@@ -215,7 +240,7 @@ class SelectOptionGroup extends _react.Component {
       style = {
         position: 'fixed',
         left: position.x,
-        top: position.y + position.height,
+        top: "".concat(position.y + position.height + 4, "px"),
         minWidth: position.width,
         opacity: 0
       };
@@ -232,7 +257,7 @@ class SelectOptionGroup extends _react.Component {
         style: style,
         onMouseDown: this.onMouseDown,
         children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "editor-list-delete mb-2",
+          className: "editor-list-delete",
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -242,10 +267,24 @@ class SelectOptionGroup extends _react.Component {
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
             autoFocus: true,
-            ref: this.searchInputRef
+            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();
+                  }
+                });
+              }
+            }
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "option-group-content",
+          className: "option-group-content ".concat(!searchable && !supportMultipleSelect ? 'option-group-top' : ''),
           ref: ref => this.optionGroupContentRef = ref,
           children: this.renderOptGroup(searchVal)
         }), addOptionAble && AddOption]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.114",
+  "version": "6.0.115-beta.1",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "^5.0.7",