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

package/lib/AsyncUserSelect/index.js

@@ -18,6 +18,7 @@ var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const AsyncUserSelect = _ref => {
+  var _selectorRef$current;
   let className = _ref.className,
     _ref$emptyPlaceholder = _ref.emptyPlaceholder,
     emptyPlaceholder = _ref$emptyPlaceholder === void 0 ? '' : _ref$emptyPlaceholder,
@@ -211,6 +212,7 @@ const AsyncUserSelect = _ref => {
       document.removeEventListener('keydown', onHotKey, true);
     };
   }, [onHotKey]);
+  const popoverContainer = ((_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.closest('.modal[aria-modal="true"]')) || 'body';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
     onClickOutside: onClickOutside,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
@@ -245,6 +247,7 @@ const AsyncUserSelect = _ref => {
         hideArrow: true,
         fade: false,
         className: "dtable-ui-user-select-popover",
+        container: popoverContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "dtable-ui-user-select-container",
           ref: userSelectContainerRef,

package/lib/DTableCustomizeSearchInput/index.css

@@ -28,6 +28,18 @@
   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;
@@ -70,6 +82,6 @@
 
 .dtable-ui-user-select-popover .select-search-control,
 .dtable-popover .select-search-control {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }

package/lib/DTableCustomizeSelect/index.css

@@ -107,10 +107,6 @@
   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 {
@@ -125,6 +121,12 @@
   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;
@@ -159,7 +161,9 @@
 }
 
 .selector-group-select {
-  padding: 7px 16px 7px 8px;
+  height: auto;
+  min-height: 38px;
+  padding: 6px 16px 6px 8px;
 }
 
 .selector-group-select .selected-option {
@@ -172,7 +176,3 @@
   height: auto;
   min-height: 24px
 }
-
-.selector-group-select {
-  height: auto;
-}

package/lib/DTableCustomizeSelect/index.js

@@ -45,6 +45,13 @@ 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(),
@@ -80,6 +87,12 @@ 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: 72px;
+  width: 88px;
 }
 
 .dtable-ui-filters-list .filter-conjunction-readonly {
@@ -166,21 +166,12 @@
   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,7 +9,15 @@
   color: var(--bs-icon-color);
 }
 
-.seatable-option .select-option-name .seatable-tip-default {
+.seatable-option .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",
+        className: "seatable-option option-name",
         children: label
       }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font dtable-icon-check",

package/lib/SelectOptionGroup/index.css

@@ -66,6 +66,9 @@
 
 .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.2",
+  "version": "7.0.9-beta.3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",