Skip to content

Commit 6d1520a

Browse files
bennypowersbennypowers
authored
fix(core): iframe support in floating dom controller (#3116)
* docs: improve docs page * fix(core): iframe support in floating dom controller
1 parent 929edbc commit 6d1520a

3 files changed

Lines changed: 32 additions & 63 deletions

File tree

‎.changeset/stale-moments-drive.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@patternfly/pfe-core": patch
3+
---
4+
5+
`FloatingDOMController`: support usage within iframes
6+

‎core/pfe-core/controllers/floating-dom-controller.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -839,7 +839,7 @@ function getOverflowAncestors(
839839
): OverflowAncestors {
840840
const scrollableAncestor = getNearestOverflowAncestor(node);
841841
const isBody = scrollableAncestor === node.ownerDocument?.body;
842-
const win = window;
842+
const win = scrollableAncestor.ownerDocument?.defaultView ?? window;
843843

844844
if (isBody) {
845845
const frameElement = getFrameElement(win);
@@ -1269,8 +1269,8 @@ function getScale(element: Element): Coords {
12691269
* @param element - The element to get visual offsets for
12701270
* @returns Coordinates object with x and y offsets
12711271
*/
1272-
function getVisualOffsets(): Coords {
1273-
const win = window;
1272+
function getVisualOffsets(element: Element): Coords {
1273+
const win = element.ownerDocument?.defaultView ?? window;
12741274
if (!isWebKit() || !win.visualViewport) {
12751275
return noOffsets;
12761276
}
@@ -1323,16 +1323,17 @@ function getBoundingClientRect(
13231323
}
13241324
}
13251325
const visualOffsets = shouldAddVisualOffsets(isFixedStrategy, offsetParent) ?
1326-
getVisualOffsets()
1326+
getVisualOffsets(element)
13271327
: createCoords(0);
13281328
let x = (clientRect.left + visualOffsets.x) / scale.x;
13291329
let y = (clientRect.top + visualOffsets.y) / scale.y;
13301330
let width = clientRect.width / scale.x;
13311331
let height = clientRect.height / scale.y;
13321332
if (element) {
1333-
const win = window;
1334-
const offsetWin = offsetParent
1335-
&& isElement(offsetParent) ? window : offsetParent;
1333+
const win = element.ownerDocument?.defaultView ?? window;
1334+
const offsetWin = offsetParent && isElement(offsetParent) ?
1335+
offsetParent.ownerDocument?.defaultView ?? window
1336+
: offsetParent;
13361337
let currentWin = win;
13371338
let currentIFrame = getFrameElement(currentWin);
13381339
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
@@ -1349,7 +1350,7 @@ function getBoundingClientRect(
13491350
height *= iframeScale.y;
13501351
x += left;
13511352
y += top;
1352-
currentWin = window;
1353+
currentWin = currentIFrame.ownerDocument?.defaultView ?? window;
13531354
currentIFrame = getFrameElement(currentWin);
13541355
}
13551356
}
@@ -1487,7 +1488,7 @@ function getDocumentRect(element: Element): Rect {
14871488
* @returns Rect object with viewport dimensions and position
14881489
*/
14891490
function getViewportRect(element: Element, strategy: Strategy): Rect {
1490-
const win = window;
1491+
const win = element.ownerDocument?.defaultView ?? window;
14911492
const html = getDocumentElement(element)!;
14921493
const { visualViewport } = win;
14931494
const width = visualViewport ? visualViewport.width : html.clientWidth;
@@ -1552,7 +1553,7 @@ function getClientRectFromClippingAncestor(
15521553
} else if (isElement(clippingAncestor)) {
15531554
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
15541555
} else {
1555-
const visualOffsets = getVisualOffsets();
1556+
const visualOffsets = getVisualOffsets(element);
15561557
rect = {
15571558
x: clippingAncestor.x - visualOffsets.x,
15581559
y: clippingAncestor.y - visualOffsets.y,
@@ -1768,7 +1769,7 @@ function getTrueOffsetParent(element: Element, polyfill?: (element: Element) =>
17681769
*/
17691770
function getOffsetParent(element: Element, polyfill?: (element: Element) =>
17701771
Element | null): Element | Window {
1771-
const win = window;
1772+
const win = element.ownerDocument?.defaultView ?? window;
17721773
if (isTopLayer(element)) {
17731774
return win;
17741775
}

‎elements/pf-v5-tooltip/docs/pf-v5-tooltip.md‎

Lines changed: 14 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,94 @@
11
{% renderInstallation %} {% endrenderInstallation %}
22

33
{% renderOverview %}
4-
### Default <pf-v5-tooltip>
4+
### Default
5+
<pf-v5-tooltip content="This is some content">
56
<pf-v5-button>Tooltip</pf-v5-button>
6-
<div slot="content">
7-
This is some content
8-
</div>
97
</pf-v5-tooltip>
108
{% endrenderOverview %}
119

1210
{% band header="Usage" %}
1311
### Left Tooltip
1412
{% htmlexample %}
15-
<pf-v5-tooltip position="left">
13+
<pf-v5-tooltip position="left" content="This is some content">
1614
<pf-v5-button>Tooltip</pf-v5-button>
17-
<div slot="content">
18-
This is some content
19-
</div>
2015
</pf-v5-tooltip>
2116
{% endhtmlexample %}
2217

2318
### Left-Start Tooltip
2419
{% htmlexample %}
25-
<pf-v5-tooltip position="left-start">
20+
<pf-v5-tooltip position="left-start" content="This is some content">
2621
<pf-v5-button>Tooltip</pf-v5-button>
27-
<div slot="content">
28-
This is some content
29-
</div>
3022
</pf-v5-tooltip>
3123
{% endhtmlexample %}
3224

3325
### Left-End Tooltip
3426
{% htmlexample %}
35-
<pf-v5-tooltip position="left-end">
27+
<pf-v5-tooltip position="left-end" content="This is some content">
3628
<pf-v5-button>Tooltip</pf-v5-button>
37-
<div slot="content">
38-
This is some content
39-
</div>
4029
</pf-v5-tooltip>
4130
{% endhtmlexample %}
4231

4332
### Right Tooltip
4433
{% htmlexample %}
45-
<pf-v5-tooltip position="right">
34+
<pf-v5-tooltip position="right" content="This is some content">
4635
<pf-v5-button>Tooltip</pf-v5-button>
47-
<div slot="content">
48-
This is some content
49-
</div>
5036
</pf-v5-tooltip>
5137
{% endhtmlexample %}
5238

5339
### Right-Start Tooltip
5440
{% htmlexample %}
55-
<pf-v5-tooltip position="right-start">
41+
<pf-v5-tooltip position="right-start" content="This is some content">
5642
<pf-v5-button>Tooltip</pf-v5-button>
57-
<div slot="content">
58-
This is some content
59-
</div>
6043
</pf-v5-tooltip>
6144
{% endhtmlexample %}
6245

6346
### Right-End Tooltip
6447
{% htmlexample %}
65-
<pf-v5-tooltip position="right-end">
48+
<pf-v5-tooltip position="right-end" content="This is some content">
6649
<pf-v5-button>Tooltip</pf-v5-button>
67-
<div slot="content">
68-
This is some content
69-
</div>
7050
</pf-v5-tooltip>
7151
{% endhtmlexample %}
7252

7353
### Top Tooltip
7454
{% htmlexample %}
75-
<pf-v5-tooltip position="top">
55+
<pf-v5-tooltip position="top" content="This is some content">
7656
<pf-v5-button>Tooltip</pf-v5-button>
77-
<div slot="content">
78-
This is some content
79-
</div>
8057
</pf-v5-tooltip>
8158
{% endhtmlexample %}
8259

8360
### Top-Start Tooltip
8461
{% htmlexample %}
85-
<pf-v5-tooltip position="top-start">
62+
<pf-v5-tooltip position="top-start" content="This is some content">
8663
<pf-v5-button>Tooltip</pf-v5-button>
87-
<div slot="content">
88-
This is some content
89-
</div>
9064
</pf-v5-tooltip>
9165
{% endhtmlexample %}
9266

9367
### Top-End Tooltip
9468
{% htmlexample %}
95-
<pf-v5-tooltip position="top-end">
69+
<pf-v5-tooltip position="top-end" content="This is some content">
9670
<pf-v5-button>Tooltip</pf-v5-button>
97-
<div slot="content">
98-
This is some content
99-
</div>
10071
</pf-v5-tooltip>
10172
{% endhtmlexample %}
10273

10374
### Bottom Tooltip
10475
{% htmlexample %}
105-
<pf-v5-tooltip position="bottom">
76+
<pf-v5-tooltip position="bottom" content="This is some content">
10677
<pf-v5-button>Tooltip</pf-v5-button>
107-
<div slot="content">
108-
This is some content
109-
</div>
11078
</pf-v5-tooltip>
11179
{% endhtmlexample %}
11280

11381
### Bottom-Start Tooltip
11482
{% htmlexample %}
115-
<pf-v5-tooltip position="bottom-start">
83+
<pf-v5-tooltip position="bottom-start" content="This is some content">
11684
<pf-v5-button>Tooltip</pf-v5-button>
117-
<div slot="content">
118-
This is some content
119-
</div>
12085
</pf-v5-tooltip>
12186
{% endhtmlexample %}
12287

12388
### Bottom-End Tooltip
12489
{% htmlexample %}
125-
<pf-v5-tooltip position="bottom-end">
90+
<pf-v5-tooltip position="bottom-end" content="This is some content">
12691
<pf-v5-button>Tooltip</pf-v5-button>
127-
<div slot="content">
128-
This is some content
129-
</div>
13092
</pf-v5-tooltip>
13193
{% endhtmlexample %}
13294
{% endband %}

0 commit comments

Comments
 (0)