dtable-ui-component 6.0.125 → 6.0.126-beta.s1

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,134 @@
+.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;
+  margin-top: 4px;
+}
+
+.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 .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: #999;
+  cursor: pointer;
+}
+
+.seatable-option-group .none-search-result {
+  height: 100px;
+  width: 100%;
+  padding: 8px;
+  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 8px;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 4px;
+  height: 32px;
+}
+
+.seatable-select-option.seatable-select-option-active {
+  cursor: pointer;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.seatable-select-option .select-option-name .multiple-select-option {
+  margin: 0;
+}
+
+.seatable-option-group .dtable-icon-check {
+  color: var(--bs-icon-color);
+}
+
+.select-label {
+  width: 100%;
+}
+
+.seatable-option-group-selector-multiple-select .select-label,
+.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;
+  width: 100%;
+}
+
+.seatable-option-group-selector-multiple-select .multiple-check-icon {
+  display: inline-flex;
+  text-align: center;
+  color: var(--bs-icon-color);
+}
+
+.seatable-option-group-selector-multiple-select .multiple-check-icon .dtable-icon-check {
+  font-size: 14px;
+}
+
+.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;
+}
+
+.select-label .header-icon {
+  display: inline-block;
+  padding: 0 .5rem 0 0!important;
+  margin-left: 0 !important;
+}

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

@@ -0,0 +1,260 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ClickOutside = _interopRequireDefault(require("../../ClickOutside"));
+var _DTableCustomizeSearchInput = _interopRequireDefault(require("../../DTableCustomizeSearchInput"));
+var _option = _interopRequireDefault(require("./option"));
+var _KeyCodes = _interopRequireDefault(require("./KeyCodes"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+const OPTION_HEIGHT = 32;
+class SelectOptionGroup extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.resetMenuStyle = () => {
+      const {
+        isInModal,
+        position
+      } = this.props;
+      const {
+        top,
+        height
+      } = this.optionGroupRef.getBoundingClientRect();
+      if (isInModal) {
+        if (position.y + position.height + height > window.innerHeight) {
+          this.optionGroupRef.style.top = position.y - height + 'px';
+        }
+        this.optionGroupRef.style.opacity = 1;
+      } else {
+        if (height + top > window.innerHeight) {
+          const borderWidth = 2;
+          this.optionGroupRef.style.top = -1 * (height + borderWidth) + 'px';
+        }
+      }
+    };
+    this.onHotKey = event => {
+      const keyCode = event.keyCode;
+      if (keyCode === _KeyCodes.default.UpArrow) {
+        this.onPressUp();
+      } else if (keyCode === _KeyCodes.default.DownArrow) {
+        this.onPressDown();
+      } else if (keyCode === _KeyCodes.default.Enter) {
+        let option = this.filterOptions && this.filterOptions[this.state.activeIndex];
+        if (option) {
+          this.props.onSelectOption(option.value);
+          if (!this.props.supportMultipleSelect) {
+            this.props.closeSelect();
+          }
+        }
+      } else if (keyCode === _KeyCodes.default.Tab || keyCode === _KeyCodes.default.Escape) {
+        this.props.closeSelect();
+      }
+    };
+    this.onPressUp = () => {
+      if (this.state.activeIndex > 0) {
+        this.setState({
+          activeIndex: this.state.activeIndex - 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.onPressDown = () => {
+      if (this.filterOptions && this.state.activeIndex < this.filterOptions.length - 1) {
+        this.setState({
+          activeIndex: this.state.activeIndex + 1
+        }, () => {
+          this.scrollContent();
+        });
+      }
+    };
+    this.onMouseDown = e => {
+      const {
+        isInModal
+      } = this.props;
+      // prevent event propagation when click option or search input
+      if (isInModal) {
+        e.stopPropagation();
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    };
+    this.scrollContent = () => {
+      const {
+        offsetHeight,
+        scrollTop
+      } = this.optionGroupContentRef;
+      this.setState({
+        disableHover: true
+      });
+      this.timer = setTimeout(() => {
+        this.setState({
+          disableHover: false
+        });
+      }, 500);
+      if (this.state.activeIndex * OPTION_HEIGHT === 0) {
+        this.optionGroupContentRef.scrollTop = 0;
+        return;
+      }
+      if (this.state.activeIndex * OPTION_HEIGHT < scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop - OPTION_HEIGHT;
+      } else if (this.state.activeIndex * OPTION_HEIGHT > offsetHeight + scrollTop) {
+        this.optionGroupContentRef.scrollTop = scrollTop + OPTION_HEIGHT;
+      }
+    };
+    this.changeIndex = index => {
+      this.setState({
+        activeIndex: index
+      });
+    };
+    this.onChangeSearch = searchVal => {
+      let value = searchVal || '';
+      if (value !== this.state.searchVal) {
+        this.setState({
+          searchVal: value,
+          activeIndex: -1
+        });
+      }
+    };
+    this.clearSearch = () => {
+      this.setState({
+        searchVal: '',
+        activeIndex: -1
+      });
+    };
+    this.renderOptGroup = searchVal => {
+      let {
+        noOptionsPlaceholder,
+        onSelectOption,
+        value
+      } = this.props;
+      this.filterOptions = this.props.getFilterOptions(searchVal);
+      if (this.filterOptions.length === 0) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "none-search-result",
+          children: noOptionsPlaceholder
+        });
+      }
+      return this.filterOptions.map((opt, i) => {
+        let key = opt.value.column ? opt.value.column.key : i;
+        let isActive = this.state.activeIndex === i;
+        let isSelected = false;
+        if (value) {
+          // Handle both single value and array of values
+          if (Array.isArray(value.value)) {
+            isSelected = value.value.includes(opt.value);
+          } else {
+            isSelected = opt.value === value.value || JSON.stringify(opt.value) === JSON.stringify(value.value);
+          }
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_option.default, {
+          index: i,
+          isActive: isActive,
+          value: opt.value,
+          onSelectOption: onSelectOption,
+          changeIndex: this.changeIndex,
+          supportMultipleSelect: this.props.supportMultipleSelect,
+          disableHover: this.state.disableHover,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "select-label",
+            children: opt.label
+          }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+            className: "dtable-font dtable-icon-check seatable-check-color"
+          })]
+        }, key);
+      });
+    };
+    this.state = {
+      searchVal: '',
+      activeIndex: -1,
+      disableHover: false
+    };
+    this.filterOptions = null;
+    this.timer = null;
+  }
+  componentDidMount() {
+    window.addEventListener('keydown', this.onHotKey);
+    setTimeout(() => {
+      this.resetMenuStyle();
+    }, 1);
+  }
+  componentWillUnmount() {
+    this.filterOptions = null;
+    this.timer && clearTimeout(this.timer);
+    window.removeEventListener('keydown', this.onHotKey);
+  }
+  render() {
+    const {
+      searchable,
+      searchPlaceholder,
+      top,
+      left,
+      minWidth,
+      value,
+      isShowSelected,
+      isInModal,
+      position,
+      className
+    } = this.props;
+    let {
+      searchVal
+    } = this.state;
+    let style = {
+      top: top || 0,
+      left: left || 0
+    };
+    if (minWidth) {
+      style = {
+        top: top || 0,
+        left: left || 0,
+        minWidth
+      };
+    }
+    if (isInModal) {
+      style = {
+        position: 'fixed',
+        left: position.x,
+        top: position.y + position.height,
+        minWidth: position.width,
+        opacity: 0
+      };
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickOutside.default, {
+      onClickOutside: this.props.onClickOutside,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('seatable-option-group', className ? 'seatable-option-group-' + className : '', {
+          'pt-0': isShowSelected
+        }),
+        ref: ref => this.optionGroupRef = ref,
+        style: style,
+        onMouseDown: this.onMouseDown,
+        children: [isShowSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "editor-list-delete mb-2",
+          onClick: e => e.stopPropagation(),
+          children: value.label || ''
+        }), searchable && this.props.options && this.props.options.length > 10 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          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
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "seatable-option-group-content",
+          ref: ref => this.optionGroupContentRef = ref,
+          children: this.renderOptGroup(searchVal)
+        })]
+      })
+    });
+  }
+}
+var _default = exports.default = SelectOptionGroup;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+class Option extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectOption = event => {
+      if (this.props.supportMultipleSelect) {
+        event.stopPropagation();
+      }
+      this.props.onSelectOption(this.props.value, event);
+    };
+    this.onMouseEnter = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(this.props.index);
+      }
+    };
+    this.onMouseLeave = () => {
+      if (!this.props.disableHover) {
+        this.props.changeIndex(-1);
+      }
+    };
+  }
+  render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)('seatable-select-option', {
+        'seatable-select-option-active': this.props.isActive
+      }),
+      tabIndex: "0",
+      role: "menuitem",
+      onClick: this.onSelectOption,
+      onKeyDown: _util.onKeyDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      children: this.props.children
+    });
+  }
+}
+var _default = exports.default = Option;

package/lib/DTableCustomizeSelect/util.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onKeyDown = void 0;
+const onKeyDown = e => {
+  if (e.key === 'Enter' || e.key === 'Space') {
+    e.target.click();
+  }
+};
+exports.onKeyDown = onKeyDown;

package/lib/DTableFiltersPopover/utils/filter-item-utils.js

@@ -107,7 +107,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "single-select-check-icon",
           children: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) === option.id && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })
@@ -132,7 +132,7 @@ class FilterItemUtils {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "multiple-check-icon",
           children: filterTerm.indexOf(option.id) > -1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "option-edit dtable-font dtable-icon-check-mark"
+            className: "option-edit dtable-font dtable-icon-check"
           })
         })]
       })

package/lib/DTableFiltersPopover/widgets/collaborator-filter/index.js

@@ -49,7 +49,7 @@ class CollaboratorFilter extends _react.Component {
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: "collaborator-check-icon",
                 children: isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-                  className: "option-edit dtable-font dtable-icon-check-mark"
+                  className: "option-edit dtable-font dtable-icon-check"
                 })
               })]
             })

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: var(--bs-icon-secondary-color);
   cursor: default;
 }
 
 .option.option-active .filter-header-icon .dtable-font,
 .option.option-active .filter-header-icon .multicolor-icon {
-  color: #fff;
+  color: var(--bs-icon-secondary-color);
 }
 
 .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,44 @@
 }
 
 .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: var(--bs-icon-color);
+  font-size: 12px;
+  margin-right: 6px;
+}
+
+.seatable-group-select .option-group-search {
+  padding: 0 !important;
+}
+
+.seatable-group-select .form-control {
+  border: none;
+  border-radius: 4px 4px 0 0;
+  padding: .375rem 0 .375rem 1rem;
+  height: 100%;
+}
+
+.seatable-group-select .form-control:focus {
+  border-color: transparent !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,12 +86,12 @@ 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
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-              className: "dtable-font dtable-icon-x ml-1",
+              className: "dtable-font dtable-icon-x",
               onClick: () => {
                 this.props.onDeleteOption(item);
               }