intelicoreact 1.4.35 → 1.4.37

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 (4) hide show
  1. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +31 -29
  2. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +21 -21
  3. package/dist/Atomic/UI/Hint/Hint.js +14 -4
  4. package/package.json +1 -1
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -253,10 +253,10 @@ const TagsDropdown = _ref => {
253
253
  };
254
254
 
255
255
  const setListContainerStyles = () => {
256
- var _dropdownRef$current$, _dropdownRef$current, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient, _sw$getBoundingClient2, _lh$getBoundingClient, _lf$getBoundingClient;
256
+ var _dropdownRef$current$, _dropdownRef$current, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _selectorWrapper$getB, _listHeader$getBoundi, _listHeader$getBoundi2, _listFooter$getBoundi, _listFooter$getBoundi2;
257
257
 
258
- const lc = getListContainer();
259
- if (!lc || !isOpen) return false;
258
+ const listContainer = getListContainer();
259
+ if (!listContainer || !isOpen) return false;
260
260
  const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
261
261
  const {
262
262
  width,
@@ -264,26 +264,30 @@ const TagsDropdown = _ref => {
264
264
  left,
265
265
  top
266
266
  } = (_dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.getBoundingClientRect()) !== null && _dropdownRef$current$ !== void 0 ? _dropdownRef$current$ : {};
267
- const sw = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : dropdownListWrapperRef.current;
268
- const dl = lc.getElementsByClassName("tags-dropdown__list")[0];
269
- const lh = sw === null || sw === void 0 ? void 0 : sw.getElementsByClassName("tags-dropdown__header")[0];
270
- const lf = sw === null || sw === void 0 ? void 0 : sw.getElementsByClassName("tags-dropdown__footer")[0];
271
- const margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(sw)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace("px", "")) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0, 10);
272
- const maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_getComputedStyle$max = (_getComputedStyle2 = getComputedStyle(dl)) === null || _getComputedStyle2 === void 0 ? void 0 : (_getComputedStyle2$ma = _getComputedStyle2.maxHeight) === null || _getComputedStyle2$ma === void 0 ? void 0 : _getComputedStyle2$ma.replace("px", "")) !== null && _getComputedStyle$max !== void 0 ? _getComputedStyle$max : 0, 10);
273
- if (initListHeight === null) setInitListHeight(maxHeight);
274
- const toTop = top - margin;
275
- const toBottom = windowHeight - top - height - margin * 2;
276
- let swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
277
- if (swHeight > maxHeight) swHeight = maxHeight - 2 * margin;
278
- const maxSwHeight = (sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient2 = sw.getBoundingClientRect()) === null || _sw$getBoundingClient2 === void 0 ? void 0 : _sw$getBoundingClient2.height) - (lh === null || lh === void 0 ? void 0 : (_lh$getBoundingClient = lh.getBoundingClientRect()) === null || _lh$getBoundingClient === void 0 ? void 0 : _lh$getBoundingClient.height) - (lf === null || lf === void 0 ? void 0 : (_lf$getBoundingClient = lf.getBoundingClientRect()) === null || _lf$getBoundingClient === void 0 ? void 0 : _lf$getBoundingClient.height);
279
- const listPos = toTop < toBottom || toBottom >= swHeight ? "bottom" : "top";
280
- if (swHeight > (listPos === "top" ? toTop : toBottom)) swHeight = (listPos === "top" ? toTop : toBottom) - 3 * margin;
281
- lc.style.minWidth = "".concat(width, "px");
282
- lc.style.left = "".concat(left, "px");
283
- lc.style.top = "".concat(listPos === "bottom" ? top + height : top - swHeight - 2 * margin, "px");
284
-
285
- if (isMobile) {
286
- dl.style.maxHeight = "".concat(maxSwHeight, "px");
267
+ const selectorWrapper = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : dropdownListWrapperRef.current;
268
+ const dropdownList = listContainer.getElementsByClassName("tags-dropdown__list")[0];
269
+ const listHeader = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName("tags-dropdown__header")[0];
270
+ const listFooter = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName("tags-dropdown__footer")[0];
271
+ const margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(selectorWrapper)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace("px", "")) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0, 10);
272
+ let selectorWrapperHeight = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : (_selectorWrapper$getB = selectorWrapper.getBoundingClientRect()) === null || _selectorWrapper$getB === void 0 ? void 0 : _selectorWrapper$getB.height;
273
+ const maxSelectorWrapperHeight = 500 - ((_listHeader$getBoundi = listHeader === null || listHeader === void 0 ? void 0 : (_listHeader$getBoundi2 = listHeader.getBoundingClientRect()) === null || _listHeader$getBoundi2 === void 0 ? void 0 : _listHeader$getBoundi2.height) !== null && _listHeader$getBoundi !== void 0 ? _listHeader$getBoundi : 0) - ((_listFooter$getBoundi = listFooter === null || listFooter === void 0 ? void 0 : (_listFooter$getBoundi2 = listFooter.getBoundingClientRect()) === null || _listFooter$getBoundi2 === void 0 ? void 0 : _listFooter$getBoundi2.height) !== null && _listFooter$getBoundi !== void 0 ? _listFooter$getBoundi : 0);
274
+
275
+ if (!isMobile || !withMobileLogic) {
276
+ var _getComputedStyle2, _dropdownListMaxHeigh;
277
+
278
+ const dropdownListMaxHeightInPx = (_getComputedStyle2 = getComputedStyle(dropdownList)) === null || _getComputedStyle2 === void 0 ? void 0 : _getComputedStyle2.maxHeight;
279
+ const maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_dropdownListMaxHeigh = dropdownListMaxHeightInPx === null || dropdownListMaxHeightInPx === void 0 ? void 0 : dropdownListMaxHeightInPx.replace("px", "")) !== null && _dropdownListMaxHeigh !== void 0 ? _dropdownListMaxHeigh : 0, 10);
280
+ if (initListHeight === null && !isNaN(maxHeight)) setInitListHeight(maxHeight);
281
+ if (selectorWrapperHeight > maxHeight && !isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
282
+ const toTop = top - margin;
283
+ const toBottom = windowHeight - top - height - margin * 2;
284
+ const listPos = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
285
+ if (selectorWrapperHeight > (listPos === "top" ? toTop : toBottom)) selectorWrapperHeight = (listPos === "top" ? toTop : toBottom) - 3 * margin;
286
+ listContainer.style.minWidth = "".concat(width, "px");
287
+ listContainer.style.left = "".concat(left, "px");
288
+ listContainer.style.top = "".concat(listPos === "bottom" ? top + height : top - selectorWrapperHeight - 2 * margin, "px");
289
+ } else {
290
+ dropdownList.style.maxHeight = "".concat(maxSelectorWrapperHeight, "px");
287
291
  }
288
292
  };
289
293
 
@@ -813,12 +817,10 @@ const TagsDropdown = _ref => {
813
817
  }
814
818
 
815
819
  onKeyPress(e, searchValue);
816
- },
817
- onFocus: e => {
818
- var _e$target;
820
+ } // onFocus: (e) => {
821
+ // if (isMobile) e?.target?.blur();
822
+ // },
819
823
 
820
- if (isMobile) e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.blur();
821
- }
822
824
  }
823
825
  });
824
826
  };
@@ -940,7 +942,7 @@ const TagsDropdown = _ref => {
940
942
  (0, _react.useLayoutEffect)(() => {
941
943
  setListContainerStyles();
942
944
  setEditOptionModalStyles();
943
- }, [isOpen, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height, recalculateListContainerStylesTrigger]);
945
+ }, [isOpen, optionsProp, chosenOptions, isMobile, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height, recalculateListContainerStylesTrigger]);
944
946
  (0, _react.useEffect)(() => {
945
947
  if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
946
948
  options.map(option => {
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss CHANGED
@@ -555,26 +555,6 @@
555
555
  }
556
556
  }
557
557
 
558
- @keyframes slideup {
559
- from {
560
- transform: translateY(100%);
561
- }
562
-
563
- to {
564
- transform: translateY(0);
565
- }
566
- }
567
-
568
- @keyframes fadeIn {
569
- from {
570
- opacity: 0;
571
- }
572
-
573
- to {
574
- opacity: 1;
575
- }
576
- }
577
-
578
558
  @media (max-width: 768px) {
579
559
  .tags-dropdown-mobile {
580
560
  .tags-dropdown {
@@ -752,7 +732,7 @@
752
732
  }
753
733
 
754
734
  &__footer {
755
- position: absolute;
735
+ position: relative;
756
736
  bottom: 0;
757
737
 
758
738
  padding: 0;
@@ -894,4 +874,24 @@
894
874
  }
895
875
  }
896
876
  }
877
+ }
878
+
879
+ @keyframes slideup {
880
+ from {
881
+ transform: translateY(100%);
882
+ }
883
+
884
+ to {
885
+ transform: translateY(0);
886
+ }
887
+ }
888
+
889
+ @keyframes fadeIn {
890
+ from {
891
+ opacity: 0;
892
+ }
893
+
894
+ to {
895
+ opacity: 1;
896
+ }
897
897
  }
package/dist/Atomic/UI/Hint/Hint.js CHANGED
@@ -34,6 +34,7 @@ const Hint = _ref => {
34
34
  hint,
35
35
  side = "right",
36
36
  className,
37
+ hintContainer = {},
37
38
  label = "",
38
39
  variant = "filled",
39
40
  handleOpenType = "click",
@@ -65,9 +66,13 @@ const Hint = _ref => {
65
66
  const initHintContainer = () => {
66
67
  var _getParentNode;
67
68
 
69
+ const {
70
+ className
71
+ } = hintContainer;
68
72
  const hint = document.createElement("div");
69
73
  hint.setAttribute("id", hintId);
70
74
  hint.classList.add("hint__container");
75
+ if (className) hint.classList.add(className);
71
76
  (_getParentNode = getParentNode()) === null || _getParentNode === void 0 ? void 0 : _getParentNode.append(hint);
72
77
  };
73
78
 
@@ -83,7 +88,7 @@ const Hint = _ref => {
83
88
  };
84
89
 
85
90
  const setHintContainerStyles = () => {
86
- var _sw$getBoundingClient;
91
+ var _sw$getBoundingClient, _ref4, _ref5, _ref6;
87
92
 
88
93
  const hc = getHintContainer();
89
94
  if (!hc || !isOpen) return false;
@@ -92,11 +97,16 @@ const Hint = _ref => {
92
97
  left,
93
98
  top
94
99
  } = (hintRef === null || hintRef === void 0 ? void 0 : hintRef.current.getBoundingClientRect()) || {};
100
+ const {
101
+ addWidth,
102
+ addLeft,
103
+ addTop
104
+ } = hintContainer;
95
105
  const sw = hc.getElementsByClassName("hint__text")[0];
96
106
  const swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
97
- hc.style.width = isOpen ? width === null || width === void 0 ? void 0 : width.toString().concat("px") : 0;
98
- hc.style.left = isOpen ? left === null || left === void 0 ? void 0 : left.toString().concat("px") : 0;
99
- hc.style.top = isOpen ? top === null || top === void 0 ? void 0 : top.toString().concat("px") : 0;
107
+ hc.style.width = isOpen ? (_ref4 = (!Number.isNaN(+addWidth) ? +addWidth : 0) + width) === null || _ref4 === void 0 ? void 0 : _ref4.toString().concat("px") : 0;
108
+ hc.style.left = isOpen ? (_ref5 = (!Number.isNaN(+addLeft) ? +addLeft : 0) + left) === null || _ref5 === void 0 ? void 0 : _ref5.toString().concat("px") : 0;
109
+ hc.style.top = isOpen ? (_ref6 = (!Number.isNaN(+addTop) ? +addTop : 0) + top) === null || _ref6 === void 0 ? void 0 : _ref6.toString().concat("px") : 0;
100
110
  hc.style.maxHeight = isOpen ? swHeight === null || swHeight === void 0 ? void 0 : swHeight.toString().concat("px") : 0;
101
111
  };
102
112
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.4.35",
3
+ "version": "1.4.37",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [