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

package/lib/utils/url.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
-var _dtableUtils = require("dtable-utils");
+exports.needUseThumbnailImage = exports.isTargetUrl = exports.isInternalURL = exports.isInternalImg = exports.isDigitalSignsUrl = exports.isCustomAssetUrl = exports.isBase64 = exports.isAIUrl = exports.imageCheck = exports.getValidFileImageUrls = exports.getImageThumbnailUrl = exports.getFileThumbnailInfo = exports.getFileSuffix = exports.getFileName = exports.getFileIconUrl = exports.generateCurrentBaseImageUrl = exports.generateCurrentBaseImageThumbnailUrl = exports.checkSVGImage = exports.checkImgExists = void 0;
 var _file = require("../constants/file");
 const isTargetUrl = (target, url) => {
   if (!url || typeof url !== 'string') return false;
@@ -96,6 +95,32 @@ const generateCurrentBaseImageUrl = _ref2 => {
   return "".concat(validServer, "/workspace/").concat(workspaceID, "/asset/").concat(dtableUuid).concat(partUrl);
 };
 exports.generateCurrentBaseImageUrl = generateCurrentBaseImageUrl;
+const getImageThumbnailUrl = function (url) {
+  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    server = _ref3.server,
+    dtableUuid = _ref3.dtableUuid,
+    workspaceID = _ref3.workspaceID,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 256 : _ref3$size;
+  if (!url || typeof url !== 'string') return '';
+  if (server && dtableUuid && isCustomAssetUrl(url)) {
+    const assetUuid = url.slice(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
+    return server + '/dtable/' + dtableUuid + '/custom-asset-thumbnail/' + assetUuid + '?size=' + size;
+  }
+  if (isAIUrl(url) || checkSVGImage(url) || !isInternalImg(url) || isBase64(url)) return url;
+  if (server && workspaceID && dtableUuid && isDigitalSignsUrl(url)) {
+    return generateCurrentBaseImageThumbnailUrl({
+      server,
+      workspaceID,
+      dtableUuid,
+      size,
+      partUrl: url
+    });
+  }
+  if (url.includes('/thumbnail/workspace')) return url;
+  return url.replace('/workspace', '/thumbnail/workspace') + '?size=' + size;
+};
+exports.getImageThumbnailUrl = getImageThumbnailUrl;
 const getFileName = url => {
   if (!url) return null;
   let validUrl = url;
@@ -120,9 +145,9 @@ const imageCheck = filename => {
 };
 exports.imageCheck = imageCheck;
 const isInternalURL = function (url) {
-  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$server = _ref3.server,
-    server = _ref3$server === void 0 ? '' : _ref3$server;
+  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref4$server = _ref4.server,
+    server = _ref4$server === void 0 ? '' : _ref4$server;
   if (!url || typeof url !== 'string') return false;
   return server && url.indexOf(server) > -1;
 };
@@ -157,10 +182,10 @@ const getFileIconUrl = (filename, direntType) => {
 };
 exports.getFileIconUrl = getFileIconUrl;
 const getFileThumbnailInfo = function (file) {
-  let _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    server = _ref4.server,
-    dtableUuid = _ref4.dtableUuid,
-    workspaceID = _ref4.workspaceID;
+  let _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    server = _ref5.server,
+    dtableUuid = _ref5.dtableUuid,
+    workspaceID = _ref5.workspaceID;
   const defaultIcon = _file.FILEEXT_ICON_MAP['default'];
   const defaultIconUrl = _file.FILEEXT_ICON_URL_MAP[defaultIcon];
   if (!file || !file.name) return {
@@ -170,7 +195,7 @@ const getFileThumbnailInfo = function (file) {
   const isImage = imageCheck(file.name);
   if (isImage && server) return {
     isImage,
-    fileIconUrl: (0, _dtableUtils.getImageThumbnailUrl)(file.url, {
+    fileIconUrl: getImageThumbnailUrl(file.url, {
       server,
       dtableUuid,
       workspaceID

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "7.0.1-beta.1",
+  "version": "7.0.1-beta.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "5.0.9",
@@ -8,7 +8,7 @@
     "@seafile/seafile-editor": "^3.0.34",
     "classnames": "~2.5.*",
     "dayjs": "1.10.7",
-    "dtable-utils": "5.0.32-beta.2",
+    "dtable-utils": "~5.0.27",
     "is-hotkey": "0.2.0",
     "rc-checkbox": "3.5.0",
     "react-color": "2.19.3",

package/lib/DTableCustomizeCollaboratorSelect/index.css

@@ -1,86 +0,0 @@
-.dtable-customize-collaborator-select.dtable-select {
-  position: unset;
-}
-
-.dtable-customize-collaborator-select .collaborator-avatar {
-  width: 16px;
-  height: 16px;
-  transform: translateY(-1px);
-}
-
-.dtable-customize-collaborator-select .selected-option-show {
-  width: calc(100% - 20px);
-  height: 20px;
-}
-
-.dtable-customize-collaborator-select .selected-option {
-  width: auto;
-  overflow-x: auto;
-}
-
-.dtable-customize-collaborator-select .dtable-icon-down3 {
-  margin-left: .5rem;
-}
-
-.dtable-customize-collaborator-select .option-collaborator {
-  display: flex;
-}
-
-.dtable-customize-collaborator-select .collaborator-container {
-  flex: 1 1;
-}
-
-.dtable-customize-collaborator-select .editor-list-delete .collaborator-container {
-  flex: 1 1;
-  display: inline;
-}
-
-.dtable-customize-collaborator-select .multiple-check-icon {
-  display: inline-flex;
-  width: 20px;
-  text-align: center;
-}
-
-.dtable-customize-collaborator-select .collaborator-check-icon .dtable-icon-check-mark,
-.dtable-customize-collaborator-select .multiple-check-icon .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
-}
-
-.dtable-customize-collaborator-select.dtable-select .option-active,
-.dtable-customize-collaborator-select.dtable-select .option:hover {
-  color: #212529;
-  background-color: #f5f5f5;
-}
-
-.dtable-customize-collaborator-select.dtable-select .option.option-active .select-option-name {
-  color: #212529;
-}
-
-.collaborator-select .option-group-content .collaborator,
-.dtable-customize-collaborator-select .option-group .option-group-content .collaborator {
-  background: none;
-}
-
-.dtable-customize-collaborator-select .collaborator-avatar-container {
-  width: 16px;
-}
-
-.dtable-customize-collaborator-select .option-group-content .remove-container {
-  display: none;
-}
-
-.dtable-customize-collaborator-select .collaborator-container {
-  display: flex;
-  justify-content: space-between;
-}
-
-.collaborator-container .collaborator-name {
-  margin-left: 5px;
-  max-width: 200px;
-  color: #212529;
-}
-
-.collaborator-select .option-group {
-  max-height: fit-content;
-}

package/lib/DTableCustomizeCollaboratorSelect/index.js

@@ -1,158 +0,0 @@
-"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 _reactstrap = require("reactstrap");
-var _dtableUtils = require("dtable-utils");
-var _SelectOptionGroup = _interopRequireDefault(require("../SelectOptionGroup"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-class CollaboratorSelect extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onSelectToggle = event => {
-      event.preventDefault();
-      /*
-        if select is showing, click events do not need to be monitored by other click events,
-        so it can be closed when other select is clicked.
-      */
-      if (this.state.isShowSelectOptions) event.nativeEvent.stopImmediatePropagation();
-      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 (event.target.value === '') return;
-      this.selectedOptionWidth = this.selectedOptionRef.clientWidth;
-      this.setState({
-        isShowSelectOptions: !this.state.isShowSelectOptions
-      });
-    };
-    this.onMousedown = event => {
-      const name = event.target.className;
-      if (name === 'select-placeholder' || name.includes('icon-fork-number')) {
-        return;
-      }
-      if (!this.selector.contains(event.target)) {
-        this.closeSelect();
-      }
-    };
-    this.closeSelect = () => {
-      this.setState({
-        isShowSelectOptions: false
-      });
-    };
-    this.getFilterOptions = searchValue => {
-      const _this$props = this.props,
-        options = _this$props.options,
-        searchable = _this$props.searchable;
-      if (!searchable) return options || [];
-      return (0, _dtableUtils.searchCollaborators)(options, searchValue);
-    };
-    this.renderOptionGroup = () => {
-      const _this$props2 = this.props,
-        value = _this$props2.value,
-        options = _this$props2.options,
-        searchable = _this$props2.searchable,
-        searchPlaceholder = _this$props2.searchPlaceholder,
-        noOptionsPlaceholder = _this$props2.noOptionsPlaceholder,
-        top = _this$props2.top,
-        left = _this$props2.left,
-        isUsePopover = _this$props2.isUsePopover;
-      if (!isUsePopover) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
-          value: value,
-          top: top,
-          left: left,
-          minWidth: this.btnWidth + 8 // 8px is padding
-          ,
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchable: searchable,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions,
-          supportMultipleSelect: this.props.supportMultipleSelect,
-          stopClickEvent: true,
-          isShowSelected: true
-        });
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactstrap.Popover, {
-        placement: "bottom",
-        isOpen: true,
-        target: this.id,
-        fade: false,
-        hideArrow: true,
-        className: "dtable-customize-collaborator-select dtable-select",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectOptionGroup.default, {
-          value: value,
-          top: top,
-          left: left,
-          minWidth: this.btnWidth + 8 // 8px is padding
-          ,
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchable: searchable,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions,
-          supportMultipleSelect: this.props.supportMultipleSelect,
-          stopClickEvent: true,
-          isShowSelected: true
-        })
-      });
-    };
-    this.state = {
-      isShowSelectOptions: false
-    };
-    this.id = 'collaborator-select-' + Math.trunc(Math.random() * 10000);
-  }
-  componentDidMount() {
-    document.addEventListener('mousedown', this.onMousedown);
-    this.btnWidth = this.selector.clientWidth;
-  }
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onMousedown);
-  }
-  render() {
-    let _this$props3 = this.props,
-      className = _this$props3.className,
-      value = _this$props3.value,
-      placeholder = _this$props3.placeholder,
-      isLocked = _this$props3.isLocked;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-      ref: node => this.selector = node,
-      className: (0, _classnames.default)('dtable-select custom-select collaborator-select', {
-        'focus': this.state.isShowSelectOptions
-      }, {
-        'disabled': isLocked
-      }, className),
-      id: this.id,
-      onClick: this.onSelectToggle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "selected-option",
-        ref: node => this.selectedOptionRef = node,
-        children: [value.label ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "selected-option-show",
-          children: value.label
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "select-placeholder",
-          children: placeholder
-        }), !isLocked && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "dtable-font dtable-icon-down3"
-        })]
-      }), this.state.isShowSelectOptions && this.renderOptionGroup()]
-    });
-  }
-}
-CollaboratorSelect.defaultProps = {
-  top: -3,
-  left: -3
-};
-var _default = exports.default = CollaboratorSelect;

package/lib/DTableGroupSelect/index.css

@@ -1,96 +0,0 @@
-.group-select {
-  position: relative;
-}
-
-.group-select.custom-select {
-  display: flex;
-  padding: 5px 10px;
-  border-radius: 3px;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 900px;
-  user-select: none;
-  text-align: left;
-  border-color: 1px solid rgba(0, 40, 100, 0.12);
-  height: auto;
-  min-height: 38px;
-  cursor: pointer;
-}
-
-.group-select.custom-select:focus,
-.group-select.custom-select.focus {
-  border-color: #1991eb !important;
-  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
-}
-
-.group-select.custom-select.disabled:focus,
-.group-select.custom-select.focus.disabled,
-.group-select.custom-select.disabled:hover {
-  border-color: rgba(0, 40, 100, 0.12) !important;
-  box-shadow: unset;
-  cursor: default;
-}
-
-.group-select .sf3-font-down {
-  display: inline-block;
-  color: #999;
-  transform: translateY(2px);
-  transition: all 0.1s;
-  font-size: 14px !important;
-}
-
-.group-select .sf3-font-down:hover {
-  color: #666;
-}
-
-.group-select .selected-option {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-}
-
-.group-select.dtable-ui-collaborator-selector .option-group .option-group-content {
-  padding: 10px;
-}
-
-.group-select.custom-select.dtable-ui-collaborator-selector .option-group .option-group-content {
-  padding: 10px 0;
-}
-
-.group-select.custom-select.dtable-ui-collaborator-selector .option {
-  padding: 5px 0 5px 10px !important;
-  line-height: 20px;
-}
-
-.group-select .select-placeholder {
-  line-height: 1;
-  font-size: 14px;
-  white-space: nowrap;
-}
-
-.group-select .selected-option-show {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.group-select .selected-option-show .selected-option-item {
-  background-color: rgb(240, 240, 240);
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-}
-
-.group-select .selected-option-show .selected-option-item .selected-option-item-name {
-  font-size: 13px;
-  color: #212529;
-}
-
-.group-select .selected-option-show .selected-option-item .dtable-icon-x {
-  cursor: pointer;
-  color: rgb(103, 103, 103);
-}

package/lib/DTableGroupSelect/index.js

@@ -1,131 +0,0 @@
-"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 _ModalPortal = _interopRequireDefault(require("../ModalPortal"));
-var _selectOptionGroup = _interopRequireDefault(require("./select-option-group"));
-require("./index.css");
-var _jsxRuntime = require("react/jsx-runtime");
-class DTableGroupSelect extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.onSelectToggle = event => {
-      event.preventDefault();
-      if (this.state.isShowSelectOptions) event.stopPropagation();
-      let eventClassName = event.target.className;
-      if (eventClassName.indexOf('dtable-icon-x') > -1 || eventClassName === 'option-group-search') return;
-      if (event.target.value === '') return;
-      this.setState({
-        isShowSelectOptions: !this.state.isShowSelectOptions
-      });
-    };
-    this.onClickOutside = event => {
-      if (this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
-        return;
-      }
-      if (!this.selector.contains(event.target)) {
-        this.closeSelect();
-      }
-    };
-    this.closeSelect = () => {
-      this.setState({
-        isShowSelectOptions: false
-      });
-    };
-    this.getSelectedOptionTop = () => {
-      if (!this.selector) return 38;
-      const _this$selector$getBou = this.selector.getBoundingClientRect(),
-        height = _this$selector$getBou.height;
-      return height;
-    };
-    this.getFilterOptions = searchValue => {
-      const options = this.props.options;
-      const validSearchVal = searchValue.trim().toLowerCase();
-      if (!validSearchVal) return options || [];
-      return options.filter(option => option.name.toLowerCase().includes(validSearchVal));
-    };
-    this.state = {
-      isShowSelectOptions: false
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.selectedOptions.length !== this.props.selectedOptions.length) {
-      // when selectedOptions change and dom rendered, calculate top
-      setTimeout(() => {
-        this.forceUpdate();
-      }, 1);
-    }
-  }
-  render() {
-    let _this$props = this.props,
-      className = _this$props.className,
-      selectedOptions = _this$props.selectedOptions,
-      options = _this$props.options,
-      placeholder = _this$props.placeholder,
-      searchPlaceholder = _this$props.searchPlaceholder,
-      noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
-      isInModal = _this$props.isInModal;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      ref: node => this.selector = node,
-      className: (0, _classnames.default)('group-select custom-select', {
-        'focus': this.state.isShowSelectOptions
-      }, className),
-      onClick: this.onSelectToggle,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "selected-option",
-        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",
-            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",
-              onClick: () => {
-                this.props.onDeleteOption(item);
-              }
-            })]
-          }, item.id))
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: "select-placeholder",
-          children: placeholder
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-          className: "sf3-font-down sf3-font"
-        })]
-      }), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
-        selectedOptions: selectedOptions,
-        top: this.getSelectedOptionTop(),
-        options: options,
-        onSelectOption: this.props.onSelectOption,
-        searchPlaceholder: searchPlaceholder,
-        noOptionsPlaceholder: noOptionsPlaceholder,
-        onClickOutside: this.onClickOutside,
-        closeSelect: this.closeSelect,
-        getFilterOptions: this.getFilterOptions
-      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalPortal.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_selectOptionGroup.default, {
-          className: className,
-          selectedOptions: selectedOptions,
-          position: this.selector.getBoundingClientRect(),
-          isInModal: isInModal,
-          top: this.getSelectedOptionTop(),
-          options: options,
-          onSelectOption: this.props.onSelectOption,
-          searchPlaceholder: searchPlaceholder,
-          noOptionsPlaceholder: noOptionsPlaceholder,
-          onClickOutside: this.onClickOutside,
-          closeSelect: this.closeSelect,
-          getFilterOptions: this.getFilterOptions
-        })
-      })]
-    });
-  }
-}
-var _default = exports.default = DTableGroupSelect;

package/lib/DTableGroupSelect/option.js

@@ -1,42 +0,0 @@
-"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 _jsxRuntime = require("react/jsx-runtime");
-class Option extends _react.Component {
-  constructor() {
-    super(...arguments);
-    this.onSelectOption = e => {
-      e.stopPropagation();
-      this.props.onSelectOption(this.props.option);
-    };
-    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)('d-flex option', {
-        'option-active': this.props.isActive
-      }),
-      onClick: this.onSelectOption,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      children: this.props.children
-    });
-  }
-}
-var _default = exports.default = Option;

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

@@ -1,54 +0,0 @@
-.group-selector .option {
-  display: block;
-  width: 100%;
-  line-height: 24px;
-  padding: 6px 10px;
-  clear: both;
-  font-weight: 400;
-  text-align: inherit;
-  background-color: transparent;
-  border: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.group-selector .option .dtable-icon-check-mark {
-  font-size: 12px;
-  color: #798d99;
-}
-
-.group-selector .option.option-active {
-  background-color: #20a0ff;
-  color: #fff;
-  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;
-}
-
-.group-selector .option-group-dtable-ui-single-select-selector .select-option-name {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.group-selector .option-group-dtable-ui-single-select-selector .option:hover,
-.group-selector .option-group-dtable-ui-single-select-selector .option.option-active,
-.group-selector .option-group-dtable-ui-multiple-select-selector .option:hover,
-.group-selector .option-group-dtable-ui-multiple-select-selector .option.option-active {
-  background-color: #f5f5f5;
-}