dtable-ui-component 7.0.1-beta.2 → 7.0.1-beta.5

package/lib/AsyncUserSelect/index.css

@@ -32,10 +32,6 @@
 .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;
 }
 
@@ -68,12 +64,8 @@
   cursor: pointer;
 }
 
-.no-user-search-result {
-  color: #666666;
-  font-size: 14px;
-  padding-left: 10px;
-  padding: 10px;
-  overflow: auto;
+.dtable-ui-user-select-container .dtable-ui-user-list-container {
+  margin: 0 !important;
 }
 
 .dtable-ui-user-select-popover .popover .dtable-ui-user-item {
@@ -81,7 +73,7 @@
 }
 
 .dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
-  color: #666666;
+  color: var(--bs-icon-color);
   font-size: 14px;
 }
 

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-option-group-search",
+            className: "seatable-select-search",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
               className: "option-search-control",
               placeholder: searchPlaceholder || (0, _lang.getLocale)('Search_users'),

package/lib/DTableCustomizeSearchInput/index.css

@@ -1,4 +1,3 @@
-
 .seatable-search-input {
   width: 100%;
   padding: 6px 10px;
@@ -6,76 +5,71 @@
   position: relative;
   padding: 0;
   height: 32px;
-  border-bottom: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-secondary-color);
 }
 
-.seatable-search-input .form-control {
+.seatable-select-search {
+  border-bottom: 1px solid var(--bs-border-secondary-color);
+  height: 32px;
+}
+
+.select-search-control {
   height: 100%;
   border: none;
-  padding: .375rem 1rem;
   cursor: pointer;
+  display: block;
+  background-color: var(--bs-popover-bg);
+  font-weight: 400;
+  font-size: .875rem;
+  line-height: 1.6;
+  width: 100%;
+  padding: .375rem 1rem;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 
-.seatable-search-input-multiple .form-control:focus,
-.seatable-search-input .form-control:focus {
+.select-search-control:focus {
   outline: none;
   box-shadow: none;
-}
-
-.seatable-search-input .input-icon-addon {
-  z-index: 1;
-  pointer-events: auto;
-  min-width: 2.75rem !important;
-}
-
-.seatable-search-input .input-icon-addon svg {
-  color: var(--bs-body-secondary-color);
+  border: none;
   cursor: pointer;
+  height: 100%;
 }
 
-.seatable-search-input .none-search-result {
-  height: 100px;
-  width: 100%;
-  padding: 10px;
-  color: var(--bs-body-secondary-color);
-}
-
-
-.seatable-search-input-multiple {
-  width: 100%;
-  padding: 6px 10px;
-  min-width: 170px;
-  position: relative;
-  height: 40px;
-}
-
-.seatable-search-input-multiple .form-control {
-  height: 30px;
-  padding: .375rem 2.5rem .375rem 1rem;
+.clear-icon-x {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 20px;
+  pointer-events: auto;
+  color: var(--bs-icon-color);
+  right: 13px;
+  top: 6px;
+  z-index: 1;
+  height: 20px;
+  width: 20px;
   cursor: pointer;
+  border-radius: 3px;
 }
 
-.seatable-search-input-multiple .input-icon-addon {
-  z-index: 1;
-  pointer-events: auto;
-  min-width: 2.75rem !important;
-  top: 10px;
-  height: 30px;
-  right: 10px;
+.clear-icon-x .multicolor-icon {
+  font-size: 12px;
 }
 
-.seatable-search-input-multiple .input-icon-addon svg {
-  color: var(--bs-body-secondary-color);
-  cursor: pointer;
+.clear-icon-x:hover {
+  background-color: var(--bs-btn-background-hover);
 }
 
-.seatable-search-input-multiple .none-search-result {
+.seatable-search-input .none-search-result {
   height: 100px;
   width: 100%;
   padding: 10px;
-  color: var(--bs-body-secondary-color);
+  color: var(--bs-icon-color);
 }
 
-.multiple-selects-editor-list .seatable-search-input-multiple {
-  padding: 10px 10px 0;
+.dtable-ui-user-select-popover .select-search-control,
+.dtable-popover .select-search-control {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
 }

package/lib/DTableCustomizeSearchInput/index.js

@@ -61,10 +61,7 @@ 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)('search-text-clear input-icon-addon', clearClassName),
-        style: {
-          fontSize: '12px'
-        },
+        className: (0, _classnames.default)('clear-icon-x', clearClassName),
         onClick: this.clearSearch,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
           symbol: "close",
@@ -119,7 +116,7 @@ class DTableCustomizeSearchInput extends _react.Component {
         type: "text",
         name: "search-input",
         value: searchValue,
-        className: (0, _classnames.default)('form-control', className),
+        className: (0, _classnames.default)('select-search-control', className),
         onChange: this.onChange,
         autoFocus: autoFocus,
         placeholder: placeholder,

package/lib/DTableCustomizeSelect/index.js

@@ -11,6 +11,7 @@ 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 {
@@ -23,8 +24,8 @@ class DTableCustomizeSelect extends _react.Component {
         so it can be closed when other select is clicked.
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
-      let eventClassName = event.target.className;
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
+      const eventClassName = (0, _utils.getEventClassName)(event);
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-select-search') return;
       // Prevent closing by pressing the spacebar in the search input
       if (event.target.value === '') return;
       this.setState({
@@ -32,7 +33,7 @@ class DTableCustomizeSelect extends _react.Component {
       });
     };
     this.onClick = event => {
-      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+      if (this.props.isShowSelected && (0, _utils.getEventClassName)(event).includes('icon-fork-number')) {
         return;
       }
       if (!this.selector.contains(event.target)) {

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

@@ -8,3 +8,8 @@
   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,6 +9,7 @@ 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 = {
@@ -71,7 +72,6 @@ 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',
@@ -81,7 +81,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
     });
   },
   menuList: provided => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
-    padding: 0
+    padding: '8px'
   }),
   option: (provided, state) => {
     const isDisabled = state.isDisabled;
@@ -96,7 +96,7 @@ const MenuSelectStyle = exports.MenuSelectStyle = {
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       ':hover': {
-        backgroundColor: 'rgba(0, 0, 0, 0.04)'
+        backgroundColor: 'var(--bs-btn-background-hover)'
       },
       '.header-icon': HEADER_ICON_STYLE
     });
@@ -209,7 +209,8 @@ const Option = props => {
         width: '100%',
         whiteSpace: 'pre-line'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "seatable-option",
         children: label
       }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         className: "dtable-font dtable-icon-check",

package/lib/SelectOptionGroup/index.css

@@ -12,49 +12,17 @@
   z-index: 10001;
 }
 
-.seatable-option-group-search {
-  border-bottom: 1px solid var(--bs-border-color);
-  height: 32px;
-}
-
-.seatable-option-group .seatable-option-group-search {
+.seatable-option-group .seatable-select-search {
   width: 100%;
   min-width: 170px;
   position: relative;
-  padding: 0;
-}
-
-.seatable-option-group .seatable-option-group-search .form-control {
-  height: 100%;
-  border: none;
-  padding: .375rem 1rem;
-  cursor: pointer;
-}
-
-.seatable-option-group .seatable-option-group-search .form-control:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.seatable-option-group-search .input-icon-addon,
-.seatable-option-group .seatable-option-group-search .input-icon-addon {
-  z-index: 1;
-  pointer-events: auto;
-  min-width: 2.75rem !important;
-  width: 40px;
-  height: 32px;
-}
-
-.seatable-option-group .seatable-option-group-search .input-icon-addon svg {
-  color: var(--bs-body-secondary-color);
-  cursor: pointer;
 }
 
 .seatable-option-group .none-search-result {
   height: 100px;
   width: 100%;
   padding: 8px;
-  color: var(--bs-body-secondary-color);
+  color: var(--bs-icon-color);
 }
 
 .seatable-option-group .seatable-option-group-content {
@@ -130,6 +98,6 @@
 
 .select-label .header-icon {
   display: inline-block;
-  padding: 0 .5rem 0 0!important;
+  padding: 0 .5rem 0 0 !important;
   margin-left: 0 !important;
 }

package/lib/SelectOptionGroup/index.js

@@ -30,6 +30,7 @@ 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;
@@ -79,6 +80,10 @@ 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 = () => {
@@ -171,6 +176,7 @@ class SelectOptionGroup extends _react.Component {
     };
     this.filterOptions = null;
     this.timer = null;
+    this.searchInputRef = /*#__PURE__*/_react.default.createRef();
   }
   componentDidMount() {
     window.addEventListener('keydown', this.onHotKey);
@@ -222,6 +228,7 @@ 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 : '', {
@@ -235,14 +242,15 @@ class SelectOptionGroup extends _react.Component {
           onClick: e => e.stopPropagation(),
           children: value.label || ''
         }), searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "seatable-option-group-search",
+          className: "seatable-select-search",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
             className: "option-search-control",
             placeholder: searchPlaceholder,
             onChange: this.onChangeSearch,
             clearValue: this.clearSearch,
             autoFocus: true,
-            isClearable: true
+            isClearable: true,
+            ref: this.searchInputRef
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "seatable-option-group-content",

package/package.json

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