dtable-ui-component 7.0.0-ahn.24 → 7.0.0-ahn.3

package/lib/AsyncUserSelect/index.css

@@ -32,9 +32,17 @@
 .dtable-ui-user-select-popover .popover {
   width: 385px;
   max-width: 385px;
+  background: var(--bs-popover-bg);
+	border: 1px solid var(--bs-border-secondary-color);
+	border-radius: 4px;
+	box-shadow: var(--bs-border-secondary-shadow);
   margin-top: -4px;
 }
 
+.dtable-ui-user-select-container .form-control {
+
+}
+
 .dtable-ui-user-select-container {
   position: relative;
 }
@@ -64,8 +72,12 @@
   cursor: pointer;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-list-container {
-  margin: 0 !important;
+.no-user-search-result {
+  color: #666666;
+  font-size: 14px;
+  padding-left: 10px;
+  padding: 10px;
+  overflow: auto;
 }
 
 .dtable-ui-user-select-popover .popover .dtable-ui-user-item {

package/lib/AsyncUserSelect/index.js

@@ -248,7 +248,7 @@ const AsyncUserSelect = _ref => {
           ref: userSelectContainerRef,
           onMouseDown: e => e.stopPropagation(),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "seatable-select-search",
+            className: "seatable-option-group-search",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
               className: "option-search-control",
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),

package/lib/DTableCustomizeSearchInput/index.css

@@ -5,17 +5,13 @@
   position: relative;
   padding: 0;
   height: 32px;
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-}
-
-.seatable-select-search {
-  border-bottom: 1px solid var(--bs-border-secondary-color);
-  height: 32px;
+  border-bottom: 1px solid var(--bs-border-color);
 }
 
 .select-search-control {
   height: 100%;
   border: none;
+  padding: .375rem 1rem;
   cursor: pointer;
   display: block;
   background-color: var(--bs-popover-bg);
@@ -23,9 +19,6 @@
   font-size: .875rem;
   line-height: 1.6;
   width: 100%;
-  padding: .375rem 1rem;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
 }
 
 .select-search-control:focus {
@@ -41,35 +34,18 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: 20px;
+  min-width: 2.5rem;
   pointer-events: auto;
-  color: var(--bs-icon-color);
-  right: 13px;
-  top: 6px;
+  color: var(--bs-body-secondary-color);
+  left: 0;
+  top: 0;
   z-index: 1;
-  height: 20px;
-  width: 20px;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.clear-icon-x .multicolor-icon {
-  font-size: 12px;
-}
-
-.clear-icon-x:hover {
-  background-color: var(--bs-btn-background-hover);
+  bottom: 0;
 }
 
 .seatable-search-input .none-search-result {
   height: 100px;
   width: 100%;
   padding: 10px;
-  color: var(--bs-icon-color);
-}
-
-.dtable-ui-user-select-popover .select-search-control,
-.dtable-popover .select-search-control {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  color: var(--bs-body-secondary-color);
 }

package/lib/DTableCustomizeSearchInput/index.js

@@ -61,7 +61,10 @@ class DTableCustomizeSearchInput extends _react.Component {
       const searchValue = this.state.searchValue;
       if (!isClearable || !searchValue) return null;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        className: (0, _classnames.default)('clear-icon-x', clearClassName),
+        className: (0, _classnames.default)('search-text-clear clear-icon-x', clearClassName),
+        style: {
+          fontSize: '12px'
+        },
         onClick: this.clearSearch,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
           symbol: "close",

package/lib/DTableCustomizeSelect/index.js

@@ -11,7 +11,6 @@ var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"))
 var _DTableIcon = _interopRequireDefault(require("../DTableIcon"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _utils = require("../utils/utils");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSelect extends _react.Component {
@@ -24,8 +23,8 @@ class DTableCustomizeSelect extends _react.Component {
         so it can be closed when other select is clicked.
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
-      const eventClassName = (0, _utils.getEventClassName)(event);
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-select-search') return;
+      let eventClassName = event.target.className;
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
@@ -33,7 +32,7 @@ class DTableCustomizeSelect extends _react.Component {
       });
     };
     this.onClick = event => {
-      if (this.props.isShowSelected && (0, _utils.getEventClassName)(event).includes('icon-fork-number')) {
+      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
         return;
       }
       if (!this.selector.contains(event.target)) {

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

@@ -8,8 +8,3 @@
   font-size: 14px;
   color: var(--bs-icon-color);
 }
-
-.seatable-option .select-option-name .seatable-tip-default {
-  font-size: 12px;
-  margin-top: 4px
-}

package/lib/DTableSelect/utils.js

@@ -9,7 +9,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _react = _interopRequireDefault(require("react"));
 var _reactSelect = require("react-select");
-require("./dtable-select-label.css");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["innerProps"]; // DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
 const DEFAULT_CONTROL_STYLE = {
@@ -42,8 +41,7 @@ const FOCUS_CONTROL_STYLE = {
   outline: '0'
 };
 const HEADER_ICON_STYLE = {
-  margin: '0 0.5rem 0 0 !important',
-  padding: 0
+  padding: '0 0.5rem !important'
 };
 const controlCallback = (provided, state) => {
   const isDisabled = state.isDisabled,
@@ -73,6 +71,7 @@ const controlCallback = (provided, state) => {
 const MenuSelectStyle = exports.MenuSelectStyle = {
   menu: base => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+      padding: '8px',
       backgroundColor: 'var(--bs-popover-bg)',
       border: '1px solid var(--bs-border-secondary-color)',
       borderRadius: '4px',
@@ -82,7 +81,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     });
   },
   menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: '8px'
+    padding: 0
   }),
   option: (provided, state) => {
     const isDisabled = state.isDisabled;
@@ -97,7 +96,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       ':hover': {
-        backgroundColor: 'var(--bs-btn-background-hover)'
+        backgroundColor: 'rgba(0, 0, 0, 0.04)'
       },
       '.header-icon': HEADER_ICON_STYLE
     });
@@ -111,14 +110,12 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
   }),
   singleValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)',
-      margin: 0
+      color: 'var(--bs-body-color)'
     });
   },
   multiValue: provided => {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-      color: 'var(--bs-body-color)',
-      margin: 0
+      color: 'var(--bs-body-color)'
     });
   },
   multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
@@ -137,8 +134,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     const isDisabled = state.isDisabled;
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
       color: 'var(--bs-bg-placeholder-color)',
-      opacity: isDisabled ? 0.65 : 1,
-      margin: 0
+      opacity: isDisabled ? 0.65 : 1
     });
   },
   indicatorSeparator: (styles, state) => {
@@ -213,8 +209,7 @@ const Option = props => {
         width: '100%',
         whiteSpace: 'pre-line'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "seatable-option",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: label
       }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font dtable-icon-check",

package/lib/SelectOptionGroup/index.css

@@ -12,17 +12,23 @@
   z-index: 10001;
 }
 
-.seatable-option-group .seatable-select-search {
+.seatable-option-group-search {
+  border-bottom: 1px solid var(--bs-border-color);
+  height: 32px;
+}
+
+.seatable-option-group .seatable-option-group-search {
   width: 100%;
   min-width: 170px;
   position: relative;
+  padding: 0;
 }
 
 .seatable-option-group .none-search-result {
   height: 100px;
   width: 100%;
   padding: 8px;
-  color: var(--bs-icon-color);
+  color: var(--bs-body-secondary-color);
 }
 
 .seatable-option-group .seatable-option-group-content {

package/lib/SelectOptionGroup/index.js

@@ -30,7 +30,6 @@ class SelectOptionGroup extends _react.Component {
           this.optionGroupRef.style.top = position.y - height + 'px';
         }
         this.optionGroupRef.style.opacity = 1;
-        this.searchInputRef.current && this.searchInputRef.current.inputRef.focus();
       } else {
         if (height + top > window.innerHeight) {
           const borderWidth = 2;
@@ -80,10 +79,6 @@ class SelectOptionGroup extends _react.Component {
       if (isInModal) {
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
-
-        // ClickOutside set isClickedInside to true via mouse down capture first
-        // Set isClickedInside to false after mouse down
-        this.clickOutsideRef && this.clickOutsideRef.setClickedInsideStatus(false);
       }
     };
     this.scrollContent = () => {
@@ -176,7 +171,6 @@ class SelectOptionGroup extends _react.Component {
     };
     this.filterOptions = null;
     this.timer = null;
-    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
   }
   componentDidMount() {
     window.addEventListener('keydown', this.onHotKey);
@@ -228,7 +222,6 @@ class SelectOptionGroup extends _react.Component {
     }
     style.top = style.top + 4;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
-      ref: ref => this.clickOutsideRef = ref,
       onClickOutside: this.props.onClickOutside,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
@@ -242,15 +235,14 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-select-search",
+          className: "seatable-option-group-search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
             clearValue: this.clearSearch,
             autoFocus: true,
-            isClearable: true,
-            ref: this.searchInputRef
+            isClearable: true
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "seatable-option-group-content",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.0ahn.24",
+  "version": "7.0.0ahn.3",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",