Remove floating-ui dependency.

packages/app/cypress/e2e/runner/selector-playground.cy.ts

@@ -14,11 +14,57 @@ describe('selector playground', () => {
 
     cy.get('[data-cy="playground-activator"]').click()
 
+    const backgroundColor = 'rgba(159, 196, 231, 0.6)'
+
+    cy.getAutIframe().within(() => {
+      cy.get('h1').realHover()
+      cy.get('.__cypress-selector-playground').shadow().within(() => {
+        // Test highlight exists
+        cy.get('.highlight').should('exist')
+        cy.get('.highlight').should('have.css', 'background-color', backgroundColor)
+
+        // Test tooltip text is correct
+        cy.get('.tooltip').should('have.text', 'h1')
+
+        // Test placement of tooltip
+        let highlightTop: any
+        let tooltipTop: any
+
+        cy.get('.highlight').then(($el) => {
+          highlightTop = parseFloat($el.css('top'))
+        })
+
+        cy.get('.tooltip').then(($el) => {
+          tooltipTop = parseFloat($el.css('top'))
+
+          expect(tooltipTop).to.be.greaterThan(highlightTop)
+        })
+      })
+    })
+
     cy.getAutIframe().within(() => {
       cy.get('h2').realHover()
       cy.get('.__cypress-selector-playground').shadow().within(() => {
+        // Test highlight exists
         cy.get('.highlight').should('exist')
+        cy.get('.highlight').should('have.css', 'background-color', backgroundColor)
+
+        // Test tooltip text is correct
         cy.get('.tooltip').should('have.text', '[data-cy="h2-contents"]')
+
+        // Test placement of tooltip
+        let highlightTop: any
+        let tooltipTop: any
+
+        cy.get('.highlight').then(($el) => {
+          highlightTop = parseFloat($el.css('top'))
+        })
+
+        cy.get('.tooltip').then(($el) => {
+          tooltipTop = parseFloat($el.css('top'))
+
+          expect(tooltipTop).to.be.lessThan(highlightTop)
+        })
       })
     })
   })

packages/app/package.json

@@ -20,7 +20,6 @@
   "dependencies": {},
   "devDependencies": {
     "@cypress-design/vue-icon": "^0.4.2",
-    "@floating-ui/dom": "1.0.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@headlessui/vue": "1.4.0",
     "@iconify/iconify": "2.1.2",

packages/app/src/runner/selector-playground/Highlight.ce.vue

@@ -1,56 +1,57 @@
 <template>
   <div
-    ref="highlightRef"
     class="highlight"
-    :style="style"
+    :style="highlightStyle"
   />
   <div
-    ref="tooltipRef"
     class="tooltip"
+    :style="tooltipStyle"
   >
     <span>{{ selector }}</span>
     <div
-      ref="arrow"
       class="arrow"
+      :style="arrowStyle"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computePosition, flip, offset, arrow } from '@floating-ui/dom'
-import { StyleValue, onMounted, nextTick, ref, Ref } from 'vue'
+import type { StyleValue, CSSProperties } from 'vue'
 
-defineProps <{
+const props = defineProps <{
   selector: string
   style: StyleValue
 }>()
 
-const highlightRef: Ref<HTMLElement | null> = ref(null)
-const tooltipRef: Ref<HTMLElement | null> = ref(null)
+const highlightStyle = props.style as CSSProperties
+const highlightTop = parseFloat(highlightStyle.top as string)
+const highlightLeft = parseFloat(highlightStyle.left as string)
+const highlightHeight = parseFloat(highlightStyle.height as string)
+const placeOnBottom = highlightTop < 35
 
-onMounted(() => {
-  nextTick(() => {
-    const ref = highlightRef.value as HTMLElement
-    const tooltip = tooltipRef.value as HTMLElement
-    const arrowEl = tooltip.querySelector('.arrow') as HTMLElement
+const tooltipStyle =
+  placeOnBottom
+    ? {
+      top: `${highlightTop + highlightHeight + 10}px`,
+      left: `${highlightLeft}px`,
+    }
+    : {
+      top: `${highlightTop - 33}px`,
+      left: `${highlightLeft}px`,
+    }
 
-    computePosition(ref, tooltip, {
-      placement: 'top-start',
-      middleware: [flip(), offset(6), arrow({ element: arrowEl })],
-    }).then(({ x, y, placement }) => {
-      Object.assign(tooltip.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-
-      Object.assign(arrowEl.style, {
-        left: `8px`,
-        top: placement === 'top-start' ? `24px` : `-6px`,
-        transform: placement === 'top-start' ? 'rotate(180deg)' : 'rotate(0deg)',
-      })
-    })
-  })
-})
+const arrowStyle =
+  placeOnBottom
+    ? {
+      left: `8px`,
+      top: `-6px`,
+      transform: 'rotate(0deg)',
+    }
+    : {
+      left: `8px`,
+      top: `24px`,
+      transform: 'rotate(180deg)',
+    }
 </script>
 
 <style>

yarn.lock

@@ -2812,18 +2812,6 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
   integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
 
-"@floating-ui/core@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8"
-  integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==
-
-"@floating-ui/dom@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.2.tgz#c5184c52c6f50abd11052d71204f4be2d9245237"
-  integrity sha512-5X9WSvZ8/fjy3gDu8yx9HAA4KG1lazUN2P4/VnaXLxTO9Dz53HI1oYoh1OlhqFNlHgGDiwFX5WhFCc2ljbW3yA==
-  dependencies:
-    "@floating-ui/core" "^1.0.1"
-
 "@floating-ui/dom@^0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"