intelicoreact 1.2.96 → 1.2.98

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -90,7 +90,7 @@ var Dropdown = function Dropdown(_ref) {
       isMobileProp = _useIsMobile.isMobile;
 
   var isMobile = isMobileProp && withMobileLogic;
-  var dropdownId = id || fieldKey;
+  var dropdownId = id || fieldKey || Math.random().toString(16).slice(2);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -106,6 +106,7 @@ var Dropdown = function Dropdown(_ref) {
   var dropdownListRef = (0, _react.useRef)(null);
   var dropdownListWrapperRef = (0, _react.useRef)(null);
   var searchInputRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
 
   var _useState5 = (0, _react.useState)(null),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -259,6 +260,14 @@ var Dropdown = function Dropdown(_ref) {
     setSearchValue(inputValue);
   };
 
+  var onWrapperClick = function onWrapperClick(e) {
+    if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+
   var hightlightedText = function hightlightedText(text, postfix, description) {
     var _text;
 
@@ -446,7 +455,9 @@ var Dropdown = function Dropdown(_ref) {
     var _cn3, _cn4, _getSortedOptions;
 
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__container-wrapper"))
+      className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
+      ref: wrapperRef,
+      onClick: onWrapperClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), (_cn3 = {}, (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--fixed-height"), isFixedMaxHeight), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow-hidden"), scrollTop === scrollHeight), _cn3)),
       ref: dropdownListWrapperRef
@@ -646,6 +657,13 @@ var Dropdown = function Dropdown(_ref) {
       setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight)));
     }
   }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _getListContainer7;
+
+      (_getListContainer7 = getListContainer()) === null || _getListContainer7 === void 0 ? void 0 : _getListContainer7.remove();
+    };
+  }, []);
   var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
     return option.value === value;
   })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;

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

@@ -114,7 +114,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
       isMobileProp = _useIsMobile.isMobile;
 
   var isMobile = isMobileProp && withMobileLogic;
-  var dropdownId = fieldKey || id;
+  var dropdownId = fieldKey || id || Math.random().toString(16).slice(2);
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -130,6 +130,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
   var dropdownListRef = (0, _react.useRef)(null);
   var dropdownListWrapperRef = (0, _react.useRef)(null);
   var inputRef = (0, _react.useRef)(null);
+  var wrapperRef = (0, _react.useRef)(null);
 
   var _useState5 = (0, _react.useState)(null),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -206,6 +207,14 @@ var TagsDropdown = function TagsDropdown(_ref) {
     setSearchValue(inputValue);
   };
 
+  var onWrapperClick = function onWrapperClick(e) {
+    if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+      e.stopPropagation();
+      e.preventDefault();
+      setIsOpen(false);
+    }
+  };
+
   var getMarkupForElement = function getMarkupForElement(item) {
     var _title$toString;
 
@@ -414,7 +423,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
 
     var filteredOptions = getFilteredOptions(options);
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)("".concat(RC, "__container-wrapper"))
+      className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
+      ref: wrapperRef,
+      onClick: onWrapperClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       ref: dropdownListWrapperRef,
       className: (0, _classnames.default)("".concat(RC, "__selector-wrapper"), (0, _defineProperty2.default)({}, "".concat(RC, "__selector-wrapper--fixed-height"), isFixedMaxHeight && isMobile))
@@ -573,6 +584,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
       setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight)));
     }
   }, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _getListContainer4;
+
+      (_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.remove();
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, (_cn8 = {}, (0, _defineProperty2.default)(_cn8, "".concat(RC, "_disabled"), disabled), (0, _defineProperty2.default)(_cn8, "".concat(RC, "-mobile"), isMobile), _cn8)),
     ref: dropdownRef

package/package.json

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