@reshaped/utilities 3.11.0-canary.3 → 3.11.0-canary.4
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.
|
@@ -6,6 +6,26 @@ import calculatePosition from "./calculatePosition.js";
|
|
|
6
6
|
import getPositionFallbacks from "./getPositionFallbacks.js";
|
|
7
7
|
import getRectFromCoordinates from "./getRectFromCoordinates.js";
|
|
8
8
|
import isFullyVisible from "./isFullyVisible.js";
|
|
9
|
+
/**
|
|
10
|
+
* Get the viewport-relative rect of the element's containing block.
|
|
11
|
+
* When the content is inside a positioned ancestor (e.g. a fixed overlay),
|
|
12
|
+
* we need to account for its offset instead of using page scroll.
|
|
13
|
+
*/
|
|
14
|
+
const getContainingBlockRect = (el) => {
|
|
15
|
+
const offsetParent = el.offsetParent;
|
|
16
|
+
if (!offsetParent ||
|
|
17
|
+
offsetParent === document.body ||
|
|
18
|
+
offsetParent === document.documentElement) {
|
|
19
|
+
return {
|
|
20
|
+
left: -window.scrollX,
|
|
21
|
+
top: -window.scrollY,
|
|
22
|
+
right: window.innerWidth - window.scrollX,
|
|
23
|
+
bottom: window.innerHeight - window.scrollY,
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
const rect = offsetParent.getBoundingClientRect();
|
|
27
|
+
return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
|
|
28
|
+
};
|
|
9
29
|
const applyPosition = (args) => {
|
|
10
30
|
const { trigger, content, triggerCoordinates, container, contentShift = 0, contentGap = 0, position, fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, lastUsedPosition, } = args;
|
|
11
31
|
const rtl = isRTL();
|
|
@@ -101,8 +121,13 @@ const applyPosition = (args) => {
|
|
|
101
121
|
calculated = testPosition(lastUsedPosition ?? position, { width });
|
|
102
122
|
root.removeChild(contentClone);
|
|
103
123
|
const { styles } = calculated;
|
|
104
|
-
const
|
|
105
|
-
const
|
|
124
|
+
const containingBlockRect = getContainingBlockRect(content);
|
|
125
|
+
const translateX = styles.right !== null
|
|
126
|
+
? window.innerWidth - styles.right - containingBlockRect.right
|
|
127
|
+
: styles.left - containingBlockRect.left;
|
|
128
|
+
const translateY = styles.bottom !== null
|
|
129
|
+
? window.innerHeight - styles.bottom - containingBlockRect.bottom
|
|
130
|
+
: styles.top - containingBlockRect.top;
|
|
106
131
|
const resolvedStyles = {
|
|
107
132
|
left: styles.right === null ? "0px" : undefined,
|
|
108
133
|
right: styles.right === null ? undefined : "0px",
|
package/package.json
CHANGED