intelicoreact 1.4.28 → 1.4.30

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

@@ -63,9 +63,13 @@ const Dropdown = _ref => {
     attributesOfNativeInput = {},
     isDoNotPullOutListOfMainContainer,
     withMobileLogic,
+    withActions,
     minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH,
     customTrigger,
-    tabIndex
+    tabIndex,
+    onActionConfirmClick,
+    onActionCancelClick,
+    isDefaultOpened
   } = _ref;
   const {
     isMobile: isMobileProp
@@ -497,6 +501,7 @@ const Dropdown = _ref => {
   (0, _react.useEffect)(() => {
     if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
       initListContainer();
+      if (isDefaultOpened) setIsOpen(true);
     }
   }, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
   (0, _react.useLayoutEffect)(() => {
@@ -565,8 +570,9 @@ const Dropdown = _ref => {
 
       (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.add("dropdown__container--opened");
     } else {
-      var _getListContainer6;
+      var _searchInputRef$curre2, _getListContainer6;
 
+      searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.blur();
       (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? void 0 : _getListContainer6.classList.remove("dropdown__container--opened");
     }
 
@@ -626,7 +632,11 @@ const Dropdown = _ref => {
     onKeyUp: onKeyUp
   }, /*#__PURE__*/_react.default.createElement("button", {
     "data-testid": "dropdown--".concat(testId || "", "--container"),
-    className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? "input__wrap--focus" : "", " ").concat(!value ? "placeholder" : "", " ").concat(error ? "error" : ""),
+    className: (0, _classnames.default)("".concat(RC, "__trigger"), "input__wrap", {
+      ["".concat(RC, "__trigger--with-actions")]: withActions,
+      placeholder: !value,
+      error: error
+    }),
     onClick: () => setIsOpen(true),
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
@@ -657,7 +667,15 @@ const Dropdown = _ref => {
     onClick: toggleList
   }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
     className: "mobile-icon"
-  }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)))), isOpen && renderListContainer());
+  }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)))), withActions && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__actions"))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__actions-item")),
+    onClick: onActionConfirmClick
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__actions-item")),
+    onClick: onActionCancelClick
+  }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), isOpen && renderListContainer());
 };
 
 var _default = Dropdown;

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -3,12 +3,57 @@
 .dropdown {
   position: relative;
 
-  display: inline-flex;
-  flex-direction: column;
-
   width: 100%;
 
-  border-radius: $radii-s;
+  border-radius: $radii-s; 
+  
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  border: 1px solid $color--gray--light;
+  border-radius: $radii-xs;
+  background: $color--light;
+  overflow: hidden;
+
+  &--with-actions {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__actions {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0px 2px 2px 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+    min-width: 56px;
+
+    &-item {
+      height: 100%;
+      display: flex;
+      padding: 4px;
+      min-width: 28px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      align-self: stretch;
+      background: var(--Background-Light-action, #F4F6FF);
+      box-sizing: border-box;
+      cursor: pointer;
+      border-left: 1px solid var(--Border-Input, #E2E5EC);
+      box-sizing: border-box;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: #1E1E2D;
+    }
+  }
 
   &__container {
     position: fixed;
@@ -32,10 +77,8 @@
     font-weight: 400;
     cursor: pointer;
     text-align: left;
-
-    border: 1px solid $color--gray--light;
-    border-radius: $radii-xs;
-    background: $color--light;
+    border: none;
+    filter: none;
 
     .text {
       overflow: hidden;
@@ -54,9 +97,13 @@
     &.placeholder .text {
       opacity: 0.7;
     }
+
+    input {
+      box-sizing: border-box;
+    }
   }
 
-  &--focused &__trigger {
+  &--focused {
     border-color: #6b81dd;
     filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
   }

package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js

@@ -90,7 +90,9 @@ const TagListToDropdown = _ref => {
         setNewValue(data);
         setIsValueChanged(true);
       }
-    }, props));
+    }, props, {
+      isDefaultOpened: isEditMode
+    }));
   };
 
   const renderTagsList = props => {

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

@@ -81,6 +81,7 @@ const TagsDropdown = _ref => {
     doRequest: doLiveSearchRequest,
     attributesOfNativeInput = {},
     isUseLocalOptionsStore = true,
+    isDefaultOpened = false,
     withMobileLogic,
     withCreateLogic,
     withActions,
@@ -128,6 +129,7 @@ const TagsDropdown = _ref => {
     searchValueRef.current = value;
   };
 
+  const editingOptionInputRef = (0, _react.useRef)(null);
   const [options, setOptions] = (0, _react.useState)([]);
   const [editingOption, setEditingOptionState] = (0, _react.useState)(null);
 
@@ -411,7 +413,8 @@ const TagsDropdown = _ref => {
       onKeyDown: keyCode => {
         if (keyCode === 13) saveEditingOption();
       },
-      symbolsLimit: "50"
+      symbolsLimit: "50",
+      ref: editingOptionInputRef
     }), /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: "link",
       icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, null),
@@ -892,6 +895,7 @@ const TagsDropdown = _ref => {
 
   (0, _react.useLayoutEffect)(() => {
     initListContainer();
+    if (isDefaultOpened) setIsOpen(true);
     return () => {
       var _getListContainer2, _getListContainerWrap;
 
@@ -1022,13 +1026,19 @@ const TagsDropdown = _ref => {
     })));
   }, [optionsProp]);
   (0, _react.useEffect)(() => {
-    if (editingOption) setEditOptionModalStyles();
+    if (editingOption) {
+      var _editingOptionInputRe, _editingOptionInputRe2;
+
+      setEditOptionModalStyles();
+      editingOptionInputRef === null || editingOptionInputRef === void 0 ? void 0 : (_editingOptionInputRe = editingOptionInputRef.current) === null || _editingOptionInputRe === void 0 ? void 0 : (_editingOptionInputRe2 = _editingOptionInputRe.focus) === null || _editingOptionInputRe2 === void 0 ? void 0 : _editingOptionInputRe2.call(_editingOptionInputRe);
+    }
   }, [editingOption === null || editingOption === void 0 ? void 0 : editingOption.value]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, {
       ["".concat(RC, "_disabled")]: disabled,
       ["".concat(RC, "-mobile")]: isMobile,
-      ["".concat(RC, "--focused")]: isOpen
+      ["".concat(RC, "--focused")]: isOpen && !(customTriggerRef !== null && customTriggerRef !== void 0 && customTriggerRef.current),
+      ["".concat(RC, "--custom-trigger")]: Boolean(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current)
     }),
     ref: dropdownRef
   }, renderDropdownTrigger(), withActions && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -9,6 +9,14 @@
 
   width: 100%;
 
+  border: 1px solid #e2e5ec;
+  border-radius: 3px;
+  overflow: hidden;
+
+  &--custom-trigger {
+    border: none;
+  }
+
   &__container {
     position: fixed;
     z-index: 99999;
@@ -39,8 +47,6 @@
     width: 100%;
 
     cursor: pointer;
-
-    border: 1px solid #e2e5ec;
     border-radius: 3px;
     background: #fff;
 
@@ -60,9 +66,42 @@
     }
   }
 
-  &--focused &__trigger {
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0px 2px 2px 0px;
+    overflow: hidden;
+    box-sizing: border-box;
+    min-width: 56px;
+
+    &-item {
+      height: 100%;
+      display: flex;
+      padding: 4px;
+      min-width: 28px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      align-self: stretch;
+      background: var(--Background-Light-action, #F4F6FF);
+      box-sizing: border-box;
+      cursor: pointer;
+      border-left: 1px solid var(--Border-Input, #E2E5EC);
+      box-sizing: border-box;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      color: #1E1E2D;
+    }
+  }
+
+
+  &--focused {
 
-    border-color: #6b81dd;
+    border: 1px solid #6b81dd;
     filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
   }
 
@@ -316,42 +355,6 @@
       height: 100%;
     }
   }
-
-  &__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;

package/package.json

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