intelicoreact 1.3.51 → 1.3.53

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/DropdownLiveSearch/DropdownLiveSearch.js +30 -0
  2. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +31 -2
  3. package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss +5 -3
  4. package/package.json +1 -1
package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js CHANGED
@@ -19,6 +19,8 @@ var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
19
19
 
20
20
  var _useDebounce = require("../../../Functions/useDebounce");
21
21
 
22
+ var _useIsMobile = _interopRequireDefault(require("../../../Functions/useIsMobile"));
23
+
22
24
  var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
23
25
 
24
26
  require("./DropdownLiveSearch.scss");
@@ -55,6 +57,10 @@ const DropdownLiveSearch = _ref => {
55
57
  const dropdownId = fieldKey || id;
56
58
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
57
59
  const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
60
+ const {
61
+ isMobile: isMobileProp
62
+ } = (0, _useIsMobile.default)();
63
+ const isMobile = isMobileProp && withMobileLogic && window.screen.width < 768;
58
64
  const labelByValue = (0, _react.useMemo)(() => {
59
65
  var _options$find;
60
66
 
@@ -238,6 +244,30 @@ const DropdownLiveSearch = _ref => {
238
244
  removeEventListener("scroll", doScrollCallback);
239
245
  };
240
246
  }, [isOpen, dropdownListRef]);
247
+ const closeList = isOpen ? handleClickOutside : () => {};
248
+ (0, _react.useLayoutEffect)(() => {
249
+ var _getListContainer;
250
+
251
+ if (!isMobile) {
252
+ window.addEventListener("mousewheel", closeList);
253
+ window.addEventListener("scroll", closeList);
254
+ window.addEventListener("touchmove", closeList);
255
+ } else {
256
+ window.removeEventListener("mousewheel", closeList);
257
+ window.removeEventListener("scroll", closeList);
258
+ window.removeEventListener("touchmove", closeList);
259
+ }
260
+
261
+ (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.addEventListener("click", closeList);
262
+ return () => {
263
+ var _getListContainer2;
264
+
265
+ window.removeEventListener("mousewheel", closeList);
266
+ window.removeEventListener("scroll", closeList);
267
+ window.removeEventListener("touchmove", closeList);
268
+ (_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.removeEventListener("click", closeList);
269
+ };
270
+ }, [getListContainer]);
241
271
  return /*#__PURE__*/_react.default.createElement("div", {
242
272
  className: (0, _classnames.default)(RC, className, {
243
273
  disabled: disabled
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js CHANGED
@@ -378,13 +378,16 @@ const TagsDropdown = _ref => {
378
378
  let swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
379
379
  const controlsHeight = swHeight - dlHeight;
380
380
  if (swHeight > maxHeight) swHeight = maxHeight - 2 * margin;
381
- const maxSwHeight = isMobile ? (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) : toTop - margin >= maxHeight || toBottom - margin >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
381
+ 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);
382
382
  const listPos = toTop < toBottom || toBottom >= swHeight ? "bottom" : "top";
383
383
  if (swHeight > (listPos === "top" ? toTop : toBottom)) swHeight = (listPos === "top" ? toTop : toBottom) - 3 * margin;
384
384
  lc.style.minWidth = "".concat(width, "px");
385
385
  lc.style.left = "".concat(left, "px");
386
386
  lc.style.top = "".concat(listPos === "bottom" ? top + height : top - swHeight - 2 * margin, "px");
387
- dl.style.maxHeight = "".concat(isMobile ? maxSwHeight : maxSwHeight - controlsHeight, "px");
387
+
388
+ if (isMobile) {
389
+ dl.style.maxHeight = "".concat(maxSwHeight, "px");
390
+ }
388
391
  };
389
392
 
390
393
  const renderListContainer = () => {
@@ -635,6 +638,32 @@ const TagsDropdown = _ref => {
635
638
  doLiveSearchRequest === null || doLiveSearchRequest === void 0 ? void 0 : doLiveSearchRequest(debouncedSearchTerm);
636
639
  }
637
640
  }, [debouncedSearchTerm, isValueDeleted]);
641
+ (0, _react.useLayoutEffect)(() => {
642
+ var _getListContainer5;
643
+
644
+ if (!isMobile) {
645
+ window.addEventListener("resize", setListContainerStyles);
646
+ window.addEventListener("mousewheel", closeList);
647
+ window.addEventListener("scroll", closeList);
648
+ window.addEventListener("touchmove", closeList);
649
+ } else {
650
+ window.removeEventListener("resize", setListContainerStyles);
651
+ window.removeEventListener("mousewheel", closeList);
652
+ window.removeEventListener("scroll", closeList);
653
+ window.removeEventListener("touchmove", closeList);
654
+ }
655
+
656
+ (_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.addEventListener("click", closeList);
657
+ return () => {
658
+ var _getListContainer6;
659
+
660
+ window.removeEventListener("resize", setListContainerStyles);
661
+ window.removeEventListener("mousewheel", closeList);
662
+ window.removeEventListener("scroll", closeList);
663
+ window.removeEventListener("touchmove", closeList);
664
+ (_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? void 0 : _getListContainer6.removeEventListener("click", closeList);
665
+ };
666
+ }, [getListContainer]);
638
667
  return /*#__PURE__*/_react.default.createElement("div", {
639
668
  className: (0, _classnames.default)(RC, className, {
640
669
  ["".concat(RC, "_disabled")]: disabled,
package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss CHANGED
@@ -82,25 +82,26 @@
82
82
  &__selector-wrapper {
83
83
  position: relative;
84
84
 
85
- display: block;
85
+ display: flex;
86
+ flex-direction: column;
86
87
 
87
88
  box-sizing: border-box;
88
89
  margin-top: 4px;
89
90
 
90
91
  border: 1px solid #e2e5ec;
91
92
  box-shadow: 0 4px 25px rgb(0 0 0 / 25%);
93
+ max-height: 320px;
92
94
  }
93
95
 
94
96
  &__list {
97
+ height: 100%;
95
98
  position: relative;
96
99
  z-index: 3;
97
100
 
98
101
  overflow-y: auto;
99
102
 
100
103
  box-sizing: border-box;
101
- width: 148px;
102
104
  min-width: 100%;
103
- max-height: 320px;
104
105
  padding: 8px 0;
105
106
 
106
107
  text-align: left;
@@ -325,6 +326,7 @@
325
326
  }
326
327
 
327
328
  &__selector-wrapper {
329
+ display: block;
328
330
  position: absolute;
329
331
  bottom: $spacing-s;
330
332
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelicoreact",
3
- "version": "1.3.51",
3
+ "version": "1.3.53",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "files": [