@zohodesk/components 1.0.0-temp-242.1 → 1.0.0-temp-247

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 (73) hide show
  1. package/README.md +0 -16
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +198 -198
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +8 -8
  4. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css +465 -465
  5. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +33 -33
  6. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +28 -28
  7. package/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css +465 -465
  8. package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +33 -33
  9. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +28 -28
  10. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css +465 -465
  11. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +33 -33
  12. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +28 -28
  13. package/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css +465 -465
  14. package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +33 -33
  15. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +28 -28
  16. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css +465 -465
  17. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +33 -33
  18. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +28 -28
  19. package/assets/Appearance/light/mode/Component_LightMode.module.css +194 -194
  20. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +8 -8
  21. package/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css +465 -465
  22. package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +33 -33
  23. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +28 -28
  24. package/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css +465 -465
  25. package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +33 -33
  26. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +28 -28
  27. package/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css +465 -465
  28. package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +33 -33
  29. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +28 -28
  30. package/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css +465 -465
  31. package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +33 -33
  32. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +28 -28
  33. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css +465 -465
  34. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +33 -33
  35. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +28 -28
  36. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +200 -200
  37. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +8 -8
  38. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css +465 -465
  39. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +33 -33
  40. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +28 -28
  41. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css +465 -465
  42. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +33 -33
  43. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +28 -28
  44. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css +465 -465
  45. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +33 -33
  46. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +28 -28
  47. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css +465 -465
  48. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +33 -33
  49. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +28 -28
  50. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css +465 -465
  51. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +33 -33
  52. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +28 -28
  53. package/es/DropBox/DropBoxElement/DropBoxElement.js +1 -1
  54. package/es/DropBox/DropBoxPositionMapping.js +142 -0
  55. package/es/DropBox/utils/isMobilePopover.js +14 -3
  56. package/es/Popup/Popup.js +1045 -21
  57. package/es/Popup/PositionMapping.js +72 -0
  58. package/es/Popup/Registry.js +36 -0
  59. package/es/Popup/intersectionObserver.js +49 -0
  60. package/es/Popup/viewPort.js +373 -0
  61. package/es/utils/Common.js +1 -1
  62. package/es/v1/Popup/Popup.js +1 -1
  63. package/lib/DropBox/DropBoxElement/DropBoxElement.js +5 -5
  64. package/lib/DropBox/DropBoxPositionMapping.js +149 -0
  65. package/lib/DropBox/utils/isMobilePopover.js +14 -4
  66. package/lib/Popup/Popup.js +1152 -25
  67. package/lib/Popup/PositionMapping.js +81 -0
  68. package/lib/Popup/Registry.js +46 -0
  69. package/lib/Popup/intersectionObserver.js +72 -0
  70. package/lib/Popup/viewPort.js +367 -0
  71. package/lib/utils/Common.js +1 -1
  72. package/lib/v1/Popup/Popup.js +1 -1
  73. package/package.json +9 -9
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.rtlFixedPositionMapping = exports.rtlAbsolutePositionMapping = exports.absolutePositionMapping = void 0;
7
+ var absolutePositionMapping = {
8
+ "bottomCenter": "bottomCenter",
9
+ "bottomRight": "bottomLeftToRight",
10
+ "bottomLeft": "bottomRightToLeft",
11
+ "topCenter": "topCenter",
12
+ "topRight": "topLeftToRight",
13
+ "topLeft": "topRightToLeft",
14
+ "rightCenter": "rightCenter",
15
+ "rightBottom": "rightTopToBottom",
16
+ "rightTop": "rightBottomToTop",
17
+ "leftCenter": "leftCenter",
18
+ "leftBottom": "leftTopToBottom",
19
+ "leftTop": "leftBottomToTop",
20
+ "bottomLeftToRight": "bottomLeftToRight",
21
+ "bottomRightToLeft": "bottomRightToLeft",
22
+ "topLeftToRight": "topLeftToRight",
23
+ "topRightToLeft": "topRightToLeft",
24
+ "rightTopToBottom": "rightTopToBottom",
25
+ "rightBottomToTop": "rightBottomToTop",
26
+ "leftTopToBottom": "leftTopToBottom"
27
+ };
28
+ exports.absolutePositionMapping = absolutePositionMapping;
29
+ var rtlAbsolutePositionMapping = {
30
+ "bottomCenter": "bottomCenter",
31
+ "bottomRight": "bottomRightToLeft",
32
+ "bottomLeft": "bottomLeftToRight",
33
+ "topCenter": "topCenter",
34
+ "topRight": "topRightToLeft",
35
+ "topLeft": "topLeftToRight",
36
+ "rightCenter": "leftCenter",
37
+ "rightBottom": "leftTopToBottom",
38
+ "rightTop": "leftBottomToTop",
39
+ "leftCenter": "rightCenter",
40
+ "leftBottom": "rightTopToBottom",
41
+ "leftTop": "rightBottomToTop",
42
+ "bottomLeftToRight": "bottomLeftToRight",
43
+ "bottomRightToLeft": "bottomRightToLeft",
44
+ "topLeftToRight": "topLeftToRight",
45
+ "topRightToLeft": "topRightToLeft",
46
+ "rightTopToBottom": "rightTopToBottom",
47
+ "rightBottomToTop": "rightBottomToTop",
48
+ "leftTopToBottom": "leftTopToBottom"
49
+ };
50
+ exports.rtlAbsolutePositionMapping = rtlAbsolutePositionMapping;
51
+ var rtlFixedPositionMapping = {
52
+ "bottomCenter": "bottomCenter",
53
+ "bottomLeftToRight": "bottomRightToLeft",
54
+ "bottomCenterToRight": "bottomCenterToLeft",
55
+ "bottomRightToLeft": "bottomLeftToRight",
56
+ "bottomCenterToLeft": "bottomCenterToRight",
57
+ "topCenter": "topCenter",
58
+ "topLeftToRight": "topRightToLeft",
59
+ "topCenterToRight": "topCenterToLeft",
60
+ "topRightToLeft": "topLeftToRight",
61
+ "topCenterToLeft": "topCenterToRight",
62
+ "rightTopToBottom": "leftTopToBottom",
63
+ "rightCenterToBottom": "leftCenterToBottom",
64
+ "rightCenter": "leftCenter",
65
+ "rightBottomToTop": "leftBottomToTop",
66
+ "rightCenterToTop": "leftCenterToTop",
67
+ "leftTopToBottom": "rightTopToBottom",
68
+ "leftCenterToBottom": "rightCenterToBottom",
69
+ "leftCenter": "rightCenter",
70
+ "leftBottomToTop": "rightBottomToTop",
71
+ "leftCenterToTop": "rightCenterToTop",
72
+ "bottomRight": "bottomLeft",
73
+ "bottomLeft": "bottomRight",
74
+ "topRight": "topLeft",
75
+ "topLeft": "topRight",
76
+ "rightBottom": "leftBottom",
77
+ "rightTop": "leftTop",
78
+ "leftBottom": "rightBottom",
79
+ "leftTop": "rightTop"
80
+ };
81
+ exports.rtlFixedPositionMapping = rtlFixedPositionMapping;
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _Config = require("../Provider/Config.js");
9
+
10
+ var Registry = {
11
+ lastOpenedGroup: [],
12
+ popups: {},
13
+ listenerPopupRef: undefined,
14
+ scrollBlockedListenerPopupRef: undefined,
15
+ scrollableListenerPopupRef: undefined,
16
+ getOpenedPopups: function getOpenedPopups() {
17
+ return Object.values(Registry.popups).flat().filter(function (popup) {
18
+ return popup.state.isPopupOpen;
19
+ });
20
+ },
21
+ getOpenedScrollBlockedFixedPopups: function getOpenedScrollBlockedFixedPopups() {
22
+ return Registry.getOpenedPopups().filter(function (popup) {
23
+ return popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup);
24
+ });
25
+ },
26
+ getOpenedScrollableFixedPopups: function getOpenedScrollableFixedPopups() {
27
+ return Registry.getOpenedPopups().filter(function (popup) {
28
+ return !popup.getIsOutsideScrollBlocked(popup) && !popup.getIsAbsolutePopup(popup);
29
+ });
30
+ },
31
+ getRootElement: function getRootElement() {
32
+ var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
33
+
34
+ if (getRootElement && typeof getRootElement === 'function') {
35
+ var parent = getRootElement();
36
+
37
+ if (parent) {
38
+ return parent;
39
+ }
40
+ }
41
+
42
+ return document;
43
+ }
44
+ };
45
+ var _default = Registry;
46
+ exports["default"] = _default;
@@ -0,0 +1,72 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.addIntersectionObserver = addIntersectionObserver;
7
+ exports.removeIntersectionObserver = removeIntersectionObserver;
8
+
9
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
10
+
11
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
12
+
13
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
14
+
15
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
16
+
17
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
18
+
19
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
20
+
21
+ var observerCallbacks = null;
22
+ var intersectionObserver = null;
23
+
24
+ function handleObserverCallbacks(entries) {
25
+ entries.forEach(function (entry) {
26
+ var oldCallbacks = observerCallbacks.get(entry.target);
27
+
28
+ if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
29
+ oldCallbacks.forEach(function (callback) {
30
+ callback && callback(entry);
31
+ });
32
+ }
33
+ });
34
+ }
35
+
36
+ function addIntersectionObserver(element, callback, options) {
37
+ if (!!element && typeof callback == 'function') {
38
+ if (intersectionObserver === null && observerCallbacks === null) {
39
+ intersectionObserver = new IntersectionObserver(function (entries) {
40
+ handleObserverCallbacks(entries);
41
+ }, options);
42
+ observerCallbacks = new Map();
43
+ }
44
+
45
+ intersectionObserver.observe(element);
46
+ var oldCallbacks = observerCallbacks.get(element) || [];
47
+ observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
48
+ }
49
+ }
50
+
51
+ function removeIntersectionObserver(element, callback) {
52
+ if (!!element && typeof callback == 'function') {
53
+ var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
54
+
55
+ if (Array.isArray(oldCallbacks)) {
56
+ var callbacks = oldCallbacks.filter(function (handler) {
57
+ return handler !== callback;
58
+ });
59
+
60
+ if (intersectionObserver && callbacks.length === 0) {
61
+ observerCallbacks["delete"](element);
62
+ intersectionObserver.unobserve(element);
63
+ }
64
+ }
65
+
66
+ if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
67
+ intersectionObserver.disconnect();
68
+ intersectionObserver = null;
69
+ observerCallbacks = null;
70
+ }
71
+ }
72
+ }
@@ -0,0 +1,367 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+ var defaultOrder = ['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop'];
8
+ var viewPort = {
9
+ frameRelativeRects: function frameRelativeRects(el, customFrame, documentEle) {
10
+ if (!el) {
11
+ return;
12
+ }
13
+
14
+ var rectTemp = el.getBoundingClientRect();
15
+ var rect = {
16
+ height: rectTemp.height || el.clientHeight,
17
+ width: rectTemp.width || el.clientWidth,
18
+ top: rectTemp.top,
19
+ bottom: rectTemp.bottom,
20
+ left: rectTemp.left,
21
+ right: rectTemp.right,
22
+ x: rectTemp.x,
23
+ y: rectTemp.y
24
+ };
25
+ documentEle = documentEle ? documentEle : document.documentElement;
26
+ var customFrameRect = {
27
+ top: 0,
28
+ left: 0,
29
+ right: documentEle.clientWidth,
30
+ bottom: documentEle.clientHeight,
31
+ height: documentEle.clientHeight,
32
+ width: documentEle.clientWidth,
33
+ x: 0,
34
+ y: 0
35
+ };
36
+
37
+ if (customFrame) {
38
+ customFrameRect = customFrame.getBoundingClientRect();
39
+ }
40
+
41
+ var newRect = {
42
+ top: rect.top - customFrameRect.top,
43
+ left: rect.left - customFrameRect.left,
44
+ height: rect.height,
45
+ width: rect.width
46
+ };
47
+ newRect.bottom = newRect.top + newRect.height;
48
+ newRect.right = newRect.left + newRect.width;
49
+ newRect.x = newRect.left;
50
+ newRect.y = newRect.top;
51
+ var rectGap = {
52
+ top: newRect.top,
53
+ left: newRect.left,
54
+ bottom: customFrameRect.height - newRect.bottom,
55
+ right: customFrameRect.width - newRect.right
56
+ };
57
+ rectGap.center = {
58
+ top: rectGap.top + newRect.height / 2,
59
+ left: rectGap.left + newRect.width / 2,
60
+ bottom: rectGap.bottom + newRect.height / 2,
61
+ right: rectGap.right + newRect.width / 2
62
+ };
63
+ return {
64
+ frameRect: customFrameRect,
65
+ rect: newRect,
66
+ rectGap: rectGap
67
+ };
68
+ },
69
+ isInViewPort: function isInViewPort(el, customFrame) {
70
+ if (!el) {
71
+ return;
72
+ }
73
+
74
+ var elRects = viewPort.frameRelativeRects(el, customFrame);
75
+ var rect = elRects.rect;
76
+ var frameRect = elRects.frameRect;
77
+ return rect.top >= 0 && rect.left >= 0 && rect.bottom <= frameRect.height && rect.right <= frameRect.width;
78
+ },
79
+ getViewPortEle: function getViewPortEle(el) {
80
+ return el.closest('[data-viewport-container=true]') ? el.closest('[data-viewport-container=true]') : document.documentElement;
81
+ },
82
+ possibilities: function possibilities(el, relativeBox, customFrame) {
83
+ var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
84
+ needArrow = _ref.needArrow,
85
+ isAbsolute = _ref.isAbsolute;
86
+
87
+ if (!el) {
88
+ return;
89
+ }
90
+
91
+ var elViewPortEle = viewPort.getViewPortEle(el);
92
+ var elRects = viewPort.frameRelativeRects(el, customFrame, elViewPortEle);
93
+ var rect = elRects.rect;
94
+ var relativeBoxViewPortEle = viewPort.getViewPortEle(relativeBox);
95
+ var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame, relativeBoxViewPortEle);
96
+ var relativeBoxGap = relativeBoxRects.rectGap,
97
+ relativeBoxRect = relativeBoxRects.rect;
98
+ var relativeBoxDocumentRects = viewPort.frameRelativeRects(relativeBox, customFrame);
99
+ var documentGap = relativeBoxDocumentRects.rectGap; //rect => PopOverContainer, relativeBoxGap => PopOverTarget
100
+ //Horizontal ~ ----- X axis
101
+ //Vertical ~ ||||||| Y axis
102
+
103
+ var paddingSpace = 5; // space between target and relative element
104
+
105
+ var arrowSize = needArrow ? 10 : 0;
106
+ var padding = needArrow ? arrowSize : paddingSpace;
107
+ var arrowHorizontalBalancePx = !isAbsolute && needArrow ? 30 : 0;
108
+ var arrowVerticalBalancePx = !isAbsolute && needArrow ? 27 : 0;
109
+ var bottomOverFlow = rect.height + padding > relativeBoxGap.bottom;
110
+ var topOverFlow = rect.height + padding > relativeBoxGap.top;
111
+ var rightOverFlow = rect.width + padding > relativeBoxGap.right;
112
+ var leftOverFlow = rect.width + padding > relativeBoxGap.left;
113
+ var horizontalCenterOverFlow = rect.width / 2 + padding > relativeBoxGap.center.right || rect.width / 2 + padding > relativeBoxGap.center.left;
114
+ var verticalCenterOverFlow = rect.height / 2 + padding > relativeBoxGap.center.top || rect.height / 2 + padding > relativeBoxGap.center.bottom;
115
+ var horizontalLeftToRightOverFlow = rect.width + padding > relativeBoxRect.width + relativeBoxGap.right;
116
+ var horizontalCenterToRightOverFlow = rect.width + padding > relativeBoxGap.center.right || arrowHorizontalBalancePx > relativeBoxGap.center.left;
117
+ var horizontalRightToLeft = rect.width + padding > relativeBoxRect.width + relativeBoxGap.left;
118
+ var horizontalCenterToLeft = rect.width + padding > relativeBoxGap.center.left || arrowHorizontalBalancePx > relativeBoxGap.center.right;
119
+ var verticalTopToBottomOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.bottom;
120
+ var verticalCenterToBottomOverFlow = rect.height + padding > relativeBoxGap.center.bottom || arrowVerticalBalancePx > relativeBoxGap.center.top;
121
+ var verticalBottomToTopOverFlow = rect.height + padding > relativeBoxRect.height + relativeBoxGap.top;
122
+ var verticalCenterToTopOverFlow = rect.height + padding > relativeBoxGap.center.top || arrowVerticalBalancePx > relativeBoxGap.center.bottom;
123
+ var views = {
124
+ bottomCenter: !(bottomOverFlow || horizontalCenterOverFlow),
125
+ bottomLeftToRight: !(bottomOverFlow || horizontalLeftToRightOverFlow),
126
+ bottomCenterToRight: !(bottomOverFlow || horizontalCenterToRightOverFlow),
127
+ bottomRight: !(bottomOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
128
+ bottomRightToLeft: !(bottomOverFlow || horizontalRightToLeft),
129
+ bottomCenterToLeft: !(bottomOverFlow || horizontalCenterToLeft),
130
+ bottomLeft: !(bottomOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
131
+ topCenter: !(topOverFlow || horizontalCenterOverFlow),
132
+ topLeftToRight: !(topOverFlow || horizontalLeftToRightOverFlow),
133
+ topCenterToRight: !(topOverFlow || horizontalCenterToRightOverFlow),
134
+ topRight: !(topOverFlow || rightOverFlow || arrowHorizontalBalancePx > relativeBoxRect.right),
135
+ topRightToLeft: !(topOverFlow || horizontalRightToLeft),
136
+ topCenterToLeft: !(topOverFlow || horizontalCenterToLeft),
137
+ topLeft: !(topOverFlow || leftOverFlow || arrowHorizontalBalancePx > relativeBoxGap.right + relativeBoxRect.width),
138
+ rightCenter: !(rightOverFlow || verticalCenterOverFlow),
139
+ rightTopToBottom: !(rightOverFlow || verticalTopToBottomOverFlow),
140
+ rightCenterToBottom: !(rightOverFlow || verticalCenterToBottomOverFlow),
141
+ rightBottom: !(rightOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
142
+ rightBottomToTop: !(rightOverFlow || verticalBottomToTopOverFlow),
143
+ rightCenterToTop: !(rightOverFlow || verticalCenterToTopOverFlow),
144
+ rightTop: !(rightOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height),
145
+ leftCenter: !(leftOverFlow || verticalCenterOverFlow),
146
+ leftTopToBottom: !(leftOverFlow || verticalTopToBottomOverFlow),
147
+ leftCenterToBottom: !(leftOverFlow || verticalCenterToBottomOverFlow),
148
+ leftBottom: !(leftOverFlow || bottomOverFlow || arrowVerticalBalancePx > relativeBoxRect.bottom),
149
+ leftBottomToTop: !(leftOverFlow || verticalBottomToTopOverFlow),
150
+ leftCenterToTop: !(leftOverFlow || verticalCenterToTopOverFlow),
151
+ leftTop: !(leftOverFlow || topOverFlow || arrowVerticalBalancePx > relativeBoxGap.bottom + relativeBoxRect.height)
152
+ };
153
+ var horizontalCenter = relativeBoxGap.left + relativeBoxRect.width / 2;
154
+ var horizontalLeft = relativeBoxGap.left;
155
+ var horizontalRight = relativeBoxGap.left + relativeBoxRect.width;
156
+ var verticalBottom = relativeBoxGap.top + relativeBoxRect.height;
157
+ var verticalTop = relativeBoxGap.top;
158
+ var verticalCenter = relativeBoxGap.top + relativeBoxRect.height / 2;
159
+ var horizontalTop = documentGap.bottom + relativeBoxRect.height;
160
+ var verticalCenterToTop = documentGap.bottom + relativeBoxRect.height / 2;
161
+ var viewsOffset = {
162
+ bottomCenter: {
163
+ left: horizontalCenter - rect.width / 2,
164
+ top: verticalBottom + arrowSize
165
+ },
166
+ bottomLeftToRight: {
167
+ left: horizontalLeft,
168
+ top: verticalBottom + arrowSize
169
+ },
170
+ bottomCenterToRight: {
171
+ left: horizontalCenter - arrowHorizontalBalancePx,
172
+ top: verticalBottom + arrowSize
173
+ },
174
+ bottomRight: {
175
+ left: horizontalRight - arrowHorizontalBalancePx,
176
+ top: verticalBottom + arrowSize
177
+ },
178
+ bottomRightToLeft: {
179
+ left: horizontalRight - rect.width,
180
+ top: verticalBottom + arrowSize
181
+ },
182
+ bottomCenterToLeft: {
183
+ left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
184
+ top: verticalBottom + arrowSize
185
+ },
186
+ bottomLeft: {
187
+ left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
188
+ top: verticalBottom + arrowSize
189
+ },
190
+ topCenter: {
191
+ left: horizontalCenter - rect.width / 2,
192
+ bottom: horizontalTop + arrowSize
193
+ },
194
+ topLeftToRight: {
195
+ left: horizontalLeft,
196
+ bottom: horizontalTop + arrowSize
197
+ },
198
+ topCenterToRight: {
199
+ left: horizontalCenter - arrowHorizontalBalancePx,
200
+ bottom: horizontalTop + arrowSize
201
+ },
202
+ topRight: {
203
+ left: horizontalRight - arrowHorizontalBalancePx,
204
+ bottom: horizontalTop + arrowSize
205
+ },
206
+ topRightToLeft: {
207
+ left: horizontalRight - rect.width,
208
+ bottom: horizontalTop + arrowSize
209
+ },
210
+ topCenterToLeft: {
211
+ left: horizontalCenter - rect.width + arrowHorizontalBalancePx,
212
+ bottom: horizontalTop + arrowSize
213
+ },
214
+ topLeft: {
215
+ left: horizontalLeft - rect.width + arrowHorizontalBalancePx,
216
+ top: verticalTop - (rect.height + arrowSize)
217
+ },
218
+ rightCenter: {
219
+ left: horizontalRight + arrowSize,
220
+ top: verticalCenter - rect.height / 2
221
+ },
222
+ rightTopToBottom: {
223
+ left: horizontalRight + arrowSize,
224
+ top: verticalTop
225
+ },
226
+ rightCenterToBottom: {
227
+ left: horizontalRight + arrowSize,
228
+ top: verticalCenter - arrowVerticalBalancePx
229
+ },
230
+ rightBottom: {
231
+ left: horizontalRight + arrowSize,
232
+ top: verticalBottom - arrowVerticalBalancePx
233
+ },
234
+ rightBottomToTop: {
235
+ left: horizontalRight + arrowSize,
236
+ bottom: documentGap.bottom
237
+ },
238
+ rightCenterToTop: {
239
+ left: horizontalRight + arrowSize,
240
+ bottom: verticalCenterToTop - arrowVerticalBalancePx
241
+ },
242
+ rightTop: {
243
+ left: horizontalRight + arrowSize,
244
+ bottom: horizontalTop - arrowVerticalBalancePx
245
+ },
246
+ leftCenter: {
247
+ left: horizontalLeft - (rect.width + arrowSize),
248
+ top: verticalCenter - rect.height / 2
249
+ },
250
+ leftTopToBottom: {
251
+ left: horizontalLeft - (rect.width + arrowSize),
252
+ top: verticalTop
253
+ },
254
+ leftCenterToBottom: {
255
+ left: horizontalLeft - (rect.width + arrowSize),
256
+ top: verticalCenter - arrowVerticalBalancePx
257
+ },
258
+ leftBottom: {
259
+ left: horizontalLeft - (rect.width + arrowSize),
260
+ top: verticalBottom - arrowVerticalBalancePx
261
+ },
262
+ leftBottomToTop: {
263
+ left: horizontalLeft - (rect.width + arrowSize),
264
+ bottom: documentGap.bottom
265
+ },
266
+ leftCenterToTop: {
267
+ left: horizontalLeft - (rect.width + arrowSize),
268
+ bottom: verticalCenterToTop - arrowVerticalBalancePx
269
+ },
270
+ leftTop: {
271
+ left: horizontalLeft - (rect.width + arrowSize),
272
+ bottom: horizontalTop - arrowVerticalBalancePx
273
+ }
274
+ };
275
+ return {
276
+ views: views,
277
+ viewsOffset: viewsOffset,
278
+ targetOffset: relativeBoxRect,
279
+ popupOffset: rect
280
+ };
281
+ },
282
+ getArrowAdjustments: function getArrowAdjustments(el, relativeBox, customFrame) {
283
+ if (!el) {
284
+ return;
285
+ }
286
+
287
+ var elRects = viewPort.frameRelativeRects(el, customFrame);
288
+ var rectGap = elRects.rectGap;
289
+ var relativeBoxRects = viewPort.frameRelativeRects(relativeBox, customFrame);
290
+ var relativeBoxGap = relativeBoxRects.rectGap;
291
+ return {
292
+ left: relativeBoxGap.center.left - rectGap.left,
293
+ right: relativeBoxGap.center.right - rectGap.right,
294
+ top: relativeBoxGap.center.top - rectGap.top,
295
+ bottom: relativeBoxGap.center.bottom - rectGap.bottom
296
+ };
297
+ },
298
+ betterView: function betterView(popup, relativeBox) {
299
+ var defaultView = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
300
+ var customFrame = arguments.length > 3 ? arguments[3] : undefined;
301
+
302
+ var _ref2 = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
303
+ needArrow = _ref2.needArrow,
304
+ isAbsolute = _ref2.isAbsolute,
305
+ _ref2$customOrder = _ref2.customOrder,
306
+ customOrder = _ref2$customOrder === void 0 ? [] : _ref2$customOrder;
307
+
308
+ var customScrollFrame = isAbsolute ? customFrame : '';
309
+ var viewPortPossibilities = viewPort.possibilities(popup, relativeBox, customScrollFrame, {
310
+ needArrow: needArrow,
311
+ isAbsolute: isAbsolute
312
+ });
313
+
314
+ if (!viewPortPossibilities) {
315
+ return;
316
+ }
317
+
318
+ var views = viewPortPossibilities.views,
319
+ viewsOffset = viewPortPossibilities.viewsOffset,
320
+ targetOffset = viewPortPossibilities.targetOffset,
321
+ popupOffset = viewPortPossibilities.popupOffset;
322
+ var view = null;
323
+ var isViewFound = false;
324
+
325
+ if (!isViewFound && defaultView && views[defaultView]) {
326
+ view = defaultView;
327
+ isViewFound = true;
328
+ }
329
+
330
+ if (!isViewFound) {
331
+ if (customOrder.length > 0) {
332
+ isViewFound = customOrder.some(function (position) {
333
+ if (views[position]) {
334
+ view = position;
335
+ return true;
336
+ }
337
+ });
338
+ } else {
339
+ isViewFound = defaultOrder.some(function (position) {
340
+ if (views[position]) {
341
+ view = position;
342
+ return true;
343
+ }
344
+ });
345
+ }
346
+ }
347
+
348
+ if (!isViewFound) {
349
+ view = defaultView;
350
+ }
351
+
352
+ return {
353
+ view: view,
354
+ views: views,
355
+ viewsOffset: viewsOffset,
356
+ targetOffset: targetOffset,
357
+ popupOffset: popupOffset
358
+ };
359
+ }
360
+ };
361
+ var _default = {
362
+ betterView: viewPort.betterView,
363
+ frameRelativeRects: viewPort.frameRelativeRects,
364
+ getArrowAdjustments: viewPort.getArrowAdjustments,
365
+ isInViewPort: viewPort.isInViewPort
366
+ };
367
+ exports["default"] = _default;
@@ -38,7 +38,7 @@ exports.stopAllEventPropagation = exports.scrollTo = void 0;
38
38
  exports.stopPropagation = stopPropagation;
39
39
  exports.throttle = void 0;
40
40
 
41
- var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
41
+ var _viewPort = _interopRequireDefault(require("../Popup/viewPort"));
42
42
 
43
43
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
44
44
 
@@ -15,7 +15,7 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-stat
15
15
 
16
16
  var _Common = require("../../utils/Common.js");
17
17
 
18
- var _viewPort = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Popup/utils/viewPort.js"));
18
+ var _viewPort = _interopRequireDefault(require("../../Popup/viewPort"));
19
19
 
20
20
  var _PositionMapping = require("../../Popup/PositionMapping.js");
21
21
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/components",
3
- "version": "1.0.0-temp-242.1",
3
+ "version": "1.0.0-temp-247",
4
4
  "main": "es/index.js",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -39,7 +39,7 @@
39
39
  "build:css:umd": "npm run clean && npm run init && react-cli build:css:umd",
40
40
  "coverage": "react-cli coverage",
41
41
  "prepare": "npm run init && npm run css:build ",
42
- "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
42
+ "prepublishOnly": "node prePublish.js && npm run download_only",
43
43
  "postpublish": "node postPublish.js",
44
44
  "report": "react-cli publish:report",
45
45
  "test": "react-cli test",
@@ -74,17 +74,17 @@
74
74
  "@testing-library/react": "^11.2.5",
75
75
  "@testing-library/react-hooks": "^7.0.2",
76
76
  "@testing-library/user-event": "^13.0.10",
77
- "@zohodesk-private/color-variable-preprocessor": "1.2.0",
77
+ "@zohodesk-private/color-variable-preprocessor": "1.0.0-temp-13.1",
78
78
  "@zohodesk-private/css-variable-migrator": "1.0.9",
79
79
  "@zohodesk-private/node-plugins": "1.1.13",
80
80
  "@zohodesk-private/react-prop-validator": "1.2.3",
81
81
  "@zohodesk/a11y": "2.3.8",
82
82
  "@zohodesk/docstool": "1.0.0-alpha-2",
83
- "@zohodesk/dotkit": "1.0.0-temp-2.2",
83
+ "@zohodesk/dotkit": "1.0.3",
84
84
  "@zohodesk/hooks": "2.0.6",
85
- "@zohodesk/icons": "1.1.3",
85
+ "@zohodesk/icons": "1.1.4",
86
86
  "@zohodesk/layout": "3.1.0",
87
- "@zohodesk/svg": "1.2.3",
87
+ "@zohodesk/svg": "1.2.5",
88
88
  "@zohodesk/utils": "1.3.15",
89
89
  "@zohodesk/variables": "1.2.0",
90
90
  "@zohodesk/virtualizer": "1.0.13",
@@ -100,9 +100,9 @@
100
100
  "selectn": "1.1.2"
101
101
  },
102
102
  "peerDependencies": {
103
- "@zohodesk/icons": "1.1.3",
103
+ "@zohodesk/icons": "1.1.4",
104
104
  "@zohodesk/variables": "1.2.0",
105
- "@zohodesk/svg": "1.2.3",
105
+ "@zohodesk/svg": "1.2.5",
106
106
  "@zohodesk/virtualizer": "1.0.13",
107
107
  "velocity-react": "1.4.3",
108
108
  "react-sortable-hoc": "^0.8.3",
@@ -110,7 +110,7 @@
110
110
  "@zohodesk/utils": "1.3.15",
111
111
  "@zohodesk/a11y": "2.3.8",
112
112
  "@zohodesk/layout": "3.1.0",
113
- "@zohodesk/dotkit": "1.0.0-temp-2.2",
113
+ "@zohodesk/dotkit": "1.0.3",
114
114
  "color": "4.2.3"
115
115
  }
116
116
  }