intelicoreact 1.4.9 → 1.4.11

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -4,9 +4,12 @@
   position: relative;
 
   display: flex;
-  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-direction: row;
 
   width: 100%;
+  max-width: 500px;
+
 
   &__container {
     position: fixed;
@@ -35,12 +38,33 @@
     height: fit-content;
     min-height: 28px;
     padding: 1px 24px 1px 5px;
+    width: 100%;
 
     cursor: pointer;
 
     border: 1px solid #e2e5ec;
     border-radius: 3px;
     background: #fff;
+
+    &--with-actions {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .input__wrap {
+      border: none;
+
+      &_focus {
+        border: none;
+        filter: none;
+      }
+    }
+  }
+
+  &--focused &__trigger {
+
+    border-color: #6b81dd;
+    filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
   }
 
   &__input {
@@ -48,12 +72,31 @@
     flex-grow: 1;
 
     height: 16px;
+    padding: 0;
     padding-right: 2px;
 
     text-overflow: ellipsis;
 
-    border: none;
-    background: none;
+    &:not(.tags-dropdown__input--in-list) {
+      border: none;
+      background: none;
+    }
+
+    &-list-wrapper {
+      padding: 8px 8px 4px;
+    }
+
+    &--in-list {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 4px 8px; 
+      height: 28px;
+
+      &:focus {
+        border-color: #6b81dd;
+        box-shadow: 0px 0px 4px 0px rgba(93, 120, 255, 0.50);
+      }
+    }
   }
 
   &__header,
@@ -79,6 +122,49 @@
     border-bottom: 1px solid #e8e9ec;
   }
 
+  &__creatable-helper {
+    color: var(--Text-Title, #9AA0B9);
+    font-family: Roboto;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    display: flex;
+    padding: 2px 4px;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  &__create-option {
+    display: flex;
+    height: 24px;
+    padding: 2px 4px;
+    align-items: center;
+    gap: 3px;
+    align-self: stretch;
+    background: var(--Background-Form-Main, #F7FAFC);
+    color: var(--Text-Main, #1E1E2D);
+    font-family: Roboto;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    cursor: pointer;
+  }
+
+  &__no-options {
+    color: var(--Text-Title, #9AA0B9);
+    font-family: Roboto;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    display: flex;
+    padding: 2px 4px;
+    align-items: center;
+    align-self: stretch;
+  }
+
   &__selector-wrapper {
     position: relative;
 
@@ -92,6 +178,7 @@
     box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
     max-height: 320px;
   }
+  
 
   &__list {
     height: 100%;
@@ -102,7 +189,8 @@
 
     box-sizing: border-box;
     min-width: 100%;
-    padding: 8px 0;
+    // padding: 8px 0;
+    padding: 2px 0;
 
     text-align: left;
 
@@ -129,12 +217,14 @@
       position: relative;
 
       display: flex;
-      justify-content: flex-start;
+      justify-content: space-between;
       align-items: center;
 
       width: 100%;
+      min-width: 100%;
       min-height: 24px;
       padding-left: 35px;
+      padding-right: 4px;
 
       font-size: 13px;
       font-weight: 400;
@@ -144,8 +234,9 @@
       color: $color--dark;
 
       &:hover,
-      &_active {
-        background: $color--gray--gentle;
+      &_active,
+      &--editing {
+        background: #F7FAFC;//$color--gray--gentle;
       }
 
       &_disabled {
@@ -172,6 +263,35 @@
         color: #757f8c;
       }
 
+      &-edit-trigger {
+        display: inline-flex;
+        padding: 2px;
+        align-items: flex-start;
+        gap: 4px;
+
+        &:hover {
+          background-color: #EBEFF2;
+
+          svg {
+            color: #1E1E2D;
+          }
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+          color: #9AA0B9;
+        }
+      }
+
+      &--editing &-edit-trigger {
+        background-color: #EBEFF2;
+
+        svg {
+          color: #1E1E2D;
+        }
+      }
+
       pre.inherit-styles {
         font: inherit!important;
         margin: 0;
@@ -196,6 +316,135 @@
     }
   }
 
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--Border-Input, #E2E5EC);
+    border-left: none;
+    border-radius: 0px 2px 2px 0px;
+    overflow: hidden;
+
+    &-item {
+      height: 100%;
+      display: flex;
+      padding: 4px;
+      min-width: 24px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      align-self: stretch;
+      background: var(--Background-Light-action, #F4F6FF);
+      box-sizing: border-box;
+      cursor: pointer;
+      border-right: 1px solid var(--Border-Input, #E2E5EC);
+
+      &:last-child {
+        border: none;
+      }
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: #1E1E2D;
+    }
+  }
+  
+  &__edit-option-modal {
+    position: absolute;
+    display: flex;
+    width: 182px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    border-radius: 4px;
+    background: var(--White, #FFF);
+    box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
+    z-index: 3;
+
+    &-section {
+      display: flex;
+      flex-direction: column;
+      padding: 8px;
+      align-items: flex-start;
+      gap: 8px;
+      align-self: stretch;
+
+      button {
+        display: flex;
+        gap: 4px;
+        padding: 0;
+        height: auto;
+        box-sizing: border-box;
+        align-items: center;
+        color: var(--Text-Main, #1E1E2D);
+
+        .button__text {
+          margin: 0;
+          width: auto;
+          font-family: Roboto;
+          font-size: 13px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+        }
+
+        svg {
+          display: block;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      h3 {
+        color: var(--Text-Title, #9AA0B9);
+        font-family: Roboto;
+        font-size: 10px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        text-transform: uppercase;
+        margin: 0;
+      }
+
+      &-divider {
+        width: 100%;
+        height: 1px;
+        background: #E2E5EC;
+      }
+
+      &-colors {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        .color-block {
+          display: flex;
+          width: 20px;
+          height: 20px;
+          padding: 2px;
+          align-items: flex-start;
+          gap: 4px;
+          border-radius: 3px;
+          box-sizing: border-box;
+          border: 1px solid rgba(0, 0, 0, 0.15);
+          cursor: pointer;
+
+          svg {
+            display: flex;
+            width: 16px;
+            height: 16px;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+            color: #1E1E2D;
+          }
+        }
+      }
+    }
+  }
+
   &__active-icon {
     position: absolute;
     top: 0;

package/dist/Atomic/UI/Tag/Tag.js

@@ -16,11 +16,11 @@ const Tag = _ref => {
   let {
     value,
     className,
+    style,
     label,
     warning,
     removeItem,
     name,
-    color,
     isPopup,
     popupInfo,
     popupInfoContent,
@@ -70,9 +70,7 @@ const Tag = _ref => {
     className: (0, _classnames.default)("tag", className, {
       "tag-warn": warning
     }),
-    style: {
-      background: color
-    },
+    style: style !== null && style !== void 0 ? style : {},
     onClick: () => handle.onTagClick()
   }, warning && typeof warning === "string" && /*#__PURE__*/_react.default.createElement(_reactFeather.AlertTriangle, {
     className: "advanced-tags--warning-icon mr5"

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

@@ -7,7 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _utils = require("lib/src/Functions/utils");
+var _reactFeather = require("react-feather");
+var _utils = require("../../../Functions/utils");
 var _Tag = _interopRequireDefault(require("../Tag/Tag"));
 require("./TagList.scss");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -22,6 +23,9 @@ const TagList = _ref => {
     disableShowMore = false,
     shownItemsCount = "auto",
     testId = "test-taglist",
+    refProp,
+    onEditClick,
+    onToggleRenderAll,
     isPopup,
     popupInfo,
     popupInfoContent
@@ -32,6 +36,10 @@ const TagList = _ref => {
   const [staticTagsCount, setStaticTagsCount] = (0, _react.useState)(-1);
   const [renderItemsCount, setRenderItemsCount] = (0, _react.useState)(-1);
   const [renderAll, setRenderAll] = (0, _react.useState)(!withToggle);
+  const setRenderAllInterceptor = v => {
+    setRenderAll(v);
+    onToggleRenderAll === null || onToggleRenderAll === void 0 || onToggleRenderAll(v);
+  };
   const [lastCheckTime, setLastCheckTime] = (0, _react.useState)(-1);
   const isTagsRefSet = () => {
     if (!tagList.length) return false;
@@ -79,6 +87,42 @@ const TagList = _ref => {
     e === null || e === void 0 || e.stopPropagation();
     cb(e);
   };
+  const renderTags = () => {
+    return tagList.map((item, i) => ({
+      ...item,
+      isHidden: renderItemsCount !== -1 ? i >= renderItemsCount : false
+    })).map(item => /*#__PURE__*/_react.default.createElement("div", {
+      className: "tag-list_wrapper_item ".concat(item.isHidden ? "tag-list_wrapper_item--hidden" : ""),
+      key: "tag-list-item-".concat(item.id),
+      ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
+    }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
+      testId: "test-taglist-item-".concat(item.id)
+    }, item, {
+      onClick: onTagClick,
+      removeItem: removeItem,
+      isPopup: isPopup,
+      popupInfo: popupInfo,
+      popupInfoContent: popupInfoContent
+    }))));
+  };
+  const renderMoreTags = () => {
+    if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList !== null && tagList !== void 0 && tagList.length) || disableShowMore) return null;
+    const restItems = tagList.length - renderItemsCount;
+    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
+    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
+      label: "+".concat(restItems),
+      className: "tag-list_wrapper_render-more",
+      onClick: disableShowMore ? () => {} : e => cancelDefault(e, () => setRenderAllInterceptor(true))
+    });
+  };
+  const renderHideTags = () => {
+    if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
+    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
+      label: "...",
+      className: "tag-list_wrapper_hide-more",
+      onClick: e => cancelDefault(e, () => setRenderAllInterceptor(false))
+    });
+  };
 
   // Set TagList Wrapper Width
   (0, _react.useLayoutEffect)(() => {
@@ -92,7 +136,7 @@ const TagList = _ref => {
   (0, _react.useEffect)(() => {
     setStaticTagsCount(-1);
     setRenderItemsCount(-1);
-    setRenderAll(false);
+    setRenderAllInterceptor(false);
     setTagList(items.map(item => ({
       ...item,
       itemRef: /*#__PURE__*/(0, _react.createRef)()
@@ -119,45 +163,17 @@ const TagList = _ref => {
   (0, _react.useEffect)(() => {
     setRenderItemsCount(renderAll ? tagList === null || tagList === void 0 ? void 0 : tagList.length : staticTagsCount);
   }, [renderAll]);
-  const renderTags = () => {
-    return tagList.map((item, i) => ({
-      ...item,
-      isHidden: renderItemsCount !== -1 ? i >= renderItemsCount : false
-    })).map(item => /*#__PURE__*/_react.default.createElement("div", {
-      className: "tag-list_wrapper_item ".concat(item.isHidden ? "tag-list_wrapper_item--hidden" : ""),
-      key: "tag-list-item-".concat(item.id),
-      ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
-    }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
-      testId: "test-taglist-item-".concat(item.id)
-    }, item, {
-      onClick: onTagClick,
-      removeItem: removeItem,
-      isPopup: isPopup,
-      popupInfo: popupInfo,
-      popupInfoContent: popupInfoContent
-    }))));
-  };
-  const renderMoreTags = () => {
-    if ((tagList === null || tagList === void 0 ? void 0 : tagList.length) < shownItemsCount || !(tagList !== null && tagList !== void 0 && tagList.length) || disableShowMore) return null;
-    const restItems = tagList.length - renderItemsCount;
-    if (restItems === 0 || !withToggle || staticTagsCount === -1) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: "+".concat(restItems),
-      className: "tag-list_wrapper_render-more",
-      onClick: disableShowMore ? () => {} : e => cancelDefault(e, () => setRenderAll(true))
-    });
-  };
-  const renderHideTags = () => {
-    if (renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length)) return null;
-    return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: "...",
-      className: "tag-list_wrapper_hide-more",
-      onClick: e => cancelDefault(e, () => setRenderAll(false))
-    });
-  };
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current) refProp.current = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current;
+  }, [wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "tag-list_wrapper ".concat(renderItemsCount !== (tagList === null || tagList === void 0 ? void 0 : tagList.length) || !withToggle || staticTagsCount === -1 || staticTagsCount === (tagList === null || tagList === void 0 ? void 0 : tagList.length) ? "tag-list_wrapper--only-static-items" : "tag-list_wrapper--all-items", " ").concat(className !== null && className !== void 0 ? className : ""),
     ref: wrapperRef
-  }, renderTags(), renderMoreTags(), renderHideTags());
+  }, renderTags(), renderMoreTags(), renderHideTags(), typeof onEditClick === "function" && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tag-list__edit-trigger"
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Edit3, {
+    onClick: onEditClick
+  })));
 };
 var _default = exports.default = TagList;

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

@@ -33,3 +33,18 @@
     margin: 2px;
   }
 }
+
+.tag-list__edit-trigger {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    color: #6B81DD;
+  }
+}

package/package.json

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