intelicoreact 0.2.91 → 0.2.92

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

@@ -21,6 +21,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactFeather = require("react-feather");
 
+var _TagList = _interopRequireDefault(require("../../UI/TagList/TagList"));
+
 var _Tag = _interopRequireDefault(require("../../UI/Tag/Tag"));
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
@@ -51,7 +53,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
       disabled = _ref.disabled,
       isValuesInTags = _ref.isValuesInTags,
       _ref$isNotValidateASC = _ref.isNotValidateASCII,
-      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC;
+      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
+      _ref$noTagsWrap = _ref.noTagsWrap,
+      noTagsWrap = _ref$noTagsWrap === void 0 ? false : _ref$noTagsWrap;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -134,10 +138,22 @@ var TagsDropdown = function TagsDropdown(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__trigger"),
     onClick: function onClick(e) {
-      if (e.target.className === "".concat(RC, "__trigger") || e.target.className === "tags-dropdown__arrow" || e.target.tagName === 'svg' && e.target.parentNode.className !== 'tag__button') setIsOpen(!isOpen);else if (e.target.tagName === 'INPUT') setIsOpen(true);
+      if (e.target.className.indexOf('tag__label') !== -1 || e.target.className.indexOf('tag-list_wrapper') !== -1 || e.target.className === "".concat(RC, "__trigger") || e.target.className === "tags-dropdown__arrow" || e.target.tagName === 'svg' && e.target.parentNode.className !== 'tag__button') setIsOpen(!isOpen);else if (e.target.tagName === 'INPUT') setIsOpen(true);
     }
-  }, chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value) {
-    // el.list?.find?.(e => e.value === value)
+  }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
+    items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value, i) {
+      var tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(function (el) {
+        return el.value === value;
+      });
+      var label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
+      return {
+        value: value,
+        label: label,
+        id: i
+      };
+    }),
+    disableShowMore: true
+  }) : chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value) {
     var tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(function (el) {
       return el.value === value;
     });
@@ -150,17 +166,17 @@ var TagsDropdown = function TagsDropdown(_ref) {
         return deleteChosen(value);
       }
     });
-  }), /*#__PURE__*/_react.default.createElement("input", {
+  }), chosenOptions.length === 0 || !noTagsWrap ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
     value: searchValue,
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: placeholder || "Select from list",
+    placeholder: placeholder || 'Select from list',
     onKeyDown: function onKeyDown(e) {
       return onKeyPress(e, searchValue);
     }
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }) : '', /*#__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/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -1,7 +1,7 @@
 @import "../../../scss/vars";
 
 .tags-dropdown {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
@@ -144,6 +144,13 @@
     cursor: auto;
   }
 
+  .tag-list_wrapper {
+    box-sizing: border-box;
+    background-color: rgba(0,0,0,0);
+    padding: 0;
+    width: auto;
+  }
+
   &_arrow-static {
     .tags-dropdown__trigger {
       position: static;

package/dist/Atomic/UI/TagList/TagList.js

@@ -48,6 +48,8 @@ var TagList = function TagList(_ref) {
       items = _ref$items === void 0 ? [] : _ref$items,
       _ref$withToggle = _ref.withToggle,
       withToggle = _ref$withToggle === void 0 ? true : _ref$withToggle,
+      _ref$disableShowMore = _ref.disableShowMore,
+      disableShowMore = _ref$disableShowMore === void 0 ? false : _ref$disableShowMore,
       _ref$shownItemsCount = _ref.shownItemsCount,
       shownItemsCount = _ref$shownItemsCount === void 0 ? 'auto' : _ref$shownItemsCount,
       _ref$testId = _ref.testId,
@@ -199,7 +201,7 @@ var TagList = function TagList(_ref) {
     return /*#__PURE__*/_react.default.createElement(_Tag.default, {
       label: "+".concat(restItems),
       className: "tag-list_wrapper_render-more",
-      onClick: function onClick(e) {
+      onClick: disableShowMore ? function () {} : function (e) {
         return cancelDefault(e, function () {
           return setRenderAll(true);
         });

package/dist/Atomic/UI/TagList/TagListStories.scss

@@ -1,8 +1,6 @@
-.tag-list_wrapper{
-  width: 25%!important;
-  // min-width: 25%!important;
-  // max-width: 25%!important;
-  background-color: #fbf9f9;
-  padding: 25px;
-  flex-wrap: wrap;
-}
+// .tag-list_wrapper{
+//   width: 25%!important;
+//   background-color: #fbf9f9;
+//   padding: 25px;
+//   flex-wrap: wrap;
+// }

package/package.json

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