diff --git a/src/index.ts b/src/index.ts
index 615cfcc..cf0d0bd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -44,6 +44,12 @@ type AvailableVariants = {
he: number;
};
+type AvailableArrowVariants = {
+ s: number;
+ m: number;
+ e: number;
+};
+
type PositionPairs = [Direction, Direction];
export type PositionMatch = 'ts' | 'tm' | 'te' | 'bs' | 'bm' | 'be' | 'ls' | 'lm' | 'le' | 'rs' | 'rm' | 're';
@@ -190,19 +196,37 @@ export const reposition = (
if (arrow) {
// Calculate refBox's center offset from its variant position for arrow positioning
const refBoxCenterOffset = vertical ? refBox.width / 2 : refBox.height / 2;
-
- // When refBox is larger than popBox, have the arrow's variant position be the center of popBox instead.
- const arrowVariantVal = refBoxCenterOffset * 2 < variantSize ?
- refBox[variantKey] + refBoxCenterOffset : variantVal + variantSize / 2;
-
- // Arrow position is either on one side of the popBox or the other.
- if (positionVal < refBox[positionKey]) {
- positionVal += positionSize;
- }
+ const popBoxCenterOffset = variantSize / 2;
+
+ // Check if refBox is larger than popBox
+ const isRefBoxLarger = refBoxCenterOffset > popBoxCenterOffset;
+
+ /**
+ * Holds corresponding offset variants (start, middle, end) of arrow from the popper variant values.
+ * When refBox is larger than popBox, have the arrow's variant position be the center of popBox instead.
+ */
+ const arrowVariantStore: AvailableArrowVariants = {
+ s: isRefBoxLarger ? popBoxCenterOffset : refBoxCenterOffset,
+ m: popBoxCenterOffset,
+ e: isRefBoxLarger ? popBoxCenterOffset : variantSize - refBoxCenterOffset,
+ };
+
+ /**
+ * Holds offsets of top, left, bottom and right alignment of arrow from the popper position values.
+ */
+ const arrowPositionStore: AvailablePositions = {
+ t: positionSize,
+ b: 0,
+ r: 0,
+ l: positionSize
+ };
+
+ const arrowVariantVal = variantVal + arrowVariantStore[v as keyof AvailableArrowVariants];
+ const arrowPositionVal = positionVal + arrowPositionStore[p as keyof AvailablePositions];
// Apply styles to arrow
arrow.style[variantKey] = `${arrowVariantVal}px`;
- arrow.style[positionKey] = `${positionVal}px`;
+ arrow.style[positionKey] = `${arrowPositionVal}px`;
}
return (p + v) as PositionMatch;
diff --git a/tests/_pages/with-arrow-transformed-parent.html b/tests/_pages/with-arrow-transformed-parent.html
new file mode 100644
index 0000000..34f9794
--- /dev/null
+++ b/tests/_pages/with-arrow-transformed-parent.html
@@ -0,0 +1,55 @@
+
+
+
+
+
diff --git a/tests/arrow.spec.ts b/tests/arrow.spec.ts
index 1d590d8..a7a4e78 100644
--- a/tests/arrow.spec.ts
+++ b/tests/arrow.spec.ts
@@ -13,6 +13,7 @@ test.describe('Popper with arrow option', () => {
test(`Should position ${pos} with proper arrow placement`, async ({ page }) => {
await testPage(page, `with-arrow-custom-position.html#${pos}`);
await testPage(page, `with-arrow-large-popper.html#${pos}`);
+ await testPage(page, `with-arrow-transformed-parent.html#${pos}`);
});
}
}
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-end.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-end.png
new file mode 100644
index 0000000..bfa5249
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-end.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-middle.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-middle.png
new file mode 100644
index 0000000..1e7ea8f
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-middle.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-start.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-start.png
new file mode 100644
index 0000000..2a920d3
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-bottom-start.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-end.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-end.png
new file mode 100644
index 0000000..56aacfb
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-end.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-middle.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-middle.png
new file mode 100644
index 0000000..2d8c6e7
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-middle.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-start.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-start.png
new file mode 100644
index 0000000..cbbda04
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-left-start.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-end.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-end.png
new file mode 100644
index 0000000..efab630
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-end.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-middle.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-middle.png
new file mode 100644
index 0000000..b55901c
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-middle.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-start.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-start.png
new file mode 100644
index 0000000..b747aff
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-right-start.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-end.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-end.png
new file mode 100644
index 0000000..f70ca5c
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-end.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-middle.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-middle.png
new file mode 100644
index 0000000..2150dad
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-middle.png differ
diff --git a/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-start.png b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-start.png
new file mode 100644
index 0000000..1fc76c3
Binary files /dev/null and b/tests/arrow.spec.ts-snapshots/with-arrow-transformed-parent-html-top-start.png differ