dtable-ui-component 7.0.9-beta.1 → 7.0.9-beta.2

package/lib/DTableCustomizeSearchInput/index.css

@@ -28,18 +28,6 @@
   border-top-right-radius: 4px;
 }
 
-.select-search-control:-webkit-autofill,
-.select-search-control:-webkit-autofill:hover,
-.select-search-control:-webkit-autofill:focus,
-.select-search-control:-webkit-autofill:active,
-.select-search-control:-internal-autofill-previewed,
-.select-search-control:-internal-autofill-selected {
-  -webkit-box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
-  box-shadow: inset 0 0 0 1000px var(--bs-popover-bg) !important;
-  -webkit-text-fill-color: var(--bs-body-color) !important;
-  transition: background-color 5000s ease-in-out 0s !important;
-}
-
 .select-search-control:focus {
   outline: none;
   box-shadow: none;
@@ -82,6 +70,6 @@
 
 .dtable-ui-user-select-popover .select-search-control,
 .dtable-popover .select-search-control {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }

package/lib/DTableCustomizeSelect/index.css

@@ -107,6 +107,10 @@
   white-space: nowrap;
 }
 
+.seatable-customize-select .selected-option .multicolor-icon {
+  font-size: 12px;
+}
+
 .seatable-customize-select .multiple-check-icon,
 .seatable-customize-select .header-icon .dtable-font,
 .seatable-option-group .select-label .header-icon .dtable-font {
@@ -121,12 +125,6 @@
   margin-left: 0 !important;
 }
 
-.seatable-customize-select .selected-option .dtable-icon-down3,
-.seatable-customize-select .selected-option .multicolor-icon {
-  color: var(--bs-icon-color) !important;
-  font-size: 12px;
-}
-
 .selector-group-select .selected-option-show .selected-option-item {
   align-items: center;
   border-radius: 4px;
@@ -161,9 +159,7 @@
 }
 
 .selector-group-select {
-  height: auto;
-  min-height: 38px;
-  padding: 6px 16px 6px 8px;
+  padding: 7px 16px 7px 8px;
 }
 
 .selector-group-select .selected-option {
@@ -176,3 +172,7 @@
   height: auto;
   min-height: 24px
 }
+
+.selector-group-select {
+  height: auto;
+}

package/lib/DTableCustomizeSelect/index.js

@@ -45,13 +45,6 @@ class DTableCustomizeSelect extends _react.Component {
         isShowSelectOptions: false
       });
     };
-    this.handleDocumentMouseDown = event => {
-      if (!this.state.isShowSelectOptions) return;
-      const target = event.target;
-      if (this.selector && this.selector.contains(target)) return;
-      if (target && target.closest && target.closest('.seatable-option-group')) return;
-      this.closeSelect();
-    };
     this.getSelectedOptionTop = () => {
       if (!this.selector) return 38;
       const _this$selector$getBou = this.selector.getBoundingClientRect(),
@@ -87,12 +80,6 @@ class DTableCustomizeSelect extends _react.Component {
       isShowSelectOptions: false
     };
   }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
-  }
   render() {
     let _this$props2 = this.props,
       className = _this$props2.className,

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

@@ -132,7 +132,7 @@
 }
 
 .dtable-ui-filters-list .filter-conjunction {
-  width: 88px;
+  width: 72px;
 }
 
 .dtable-ui-filters-list .filter-conjunction-readonly {
@@ -166,12 +166,21 @@
   color: #666666;
 }
 
+.dtable-ui-filters-list .filter-column {
+  max-width: 150px;
+}
+
 .filter-term .dtable-ui-multiple-select-selector .option,
 .filter-term .dtable-ui-single-select-selector .option {
   height: 30px;
   padding: 0 10px;
 }
 
+.filter-term .dtable-ui-multiple-select-selector .select-option-name,
+.filter-term .dtable-ui-single-select-selector .select-option-name {
+  margin-top: 5px !important;
+}
+
 .filter-term .dtable-ui-single-select-selector .option:hover {
   color: #212529;
   background-color: #f7f7f7;

package/lib/DTableSelect/dtable-select-label.css

@@ -9,15 +9,7 @@
   color: var(--bs-icon-color);
 }
 
-.seatable-option .seatable-tip-default {
+.seatable-option .select-option-name .seatable-tip-default {
   font-size: 12px;
   margin-top: 4px
 }
-
-.select-option-name .group-select-option,
-.seatable-option.option-name {
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}

package/lib/DTableSelect/utils.js

@@ -214,7 +214,7 @@ const Option = props => {
         whiteSpace: 'pre-line'
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "seatable-option option-name",
+        className: "seatable-option",
         children: label
       }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font dtable-icon-check",

package/lib/SelectOptionGroup/index.css

@@ -66,9 +66,6 @@
 
 .select-label {
   width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 
 .seatable-option-group-selector-multiple-select .select-label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.9-beta.1",
+  "version": "7.0.9-beta.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",