1 files changed, 75 insertions, 0 deletions
diff --git a/tests/javascript.js b/tests/javascript.js
new file mode 100644
index 0000000..8a3e8a8
--- /dev/null
+++ b/tests/javascript.js
@@ -0,0 +1,75 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom"
+
+export default class extends Controller {
+	static targets = ["origin", "floatable"]
+
+	static values = {
+		placement: {
+			type: String,
+			default: "bottom-start"
+		},
+		offset: {
+			type: Number,
+			default: 2
+		},
+		padding: {
+			type: Number,
+			default: 16
+		}
+	}
+
+	connect() {
+		this.cleanup = null
+
+		if (this.hasFloatableTarget) {
+			Object.assign(this.floatableTarget.style, {
+				position: "fixed",
+				left: "0",
+				top: "0",
+			})
+		}
+	}
+
+	disconnect() {
+		if (this.cleanup) {
+			this.cleanup()
+			this.cleanup = null
+		}
+	}
+
+	originTargetConnected() {
+		this.arrange()
+	}
+
+	floatableTargetConnected() {
+		this.arrange()
+	}
+
+	arrange() {
+		if (this.hasOriginTarget && this.hasFloatableTarget) {
+			if (this.cleanup) {
+				this.cleanup()
+				this.cleanup = null
+				return
+			}
+
+			this.cleanup = autoUpdate(this.originTarget, this.floatableTarget, () => {
+				computePosition(this.originTarget, this.floatableTarget, {
+					strategy: "fixed",
+					placement: this.placementValue,
+					middleware: [
+						offset(this.offsetValue),
+						flip(),
+						shift({ padding: this.paddingValue }),
+					]
+				}).then(({x, y }) => {
+					Object.assign(this.floatableTarget.style, {
+						left: `${x}px`,
+						top: `${y}px`,
+					})
+				})
+			})
+		}
+	}
+}