intelicoreact 1.4.29 → 1.4.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Atomic/FormElements/Dropdown/Dropdown.js +23 -4
  2. package/dist/Atomic/FormElements/Dropdown/Dropdown.scss +65 -12
  3. package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js +3 -1
  4. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +4 -1
  5. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +68 -46
  6. package/package.json +1 -1
package/dist/Atomic/FormElements/Dropdown/Dropdown.js CHANGED
@@ -63,9 +63,13 @@ const Dropdown = _ref => {
63
63
  attributesOfNativeInput = {},
64
64
  isDoNotPullOutListOfMainContainer,
65
65
  withMobileLogic,
66
+ withActions,
66
67
  minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH,
67
68
  customTrigger,
68
- tabIndex
69
+ tabIndex,
70
+ onActionConfirmClick,
71
+ onActionCancelClick,
72
+ isDefaultOpened
69
73
  } = _ref;
70
74
  const {
71
75
  isMobile: isMobileProp
@@ -497,6 +501,7 @@ const Dropdown = _ref => {
497
501
  (0, _react.useEffect)(() => {
498
502
  if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
499
503
  initListContainer();
504
+ if (isDefaultOpened) setIsOpen(true);
500
505
  }
501
506
  }, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
502
507
  (0, _react.useLayoutEffect)(() => {
@@ -565,8 +570,9 @@ const Dropdown = _ref => {
565
570
 
566
571
  (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.add("dropdown__container--opened");
567
572
  } else {
568
- var _getListContainer6;
573
+ var _searchInputRef$curre2, _getListContainer6;
569
574
 
575
+ searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.blur();
570
576
  (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? void 0 : _getListContainer6.classList.remove("dropdown__container--opened");
571
577
  }
572
578
 
@@ -626,7 +632,12 @@ const Dropdown = _ref => {
626
632
  onKeyUp: onKeyUp
627
633
  }, /*#__PURE__*/_react.default.createElement("button", {
628
634
  "data-testid": "dropdown--".concat(testId || "", "--container"),
629
- className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? "input__wrap--focus" : "", " ").concat(!value ? "placeholder" : "", " ").concat(error ? "error" : ""),
635
+ className: (0, _classnames.default)("".concat(RC, "__trigger"), "input__wrap", {
636
+ ["".concat(RC, "__trigger--with-actions")]: withActions,
637
+ ["".concat(RC, "__trigger--with-custom-trigger")]: Boolean(customTrigger),
638
+ placeholder: !value,
639
+ error: error
640
+ }),
630
641
  onClick: () => setIsOpen(true),
631
642
  onKeyDown: onKeyDown,
632
643
  onKeyUp: onKeyUp,
@@ -657,7 +668,15 @@ const Dropdown = _ref => {
657
668
  onClick: toggleList
658
669
  }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
659
670
  className: "mobile-icon"
660
- }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)))), isOpen && renderListContainer());
671
+ }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)))), withActions && /*#__PURE__*/_react.default.createElement("div", {
672
+ className: (0, _classnames.default)("".concat(RC, "__actions"))
673
+ }, /*#__PURE__*/_react.default.createElement("div", {
674
+ className: (0, _classnames.default)("".concat(RC, "__actions-item")),
675
+ onClick: onActionConfirmClick
676
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
677
+ className: (0, _classnames.default)("".concat(RC, "__actions-item")),
678
+ onClick: onActionCancelClick
679
+ }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), isOpen && renderListContainer());
661
680
  };
662
681
 
663
682
  var _default = Dropdown;
package/dist/Atomic/FormElements/Dropdown/Dropdown.scss CHANGED
@@ -3,12 +3,68 @@
3
3
  .dropdown {
4
4
  position: relative;
5
5
 
6
- display: inline-flex;
7
- flex-direction: column;
8
-
9
6
  width: 100%;
10
7
 
11
- border-radius: $radii-s;
8
+ border-radius: $radii-s;
9
+
10
+ display: flex;
11
+ flex-wrap: nowrap;
12
+ justify-content: flex-start;
13
+ align-items: center;
14
+
15
+ border: 1px solid $color--gray--light;
16
+ border-radius: $radii-xs;
17
+ background: $color--light;
18
+ overflow: hidden;
19
+
20
+ &--focused {
21
+ border-color: #6b81dd;
22
+ filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
23
+ }
24
+
25
+ &--with-custom-trigger {
26
+ border: none!important;
27
+ background: none!important;
28
+ filter: none!important;
29
+ }
30
+
31
+ &--with-actions {
32
+ border-top-right-radius: 0;
33
+ border-bottom-right-radius: 0;
34
+ }
35
+
36
+ &__actions {
37
+ display: flex;
38
+ align-self: stretch;
39
+ align-items: center;
40
+ justify-content: center;
41
+ border-radius: 0px 2px 2px 0px;
42
+ overflow: hidden;
43
+ box-sizing: border-box;
44
+ min-width: 56px;
45
+
46
+ &-item {
47
+ height: 100%;
48
+ display: flex;
49
+ padding: 4px;
50
+ min-width: 28px;
51
+ justify-content: center;
52
+ align-items: center;
53
+ gap: 4px;
54
+ align-self: stretch;
55
+ background: var(--Background-Light-action, #F4F6FF);
56
+ box-sizing: border-box;
57
+ cursor: pointer;
58
+ border-left: 1px solid var(--Border-Input, #E2E5EC);
59
+ box-sizing: border-box;
60
+ }
61
+
62
+ svg {
63
+ width: 16px;
64
+ height: 16px;
65
+ color: #1E1E2D;
66
+ }
67
+ }
12
68
 
13
69
  &__container {
14
70
  position: fixed;
@@ -32,10 +88,8 @@
32
88
  font-weight: 400;
33
89
  cursor: pointer;
34
90
  text-align: left;
35
-
36
- border: 1px solid $color--gray--light;
37
- border-radius: $radii-xs;
38
- background: $color--light;
91
+ border: none!important;
92
+ filter: none;
39
93
 
40
94
  .text {
41
95
  overflow: hidden;
@@ -54,11 +108,10 @@
54
108
  &.placeholder .text {
55
109
  opacity: 0.7;
56
110
  }
57
- }
58
111
 
59
- &--focused &__trigger {
60
- border-color: #6b81dd;
61
- filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
112
+ input {
113
+ box-sizing: border-box;
114
+ }
62
115
  }
63
116
 
64
117
  &__input {
package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js CHANGED
@@ -90,7 +90,9 @@ const TagListToDropdown = _ref => {
90
90
  setNewValue(data);
91
91
  setIsValueChanged(true);
92
92
  }
93
- }, props));
93
+ }, props, {
94
+ isDefaultOpened: isEditMode
95
+ }));
94
96
  };
95
97
 
96
98
  const renderTagsList = props => {
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -81,6 +81,7 @@ const TagsDropdown = _ref => {
81
81
  doRequest: doLiveSearchRequest,
82
82
  attributesOfNativeInput = {},
83
83
  isUseLocalOptionsStore = true,
84
+ isDefaultOpened = false,
84
85
  withMobileLogic,
85
86
  withCreateLogic,
86
87
  withActions,
@@ -894,6 +895,7 @@ const TagsDropdown = _ref => {
894
895
 
895
896
  (0, _react.useLayoutEffect)(() => {
896
897
  initListContainer();
898
+ if (isDefaultOpened) setIsOpen(true);
897
899
  return () => {
898
900
  var _getListContainer2, _getListContainerWrap;
899
901
 
@@ -1035,7 +1037,8 @@ const TagsDropdown = _ref => {
1035
1037
  className: (0, _classnames.default)(RC, className, {
1036
1038
  ["".concat(RC, "_disabled")]: disabled,
1037
1039
  ["".concat(RC, "-mobile")]: isMobile,
1038
- ["".concat(RC, "--focused")]: isOpen
1040
+ ["".concat(RC, "--focused")]: isOpen && !(customTriggerRef !== null && customTriggerRef !== void 0 && customTriggerRef.current),
1041
+ ["".concat(RC, "--custom-trigger")]: Boolean(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current)
1039
1042
  }),
1040
1043
  ref: dropdownRef
1041
1044
  }, renderDropdownTrigger(), withActions && /*#__PURE__*/_react.default.createElement("div", {
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss CHANGED
@@ -9,6 +9,14 @@
9
9
 
10
10
  width: 100%;
11
11
 
12
+ border: 1px solid #e2e5ec;
13
+ border-radius: 3px;
14
+ overflow: hidden;
15
+
16
+ &--custom-trigger {
17
+ border: none;
18
+ }
19
+
12
20
  &__container {
13
21
  position: fixed;
14
22
  z-index: 99999;
@@ -39,8 +47,6 @@
39
47
  width: 100%;
40
48
 
41
49
  cursor: pointer;
42
-
43
- border: 1px solid #e2e5ec;
44
50
  border-radius: 3px;
45
51
  background: #fff;
46
52
 
@@ -60,9 +66,42 @@
60
66
  }
61
67
  }
62
68
 
63
- &--focused &__trigger {
69
+ &__actions {
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ border-radius: 0px 2px 2px 0px;
74
+ overflow: hidden;
75
+ box-sizing: border-box;
76
+ min-width: 56px;
64
77
 
65
- border-color: #6b81dd;
78
+ &-item {
79
+ height: 100%;
80
+ display: flex;
81
+ padding: 4px;
82
+ min-width: 28px;
83
+ justify-content: center;
84
+ align-items: center;
85
+ gap: 4px;
86
+ align-self: stretch;
87
+ background: var(--Background-Light-action, #F4F6FF);
88
+ box-sizing: border-box;
89
+ cursor: pointer;
90
+ border-left: 1px solid var(--Border-Input, #E2E5EC);
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ svg {
95
+ width: 16px;
96
+ height: 16px;
97
+ color: #1E1E2D;
98
+ }
99
+ }
100
+
101
+
102
+ &--focused {
103
+
104
+ border: 1px solid #6b81dd;
66
105
  filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
67
106
  }
68
107
 
@@ -316,42 +355,6 @@
316
355
  height: 100%;
317
356
  }
318
357
  }
319
-
320
- &__actions {
321
- display: flex;
322
- align-items: center;
323
- justify-content: center;
324
- border: 1px solid var(--Border-Input, #E2E5EC);
325
- border-left: none;
326
- border-radius: 0px 2px 2px 0px;
327
- overflow: hidden;
328
-
329
- &-item {
330
- height: 100%;
331
- display: flex;
332
- padding: 4px;
333
- min-width: 24px;
334
- justify-content: center;
335
- align-items: center;
336
- gap: 4px;
337
- align-self: stretch;
338
- background: var(--Background-Light-action, #F4F6FF);
339
- box-sizing: border-box;
340
- cursor: pointer;
341
- border-right: 1px solid var(--Border-Input, #E2E5EC);
342
-
343
- &:last-child {
344
- border: none;
345
- }
346
- }
347
-
348
- svg {
349
- width: 16px;
350
- height: 16px;
351
- color: #1E1E2D;
352
- }
353
- }
354
-
355
358
  &__edit-option-modal {
356
359
  position: absolute;
357
360
  display: flex;
@@ -706,7 +709,7 @@
706
709
  align-items: center;
707
710
 
708
711
  width: 100%;
709
- padding-right: $spacing-s;
712
+ padding: 0 $spacing-s;
710
713
 
711
714
  border: 1px solid var(--form-input-border, #e1e8f1);
712
715
  border-radius: 6px;
@@ -826,6 +829,11 @@
826
829
  &__list-item {
827
830
  display: flex;
828
831
  justify-content: space-between;
832
+ align-items: flex-start;
833
+
834
+ width: 100%;
835
+ gap: 8px;
836
+ box-sizing: border-box;
829
837
 
830
838
  height: auto !important;
831
839
  min-height: unset !important;
@@ -838,19 +846,33 @@
838
846
  background: var(--bg-gray-box, #f0f1f4) !important;
839
847
  }
840
848
 
841
- .checkbox-input__input {
842
- margin: 0;
843
- margin-left: $spacing-s;
849
+ &-body {
850
+ display: flex;
851
+ width: 100%;
852
+ box-sizing: border-box;
853
+
854
+ pre {
855
+ white-space: normal;
856
+ }
857
+ }
858
+
859
+ label {
860
+ width: 16px;
861
+ box-sizing: border-box;
862
+ margin-top: 4px;
863
+
864
+ .checkbox-input__input {
865
+ margin: 0;
866
+ }
844
867
  }
845
868
 
869
+
846
870
  .search-match {
847
871
  font-weight: 600;
848
872
  }
849
873
  }
850
874
 
851
875
  &__arrow {
852
- top: 11px !important;
853
-
854
876
  display: flex;
855
877
  justify-content: center;
856
878
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.4.29",
3
+ "version": "1.4.31",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [