intelicoreact 0.3.58 → 0.3.60

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -17,7 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var ReactDOMServer = _interopRequireWildcard(require("react-dom/server"));
+var _reactDom = require("react-dom");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -71,7 +71,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
       _ref$unselectAllButto = _ref.unselectAllButtonRef,
       unselectAllButtonRef = _ref$unselectAllButto === void 0 ? null : _ref$unselectAllButto,
       _ref$closeOnSelect = _ref.closeOnSelect,
-      closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect,
       _ref$closeOnRemove = _ref.closeOnRemove,
       closeOnRemove = _ref$closeOnRemove === void 0 ? false : _ref$closeOnRemove,
       _ref$noOptionsText = _ref.noOptionsText,
@@ -102,7 +102,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
   }, []);
 
   var handleClickOutside = function handleClickOutside(event) {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+    var _getListContainer;
+
+    if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event.target))) {
       setIsOpen(false);
       setSearchValue('');
     }
@@ -229,8 +231,8 @@ var TagsDropdown = function TagsDropdown(_ref) {
 
   var renderListContainer = function renderListContainer() {
     var lc = getListContainer();
-    lc.innerHTML = isOpen ? ReactDOMServer.renderToString(getListMarkUp()) : null;
-    setListContainerStyles();
+    if (!lc) return null;
+    return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
   };
 
   var getListMarkUp = function getListMarkUp() {
@@ -259,14 +261,21 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   (0, _react.useEffect)(initListContainer, []);
+
+  var closeList = function closeList() {
+    return setIsOpen(false);
+  };
+
   (0, _react.useLayoutEffect)(function () {
-    window.addEventListener("resize", setListContainerStyles);
+    window.addEventListener('resize', setListContainerStyles);
+    window.addEventListener('scroll', closeList);
     return function () {
-      window.removeEventListener("resize", setListContainerStyles);
+      window.removeEventListener('resize', setListContainerStyles);
+      window.removeEventListener('scroll', closeList);
     };
   }, [getListContainer]);
   (0, _react.useEffect)(function () {
-    if (getListContainer()) renderListContainer();
+    setListContainerStyles();
   }, [isOpen]);
   (0, _react.useEffect)(function () {
     document.addEventListener('click', handleClickOutside, true);
@@ -289,10 +298,10 @@ var TagsDropdown = function TagsDropdown(_ref) {
       'tags-dropdown__error': error
     }),
     onClick: function onClick(e) {
-      var _e$target, _e$target2, _e$target2$parentNode, _e$target3, _e$target4, _e$target4$parentNode, _e$target5, _e$target5$className, _e$target5$className$, _e$target6, _e$target6$className, _e$target6$className$, _e$target7, _e$target8, _e$target9;
+      var _e$target, _e$target2, _e$target2$parentNode, _e$target3, _e$target4, _e$target5, _e$target5$parentNode, _e$target6, _e$target6$className, _e$target6$className$, _e$target7, _e$target7$className, _e$target7$className$, _e$target8, _e$target9, _e$target10;
 
-      if ((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$parentNode = _e$target2.parentNode) === null || _e$target2$parentNode === void 0 ? void 0 : _e$target2$parentNode.className) === 'tag__button') return false;
-      if ((e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : (_e$target4$parentNode = _e$target4.parentNode) === null || _e$target4$parentNode === void 0 ? void 0 : _e$target4$parentNode.className) !== 'tag__button' || (e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$className = _e$target5.className) === null || _e$target5$className === void 0 ? void 0 : (_e$target5$className$ = _e$target5$className.indexOf) === null || _e$target5$className$ === void 0 ? void 0 : _e$target5$className$.call(_e$target5$className, 'tag__label')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$className = _e$target6.className) === null || _e$target6$className === void 0 ? void 0 : (_e$target6$className$ = _e$target6$className.indexOf) === null || _e$target6$className$ === void 0 ? void 0 : _e$target6$className$.call(_e$target6$className, 'tag-list_wrapper')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target7 = e.target) === null || _e$target7 === void 0 ? void 0 : _e$target7.className) === "".concat(RC, "__trigger") || (e === null || e === void 0 ? void 0 : (_e$target8 = e.target) === null || _e$target8 === void 0 ? void 0 : _e$target8.className) === "tags-dropdown__arrow") setIsOpen(!isOpen);else if ((e === null || e === void 0 ? void 0 : (_e$target9 = e.target) === null || _e$target9 === void 0 ? void 0 : _e$target9.tagName) === 'INPUT') setIsOpen(true);
+      if ((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : (_e$target2$parentNode = _e$target2.parentNode) === null || _e$target2$parentNode === void 0 ? void 0 : _e$target2$parentNode.className) === 'tag__button' || (e === null || e === void 0 ? void 0 : (_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.tagName) === 'line') return false;
+      if ((e === null || e === void 0 ? void 0 : (_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.tagName) === 'svg' && (e === null || e === void 0 ? void 0 : (_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : (_e$target5$parentNode = _e$target5.parentNode) === null || _e$target5$parentNode === void 0 ? void 0 : _e$target5$parentNode.className) !== 'tag__button' || (e === null || e === void 0 ? void 0 : (_e$target6 = e.target) === null || _e$target6 === void 0 ? void 0 : (_e$target6$className = _e$target6.className) === null || _e$target6$className === void 0 ? void 0 : (_e$target6$className$ = _e$target6$className.indexOf) === null || _e$target6$className$ === void 0 ? void 0 : _e$target6$className$.call(_e$target6$className, 'tag__label')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target7 = e.target) === null || _e$target7 === void 0 ? void 0 : (_e$target7$className = _e$target7.className) === null || _e$target7$className === void 0 ? void 0 : (_e$target7$className$ = _e$target7$className.indexOf) === null || _e$target7$className$ === void 0 ? void 0 : _e$target7$className$.call(_e$target7$className, 'tag-list_wrapper')) !== -1 || (e === null || e === void 0 ? void 0 : (_e$target8 = e.target) === null || _e$target8 === void 0 ? void 0 : _e$target8.className) === "".concat(RC, "__trigger") || (e === null || e === void 0 ? void 0 : (_e$target9 = e.target) === null || _e$target9 === void 0 ? void 0 : _e$target9.className) === "tags-dropdown__arrow") setIsOpen(!isOpen);else if ((e === null || e === void 0 ? void 0 : (_e$target10 = e.target) === null || _e$target10 === void 0 ? void 0 : _e$target10.tagName) === 'INPUT') setIsOpen(true);
     }
   }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
     items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value, i) {
@@ -332,7 +341,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
     onKeyDown: function onKeyDown(e) {
       return onKeyPress(e, searchValue);
     }
-  }) : '', /*#__PURE__*/_react.default.createElement("span", {
+  }) : '', isOpen && renderListContainer(), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
     className: "color--text"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.3.58",
+  "version": "0.3.60",
   "description": "",
   "main": "dist/index.js",
   "files": [