dtable-ui-component 6.0.124 → 6.0.125-vjs.3

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,46 @@
 }
 
 .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 0 .375rem 1rem;
+  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: var(--bs-icon-color);
+  font-size: 14px;
 }

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,28 +13,25 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 0.25rem 8px;
+  border-radius: 4px;
 }
 
-.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 .select-option-name .multiple-select-option {
   margin: 0;
 }

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _DTableSearchInput = _interopRequireDefault(require("../DTableSearchInput"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../DTableCustomizeSearchInput"));
 var _option = _interopRequireDefault(require("./option"));
 var _KeyCodes = _interopRequireDefault(require("../SelectOptionGroup/KeyCodes"));
 require("./select-option-group.css");
@@ -152,7 +152,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 +207,26 @@ 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",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableSearchInput.default, {
-          className: "option-search-control",
+      children: [this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "seatable-search-input",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableCustomizeSearchInput.default, {
           placeholder: searchPlaceholder,
           onChange: this.onChangeSearch,
-          ref: this.searchInputRef
+          autoFocus: true,
+          value: searchVal,
+          clearValue: this.clearValue,
+          isClearable: true,
+          isLeftIcon: true
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "option-group-content",

package/lib/DTableSelect/index.js

@@ -40,10 +40,11 @@ class DTableSelect extends _react.default.Component {
       MenuList: _utils.MenuList,
       ClearIndicator: _utils.ClearIndicator
     }, userComponents);
+    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),
+      options: processedOptions,
       isMulti: isMulti,
       className: className,
       classNamePrefix: classNamePrefix,
@@ -51,7 +52,6 @@ class DTableSelect extends _react.default.Component {
       components: mergedComponents,
       placeholder: placeholder,
       isSearchable: isSearchable,
-      isClearable: isClearable,
       menuPosition: menuPosition || 'fixed' // when use default menuPosition(absolute), menuPortalTarget is unnecessary.
       ,
       menuShouldScrollIntoView: true,

package/lib/DTableSelect/select-dropdown-indicator/index.css

@@ -0,0 +1,16 @@
+.select-dropdown-indicator {
+  position: absolute;
+  top: 50%;
+  right: 18px;
+  transform: translateY(-50%);
+  margin-left: -2px;
+}
+
+.select-dropdown-indicator svg {
+  width: 12px;
+  height: 12px;
+}
+
+.dis-multicolor-icon-down {
+  opacity: 0.65 !important;
+}

package/lib/DTableSelect/select-dropdown-indicator/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DTableIcon = _interopRequireDefault(require("../../DTableIcon"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const SelectDropdownIndicator = _ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: "select-dropdown-indicator d-flex align-items-center",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DTableIcon.default, {
+      symbol: "down",
+      color: "var(--bs-icon-color)",
+      className: isDisabled ? 'dis-multicolor-icon-down' : ''
+    })
+  });
+};
+var _default = exports.default = SelectDropdownIndicator;

package/lib/DTableSelect/select-style.js

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSelectStyle = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+const DEFAULT_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 1rem 0 .5rem',
+  border: '1px solid var(--bs-border-color) !important',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
+};
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  padding: '0 1rem 0 .5rem',
+  border: '1px solid #3e84f7',
+  boxShadow: 'none',
+  backgroundColor: 'var(--bs-popover-bg)',
+  borderRadius: '4px',
+  outline: '0'
+};
+const controlCallback = (provided, state) => {
+  const {
+    isDisabled,
+    isFocused
+  } = state;
+  if (isDisabled) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), DEFAULT_CONTROL_STYLE), {}, {
+      cursor: 'default',
+      backgroundColor: '#f5f5f5',
+      opacity: 0.65
+    });
+  }
+  if (isFocused) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE), {}, {
+      '&:hover': (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), FOCUS_CONTROL_STYLE)
+    });
+  }
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    fontSize: '14px',
+    lineHeight: '1.5',
+    cursor: 'pointer'
+  }, DEFAULT_CONTROL_STYLE), {}, {
+    '&:hover': (0, _objectSpread2.default)({}, DEFAULT_CONTROL_STYLE)
+  });
+};
+const MenuSelectStyle = exports.MenuSelectStyle = {
+  // .react-select__menu / react-select-2-listbox
+  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',
+      boxShadow: '0px 6px 14px rgba(0, 0, 0, 0.1)',
+      marginTop: '4px',
+      marginBottom: 0
+    });
+  },
+  option: (provided, state) => {
+    const {
+      isDisabled,
+      isFocused,
+      isActive,
+      isVisited
+    } = state;
+    let bgColor;
+    if (isActive || isVisited) {
+      bgColor = 'rgba(0, 0, 0, 0.06)';
+    } else if (isFocused) {
+      bgColor = 'rgba(0, 0, 0, .04)';
+    } else {
+      bgColor = 'var(--bs-popover-bg)';
+    }
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)',
+      borderRadius: '4px',
+      minHeight: '32px',
+      padding: '6px 8px 6px 8px',
+      cursor: isDisabled ? 'default' : 'pointer',
+      backgroundColor: "".concat(bgColor, " !important")
+    });
+  },
+  control: controlCallback,
+  menuPortal: base => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+    zIndex: 9999,
+    backgroundColor: 'var(--bs-popover-bg)',
+    color: 'var(--bs-body-color)',
+    borderColor: 'var(--bs-border-secondary-color)'
+  }),
+  singleValue: provided => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)'
+    });
+  },
+  multiValue: provided => {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: 'var(--bs-body-color)'
+    });
+  },
+  multiValueRemove: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    color: '#909090',
+    ':hover': {
+      backgroundColor: 'transparent',
+      color: 'var(--bs-icon-color)'
+    }
+  }),
+  input: styles => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles), {}, {
+    color: 'var(--bs-body-color)'
+  }),
+  placeholder: (provided, state) => {
+    const {
+      isDisabled
+    } = state;
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+      color: '#868e96',
+      opacity: isDisabled ? 0.65 : 1
+    });
+  },
+  indicatorSeparator: (styles, state) => {
+    return {
+      'display': 'none'
+    };
+  },
+  indicatorContainer: (provided, state) => (0, _objectSpread2.default)((0, _objectSpread2.default)({}, provided), {}, {
+    padding: 0
+  })
+};

package/lib/DTableSelect/user-select.css

@@ -1,51 +1,12 @@
-.user-select .select-module-container {
-  display: flex;
-  align-items: center;
+/* hide checkbox in select value container */
+.seatable-select-value-container .seatable-multicolor-icon-check {
+  display: none;
 }
 
-.user-select .select-module.select-module-avatar {
-  height: 24px;
-  width: 24px;
-  border-radius: 50%;
+.seatable-select-value-container .select-option-label {
+  font-size: 14px !important;
 }
 
-.user-select .select-module.select-module-name {
-  color: #212529;
-  font-size: 14px;
-}
-
-.user-select .true__value-container .select-module-container {
-  display: block;
-}
-
-.user-select .true__value-container .select-module.select-module-avatar {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-}
-
-.user-select .true__value-container .true__multi-value__label {
-  padding: 0px;
-}
-
-.user-select .true__value-container .true__multi-value__label .select-module.select-module-avatar {
-  transform: translateY(-2px);
-}
-
-.user-select .true__value-container .select-module.select-module-name {
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1 1;
-  line-height: 20px;
-  margin-left: 5px;
-}
-
-.user-select .true__control.true__control--is-focused,
-.user-select .true__control.true__control--is-focused:hover {
-  background-color: #ffffff;
-  border-color: #1991eb;
-  outline: 0;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+.seatable-check-color {
+  color: var(--bs-icon-secondary-color);
 }