@seafile/sdoc-editor 3.0.84 → 3.0.85

package/dist/api/seafile-api.js

@@ -312,34 +312,35 @@ var SeafileAPI = /*#__PURE__*/function () {
       return this.req.get(url);
     }
   }, {
-    key: "insertFileRepo",
-    value: function insertFileRepo(docUuid, wikiId, data) {
-      var url = "/api/v2.1/wiki2/".concat(wikiId, "/file-repos/");
+    key: "insertWikiView",
+    value: function insertWikiView(wikiId, docUuid, data) {
+      var url = "/api/v2.1/wiki2/".concat(wikiId, "/views/");
       var form = new FormData();
-      form.append('file_uuid', docUuid); // used for valid permission
-      form.append('name', data.name);
-      form.append('view_name', data.view_name);
-      form.append('linked_repo_id', data.linked_repo_id);
+      form.append('file_uuid', docUuid);
+      form.append('name', data.view_name);
+      form.append('type', data.view_type);
+      form.append('link_repo_id', data.link_repo_id);
+      return this.req.post(url, form);
+    }
+  }, {
+    key: "duplicateWikiView",
+    value: function duplicateWikiView(wikiId, docUuid, viewId) {
+      var url = "/api/v2.1/wiki2/".concat(wikiId, "/duplicate-view/");
+      var form = new FormData();
+      form.append('file_uuid', docUuid);
+      form.append('view_id', viewId);
       return this.req.post(url, form);
     }
   }, {
-    key: "modifyFileRepo",
-    value: function modifyFileRepo(wikiId, fileRepoId, viewData) {
-      var url = '/api/v2.1/wiki2/' + wikiId + '/file-repos/' + fileRepoId + '/';
+    key: "modifyView",
+    value: function modifyView(wikiId, viewId, viewData) {
+      var url = '/api/v2.1/wiki2/' + wikiId + '/views/';
       var data = {
-        viewData: viewData
+        view_id: viewId,
+        view_data: viewData
       };
       return this.req.put(url, data);
     }
-  }, {
-    key: "duplicateFileRepo",
-    value: function duplicateFileRepo(docUuid, wikiId, fileRepoId) {
-      var url = "/api/v2.1/wiki2/".concat(wikiId, "/file-repos/").concat(fileRepoId, "/duplicate/");
-      var form = new FormData();
-      form.append('file_uuid', docUuid); // used for valid permission
-
-      return this.req.post(url);
-    }
   }]);
 }();
 var _default = exports["default"] = SeafileAPI;

package/dist/assets/css/sdoc-editor-plugins.css

@@ -275,6 +275,12 @@
 .sdoc-code-block-pre {
   background: #FAFAFA;
   border: 1px solid #f0f0f0;
+  position: relative;
+  overflow-y: hidden !important;
+}
+
+.sdoc-code-block-pre.hidden {
+  padding-bottom: 48px !important;
 }
 
 .sdoc-code-block-pre .sdoc-code-no-wrap {
@@ -285,6 +291,38 @@
   white-space: pre;
 }
 
+.sdoc-code-block-container .sdoc-code-block-hidden-icon {
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 48%;
+  bottom: 8px;
+}
+
+.sdoc-code-block-container .sdoc-code-block-hidden-icon .icon-container {
+  width: 32px;
+  height: 20px;
+  background-color: #999;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.sdoc-code-block-container .sdoc-code-block-hidden-icon .icon-container .sdocfont {
+  color: #fff;
+  font-size: 12px;
+}
+
+.sdoc-code-block-code.hide-code {
+  max-height: 580.2px;
+  display: block;
+  overflow: hidden;
+}
+
 .sdoc-code-block-code .sdoc-code-line {
   position: relative;
   counter-increment: number;

package/dist/constants/index.js

@@ -79,8 +79,7 @@ var INTERNAL_EVENT = exports.INTERNAL_EVENT = {
   CREATE_WHITEBOARD_FILE: 'create_whiteboard_file',
   GENERATE_EXDRAW_READ_ONLY_LINK: 'generate_exdraw_read_only_link',
   TRANSFER_PREVIEW_FILE_ID: 'transfer_preview_file_id',
-  FILE_METADATA_COMPONENT: 'file_metadata_component',
-  ADD_WIKI_LIBRARY_TOGGLE: 'add_wiki_library_click'
+  FILE_METADATA_COMPONENT: 'file_metadata_component'
 };
 var PAGE_EDIT_AREA_WIDTH = exports.PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]
 var COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = 364;

package/dist/context.js

@@ -35,20 +35,6 @@ var Context = /*#__PURE__*/function () {
         _this.settings['originFileURL'] = originFileURL;
       }
     });
-    (0, _defineProperty2["default"])(this, "getWikiSettings", function () {
-      if (window.wiki && window.wiki.config) {
-        var wikiSettings = window.wiki.config.wikiSettings;
-        return wikiSettings;
-      }
-      return _this.settings['wikiSettings'];
-    });
-    (0, _defineProperty2["default"])(this, "getWikiRepos", function () {
-      if (window.wiki && window.wiki.config) {
-        var repos = window.wiki.config.repos;
-        return repos;
-      }
-      return _this.settings['repos'];
-    });
     (0, _defineProperty2["default"])(this, "uploadLocalImage", function (imageFiles) {
       var docUuid = _this.getSetting('docUuid');
       return _this.api.uploadSdocImage(docUuid, imageFiles).then(function (res) {
@@ -433,24 +419,24 @@ var Context = /*#__PURE__*/function () {
       return this.api.getFileMetadataInfo(docUuid, fileType);
     }
   }, {
-    key: "insertFileRepo",
-    value: function insertFileRepo(data) {
+    key: "insertWikiView",
+    value: function insertWikiView(data) {
       var wikiId = this.getSetting('wikiId');
       var docUuid = this.getSetting('docUuid');
-      return this.api.insertFileRepo(docUuid, wikiId, data);
+      return this.api.insertWikiView(wikiId, docUuid, data);
     }
   }, {
-    key: "duplicateFileRepo",
-    value: function duplicateFileRepo(fileRepoId) {
+    key: "duplicateWikiView",
+    value: function duplicateWikiView(viewId) {
       var wikiId = this.getSetting('wikiId');
       var docUuid = this.getSetting('docUuid');
-      return this.api.duplicateWikiView(docUuid, wikiId, fileRepoId);
+      return this.api.duplicateWikiView(wikiId, docUuid, viewId);
     }
   }, {
-    key: "modifyFileRepo",
-    value: function modifyFileRepo(viewId, fileRepoId, viewData) {
+    key: "modifyView",
+    value: function modifyView(viewId, viewData) {
       var wikiId = this.getSetting('wikiId');
-      return this.api.modifyView(wikiId, fileRepoId, viewData);
+      return this.api.modifyView(wikiId, viewId, viewData);
     }
   }]);
 }();

package/dist/extension/commons/insert-element-dialog/index.js

@@ -15,16 +15,17 @@ var _context = _interopRequireDefault(require("../../../context"));
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants2 = require("../../constants");
 var _index = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
+var _index2 = _interopRequireDefault(require("../../plugins/file-view/insert-view-dialog/index.js"));
 var _formulaModal = _interopRequireDefault(require("../../plugins/formula/menu/formula-modal.js"));
 var _helpers = require("../../plugins/image/helpers");
 var _addLinkDialog = _interopRequireDefault(require("../../plugins/link/dialog/add-link-dialog"));
 var _dialogs = require("../../plugins/table/dialogs");
-var _index2 = require("../../plugins/video/constants/index.js");
-var _index3 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
+var _index3 = require("../../plugins/video/constants/index.js");
+var _index4 = _interopRequireDefault(require("../../plugins/video/dialog/add-video-link-dialog/index.js"));
 var _helpers2 = require("../../plugins/video/helpers");
-var _index4 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
-var _index5 = _interopRequireDefault(require("../select-file-dialog/index.js"));
-var _index6 = _interopRequireDefault(require("../wiki-file-insert-dialog/index.js"));
+var _index5 = _interopRequireDefault(require("../file-insert-dialog/index.js"));
+var _index6 = _interopRequireDefault(require("../select-file-dialog/index.js"));
+var _index7 = _interopRequireDefault(require("../wiki-file-insert-dialog/index.js"));
 var InsertElementDialog = function InsertElementDialog(_ref) {
   var editor = _ref.editor;
   var _useState = (0, _react.useState)(''),
@@ -100,7 +101,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
   var onVideoFileChanged = (0, _react.useCallback)(function (event) {
     var files = event.target.files;
     // Show warning for 3s and no further insertion if video file is more than 5MB
-    if (files[0].size > _index2.VIDEO_MAX_SIZE_5MB) {
+    if (files[0].size > _index3.VIDEO_MAX_SIZE_5MB) {
       handleDisplayAlert();
       event.target.value = null;
       return;
@@ -222,7 +223,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertLinkCallback: insertLinkCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index5["default"], sdocLinkProps);
+        return /*#__PURE__*/_react["default"].createElement(_index6["default"], sdocLinkProps);
       }
     case _constants2.ELEMENT_TYPE.FILE_LINK:
       {
@@ -232,7 +233,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertLinkCallback: insertLinkCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index5["default"], fileLinkProps);
+        return /*#__PURE__*/_react["default"].createElement(_index6["default"], fileLinkProps);
       }
     case _constants2.ELEMENT_TYPE.WHITEBOARD:
       {
@@ -242,7 +243,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertWhiteboardFile: insertWhiteboardFile,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index5["default"], whiteboardProps);
+        return /*#__PURE__*/_react["default"].createElement(_index6["default"], whiteboardProps);
       }
     case _constants2.ELEMENT_TYPE.VIDEO:
       {
@@ -252,11 +253,23 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
           insertVideoCallback: insertVideoCallback,
           closeDialog: closeDialog
         };
-        return /*#__PURE__*/_react["default"].createElement(_index5["default"], videoProps);
+        return /*#__PURE__*/_react["default"].createElement(_index6["default"], videoProps);
       }
     case _constants2.ELEMENT_TYPE.VIDEO_LINK:
       {
-        return /*#__PURE__*/_react["default"].createElement(_index3["default"], props);
+        return /*#__PURE__*/_react["default"].createElement(_index4["default"], props);
+      }
+    case _constants2.ELEMENT_TYPE.FILE_VIEW:
+      {
+        var _props = {
+          editor: validEditor,
+          element: element,
+          slateNode: slateNode,
+          insertPosition: insertPosition,
+          dialogType: dialogType,
+          closeDialog: closeDialog
+        };
+        return /*#__PURE__*/_react["default"].createElement(_index2["default"], _props);
       }
     case _constants2.ELEMENT_TYPE.FORMULA:
       {
@@ -300,13 +313,13 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     case _constants2.ELEMENT_TYPE.FILE_LINK_INSET_INPUT_TEMP:
       {
         if (editor.editorType === _constants.WIKI_EDITOR) {
-          return /*#__PURE__*/_react["default"].createElement(_index6["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_index7["default"], {
             element: slateNode,
             editor: editor,
             closeDialog: closeDialog
           });
         }
-        return /*#__PURE__*/_react["default"].createElement(_index4["default"], {
+        return /*#__PURE__*/_react["default"].createElement(_index5["default"], {
           element: slateNode,
           editor: editor,
           closeDialog: closeDialog

package/dist/extension/plugins/code-block/render-elem.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 var _react = _interopRequireWildcard(require("react"));
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../../constants");
 var _useScrollContext = require("../../../hooks/use-scroll-context");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
@@ -41,6 +42,10 @@ var CodeBlock = function CodeBlock(_ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     showHoverMenu = _useState4[0],
     setShowHoverMenu = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    showAllCode = _useState6[0],
+    setShowAllCode = _useState6[1];
   var onChangeLanguage = (0, _react.useCallback)(function (lang) {
     var language = lang.value;
     var path = _slateReact.ReactEditor.findPath(editor, element);
@@ -133,6 +138,10 @@ var CodeBlock = function CodeBlock(_ref) {
   var handleScroll = function handleScroll() {
     _eventBus["default"].getInstance().dispatch(_constants.INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT);
   };
+  var isHiddenCodeBlockParts = children.length > 30;
+  var toggleHidden = function toggleHidden() {
+    setShowAllCode(!showAllCode);
+  };
   return /*#__PURE__*/_react["default"].createElement("div", Object.assign({
     "data-id": element.id
   }, attributes, {
@@ -141,11 +150,24 @@ var CodeBlock = function CodeBlock(_ref) {
     onMouseLeave: onMouseLeave
   }), /*#__PURE__*/_react["default"].createElement("pre", {
     onScroll: handleScroll,
-    className: 'sdoc-code-block-pre',
+    className: (0, _classnames["default"])('sdoc-code-block-pre', {
+      'hidden': isHiddenCodeBlockParts
+    }),
     ref: codeBlockRef
   }, /*#__PURE__*/_react["default"].createElement("code", {
-    className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '')
-  }, children)), showHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+    className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '', " ").concat(!showAllCode ? 'hide-code' : '')
+  }, children)), children.length > 30 && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-code-block-hidden-icon",
+    onClick: toggleHidden,
+    contentEditable: false,
+    suppressContentEditableWarning: true
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "icon-container"
+  }, !showAllCode ? /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-arrow-down arrow"
+  }) : /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-arrow-up arrow"
+  }))), showHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
     menuPosition: menuPosition,
     onChangeLanguage: onChangeLanguage,
     language: element.language,

package/dist/extension/plugins/file-view/helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateFileView = exports.insertFileView = exports.getFileUrl = exports.genFileViewNode = exports.calculateSize = void 0;
+exports.updateFileView = exports.insertFileView = exports.getWikiSettings = exports.getFileUrl = exports.getAccessibleRepos = exports.genFileViewNode = exports.calculateSize = void 0;
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _slugid = _interopRequireDefault(require("slugid"));
@@ -18,6 +18,18 @@ var getFileUrl = exports.getFileUrl = function getFileUrl(element) {
     view_id = data.view_id;
   return "".concat(serviceUrl, "/wiki/").concat(wiki_id, "/repo-views/").concat(view_id, "/");
 };
+var getWikiSettings = exports.getWikiSettings = function getWikiSettings() {
+  var wikiId = _context["default"].getSetting('wikiId');
+  var WIKI_SETTING_INTO_KEY = "seafile_wiki_".concat(wikiId, "_settings_info");
+  var settings = window.localStorage.getItem(WIKI_SETTING_INTO_KEY);
+  return JSON.parse(settings);
+};
+var getAccessibleRepos = exports.getAccessibleRepos = function getAccessibleRepos() {
+  var wikiId = _context["default"].getSetting('wikiId');
+  var WIKI_REPO_INFO_KEY = "seafile_wiki_".concat(wikiId, "_repos_info");
+  var repos = window.localStorage.getItem(WIKI_REPO_INFO_KEY);
+  return JSON.parse(repos);
+};
 var genFileViewNode = exports.genFileViewNode = function genFileViewNode(data) {
   return {
     id: _slugid["default"].nice(),
@@ -31,7 +43,7 @@ var genFileViewNode = exports.genFileViewNode = function genFileViewNode(data) {
 };
 var insertFileView = exports.insertFileView = function insertFileView(data, editor, position, slateNode) {
   if (!data) return;
-  if (!data.wiki_id || !data.file_repo_id) return;
+  if (!data.view_name || !data.view_type || !data.link_repo_id) return;
   var fileViewNode = genFileViewNode(data);
   if (position === _constants.INSERT_POSITION.AFTER) {
     var path = _slate.Editor.path(editor, editor.selection);

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var KeyCodes = {
+  Tab: 9,
+  Escape: 27,
+  Esc: 27,
+  LeftArrow: 37,
+  UpArrow: 38,
+  RightArrow: 39,
+  DownArrow: 40
+};
+var _default = exports["default"] = KeyCodes;

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/index.css

@@ -0,0 +1,96 @@
+.sdoc-select.group-select {
+  position: relative;
+}
+
+.sdoc-select.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;
+}
+
+.sdoc-select.group-select.custom-select:focus,
+.sdoc-select.group-select.custom-select.focus {
+  border-color: #1991eb !important;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.sdoc-select.group-select.custom-select.disabled:focus,
+.sdoc-select.group-select.custom-select.focus.disabled,
+.sdoc-select.group-select.custom-select.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12) !important;
+  box-shadow: unset;
+  cursor: default;
+}
+
+.sdoc-select.group-select .sdoc-font-down {
+  display: inline-block;
+  color: #999;
+  transform: translateY(2px);
+  transition: all 0.1s;
+  font-size: 14px !important;
+}
+
+.sdoc-select.group-select .sdoc-font-down:hover {
+  color: #666;
+}
+
+.sdoc-select.group-select .selected-option {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+
+.sdoc-select.group-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px;
+}
+
+.sdoc-select.group-select.custom-select.selector-collaborator .option-group .option-group-content {
+  padding: 10px 0;
+}
+
+.sdoc-select.group-select.custom-select.selector-collaborator .option {
+  padding: 5px 0 5px 10px !important;
+  line-height: 20px;
+}
+
+.sdoc-select.group-select .select-placeholder {
+  line-height: 1;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.sdoc-select.group-select .selected-option-show {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.sdoc-select.group-select .selected-option-show .selected-option-item {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 0px;
+}
+
+.sdoc-select.group-select .selected-option-show .selected-option-item .selected-option-item-name {
+  font-size: 13px;
+  color: #212529;
+}
+
+.sdoc-select.group-select .selected-option-show .selected-option-item .sf2-icon-close {
+  cursor: pointer;
+  color: rgb(103, 103, 103);
+}

package/dist/extension/plugins/file-view/insert-view-dialog/dropdown-select/index.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _modalPortal = _interopRequireDefault(require("../modal-portal.js"));
+var _lib = _interopRequireDefault(require("./lib.png"));
+var _selectOptionGroup = _interopRequireDefault(require("./select-option-group.js"));
+require("./index.css");
+var DropdownSelect = /*#__PURE__*/function (_Component) {
+  function DropdownSelect(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DropdownSelect);
+    _this = (0, _callSuper2["default"])(this, DropdownSelect, [props]);
+    (0, _defineProperty2["default"])(_this, "onSelectToggle", function (event) {
+      event.preventDefault();
+      if (_this.state.isShowSelectOptions) event.stopPropagation();
+      var eventClassName = event.target.className;
+      if (eventClassName.indexOf('sf2-icon-close') > -1 || eventClassName === 'option-group-search') return;
+      if (event.target.value === '') return;
+      _this.setState({
+        isShowSelectOptions: !_this.state.isShowSelectOptions
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onClickOutside", function (event) {
+      if (_this.props.isShowSelected && event.target.className.includes('icon-fork-number')) {
+        return;
+      }
+      if (!_this.selector.contains(event.target)) {
+        _this.closeSelect();
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "closeSelect", function () {
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "getSelectedOptionTop", function () {
+      if (!_this.selector) return 38;
+      var _this$selector$getBou = _this.selector.getBoundingClientRect(),
+        height = _this$selector$getBou.height;
+      return height;
+    });
+    (0, _defineProperty2["default"])(_this, "getFilterOptions", function (searchValue) {
+      var options = _this.props.options;
+      var validSearchVal = searchValue.trim().toLowerCase();
+      if (!validSearchVal) return options || [];
+      return options.filter(function (option) {
+        return option.name.toLowerCase().includes(validSearchVal);
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "onSelectOption", function (option) {
+      _this.props.onSelectOption(option);
+      _this.setState({
+        isShowSelectOptions: false
+      });
+    });
+    _this.state = {
+      isShowSelectOptions: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(DropdownSelect, _Component);
+  return (0, _createClass2["default"])(DropdownSelect, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _nextProps$selectedOp,
+        _this$props$selectedO,
+        _this2 = this;
+      if (((_nextProps$selectedOp = nextProps.selectedOption) === null || _nextProps$selectedOp === void 0 ? void 0 : _nextProps$selectedOp.id) !== ((_this$props$selectedO = this.props.selectedOption) === null || _this$props$selectedO === void 0 ? void 0 : _this$props$selectedO.id)) {
+        // when selectedOption change and dom rendered, calculate top
+        setTimeout(function () {
+          _this2.forceUpdate();
+        }, 1);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var _this$props = this.props,
+        className = _this$props.className,
+        selectedOption = _this$props.selectedOption,
+        options = _this$props.options,
+        placeholder = _this$props.placeholder,
+        searchPlaceholder = _this$props.searchPlaceholder,
+        noOptionsPlaceholder = _this$props.noOptionsPlaceholder,
+        isInModal = _this$props.isInModal,
+        _this$props$hasIcon = _this$props.hasIcon,
+        hasIcon = _this$props$hasIcon === void 0 ? false : _this$props$hasIcon;
+      var isShowSelectOptions = this.state.isShowSelectOptions;
+      var clazzName = (0, _classnames["default"])('sdoc-select group-select custom-select', {
+        'focus': isShowSelectOptions
+      }, className);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(node) {
+          return _this3.selector = node;
+        },
+        className: clazzName,
+        onClick: this.onSelectToggle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "selected-option"
+      }, selectedOption && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-show"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-item mr-1 px-1"
+      }, hasIcon && /*#__PURE__*/_react["default"].createElement("img", {
+        src: _lib["default"],
+        width: '24px',
+        alt: "",
+        className: "mr-2"
+      }), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "selected-option-item-name"
+      }, selectedOption.name))), !selectedOption && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "select-placeholder"
+      }, placeholder), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "sdocfont sdoc-font-down"
+      })), this.state.isShowSelectOptions && !isInModal && /*#__PURE__*/_react["default"].createElement(_selectOptionGroup["default"], {
+        selectedOption: selectedOption,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      }), this.state.isShowSelectOptions && isInModal && /*#__PURE__*/_react["default"].createElement(_modalPortal["default"], null, /*#__PURE__*/_react["default"].createElement(_selectOptionGroup["default"], {
+        hasIcon: hasIcon,
+        className: className,
+        selectedOption: selectedOption,
+        position: this.selector.getBoundingClientRect(),
+        isInModal: isInModal,
+        top: this.getSelectedOptionTop(),
+        options: options,
+        onSelectOption: this.onSelectOption,
+        searchPlaceholder: searchPlaceholder,
+        noOptionsPlaceholder: noOptionsPlaceholder,
+        onClickOutside: this.onClickOutside,
+        closeSelect: this.closeSelect,
+        getFilterOptions: this.getFilterOptions
+      })));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = DropdownSelect;