dtable-ui-component 6.0.110-tru.2 → 6.0.110-wer.1

package/lib/DTableCustomizeSelect/index.css

@@ -1,117 +1,88 @@
-.dtable-select {
+.seatable-customize-select {
   position: relative;
-}
-
-.dtable-select.custom-select {
   display: flex;
   padding: 0 16px;
-  border-radius: 3px;
+  border-radius: 4px;
   align-items: center;
   justify-content: space-between;
   max-width: 900px;
   user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  -ms-user-select: none;
   text-align: left;
+  line-height: 1.5;
+  background-image: none;
+  font-size: 14px;
+  color: var(--bs-body-color);
+  border: 1px solid rgba(0, 40, 100, 0.12);
 }
 
-.dtable-select.custom-select:focus,
-.dtable-select.custom-select.focus {
-  border-color: #1991eb !important;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+.seatable-customize-select:focus,
+.seatable-customize-select.focus {
+  border-color: #3E84F7 !important;
 }
 
-.dtable-select.custom-select.disabled:focus,
-.dtable-select.custom-select.focus.disabled,
-.dtable-select.custom-select.disabled:hover {
+.seatable-customize-select.disabled:focus,
+.seatable-customize-select.focus.disabled,
+.seatable-customize-select.disabled:hover {
   border-color: rgba(0, 40, 100, 0.12) !important;
   box-shadow: unset;
   cursor: default;
 }
 
-.dtable-select.custom-select:hover {
+.seatable-customize-select:hover {
   cursor: pointer;
-  border-color: rgb(179, 179, 179);
+  border-color: var(--bs-border-color);
 }
 
-.dtable-select .dtable-icon-down3 {
-  display: inline-block;
-  font-size: 12px;
-  color: #666666;
-  transition: all 0.1s;
+.seatable-customize-select .seatable-multicolor-icon-down {
+  width: 12px;
+  height: 12px;
+  color: var(--bs-icon-color);
 }
 
-.dtable-select .selected-option {
+.seatable-customize-select .selected-option {
   display: flex;
   flex: 1;
   overflow: hidden;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: space-between;
-  background: #fff;
+  background: inherit;
 }
 
-.dtable-select.dtable-ui-collaborator-selector .option-group .option-group-content,
-.dtable-select.selector-group .option-group .option-group-content {
+.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content,
+.seatable-customize-select.selector-group .seatable-option-group .seatable-option-group-content {
   padding: 10px;
 }
 
-.dtable-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
+.seatable-customize-select.dtable-ui-collaborator-selector .seatable-option-group .seatable-option-group-content {
   padding: 10px 0;
 }
 
-.dtable-select.custom-select.dtable-ui-collaborator-selector .option {
+.seatable-customize-select.dtable-ui-collaborator-selector .option {
   padding: 5px 0 5px 10px !important;
   line-height: 20px;
 }
 
-.dtable-select.selector-group .option {
+.seatable-customize-select.selector-group .option {
   height: 30px;
   display: flex;
   align-items: center;
 }
 
-.dtable-select.selector-group .select-group-option {
+.seatable-customize-select.selector-group .select-group-option {
   justify-content: space-between;
 }
 
-.dtable-select.selector-group .selected-option .selected-group {
+.seatable-customize-select.selector-group .selected-option .selected-group {
   padding: 0 2px;
   background: #eceff4;
   border-radius: 3px;
 }
 
-.dtable-select .selected-option-show {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 
-.dtable-select .select-placeholder {
+.seatable-customize-select .select-placeholder {
   line-height: 1;
   font-size: 14px;
   white-space: nowrap;
-}
-
-.option-group .option-group-selector-multiple-select .option-group-search,
-.option-group .option-group-selector-single-select .option-group-search {
-  padding: 0 0 8px 0 !important;
-}
-
-.option-group-selector-multiple-select .form-control,
-.option-group-selector-single-select .form-control {
-  border: none;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
-  border-radius: 4px 4px 0 0;
-  padding: .375rem .5rem !important;
-  height: 32px;
-}
-
-.option-group-selector-multiple-select .form-control:focus,
-.option-group-selector-single-select .form-control:focus {
-  border-color: transparent !important;
-  border-bottom: 1px solid rgb(0 40 100 / 12%) !important;
-  box-shadow: none !important;
+  color: #868E96;
 }

package/lib/DTableCustomizeSelect/index.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
 var _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
+var _util = require("./util");
 require("./index.css");
 var _jsxRuntime = require("react/jsx-runtime");
 class DTableCustomizeSelect extends _react.Component {
@@ -23,8 +24,8 @@ class DTableCustomizeSelect extends _react.Component {
       */
       if (this.state.isShowSelectOptions) event.stopPropagation();
       let eventClassName = event.target.className;
-      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'option-group-search') return;
-      // Prevent closing by pressing the spacebar in the search input
+      if (this.props.isLocked || eventClassName.indexOf('option-search-control') > -1 || eventClassName === 'seatable-option-group-search') return;
+      // Prevent closing by pressing the space bar in the search input
       if (event.target.value === '') return;
       this.setState({
         isShowSelectOptions: !this.state.isShowSelectOptions
@@ -83,7 +84,7 @@ class DTableCustomizeSelect extends _react.Component {
     };
   }
   render() {
-    let {
+    const {
       className,
       value,
       options,
@@ -93,17 +94,19 @@ class DTableCustomizeSelect extends _react.Component {
       noOptionsPlaceholder,
       isLocked,
       isInModal,
-      addOptionAble,
       component
     } = this.props;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      tabIndex: "0",
+      role: "button",
       ref: node => this.selector = node,
-      className: (0, _classnames.default)('dtable-select custom-select', {
+      className: (0, _classnames.default)('seatable-customize-select custom-select', {
         'focus': this.state.isShowSelectOptions
       }, {
         'disabled': isLocked
       }, className),
       onClick: this.onSelectToggle,
+      onKeyDown: _util.onKeyDown,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "selected-option",
         children: [value && value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -115,9 +118,8 @@ class DTableCustomizeSelect extends _react.Component {
         }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
           className: "dtable-font dtable-icon-down3"
         })]
-      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
+      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
         value: value,
-        addOptionAble: addOptionAble,
         component: component,
         isShowSelected: this.props.isShowSelected,
         top: this.getSelectedOptionTop(),
@@ -131,10 +133,9 @@ class DTableCustomizeSelect extends _react.Component {
         getFilterOptions: this.getFilterOptions,
         supportMultipleSelect: this.props.supportMultipleSelect
       }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
           className: className,
           value: value,
-          addOptionAble: addOptionAble,
           component: component,
           isShowSelected: this.props.isShowSelected,
           position: this.selector.getBoundingClientRect(),

package/lib/DTableCustomizeSelect/select-option-group/KeyCodes.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const KeyCodes = {
+  Backspace: 8,
+  Tab: 9,
+  Enter: 13,
+  Shift: 16,
+  Ctrl: 17,
+  Alt: 18,
+  PauseBreak: 19,
+  CapsLock: 20,
+  Escape: 27,
+  Esc: 27,
+  Space: 32,
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40,
+  Insert: 45,
+  Delete: 46,
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  LeftWindowKey: 91,
+  RightWindowKey: 92,
+  SelectKey: 93,
+  NumPad0: 96,
+  NumPad1: 97,
+  NumPad2: 98,
+  NumPad3: 99,
+  NumPad4: 100,
+  NumPad5: 101,
+  NumPad6: 102,
+  NumPad7: 103,
+  NumPad8: 104,
+  NumPad9: 105,
+  Multiply: 106,
+  Add: 107,
+  Subtract: 109,
+  DecimalPoint: 110,
+  Divide: 111,
+  F1: 112,
+  F2: 113,
+  F3: 114,
+  F4: 115,
+  F5: 116,
+  F6: 117,
+  F7: 118,
+  F8: 119,
+  F9: 120,
+  F10: 121,
+  F12: 123,
+  NumLock: 144,
+  ScrollLock: 145,
+  SemiColon: 186,
+  EqualSign: 187,
+  Comma: 188,
+  Dash: 189,
+  Period: 190,
+  ForwardSlash: 191,
+  GraveAccent: 192,
+  OpenBracket: 219,
+  BackSlash: 220,
+  CloseBracket: 221,
+  SingleQuote: 222,
+  ChineseInputMethod: 229
+};
+var _default = exports.default = KeyCodes;

package/lib/DTableCustomizeSelect/select-option-group/index.css

@@ -0,0 +1,130 @@
+.seatable-option-group {
+  position: absolute;
+  left: 0;
+  min-height: 60px;
+  max-height: 300px;
+  min-width: 100%;
+  max-width: 15rem;
+  box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.1);
+  background: var(--bs-popover-bg);
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 4px;
+  z-index: 10001;
+}
+
+.seatable-option-group .seatable-option-group-search {
+  width: 100%;
+  padding: 6px 10px;
+  min-width: 170px;
+  position: relative;
+  padding: 0;
+  height: 32px;
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.seatable-option-group .seatable-option-group-search .form-control {
+  height: 31px;
+  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 .seatable-option-group-search .input-icon-addon {
+  z-index: 1;
+  pointer-events: auto;
+  min-width: 2.5rem !important;
+}
+
+.seatable-option-group .seatable-option-group-search .input-icon-addon svg {
+  color: #999;
+  cursor: pointer;
+}
+
+.seatable-option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 10px;
+  color: var(--bs-body-secondary-color);
+}
+
+.seatable-option-group .seatable-option-group-content {
+  max-height: 252px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.seatable-select-option {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  line-height: 24px;
+  padding: 0.25rem 10px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 4px;
+}
+
+.seatable-select-option.seatable-select-option-active {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+/* .seatable-select-option .seatable-multicolor-icon-tick {
+  right: 10px;
+  position: absolute;
+  color: inherit;
+}
+
+.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .seatable-multicolor-icon {
+  fill: #aaa;
+}
+
+.seatable-select-option:not(.seatable-select-option-active):hover .header-icon .sf2-icon-tick {
+  color: #aaa;
+} */
+
+.seatable-select-option .select-option-name .single-select-option {
+  margin: 0 0 0 12px;
+}
+
+.seatable-select-option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.seatable-option-group-selector-single-select .select-option-name,
+.seatable-option-group-selector-multiple-select .multiple-option-name {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.seatable-option-group-selector-multiple-select .multiple-check-icon {
+  display: inline-flex;
+  width: 20px;
+  text-align: center;
+}
+
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.seatable-option-group-selector-single-select .seatable-select-option:hover,
+.seatable-option-group-selector-single-select .seatable-select-option.seatable-select-option-active,
+.seatable-option-group-selector-multiple-select .seatable-select-option:hover,
+.seatable-option-group-selector-multiple-select .seatable-select-option.seatable-select-option-active {
+  background-color: #f5f5f5;
+}