From a0693d6950f226f2c5c34ae546b88b6569011867 Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 8 Apr 2023 21:37:06 +0800
Subject: [PATCH 01/43] feat: add dependency on @floating-ui/vue for the
 positioning engine of dropdown and other components.

---
 packages/ui/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 806a4d1374..c632581128 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -42,6 +42,7 @@
     "server:webapp": "npx http-server dist --push-state"
   },
   "dependencies": {
+    "@floating-ui/vue": "^0.2.1",
     "@types/lodash": "^4.14.161",
     "cleave.js": "^1.6.0",
     "colortranslator": "^1.9.2",
@@ -170,4 +171,4 @@
       ]
     }
   }
-}
\ No newline at end of file
+}

From 9210eccd59daec6634d37aebe2a41d08e41bd40d Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 8 Apr 2023 21:38:48 +0800
Subject: [PATCH 02/43] feat: using useFloating hooks instead of useDropdown

---
 .../src/components/va-dropdown/VaDropdown.vue | 68 +++++++++++++++----
 1 file changed, 54 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 64fc0c1df2..4ed1515c4d 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -18,7 +18,6 @@ import {
   useComponentPresetProp,
   useStateful, useStatefulEmits, createStatefulProps,
   useDebounceFn,
-  useDropdown,
   usePlacementAliasesProps,
   useClickOutside,
   useBem,
@@ -28,6 +27,7 @@ import {
   useHTMLElement,
   MaybeHTMLElementOrSelector,
   useTranslation,
+  useDomRect,
 } from '../../composables'
 import { useAnchorSelector } from './hooks/useAnchorSelector'
 import { useCursorAnchor } from './hooks/useCursorAnchor'
@@ -37,6 +37,15 @@ import { renderSlotNode } from '../../utils/headless'
 import { warn } from '../../utils/console'
 
 import type { DropdownOffsetProp } from './types'
+import {
+  type Middleware,
+  type Placement,
+  useFloating,
+  offset as offsetFn,
+  autoUpdate,
+  flip,
+  autoPlacement,
+} from '@floating-ui/vue'
 
 export default defineComponent({
   name: 'VaDropdown',
@@ -212,19 +221,48 @@ export default defineComponent({
       return props.disabled || !isPopoverFloating.value
     })
 
-    useDropdown(
-      computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value),
-      contentRef,
-      computed(() => ({
-        keepAnchorWidth: props.keepAnchorWidth,
-        offset: props.offset,
-        stickToEdges: props.stickToEdges,
-        autoPlacement: props.autoPlacement,
-        root: teleportTargetComputed.value,
-        viewport: targetComputed.value,
-      })),
-      props,
-    )
+    const anchorRef = computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value)
+    const { x, y, strategy } = useFloating(anchorRef, contentRef, {
+      placement: props.placement as Placement,
+      whileElementsMounted: autoUpdate,
+      middleware: computed(() => {
+        let middleware: Middleware[] = []
+        const offset = props.offset
+        console.log(offset, 'offset')
+        if (offset) {
+          middleware = [
+            offsetFn({
+              mainAxis: 100,
+              crossAxis: 100,
+            }),
+          ]
+        }
+
+        middleware.push(props.autoPlacement ? autoPlacement() : flip())
+        return middleware
+      }),
+    })
+
+    const { domRect: anchorDomRect } = useDomRect(anchorRef)
+
+    const contentStyle = computed(() => {
+      if (props.keepAnchorWidth) {
+        const { width } = anchorDomRect.value || {}
+        return {
+          position: strategy.value,
+          top: `${y.value}px`,
+          left: `${x.value}px`,
+          width: `${width}px`,
+          maxWidth: `${width}px`,
+        }
+      }
+
+      return {
+        position: strategy.value,
+        top: `${y.value}px`,
+        left: `${x.value}px`,
+      }
+    })
 
     const isMounted = useIsMounted()
 
@@ -240,6 +278,7 @@ export default defineComponent({
       onMouseLeave,
       emitAndClose,
       contentRef,
+      contentStyle,
     }
   },
 
@@ -253,6 +292,7 @@ export default defineComponent({
     const defaultSlotVNode = renderSlotNode(this.$slots.default, slotBinds, {
       ref: 'contentRef',
       class: 'va-dropdown__content-wrapper',
+      style: this.contentStyle,
       onMouseOver: () => this.$props.isContentHoverable && this.onMouseEnter(),
       onMouseOut: () => this.onMouseLeave(),
       onClick: () => this.emitAndClose('content-click', this.$props.closeOnContentClick),

From d796c2c0fc376ef6839017caea7406b0f26f0ab3 Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 8 Apr 2023 22:21:45 +0800
Subject: [PATCH 03/43] feat: add dependency on @floating-ui/vue for the
 positioning engine of dropdown and other components.

---
 yarn.lock | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 08fec50ee4..50cd356251 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1825,6 +1825,26 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
+"@floating-ui/core@^1.2.4":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54"
+  integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==
+
+"@floating-ui/dom@^1.2.1":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9"
+  integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==
+  dependencies:
+    "@floating-ui/core" "^1.2.4"
+
+"@floating-ui/vue@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
+  integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
+  dependencies:
+    "@floating-ui/dom" "^1.2.1"
+    vue-demi "^0.13.11"
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"

From 8af2111ed268302767150f2abe5cdb459d8802ed Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 8 Apr 2023 23:13:19 +0800
Subject: [PATCH 04/43] fix: fix overlay when dropdown placement property is
 'auto'

---
 .../src/components/va-dropdown/VaDropdown.vue | 42 ++++++++++++++-----
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 4ed1515c4d..c9bae141ab 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -45,6 +45,7 @@ import {
   autoUpdate,
   flip,
   autoPlacement,
+  shift,
 } from '@floating-ui/vue'
 
 export default defineComponent({
@@ -221,24 +222,45 @@ export default defineComponent({
       return props.disabled || !isPopoverFloating.value
     })
 
+    const computedPlacement = computed(() => props.placement === 'auto' ? 'bottom' : props.placement as Placement)
     const anchorRef = computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value)
     const { x, y, strategy } = useFloating(anchorRef, contentRef, {
-      placement: props.placement as Placement,
+      placement: computedPlacement.value,
       whileElementsMounted: autoUpdate,
       middleware: computed(() => {
-        let middleware: Middleware[] = []
+        const middleware: Middleware[] = []
         const offset = props.offset
-        console.log(offset, 'offset')
         if (offset) {
-          middleware = [
-            offsetFn({
-              mainAxis: 100,
-              crossAxis: 100,
-            }),
-          ]
+          middleware.push(offsetFn(Array.isArray(offset)
+            ? {
+              mainAxis: offset[0],
+              crossAxis: offset[1],
+            }
+            : {
+              mainAxis: offset,
+              crossAxis: 0,
+            }))
         }
 
-        middleware.push(props.autoPlacement ? autoPlacement() : flip())
+        // TODO: I found the original autoPlacement eq flip
+        // middleware.push(props.autoPlacement
+        //   ? autoPlacement()
+        //   : flip({
+        //     crossAxis: !isPopoverFloating.value,
+        //   }))
+
+        if (props.autoPlacement) {
+          middleware.push(flip({
+            crossAxis: !isPopoverFloating.value,
+          }))
+        }
+
+        if (isPopoverFloating.value) {
+          // preventOverflow renamed to flip now
+          middleware.push(shift({
+            padding: 5,
+          }))
+        }
         return middleware
       }),
     })

From 626bb17cbc461742e3751366bea5764a536b4f05 Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 8 Apr 2023 23:21:29 +0800
Subject: [PATCH 05/43] refactor: comment unused import

---
 packages/ui/src/components/va-dropdown/VaDropdown.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index c9bae141ab..d1305a9496 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -44,7 +44,7 @@ import {
   offset as offsetFn,
   autoUpdate,
   flip,
-  autoPlacement,
+  // autoPlacement,
   shift,
 } from '@floating-ui/vue'
 

From 12cf2561d8b1d7b84991f32558cf944632e03ace Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sun, 9 Apr 2023 11:18:57 +0800
Subject: [PATCH 06/43] refactor: migrate logic of position calculating from
 dropdown component to useDropdown

---
 .../src/components/va-dropdown/VaDropdown.vue |  91 +++-------------
 packages/ui/src/composables/useDropdown.ts    | 100 ++++++++++--------
 2 files changed, 70 insertions(+), 121 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index d1305a9496..c6284654bd 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -27,7 +27,7 @@ import {
   useHTMLElement,
   MaybeHTMLElementOrSelector,
   useTranslation,
-  useDomRect,
+  useDropdown,
 } from '../../composables'
 import { useAnchorSelector } from './hooks/useAnchorSelector'
 import { useCursorAnchor } from './hooks/useCursorAnchor'
@@ -37,16 +37,6 @@ import { renderSlotNode } from '../../utils/headless'
 import { warn } from '../../utils/console'
 
 import type { DropdownOffsetProp } from './types'
-import {
-  type Middleware,
-  type Placement,
-  useFloating,
-  offset as offsetFn,
-  autoUpdate,
-  flip,
-  // autoPlacement,
-  shift,
-} from '@floating-ui/vue'
 
 export default defineComponent({
   name: 'VaDropdown',
@@ -222,69 +212,20 @@ export default defineComponent({
       return props.disabled || !isPopoverFloating.value
     })
 
-    const computedPlacement = computed(() => props.placement === 'auto' ? 'bottom' : props.placement as Placement)
-    const anchorRef = computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value)
-    const { x, y, strategy } = useFloating(anchorRef, contentRef, {
-      placement: computedPlacement.value,
-      whileElementsMounted: autoUpdate,
-      middleware: computed(() => {
-        const middleware: Middleware[] = []
-        const offset = props.offset
-        if (offset) {
-          middleware.push(offsetFn(Array.isArray(offset)
-            ? {
-              mainAxis: offset[0],
-              crossAxis: offset[1],
-            }
-            : {
-              mainAxis: offset,
-              crossAxis: 0,
-            }))
-        }
-
-        // TODO: I found the original autoPlacement eq flip
-        // middleware.push(props.autoPlacement
-        //   ? autoPlacement()
-        //   : flip({
-        //     crossAxis: !isPopoverFloating.value,
-        //   }))
-
-        if (props.autoPlacement) {
-          middleware.push(flip({
-            crossAxis: !isPopoverFloating.value,
-          }))
-        }
-
-        if (isPopoverFloating.value) {
-          // preventOverflow renamed to flip now
-          middleware.push(shift({
-            padding: 5,
-          }))
-        }
-        return middleware
-      }),
-    })
-
-    const { domRect: anchorDomRect } = useDomRect(anchorRef)
-
-    const contentStyle = computed(() => {
-      if (props.keepAnchorWidth) {
-        const { width } = anchorDomRect.value || {}
-        return {
-          position: strategy.value,
-          top: `${y.value}px`,
-          left: `${x.value}px`,
-          width: `${width}px`,
-          maxWidth: `${width}px`,
-        }
-      }
-
-      return {
-        position: strategy.value,
-        top: `${y.value}px`,
-        left: `${x.value}px`,
-      }
-    })
+    useDropdown(
+      computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value),
+      contentRef,
+      computed(() => ({
+        keepAnchorWidth: props.keepAnchorWidth,
+        offset: props.offset,
+        stickToEdges: props.stickToEdges,
+        autoPlacement: props.autoPlacement,
+        root: teleportTargetComputed.value,
+        viewport: targetComputed.value,
+        shift: props.preventOverflow,
+      })),
+      props,
+    )
 
     const isMounted = useIsMounted()
 
@@ -300,7 +241,6 @@ export default defineComponent({
       onMouseLeave,
       emitAndClose,
       contentRef,
-      contentStyle,
     }
   },
 
@@ -314,7 +254,6 @@ export default defineComponent({
     const defaultSlotVNode = renderSlotNode(this.$slots.default, slotBinds, {
       ref: 'contentRef',
       class: 'va-dropdown__content-wrapper',
-      style: this.contentStyle,
       onMouseOver: () => this.$props.isContentHoverable && this.onMouseEnter(),
       onMouseOut: () => this.onMouseLeave(),
       onClick: () => this.emitAndClose('content-click', this.$props.closeOnContentClick),
diff --git a/packages/ui/src/composables/useDropdown.ts b/packages/ui/src/composables/useDropdown.ts
index ec4c9e5e19..924e660d91 100644
--- a/packages/ui/src/composables/useDropdown.ts
+++ b/packages/ui/src/composables/useDropdown.ts
@@ -2,10 +2,8 @@ import { computed, unref, watchPostEffect, type Ref } from 'vue'
 
 import { useDomRect } from './useDomRect'
 import { useDocument } from './useDocument'
-import { usePlacementAliases } from './usePlacementAliases'
 
 import { unwrapEl } from '../utils/unwrapEl'
-import { mapObject } from '../utils/map-object'
 
 import type {
   PlacementAlignment,
@@ -14,6 +12,17 @@ import type {
   ParsedPlacement,
 } from './usePlacementAliases'
 
+import {
+  type Middleware,
+  type Placement,
+  useFloating,
+  offset as offsetFn,
+  autoPlacement as autoPlacementFn,
+  shift as shiftFn,
+  autoUpdate,
+  flip,
+} from '@floating-ui/vue'
+
 export type Offset = number | [number, number]
 
 type Coords = { x: number, y: number }
@@ -156,6 +165,7 @@ export type usePopoverOptions = {
   /** Root element selector */
   root?: string | HTMLElement,
   viewport?: HTMLElement,
+  shift?: boolean,
 }
 
 /**
@@ -191,60 +201,57 @@ export const useDropdown = (
     return documentRef.value.body
   })
   const { domRect: anchorDomRect } = useDomRect(anchorRef)
-  const { domRect: contentDomRect } = useDomRect(contentRef)
-
-  const css = {
-    position: 'absolute',
-  }
-
-  const { position, align } = usePlacementAliases(props)
-  watchPostEffect(() => {
-    if (!rootRef.value || !anchorDomRect.value || !contentDomRect.value) { return }
-
-    const { offset, keepAnchorWidth, autoPlacement, stickToEdges } = unref(options)
-
-    // calculate coords (x and y) of content left-top corner
-    let coords = calculateContentCoords(position.value, align.value, anchorDomRect.value, contentDomRect.value)
-
-    let offsetCoords: Coords = { x: 0, y: 0 }
-    if (offset) {
-      offsetCoords = calculateOffsetCoords(position.value, offset)
-      coords = mapObject(coords, (c, key) => c + offsetCoords[key])
-    }
 
-    const rootRect = rootRef.value.getBoundingClientRect()
-    const viewportRect = unref(options).viewport?.getBoundingClientRect() ?? rootRect
-
-    if (autoPlacement) {
-      const { position: newPosition, align: newAlign } = getAutoPlacement(position.value, align.value, coords, contentDomRect.value, viewportRect)
-
-      if (newPosition !== position.value || newAlign !== align.value) {
-        coords = calculateContentCoords(newPosition, newAlign, anchorDomRect.value, contentDomRect.value)
-
-        if (offset) {
-          offsetCoords = calculateOffsetCoords(newPosition, offset)
-          coords = mapObject(coords, (c, key) => c + offsetCoords[key])
-        }
+  const computedPlacement = computed(() => props.placement === 'auto' ? 'bottom' : props.placement as Placement)
+
+  const { x, y, strategy, update } = useFloating(anchorRef, contentRef, {
+    placement: computedPlacement.value,
+    whileElementsMounted: autoUpdate,
+    middleware: computed(() => {
+      const middleware: Middleware[] = []
+      const { offset, autoPlacement, shift } = unref(options)
+      if (offset) {
+        middleware.push(offsetFn(Array.isArray(offset)
+          ? {
+            mainAxis: offset[0],
+            crossAxis: offset[1],
+          }
+          : {
+            mainAxis: offset,
+            crossAxis: 0,
+          }))
       }
-    }
 
-    if (stickToEdges) {
-      coords = calculateClipToEdge(coords, offsetCoords, contentDomRect.value, anchorDomRect.value, viewportRect)
-    }
+      middleware.push(autoPlacement
+        ? autoPlacementFn()
+        : flip({
+          crossAxis: !shift,
+        }))
+
+      if (shift) {
+        // preventOverflow renamed to flip now
+        middleware.push(shiftFn({
+          padding: 5,
+        }))
+      }
+      return middleware
+    }),
+  })
 
-    coords.x -= rootRect.x + rootRef.value.clientLeft
-    coords.y -= rootRect.y + rootRef.value.clientTop
+  watchPostEffect(() => {
+    if (!rootRef.value || !anchorDomRect.value || x.value === null || y.value === null) { return }
 
     if (unwrapEl(contentRef.value)) {
       let widthCss = {}
+      const { keepAnchorWidth } = unref(options)
       if (keepAnchorWidth) {
-        const { width } = anchorDomRect.value
+        const { width } = anchorDomRect.value || {}
         widthCss = { width: `${width}px`, maxWidth: `${width}px` }
       }
 
       Object.assign(unwrapEl(contentRef.value)!.style, {
-        ...css,
-        ...coordsToCss(coords),
+        position: strategy.value,
+        ...coordsToCss({ x: x.value, y: y.value }),
         ...widthCss,
       })
     }
@@ -252,6 +259,9 @@ export const useDropdown = (
 
   return {
     anchorDomRect,
-    contentDomRect,
+    x,
+    y,
+    strategy,
+    update,
   }
 }

From d57e3740b2a5f19ef1da78f5000a50b512a0ccd8 Mon Sep 17 00:00:00 2001
From: chenguixin <591764955@qq.com>
Date: Sat, 15 Apr 2023 17:14:41 +0800
Subject: [PATCH 07/43] fix: fix "Ref Target" demo broken

---
 .../src/components/va-dropdown/VaDropdown.vue |  9 ++++++-
 packages/ui/src/composables/useDomRect.ts     |  2 +-
 packages/ui/src/composables/useDropdown.ts    | 24 ++++++++++++-------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index c6284654bd..93e9284934 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -212,8 +212,15 @@ export default defineComponent({
       return props.disabled || !isPopoverFloating.value
     })
 
+    const anchorRef = computed(() => {
+      if (props.target) {
+        return target.value
+      }
+
+      return props.cursor ? cursorAnchor.value : computedAnchorRef.value
+    })
     useDropdown(
-      computed(() => props.cursor ? cursorAnchor.value : computedAnchorRef.value),
+      anchorRef,
       contentRef,
       computed(() => ({
         keepAnchorWidth: props.keepAnchorWidth,
diff --git a/packages/ui/src/composables/useDomRect.ts b/packages/ui/src/composables/useDomRect.ts
index 8283119e51..f60b0ef190 100644
--- a/packages/ui/src/composables/useDomRect.ts
+++ b/packages/ui/src/composables/useDomRect.ts
@@ -12,7 +12,7 @@ const isDomRectEqual = (a: any, b: any) => {
   return true
 }
 
-export const useDomRect = (target: Ref<HTMLElement | undefined>) => {
+export const useDomRect = (target: Ref<Element | undefined>) => {
   const domRect = ref<DOMRect | null>(null)
 
   let prev = {}
diff --git a/packages/ui/src/composables/useDropdown.ts b/packages/ui/src/composables/useDropdown.ts
index 924e660d91..91724946f6 100644
--- a/packages/ui/src/composables/useDropdown.ts
+++ b/packages/ui/src/composables/useDropdown.ts
@@ -210,6 +210,7 @@ export const useDropdown = (
     middleware: computed(() => {
       const middleware: Middleware[] = []
       const { offset, autoPlacement, shift } = unref(options)
+
       if (offset) {
         middleware.push(offsetFn(Array.isArray(offset)
           ? {
@@ -222,16 +223,23 @@ export const useDropdown = (
           }))
       }
 
-      middleware.push(autoPlacement
-        ? autoPlacementFn()
-        : flip({
-          crossAxis: !shift,
-        }))
+      if (autoPlacement) {
+        middleware.push(flip({ crossAxis: !shift }))
+      }
+      // if (autoPlacement) {
+      //   middleware.push(autoPlacementFn())
+      // } else {
+      //   middleware.push(flip({
+      //     crossAxis: !shift,
+      //   }))
+      // }
 
       if (shift) {
-        // preventOverflow renamed to flip now
+        // preventOverflow renamed to shift now
         middleware.push(shiftFn({
           padding: 5,
+          // TODO: the rootBoundary should be the rootRef, but it doesn't work
+          // rootBoundary: anchorRef.value ? useDomRect(anchorRef).domRect.value as Rect : 'viewport',
         }))
       }
       return middleware
@@ -239,7 +247,7 @@ export const useDropdown = (
   })
 
   watchPostEffect(() => {
-    if (!rootRef.value || !anchorDomRect.value || x.value === null || y.value === null) { return }
+    if (!rootRef.value || !contentRef.value) { return }
 
     if (unwrapEl(contentRef.value)) {
       let widthCss = {}
@@ -251,7 +259,7 @@ export const useDropdown = (
 
       Object.assign(unwrapEl(contentRef.value)!.style, {
         position: strategy.value,
-        ...coordsToCss({ x: x.value, y: y.value }),
+        ...coordsToCss({ x: x.value || 0, y: y.value || 0 }),
         ...widthCss,
       })
     }

From 926134bd3f615729d3a447b612e48fa4833e432b Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 18 Apr 2023 12:42:01 +0300
Subject: [PATCH 08/43] fix(dropdown): cursorAnchor

---
 .../va-dropdown/VaDropdown.demo.vue           | 24 ++++++++++++++++++-
 .../va-dropdown/hooks/useCursorAnchor.ts      | 17 +++++++------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index 9f4f65220b..dccbb5b8de 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -490,6 +490,27 @@
         </va-dropdown>
       </div>
     </VbCard>
+
+    <VbCard>
+      <va-dropdown
+        placement="right-start"
+        cursor
+        trigger="right-click"
+        auto-placement
+        stick-to-edges
+      >
+        <va-dropdown-content> Contextual popover! </va-dropdown-content>
+
+        <template #anchor>
+          <va-image
+            style="height: 300px; width: 300px;"
+            src="https://picsum.photos/1500"
+          >
+            <div>Right click this image</div>
+          </va-image>
+        </template>
+      </va-dropdown>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -499,9 +520,10 @@ import { VaDropdown, VaDropdownContent } from './'
 import DropdownCloseButton from './__demo__/DropdownCloseButton'
 import { VaInput } from '../va-input'
 import { VaBadge } from '../va-badge'
+import { VaImage } from '../va-image'
 
 export default {
-  components: { DropdownCloseButton, VaDropdown, VaInput, VaDropdownContent, VaBadge },
+  components: { DropdownCloseButton, VaDropdown, VaInput, VaDropdownContent, VaBadge, VaImage },
   data () {
     return {
       possiblePositions: [
diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 51d62f4b14..00a43a5fdb 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -1,6 +1,7 @@
-import { computed, reactive, Ref, watch, watchEffect } from 'vue'
+import { computed, reactive, Ref, watchEffect } from 'vue'
 import { useEvent } from '../../../composables/useEvent'
 
+/** Returns fake HTML Element which `getBoundingClientRect` method returns mouse position */
 export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>) => {
   const mouse = reactive({ x: 0, y: 0 })
 
@@ -33,6 +34,8 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
 
       return {
         ...rect,
+        width: 1,
+        height: 1,
         x: x,
         y: y,
         bottom: y + 1,
@@ -42,14 +45,10 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
       }
     }
 
-    return new Proxy<HTMLElement>(target, {
-      get (target, key: keyof typeof target) {
-        if (key === 'getBoundingClientRect') {
-          return getBoundingClientRect
-        }
-
-        return target[key]
+    return {
+      getBoundingClientRect () {
+        return getBoundingClientRect()
       },
-    })
+    } as unknown as HTMLElement // TODO: Change to DOMRectable instead of HTMLElement
   })
 }

From a3ac794c18ed41b5a31fea95778c9983adfdbc65 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 23 May 2023 20:18:41 +0300
Subject: [PATCH 09/43] chore: update floating-ui to 1.0.0

---
 packages/ui/package.json |  2 +-
 yarn.lock                | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index d66ee3d8b1..b354bb143d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -42,7 +42,7 @@
     "server:webapp": "npx http-server dist --push-state"
   },
   "dependencies": {
-    "@floating-ui/vue": "^0.2.1",
+    "@floating-ui/vue": "^1.0.0",
     "@types/lodash": "^4.14.161",
     "cleave.js": "^1.6.0",
     "colortranslator": "^1.9.2",
diff --git a/yarn.lock b/yarn.lock
index 42f5bcb039..fd6baf72b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1452,24 +1452,24 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
-"@floating-ui/core@^1.2.4":
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.5.tgz#612f0d203e6f647490d572c7b798eebac9e3cf54"
-  integrity sha512-qrcbyfnRVziRlB6IYwjCopYhO7Vud750JlJyuljruIXcPxr22y8zdckcJGsuOdnQ639uVD1tTXddrcH3t3QYIQ==
+"@floating-ui/core@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0"
+  integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==
 
-"@floating-ui/dom@^1.2.1":
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.5.tgz#c9ec259a24ce0958b1ea29674df4eee4455361a9"
-  integrity sha512-+sAUfpQ3Frz+VCbPCqj+cZzvEESy3fjSeT/pDWkYCWOBXYNNKZfuVsHuv8/JO2zze8+Eb/Q7a6hZVgzS81fLbQ==
+"@floating-ui/dom@^1.2.7":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.8.tgz#aee0f6ccc0787ab8fe741487a6e5e95b7b125375"
+  integrity sha512-XLwhYV90MxiHDq6S0rzFZj00fnDM+A1R9jhSioZoMsa7G0Q0i+Q4x40ajR8FHSdYDE1bgjG45mIWe6jtv9UPmg==
   dependencies:
-    "@floating-ui/core" "^1.2.4"
+    "@floating-ui/core" "^1.2.6"
 
-"@floating-ui/vue@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-0.2.1.tgz#a52b66e020897ad0535d0d0d3b09932446fc6231"
-  integrity sha512-HE+EIeakID7wI6vUwF0yMpaW48bNaPj8QtnQaRMkaQFhQReVBA4bY6fmJ3J7X+dqVgDbMhyfCG0fBJfdQMdWxQ==
+"@floating-ui/vue@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.0.tgz#95abef6c977249ad76126b8f14137c5dfe12cec5"
+  integrity sha512-vwznPUCobUscJG6zpYLWfOgDRxE0+fCvnbO0bxn9nh0ILrXabqDLsvnaYy1hLTVa+vaHZhIS9UxQX4B6NwSnFA==
   dependencies:
-    "@floating-ui/dom" "^1.2.1"
+    "@floating-ui/dom" "^1.2.7"
     vue-demi "^0.13.11"
 
 "@fortawesome/fontawesome-common-types@^0.2.36":

From ae7eb34b276ebba2e17defbfd172f3b284b52bd0 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 2 Jun 2023 00:23:59 +0200
Subject: [PATCH 10/43] Init version of new dropdown

---
 packages/ui/package.json                      |  1 +
 packages/ui/src/components/index.ts           |  1 +
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 81 +++++++++++++++++++
 .../va-dropdown-new/VaDropdownNew.vue         | 61 ++++++++++++++
 .../src/components/va-dropdown-new/index.ts   |  4 +
 yarn.lock                                     | 25 ++++++
 6 files changed, 173 insertions(+)
 create mode 100644 packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
 create mode 100644 packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
 create mode 100644 packages/ui/src/components/va-dropdown-new/index.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 41f718f05d..b0a33a3a87 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -42,6 +42,7 @@
     "server:webapp": "npx http-server dist --push-state"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@types/lodash": "^4.14.161",
     "cleave.js": "^1.6.0",
     "colortranslator": "^1.9.2",
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 0b5b94091f..ba26f5ed50 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -40,6 +40,7 @@ export * from './va-date-input'
 export * from './va-date-picker'
 export * from './va-divider'
 export * from './va-dropdown'
+export * from './va-dropdown-new'
 export * from './va-form'
 export * from './va-hover'
 export * from './va-icon'
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
new file mode 100644
index 0000000000..bae19f31c3
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -0,0 +1,81 @@
+<template>
+  <VbDemo>
+    <VbCard title="Default">
+      <va-dropdown-new>
+        <template #anchor>
+          Hi
+        </template>
+        Dropdown
+      </va-dropdown-new>
+    </VbCard>
+    <br />
+    <VbCard title="Big">
+      <div class="overflow-hidden">
+        <div
+          class="scroll-container"
+          ref="targetBig"
+        >
+          <div class="content-container">
+            <div class="vertical-space"></div>
+            <va-dropdown-new
+              :target="targetBig"
+            >
+              <template #anchor>
+                <div class="scrollable"></div>
+              </template>
+              Dropdown
+            </va-dropdown-new>
+            <div class="vertical-space"></div>
+          </div>
+        </div>
+      </div>
+    </VbCard>
+  </VbDemo>
+</template>
+
+<script>
+import { ref } from 'vue'
+import VaDropdownNew from './VaDropdownNew.vue'
+
+export default {
+  components: {
+    VaDropdownNew,
+  },
+  setup () {
+    return {
+      targetBig: ref(null),
+    }
+  },
+}
+</script>
+
+<style scoped>
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.scroll-container {
+  width: 500px;
+  height: 300px;
+  overflow: auto;
+  position: relative;
+  border: 1px dashed black;
+}
+
+.content-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.vertical-space {
+  height: 400px;
+}
+
+.scrollable {
+  width: 80px;
+  height: 80px;
+  border: 1px dashed black;
+}
+</style>
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
new file mode 100644
index 0000000000..87b8d8d4f2
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -0,0 +1,61 @@
+<template>
+  <div
+    ref="anchor"
+  >
+    <slot
+      name="anchor"
+    >
+    </slot>
+  </div>
+  <div
+    v-if="isMounted"
+    ref="floating"
+    :style="floatingStyles"
+  >
+    <slot
+    ></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent, PropType, computed, watch, nextTick } from 'vue'
+import { useFloating, autoUpdate, flip } from '@floating-ui/vue'
+import { MaybeHTMLElementOrSelector, useHTMLElementSelector, useIsMounted } from '../../composables'
+
+export default defineComponent({
+  name: 'VaDropdownNew',
+  props: {
+    trigger: {
+      type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
+      default: 'click',
+      validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
+    },
+    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+  },
+  setup (props) {
+    const anchor = ref(null)
+    const floating = ref(null)
+
+    const targetElement = useHTMLElementSelector(computed(() => props.target || 'body'))
+    console.log(targetElement.value)
+
+    const { floatingStyles, update } = useFloating(anchor, floating, {
+      whileElementsMounted: autoUpdate,
+      middleware: computed(() => [
+        flip({
+          boundary: targetElement.value,
+        }),
+      ]),
+    })
+
+    const isMounted = useIsMounted()
+
+    return {
+      anchor,
+      floating,
+      floatingStyles,
+      isMounted,
+    }
+  },
+})
+</script>
diff --git a/packages/ui/src/components/va-dropdown-new/index.ts b/packages/ui/src/components/va-dropdown-new/index.ts
new file mode 100644
index 0000000000..6b7f70bdc6
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown-new/index.ts
@@ -0,0 +1,4 @@
+import withConfigTransport from '../../services/config-transport/withConfigTransport'
+import _VaDropdownNew from './VaDropdownNew.vue'
+
+export const VaDropdownNew = withConfigTransport(_VaDropdownNew)
diff --git a/yarn.lock b/yarn.lock
index 74c88ee8eb..619f7c5d18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1452,6 +1452,26 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
+"@floating-ui/core@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0"
+  integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==
+
+"@floating-ui/dom@^1.2.9":
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.9.tgz#b9ed1c15d30963419a6736f1b7feb350dd49c603"
+  integrity sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==
+  dependencies:
+    "@floating-ui/core" "^1.2.6"
+
+"@floating-ui/vue@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.1.tgz#b20ea07f0cf3fb1374cdb04aeba9c06d886d2261"
+  integrity sha512-HZmmNWaztKYKOQxXvMzJYCYtfgG07cL/bPQvZ92AFG3Ktw71bvvLKXsZDAyIxGpqRo9WiTPsYknnSuLV2H/riA==
+  dependencies:
+    "@floating-ui/dom" "^1.2.9"
+    vue-demi ">=0.13.0"
+
 "@fortawesome/fontawesome-common-types@^0.2.36":
   version "0.2.36"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@@ -17982,6 +18002,11 @@ vue-component-type-helpers@1.6.1:
   resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-1.6.1.tgz#3c1636e3b900807dab71cce0bfa1b7ec0aa42b46"
   integrity sha512-3UoSEAU2pGcmO4Ir36YkFm6OosyMhwXRtt+7+XjqUnCgGzjT256nHViYhJT692DSW1V1/v4Zd4z1GoZJNhF3GQ==
 
+vue-demi@>=0.13.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.5.tgz#676d0463d1a1266d5ab5cba932e043d8f5f2fbd9"
+  integrity sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==
+
 vue-demi@^0.13.11, vue-demi@^0.13.5:
   version "0.13.11"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"

From eb691e1e4f2088991c93b6c6f243592f6bcc0a30 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 2 Jun 2023 12:54:22 +0200
Subject: [PATCH 11/43] Update new dropdown

---
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 127 ++++++++++++--
 .../va-dropdown-new/VaDropdownNew.vue         | 162 ++++++++++++++++--
 2 files changed, 260 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index bae19f31c3..9786961bae 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -1,27 +1,81 @@
 <template>
   <VbDemo>
-    <VbCard title="Default">
+    <VbCard title="Click">
       <va-dropdown-new>
         <template #anchor>
-          Hi
+          Click me
         </template>
-        Dropdown
+        Clicked
       </va-dropdown-new>
     </VbCard>
-    <br />
-    <VbCard title="Big">
+    <VbCard title="Hover">
+      <va-dropdown-new
+        trigger="hover"
+      >
+        <template #anchor>
+          Hover me
+        </template>
+        Hovered
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Top">
+      <va-dropdown-new
+        placement="top"
+      >
+        <template #anchor>
+          Click me
+        </template>
+        Top
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Top-start">
+      <va-dropdown-new
+        placement="top-start"
+      >
+        <template #anchor>
+          Click me
+        </template>
+        TS
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Offset 20 40">
+      <va-dropdown-new
+        :offset="[20, 40]"
+      >
+        <template #anchor>
+          Click me
+        </template>
+        Offset
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Same width">
+      <va-dropdown-new
+        keepAnchorWidth
+      >
+        <template #anchor>
+          Click me
+        </template>
+        Looooong Dropdown
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Flip + target">
+      Scroll up
       <div class="overflow-hidden">
         <div
           class="scroll-container"
-          ref="targetBig"
+          ref="targetFlip"
+          v-scroll-to-middle-y
         >
           <div class="content-container">
             <div class="vertical-space"></div>
             <va-dropdown-new
-              :target="targetBig"
+              :model-value="true"
+              :target="targetFlip"
+              class="grid place-items-center"
             >
               <template #anchor>
-                <div class="scrollable"></div>
+                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+                </div>
               </template>
               Dropdown
             </va-dropdown-new>
@@ -30,6 +84,34 @@
         </div>
       </div>
     </VbCard>
+    <VbCard title="Autoplacement main and cross axis + target">
+      Scroll around
+      <div class="overflow-hidden">
+        <div
+          class="scroll-container"
+          ref="targetFlipShift"
+          v-scroll-to-middle-y
+          v-scroll-to-middle-x
+        >
+          <div class="content-container">
+            <div class="vertical-space horizontal-space"></div>
+            <va-dropdown-new
+              :model-value="true"
+              :target="targetFlipShift"
+            >
+              <template #anchor>
+                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+                </div>
+              </template>
+              <div>
+                Looooonger Dropdown
+              </div>
+            </va-dropdown-new>
+            <div class="vertical-space horizontal-space"></div>
+          </div>
+        </div>
+      </div>
+    </VbCard>
   </VbDemo>
 </template>
 
@@ -43,9 +125,24 @@ export default {
   },
   setup () {
     return {
-      targetBig: ref(null),
+      targetFlip: ref(null),
+      targetFlipShift: ref(null),
     }
   },
+  directives: {
+    scrollToMiddleY: {
+      mounted: (el) => {
+        const { scrollHeight, clientHeight } = el
+        el.scrollTop = (scrollHeight - clientHeight) / 2
+      },
+    },
+    scrollToMiddleX: {
+      mounted: (el) => {
+        const { scrollWidth, clientWidth } = el
+        el.scrollLeft = (scrollWidth - clientWidth) / 2
+      },
+    },
+  },
 }
 </script>
 
@@ -63,19 +160,15 @@ export default {
 }
 
 .content-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
+  display: grid;
+  place-items: center;
 }
 
 .vertical-space {
   height: 400px;
 }
 
-.scrollable {
-  width: 80px;
-  height: 80px;
-  border: 1px dashed black;
+.horizontal-space {
+  width: 1000px;
 }
 </style>
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 87b8d8d4f2..97ceeb1dc8 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     ref="anchor"
+    :class="$attrs.class"
   >
     <slot
       name="anchor"
@@ -8,7 +9,7 @@
     </slot>
   </div>
   <div
-    v-if="isMounted"
+    v-if="isMounted && valueComputed"
     ref="floating"
     :style="floatingStyles"
   >
@@ -18,39 +19,176 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, PropType, computed, watch, nextTick } from 'vue'
-import { useFloating, autoUpdate, flip } from '@floating-ui/vue'
-import { MaybeHTMLElementOrSelector, useHTMLElementSelector, useIsMounted } from '../../composables'
+import { defineComponent, PropType, computed, nextTick } from 'vue'
+import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
+import kebabCase from 'lodash/kebabCase'
+import {
+  createStatefulProps,
+  MaybeHTMLElementOrSelector, useClickOutside, useHTMLElement,
+  useHTMLElementSelector,
+  useIsMounted, useStateful,
+} from '../../composables'
+import { useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
+import { DropdownOffsetProp } from '../va-dropdown/types'
+import { useCursorAnchor } from '../va-dropdown/hooks/useCursorAnchor'
+
+// TODO
+// cursor
+// teleport
 
 export default defineComponent({
   name: 'VaDropdownNew',
   props: {
+    ...createStatefulProps(Boolean, true),
     trigger: {
       type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
       default: 'click',
       validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
     },
+    closeOnClickOutside: { type: Boolean, default: true },
+    placement: { type: String as PropType<Placement>, default: 'bottom' },
+    offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
+    keepAnchorWidth: { type: Boolean, default: false },
     target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    cursor: { type: Boolean, default: false },
   },
-  setup (props) {
-    const anchor = ref(null)
-    const floating = ref(null)
+  setup (props, { emit }) {
+    const { valueComputed: statefulVal } = useStateful(props, emit)
+    const valueComputed = computed({
+      get: () => statefulVal.value, // && !props.disabled && !props.readonly,
+      set (val) {
+        statefulVal.value = val
+        if (val) {
+          emit('open')
+        } else {
+          emit('close')
+        }
+      },
+    })
 
+    const anchor = useHTMLElement('anchor')
+    // const cursorAnchor = useCursorAnchor(anchor, valueComputed)
+    const floating = useHTMLElement('floating')
     const targetElement = useHTMLElementSelector(computed(() => props.target || 'body'))
-    console.log(targetElement.value)
 
-    const { floatingStyles, update } = useFloating(anchor, floating, {
-      whileElementsMounted: autoUpdate,
-      middleware: computed(() => [
+    const onClick = (e: MouseEvent) => {
+      if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
+
+      if (valueComputed.value) {
+        // emitAndClose('anchor-click', props.closeOnAnchorClick, e)
+      } else {
+        if (props.trigger !== 'click') { return }
+        valueComputed.value = true
+        emit('anchor-click', e)
+      }
+    }
+    const onContextmenu = (e: MouseEvent) => {
+      if (kebabCase(props.trigger) !== 'right-click') { return } // || props.disabled) { return }
+      e.preventDefault()
+
+      if (valueComputed.value) {
+        // emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
+
+        if (props.cursor) {
+          nextTick(() => { valueComputed.value = true })
+        }
+      } else {
+        valueComputed.value = true
+        emit('anchor-right-click', e)
+      }
+    }
+    const onDblclick = () => { return undefined }
+    const onMouseenter = () => {
+      if (props.trigger !== 'hover') { return } // || props.disabled) { return }
+      valueComputed.value = true
+
+      // debounceHover(() => { valueComputed.value = true })
+      // cancelUnHoverDebounce()
+    }
+    const onMouseleave = () => {
+      if (props.trigger !== 'hover') { return } // || props.disabled) { return }
+      valueComputed.value = false
+
+      // if (props.isContentHoverable) {
+      //   debounceUnHover(() => { valueComputed.value = false })
+      // } else {
+      //   valueComputed.value = false
+      // }
+      // cancelHoverDebounce()
+    }
+
+    useMouseNavigation(anchor, {
+      click: onClick,
+      contextmenu: onContextmenu,
+      dblclick: onDblclick,
+      mouseenter: onMouseenter,
+      mouseleave: onMouseleave,
+    })
+
+    const emitAndClose = (eventName: Parameters<typeof emit>[0], close?: boolean, e?: Event) => {
+      emit(eventName, e)
+      if (close && props.trigger !== 'none') { valueComputed.value = false }
+    }
+
+    useClickOutside([anchor, floating], () => {
+      if (props.closeOnClickOutside && valueComputed.value) {
+        emitAndClose('click-outside', props.closeOnClickOutside)
+      }
+    })
+
+    const placementComputed = computed(() => {
+      return props.placement
+    })
+
+    const offsetComputed = computed(() => {
+      const result = { mainAxis: 0, crossAxis: 0 }
+      if (Array.isArray(props.offset)) {
+        result.mainAxis = props.offset[0]
+        result.crossAxis = props.offset[1]
+      } else {
+        result.mainAxis = props.offset
+      }
+
+      return result
+    })
+
+    const middlewareComputed = computed(() => {
+      const result = [
+        offset(offsetComputed.value),
+        // flip element, works for -start, -end
         flip({
           boundary: targetElement.value,
         }),
-      ]),
+        // shift the element into the view
+        shift(),
+      ]
+
+      if (props.keepAnchorWidth) {
+        result.push(size({
+          apply ({ elements }) {
+            const reference = elements.reference
+            const availableWidth = reference.getBoundingClientRect().width
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+            })
+          },
+        }),
+        )
+      }
+
+      return result
+    })
+
+    const { floatingStyles } = useFloating(anchor, floating, {
+      placement: placementComputed,
+      whileElementsMounted: autoUpdate,
+      middleware: middlewareComputed,
     })
 
     const isMounted = useIsMounted()
 
     return {
+      valueComputed,
       anchor,
       floating,
       floatingStyles,

From 154fb9cc27485aec764470ad8f51238586fd8126 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 2 Jun 2023 21:12:58 +0200
Subject: [PATCH 12/43] Update new dropdown (cursor)

---
 .../va-dropdown-new/VaDropdownNew.demo.vue    |  32 ++++
 .../va-dropdown-new/VaDropdownNew.vue         |  19 ++-
 .../va-dropdown-new/useCursorAnchor.ts        | 139 ++++++++++++++++++
 3 files changed, 184 insertions(+), 6 deletions(-)
 create mode 100644 packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index 9786961bae..267e00b4a0 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -58,6 +58,37 @@
         Looooong Dropdown
       </va-dropdown-new>
     </VbCard>
+    <VbCard title="Cursor">
+      <va-dropdown-new
+        trigger="right-click"
+        placement="bottom-start"
+        cursor
+      >
+        <template #anchor>
+          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
+            Right click
+          </div>
+        </template>
+        Ctx dropdown
+      </va-dropdown-new>
+    </VbCard>
+    <VbCard title="Cursor + target">
+      <va-dropdown-new
+        trigger="right-click"
+        placement="top-end"
+        :target="cursorTarget"
+        cursor
+      >
+        <template #anchor>
+          <div
+            class="w-32 h-32 border-2 border-gray-1000 border-dashed"
+            ref="cursorTarget"
+          >
+          </div>
+        </template>
+        Ctx dropdown
+      </va-dropdown-new>
+    </VbCard>
     <VbCard title="Flip + target">
       Scroll up
       <div class="overflow-hidden">
@@ -125,6 +156,7 @@ export default {
   },
   setup () {
     return {
+      cursorTarget: ref(null),
       targetFlip: ref(null),
       targetFlipShift: ref(null),
     }
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 97ceeb1dc8..6d96246c3d 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -19,18 +19,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, nextTick } from 'vue'
+import { defineComponent, PropType, computed, nextTick, ref } from 'vue'
 import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import {
   createStatefulProps,
-  MaybeHTMLElementOrSelector, useClickOutside, useHTMLElement,
+  MaybeHTMLElementOrSelector, useClickOutside, useDomRect, useHTMLElement,
   useHTMLElementSelector,
   useIsMounted, useStateful,
 } from '../../composables'
 import { useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
-import { useCursorAnchor } from '../va-dropdown/hooks/useCursorAnchor'
+import { useCursorAnchor } from './useCursorAnchor'
 
 // TODO
 // cursor
@@ -51,6 +51,8 @@ export default defineComponent({
     keepAnchorWidth: { type: Boolean, default: false },
     target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
     cursor: { type: Boolean, default: false },
+    anchorSelector: { type: String, default: '' },
+    innerAnchorSelector: { type: String, default: '' },
   },
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
@@ -67,9 +69,9 @@ export default defineComponent({
     })
 
     const anchor = useHTMLElement('anchor')
-    // const cursorAnchor = useCursorAnchor(anchor, valueComputed)
     const floating = useHTMLElement('floating')
     const targetElement = useHTMLElementSelector(computed(() => props.target || 'body'))
+    const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
 
     const onClick = (e: MouseEvent) => {
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
@@ -179,9 +181,13 @@ export default defineComponent({
       return result
     })
 
-    const { floatingStyles } = useFloating(anchor, floating, {
+    const anchorComputed = computed(() => {
+      return props.cursor ? cursorAnchor.value : anchor.value
+    })
+
+    const { floatingStyles } = useFloating(anchorComputed, floating, {
       placement: placementComputed,
-      whileElementsMounted: autoUpdate,
+      whileElementsMounted: autoUpdate, // !props.cursor ? autoUpdate : undefined,
       middleware: middlewareComputed,
     })
 
@@ -193,6 +199,7 @@ export default defineComponent({
       floating,
       floatingStyles,
       isMounted,
+      anchorComputed,
     }
   },
 })
diff --git a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
new file mode 100644
index 0000000000..3b4df65702
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
@@ -0,0 +1,139 @@
+import { computed, reactive, Ref } from 'vue'
+import { useEvent } from '../../composables'
+
+export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>) => {
+  const anchor = reactive({ x: 0, y: 0 })
+  const mouse = reactive({ x: 0, y: 0 })
+
+  useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
+    if (noUpdate.value) { return }
+    mouse.x = e.clientX
+    mouse.y = e.clientY
+    const { x, y } = anchorRef.value!.getBoundingClientRect()
+    anchor.x = x
+    anchor.y = y
+  }, anchorRef)
+
+  return computed(() => {
+    return {
+      getBoundingClientRect () {
+        const { x, y } = anchorRef.value!.getBoundingClientRect()
+        const { x: mx, y: my } = mouse
+        const { x: ax, y: ay } = anchor
+        const shiftX = ax - x
+        const shiftY = ay - y
+        const resX = mx - shiftX
+        const resY = my - shiftY
+        return {
+          width: 0,
+          height: 0,
+          x: resX,
+          y: resY,
+          top: resY,
+          right: resX,
+          bottom: resY,
+          left: resX,
+        }
+      },
+    }
+  })
+  // computed(() => {
+  //   return {
+  //     getBoundingClientRect () {
+  //       console.log('getBoundingClientRect')
+  //       return {
+  //         width: 0,
+  //         height: 0,
+  //         x: 0,
+  //         y: 0,
+  //         top: 300,
+  //         left: 500,
+  //         right: 0,
+  //         bottom: 0,
+  //       }
+  //     },
+  //     // contextElement: anchor.value,
+  //   }
+  // })
+}
+
+  // console.log(anchorRef)
+  //
+  // const mouse = reactive({ x: 0, y: 0 })
+  //
+  // useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
+  //   console.log(anchorRef.value?.getBoundingClientRect())
+  //   const { x, y } = anchorRef.value!.getBoundingClientRect()
+  //   mouse.x = e.clientX - x
+  //   mouse.y = e.clientY - y
+  //   // mouse.x = e.clientX
+  //   // mouse.y = e.clientY
+  // }, anchorRef)
+  //
+  // const mouseOffset = {
+  //   x: 0,
+  //   y: 0,
+  // }
+  //
+  // watchEffect(() => {
+  //   if (noUpdate.value) { return }
+  //   mouseOffset.x = mouse.x
+  //   mouseOffset.y = mouse.y
+  // })
+  //
+  // return computed(() => {
+  //   if (!anchorRef.value) { return undefined }
+  //
+  //   const target = anchorRef.value
+  //
+  //   const getBoundingClientRect = () => {
+  //     console.log('getBoundingClientRect')
+  //     const rect = target.getBoundingClientRect()
+  //     const x = rect.left + mouseOffset.x
+  //     const y = rect.top + mouseOffset.y
+  //
+  //     return {
+  //       ...rect,
+  //       x: x,
+  //       y: y,
+  //       bottom: y + 1,
+  //       right: x + 1,
+  //       left: x,
+  //       top: y,
+  //     }
+  //   }
+
+    // if (!anchorRef.value) { return undefined }
+    //
+    // const clientX = mouse.x
+    // const clientY = mouse.y
+    //
+    // const getBoundingClientRect = () => {
+    //   return {
+    //     width: 0,
+    //     height: 0,
+    //     x: clientX,
+    //     y: clientY,
+    //     top: clientY,
+    //     left: clientX,
+    //     right: clientX,
+    //     bottom: clientY,
+    //   }
+    // }
+
+    // return {
+    //   getBoundingClientRect,
+    //   contextElement: anchorRef.value,
+    // }
+
+    // return new Proxy<HTMLElement>(target, {
+    //   get (target, key: keyof typeof target) {
+    //     if (key === 'getBoundingClientRect') {
+    //       return getBoundingClientRect
+    //     }
+    //
+    //     return target[key]
+    //   },
+    // })
+//   })
+// }

From 77ed5537897b697dd0cc0f5a54115c43e682e225 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 19:18:53 +0200
Subject: [PATCH 13/43] Update new dropdown (teleport)

---
 .../va-dropdown-new/VaDropdownNew.vue         | 58 +++++++----
 .../va-dropdown-new/useCursorAnchor.ts        | 99 -------------------
 2 files changed, 40 insertions(+), 117 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 6d96246c3d..ef0c17b803 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -8,14 +8,19 @@
     >
     </slot>
   </div>
-  <div
-    v-if="isMounted && valueComputed"
-    ref="floating"
-    :style="floatingStyles"
+  <Teleport
+    v-if="showFloating"
+    :to="teleportTarget ?? undefined"
+    :disabled="teleportDisabled"
   >
-    <slot
-    ></slot>
-  </div>
+    <div
+      ref="floating"
+      :style="floatingStyles"
+    >
+      <slot
+      ></slot>
+    </div>
+  </Teleport>
 </template>
 
 <script lang="ts">
@@ -33,7 +38,6 @@ import { DropdownOffsetProp } from '../va-dropdown/types'
 import { useCursorAnchor } from './useCursorAnchor'
 
 // TODO
-// cursor
 // teleport
 
 export default defineComponent({
@@ -51,8 +55,8 @@ export default defineComponent({
     keepAnchorWidth: { type: Boolean, default: false },
     target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
     cursor: { type: Boolean, default: false },
-    anchorSelector: { type: String, default: '' },
-    innerAnchorSelector: { type: String, default: '' },
+    preventOverflow: { type: Boolean, default: false },
+    teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
   },
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
@@ -68,11 +72,31 @@ export default defineComponent({
       },
     })
 
+    const isMounted = useIsMounted()
+
     const anchor = useHTMLElement('anchor')
     const floating = useHTMLElement('floating')
-    const targetElement = useHTMLElementSelector(computed(() => props.target || 'body'))
+    const target = useHTMLElementSelector(computed(() => props.target || 'body'))
+    const teleport = useHTMLElementSelector(computed(() => props.teleport))
     const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
 
+    const isPopoverFloating = computed(() => props.preventOverflow)
+    const teleportTarget = computed<HTMLElement | undefined>(() => {
+      if (teleport.value) {
+        return teleport.value
+      }
+
+      if (!isPopoverFloating.value) {
+        // If not floating just render inside the parent element
+        return undefined
+      }
+
+      return target.value
+    })
+
+    const teleportDisabled = computed(() => !teleport.value)
+    const showFloating = computed(() => valueComputed.value && isMounted.value)
+
     const onClick = (e: MouseEvent) => {
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
 
@@ -159,7 +183,7 @@ export default defineComponent({
         offset(offsetComputed.value),
         // flip element, works for -start, -end
         flip({
-          boundary: targetElement.value,
+          boundary: target.value,
         }),
         // shift the element into the view
         shift(),
@@ -187,19 +211,17 @@ export default defineComponent({
 
     const { floatingStyles } = useFloating(anchorComputed, floating, {
       placement: placementComputed,
-      whileElementsMounted: autoUpdate, // !props.cursor ? autoUpdate : undefined,
+      whileElementsMounted: autoUpdate,
       middleware: middlewareComputed,
     })
 
-    const isMounted = useIsMounted()
-
     return {
-      valueComputed,
       anchor,
       floating,
       floatingStyles,
-      isMounted,
-      anchorComputed,
+      teleportDisabled,
+      showFloating,
+      teleportTarget,
     }
   },
 })
diff --git a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
index 3b4df65702..e6635bb855 100644
--- a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
@@ -37,103 +37,4 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
       },
     }
   })
-  // computed(() => {
-  //   return {
-  //     getBoundingClientRect () {
-  //       console.log('getBoundingClientRect')
-  //       return {
-  //         width: 0,
-  //         height: 0,
-  //         x: 0,
-  //         y: 0,
-  //         top: 300,
-  //         left: 500,
-  //         right: 0,
-  //         bottom: 0,
-  //       }
-  //     },
-  //     // contextElement: anchor.value,
-  //   }
-  // })
 }
-
-  // console.log(anchorRef)
-  //
-  // const mouse = reactive({ x: 0, y: 0 })
-  //
-  // useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
-  //   console.log(anchorRef.value?.getBoundingClientRect())
-  //   const { x, y } = anchorRef.value!.getBoundingClientRect()
-  //   mouse.x = e.clientX - x
-  //   mouse.y = e.clientY - y
-  //   // mouse.x = e.clientX
-  //   // mouse.y = e.clientY
-  // }, anchorRef)
-  //
-  // const mouseOffset = {
-  //   x: 0,
-  //   y: 0,
-  // }
-  //
-  // watchEffect(() => {
-  //   if (noUpdate.value) { return }
-  //   mouseOffset.x = mouse.x
-  //   mouseOffset.y = mouse.y
-  // })
-  //
-  // return computed(() => {
-  //   if (!anchorRef.value) { return undefined }
-  //
-  //   const target = anchorRef.value
-  //
-  //   const getBoundingClientRect = () => {
-  //     console.log('getBoundingClientRect')
-  //     const rect = target.getBoundingClientRect()
-  //     const x = rect.left + mouseOffset.x
-  //     const y = rect.top + mouseOffset.y
-  //
-  //     return {
-  //       ...rect,
-  //       x: x,
-  //       y: y,
-  //       bottom: y + 1,
-  //       right: x + 1,
-  //       left: x,
-  //       top: y,
-  //     }
-  //   }
-
-    // if (!anchorRef.value) { return undefined }
-    //
-    // const clientX = mouse.x
-    // const clientY = mouse.y
-    //
-    // const getBoundingClientRect = () => {
-    //   return {
-    //     width: 0,
-    //     height: 0,
-    //     x: clientX,
-    //     y: clientY,
-    //     top: clientY,
-    //     left: clientX,
-    //     right: clientX,
-    //     bottom: clientY,
-    //   }
-    // }
-
-    // return {
-    //   getBoundingClientRect,
-    //   contextElement: anchorRef.value,
-    // }
-
-    // return new Proxy<HTMLElement>(target, {
-    //   get (target, key: keyof typeof target) {
-    //     if (key === 'getBoundingClientRect') {
-    //       return getBoundingClientRect
-    //     }
-    //
-    //     return target[key]
-    //   },
-    // })
-//   })
-// }

From 6be09f6d575a2dd2af63c184f259e5d6b596af2c Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 19:27:54 +0200
Subject: [PATCH 14/43] Add contextElement to keep virtual dropdown position

---
 packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
index e6635bb855..7966519d40 100644
--- a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
@@ -35,6 +35,7 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
           left: resX,
         }
       },
+      contextElement: anchorRef.value,
     }
   })
 }

From de4ed61f00cca0e83c57d9bd37806a90011bd7a1 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 20:36:20 +0200
Subject: [PATCH 15/43] DropdownNew docs. Fix ssr issue with flip middleware

---
 packages/docs/page-config/navigationRoutes.ts |   8 +-
 .../ui-elements/dropdown-new/api-options.ts   |   8 ++
 .../dropdown-new/components/Coordinates.vue   |  62 ++++++++++
 .../dropdown-new/examples/Default.vue         |  10 ++
 .../examples/PlacementAndOffset.vue           | 116 ++++++++++++++++++
 .../ui-elements/dropdown-new/index.ts         |  25 ++++
 .../dropdown-new/translation/en.json          |  26 ++++
 packages/docs/translations/en.json            |  28 +++++
 packages/nuxt/src/config/components.ts        |   1 +
 .../va-dropdown-new/VaDropdownNew.vue         |  10 +-
 10 files changed, 289 insertions(+), 5 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/index.ts
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/translation/en.json

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index 5f5f0f8135..cc02755c0a 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/packages/docs/page-config/navigationRoutes.ts
@@ -277,7 +277,7 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "color-input",
         displayName: "menu.colorInput",
       },
-  
+
       {
         category: 'menu.categories.layout',
         name: 'aspect-ratio',
@@ -377,11 +377,15 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "dropdown",
         displayName: "menu.dropdown",
       },
+      {
+        name: "dropdown-new",
+        displayName: "menu.dropdownNew",
+      },
       {
         name: "spacer",
         displayName: "menu.spacer",
       },
-  
+
       {
         category: "menu.categories.other",
         name: "affix",
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts b/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
new file mode 100644
index 0000000000..24ff1513ed
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
@@ -0,0 +1,8 @@
+import { ManualApiOptions } from "@/components/DocsApi/ManualApiOptions";
+
+export default {
+  props: {},
+  events: {},
+  methods: {},
+  slots: {},
+} as ManualApiOptions;
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue b/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
new file mode 100644
index 0000000000..9a4178f5d8
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
@@ -0,0 +1,62 @@
+<template>
+  <svg
+    class="placement-coordinates"
+    xmlns="http://www.w3.org/2000/svg"
+    width="104"
+    height="104"
+    fill="none"
+  >
+    <g>
+      <path
+        :style="computedStyle.y"
+        d="M50.5 102a1.5 1.5 0 0 0 3 0h-3ZM53.06.94a1.5 1.5 0 0 0-2.12 0l-9.55 9.55a1.5 1.5 0 1 0 2.12 2.12L52 4.12l8.49 8.49a1.5 1.5 0 1 0 2.12-2.12L53.06.94ZM53.5 102V2h-3v100h3Z"
+      />
+      <path
+        :style="computedStyle.x"
+        d="M2 50.5a1.5 1.5 0 0 0 0 3v-3Zm101.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.55-9.55a1.5 1.5 0 1 0-2.12 2.12L99.88 52l-8.49 8.49a1.5 1.5 0 1 0 2.12 2.12l9.55-9.55ZM2 53.5h100v-3H2v3Z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  placement: {
+    type: String,
+    default: "top",
+  },
+});
+
+const main = computed(() =>
+  ["top", "bottom", "auto"].some((p) => props.placement.includes(p)) ? "y" : "x"
+);
+const cross = computed(() => (main.value === "y" ? "x" : "y"));
+const mainReversed = computed(() =>
+  ["bottom", "left", "auto"].some((p) => props.placement.includes(p))
+);
+const crossReversed = computed(() => cross.value === "y");
+
+const computedStyle = computed(() => {
+  return {
+    [main.value]: {
+      fill: "var(--va-primary)",
+      transform: mainReversed.value ? "scale(-1) translate(-100%, -100%)" : "",
+    },
+    [cross.value]: {
+      fill: "var(--va-secondary)",
+      opacity: 0.3,
+      transform: crossReversed.value ? "scale(-1) translate(-100%, -100%)" : "",
+    },
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.placement-coordinates {
+  border: 1px solid var(--va-divider);
+  padding: 4px;
+  box-sizing: content-box;
+}
+</style>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
new file mode 100644
index 0000000000..36729dd297
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
@@ -0,0 +1,10 @@
+<template>
+  <va-dropdown-new>
+    <template #anchor>
+      <va-button> Dropdownable </va-button>
+    </template>
+    Dropped down!
+
+<!--    <va-dropdown-content> Dropped down! </va-dropdown-content>-->
+  </va-dropdown-new>
+</template>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
new file mode 100644
index 0000000000..0624a68ab1
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
@@ -0,0 +1,116 @@
+<template>
+  <table>
+    <tr>
+      <td colspan="2">
+        <div class="title va-text-center mb-2">
+          Offset direction
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td
+        colspan="2"
+        style="padding: 4rem;"
+      >
+        <div class="flex flex-col items-center">
+          <va-dropdown
+            :model-value="true"
+            :placement="placementWIthAlias"
+            :close-on-click-outside="false"
+            :close-on-anchor-click="false"
+            :close-on-content-click="false"
+            :offset="offset"
+          >
+            <template #anchor>
+              <div><Coordinates :placement="placement" /></div>
+            </template>
+
+            <va-dropdown-content> Dropdown </va-dropdown-content>
+          </va-dropdown>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>Placement:</td>
+      <td>
+        <va-select
+          v-model="placementWIthAlias"
+          :options="placements"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td style="color: var(--va-primary);">
+        Main:
+      </td>
+      <td>
+        <va-counter
+          v-model="offset[0]"
+          manual-input
+        />
+      </td>
+    </tr>
+    <tr>
+      <td style="color: var(--va-secondary);">
+        Cross:
+      </td>
+      <td>
+        <va-counter
+          v-model="offset[1]"
+          manual-input
+        />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<script>
+import { ref, computed } from "vue";
+
+import { aliasToPlacement } from "vuestic-ui/src/composables";
+
+import Coordinates from "../components/Coordinates.vue";
+
+const aliases = [
+  "top-left",
+  "left-top",
+  "top-right",
+  "right-top",
+  "bottom-left",
+  "left-bottom",
+  "bottom-right",
+  "right-bottom",
+];
+
+export default {
+  components: { Coordinates },
+
+  setup: () => {
+    const placementWIthAlias = ref("auto");
+    return {
+      placementWIthAlias,
+      placement: computed(() => {
+        return (
+          aliasToPlacement[placementWIthAlias.value] || placementWIthAlias.value
+        );
+      }),
+      placements: ["top", "bottom", "left", "right"]
+        .reduce(
+          (acc, position) => [
+            ...acc,
+            position,
+            `${position}-start`,
+            `${position}-end`,
+            `${position}-center`,
+          ],
+          ["auto"]
+        )
+        .concat(aliases),
+    };
+  },
+
+  data: () => ({
+    offset: [10, 0],
+  }),
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/index.ts b/packages/docs/page-config/ui-elements/dropdown-new/index.ts
new file mode 100644
index 0000000000..4435eb0cec
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/index.ts
@@ -0,0 +1,25 @@
+import apiOptions from "./api-options";
+
+import specs from "./specs.md?raw";
+
+export default definePageConfig({
+  blocks: [
+    block.title("dropdown-new.title"),
+    block.paragraph("dropdown-new.text"),
+
+    // examples/
+    block.example("Default"),
+
+    block.example("PlacementAndOffset"),
+
+    // block.example("Trigger"),
+    //
+    // block.example("Cursor"),
+    //
+    // block.example("PreventOverflow"),
+    //
+    // block.api("VaDropdown", apiOptions),
+    //
+    // block.collapse("useDropdown hook specs", [block.markdown(specs)]),
+  ],
+});
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json b/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json
new file mode 100644
index 0000000000..b999b02cbb
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json
@@ -0,0 +1,26 @@
+{
+  "title": "Dropdown",
+  "text": "Dropdown component is a **headless** component that allow you to show some content near anchor. It is more utility component. You can use it with `VaDropdownContent` or `VaCard` component. This component looks like popover, but without any additional styling as `VaPopover` has.",
+  "examples": {
+    "default": {
+      "title": "Default usage",
+      "text": ""
+    },
+    "placementAndOffset": {
+      "title": "Placement and Offset",
+      "text": "You can place dropdown any direction you want. Offset is calculated relative to `placement` prop. We use `main` and `cross` offset. Means `main` will be relative to `placement` direction while `cross` is perpendicular. `auto` placement will be `bottom` by default, but will change to `top` if it is not possible to display on bottom."
+    },
+    "trigger": {
+      "title": "Trigger",
+      "text": "You can use `click`, `hover` or `none` trigger which will open dropdown. If you want dropdown to be opened only programmatically use `none` trigger"
+    },
+    "cursor": {
+      "title": "Place on cursor",
+      "text": "You can render dropdown content on cursor position. It is useful to use `cursor` props with `auto-placement` so if content do not fit target it will be placed somewhere else."
+    },
+    "preventOverflow": {
+      "title": "Prevent overflow",
+      "text": "By default dropdown content is rendered as body child. This way we prevent any overflow. In example below `overflow: hidden` of green box is ignored. But we still able to respec overflow by changing `target` prop. In example below `overflow: hidden` of red box is hiding dropdown content."
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/docs/translations/en.json b/packages/docs/translations/en.json
index 088cf50882..4affa58975 100644
--- a/packages/docs/translations/en.json
+++ b/packages/docs/translations/en.json
@@ -1465,6 +1465,34 @@
       "methods": {},
       "slots": {}
     },
+    "VaDropdownNew": {
+      "props": {
+        "anchorSelector": "Anchor CSS selector instead of passing slot",
+        "innerAnchorSelector": "Anchor CSS selector inside passed slot",
+        "autoPlacement": "If dropdown doesn't fit viewport, it will be placed automatically to fit viewport",
+        "closeOnAnchorClick": "Dropdown will be closed when anchor is clicked",
+        "closeOnClickOutside": "Dropdown will be closed when clicked outside dropdown content and anchor",
+        "closeOnContentClick": "Dropdown will be closed when clicked inside dropdown content",
+        "cursor": "Dropdown will be rendered relative to cursor position",
+        "hoverOutTimeout": "Time in `ms` after mouse leave dropdown before it will be closed",
+        "hoverOverTimeout": "Time in `ms` after mouse enter dropdown before it will be opened",
+        "isContentHoverable": "If true, dropdown content will be hoverable",
+        "keepAnchorWidth": "If true, dropdown content will have exact same width as anchor",
+        "offset": "Dropdown content will be moved by main and cross axis according to current `placement`",
+        "placement": "Dropdown content will be placed on `placement` side of anchor",
+        "stickToEdges": "Dropdown will not be rendered outside of viewport. It will be moved in opposite direction",
+        "trigger": "Action which will open and close dropdown",
+        "target": "Dropdown content parent. Dropdown content will be attached to `target` to prevent overflow",
+        "preventOverflow": "If true, dropdown will be teleported to `target` ignoring `overflow: hidden` on relative position elements"
+      },
+      "events": {
+        "anchorClick": "The event is triggered when anchor is clicked",
+        "clickOutside": "The event is triggered when clicked outside dropdown content and anchor",
+        "contentClick": "The event is triggered when clicked inside dropdown content"
+      },
+      "methods": {},
+      "slots": {}
+    },
     "VaScrollContainer": {
       "props": {
         "horizontal": "Enables horizontal scrolling.",
diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts
index afbb1b11d8..841f2988bc 100644
--- a/packages/nuxt/src/config/components.ts
+++ b/packages/nuxt/src/config/components.ts
@@ -35,6 +35,7 @@ export default [
   'VaDivider',
   'VaDropdown',
   'VaDropdownContent',
+  'VaDropdownNew',
   'VaFileUpload',
   'VaForm',
   'VaHover',
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index ef0c17b803..723bff52d4 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -29,7 +29,9 @@ import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@
 import kebabCase from 'lodash/kebabCase'
 import {
   createStatefulProps,
-  MaybeHTMLElementOrSelector, useClickOutside, useDomRect, useHTMLElement,
+  MaybeHTMLElementOrSelector,
+  useClickOutside,
+  useHTMLElement,
   useHTMLElementSelector,
   useIsMounted, useStateful,
 } from '../../composables'
@@ -95,7 +97,7 @@ export default defineComponent({
     })
 
     const teleportDisabled = computed(() => !teleport.value)
-    const showFloating = computed(() => valueComputed.value && isMounted.value)
+    const showFloating = computed(() => isMounted.value && valueComputed.value)
 
     const onClick = (e: MouseEvent) => {
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
@@ -183,7 +185,7 @@ export default defineComponent({
         offset(offsetComputed.value),
         // flip element, works for -start, -end
         flip({
-          boundary: target.value,
+          boundary: isMounted.value ? target.value : undefined,
         }),
         // shift the element into the view
         shift(),
@@ -215,6 +217,8 @@ export default defineComponent({
       middleware: middlewareComputed,
     })
 
+    // const floatingStyles = ref({})
+
     return {
       anchor,
       floating,

From 6f992038040673e0cb5ab29ae48312eeb9808e31 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 21:07:52 +0200
Subject: [PATCH 16/43] DropdownNew docs. Add dropdown styles

---
 .../dropdown-new/examples/Cursor.vue          | 20 +++++++
 .../dropdown-new/examples/Default.vue         |  3 +-
 .../examples/PlacementAndOffset.vue           |  4 +-
 .../dropdown-new/examples/PreventOverflow.vue | 48 ++++++++++++++++
 .../dropdown-new/examples/Trigger.vue         | 56 +++++++++++++++++++
 .../ui-elements/dropdown-new/index.ts         | 12 ++--
 .../va-dropdown-new/VaDropdownNew.vue         | 38 ++++++++++++-
 .../va-dropdown-new/_variables.scss           |  6 ++
 8 files changed, 174 insertions(+), 13 deletions(-)
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
 create mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
 create mode 100644 packages/ui/src/components/va-dropdown-new/_variables.scss

diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
new file mode 100644
index 0000000000..3ea49990ab
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
@@ -0,0 +1,20 @@
+<template>
+  <va-dropdown
+    placement="right-start"
+    cursor
+    trigger="right-click"
+    auto-placement
+    stick-to-edges
+  >
+    <va-dropdown-content> Contextual popover! </va-dropdown-content>
+
+    <template #anchor>
+      <va-image
+        style="height: 300px; width: 300px;"
+        src="https://picsum.photos/1500"
+      >
+        <va-badge text="Right click this image" />
+      </va-image>
+    </template>
+  </va-dropdown>
+</template>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
index 36729dd297..1c4adb66bc 100644
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
@@ -3,8 +3,7 @@
     <template #anchor>
       <va-button> Dropdownable </va-button>
     </template>
-    Dropped down!
 
-<!--    <va-dropdown-content> Dropped down! </va-dropdown-content>-->
+    <va-dropdown-content> Dropped down! </va-dropdown-content>
   </va-dropdown-new>
 </template>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
index 0624a68ab1..12047f263e 100644
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
@@ -13,7 +13,7 @@
         style="padding: 4rem;"
       >
         <div class="flex flex-col items-center">
-          <va-dropdown
+          <va-dropdown-new
             :model-value="true"
             :placement="placementWIthAlias"
             :close-on-click-outside="false"
@@ -26,7 +26,7 @@
             </template>
 
             <va-dropdown-content> Dropdown </va-dropdown-content>
-          </va-dropdown>
+          </va-dropdown-new>
         </div>
       </td>
     </tr>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
new file mode 100644
index 0000000000..67644f4396
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
@@ -0,0 +1,48 @@
+<template>
+  <div
+    class="demo-viewport"
+    style="overflow: hidden;"
+  >
+    <div
+      class="demo-ignore-overflow"
+      style="overflow: hidden;"
+    >
+      <va-dropdown
+        :model-value="true"
+        :auto-placement="false"
+        trigger="none"
+        placement="top"
+        target=".demo-viewport"
+        prevent-overflow
+      >
+        <div class="demo-square" />
+
+        <template #anchor>
+          <button>Anchor</button>
+        </template>
+      </va-dropdown>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.demo-square {
+  background-color: var(--va-primary);
+  width: 100px;
+  height: 100vh;
+}
+
+.demo-viewport {
+  overflow: hidden;
+  position: relative;
+  padding: 4rem;
+  border: 2px solid var(--va-danger);
+}
+
+.demo-ignore-overflow {
+  padding: 4rem;
+  overflow: hidden;
+  position: relative;
+  border: 2px solid var(--va-success);
+}
+</style>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
new file mode 100644
index 0000000000..7bde6776c0
--- /dev/null
+++ b/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
@@ -0,0 +1,56 @@
+<template>
+  <va-dropdown-new>
+    <template #anchor>
+      <va-button class="mr-2">
+        Click
+      </va-button>
+    </template>
+
+    <va-dropdown-content> Dropped down! </va-dropdown-content>
+  </va-dropdown-new>
+
+  <va-dropdown-new trigger="right-click">
+    <template #anchor>
+      <va-button class="mr-2">
+        Right click
+      </va-button>
+    </template>
+
+    <va-dropdown-content> Dropped down! </va-dropdown-content>
+  </va-dropdown-new>
+
+  <va-dropdown-new trigger="hover">
+    <template #anchor>
+      <va-button> Hover </va-button>
+    </template>
+
+    <va-dropdown-content> Dropped down! </va-dropdown-content>
+  </va-dropdown-new>
+
+  <div class="mt-2 flex">
+    <va-dropdown-new
+      v-model="doShowDropdown"
+      trigger="none"
+      class="mr-2"
+      :close-on-click-outside="false"
+    >
+      <template #anchor>
+        <va-button> None </va-button>
+      </template>
+
+      <va-dropdown-content> Dropped down! </va-dropdown-content>
+    </va-dropdown-new>
+
+    <va-button @click="doShowDropdown = !doShowDropdown">
+      {{ doShowDropdown ? "hide" : "show" }} dropdown
+    </va-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { doShowDropdown: false };
+  },
+};
+</script>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/index.ts b/packages/docs/page-config/ui-elements/dropdown-new/index.ts
index 4435eb0cec..c038c22134 100644
--- a/packages/docs/page-config/ui-elements/dropdown-new/index.ts
+++ b/packages/docs/page-config/ui-elements/dropdown-new/index.ts
@@ -12,12 +12,12 @@ export default definePageConfig({
 
     block.example("PlacementAndOffset"),
 
-    // block.example("Trigger"),
-    //
-    // block.example("Cursor"),
-    //
-    // block.example("PreventOverflow"),
-    //
+    block.example("Trigger"),
+
+    block.example("Cursor"),
+
+    block.example("PreventOverflow"),
+
     // block.api("VaDropdown", apiOptions),
     //
     // block.collapse("useDropdown hook specs", [block.markdown(specs)]),
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 723bff52d4..f0149f7093 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -2,6 +2,8 @@
   <div
     ref="anchor"
     :class="$attrs.class"
+    class="va-dropdown"
+    style="position: relative;"
   >
     <slot
       name="anchor"
@@ -16,6 +18,7 @@
     <div
       ref="floating"
       :style="floatingStyles"
+      class="va-dropdown__content-wrapper"
     >
       <slot
       ></slot>
@@ -52,7 +55,7 @@ export default defineComponent({
       validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
     },
     closeOnClickOutside: { type: Boolean, default: true },
-    placement: { type: String as PropType<Placement>, default: 'bottom' },
+    placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
     keepAnchorWidth: { type: Boolean, default: false },
     target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
@@ -165,6 +168,10 @@ export default defineComponent({
     })
 
     const placementComputed = computed(() => {
+      if (props.placement === 'auto') {
+        return 'bottom'
+      }
+
       return props.placement
     })
 
@@ -217,8 +224,6 @@ export default defineComponent({
       middleware: middlewareComputed,
     })
 
-    // const floatingStyles = ref({})
-
     return {
       anchor,
       floating,
@@ -230,3 +235,30 @@ export default defineComponent({
   },
 })
 </script>
+
+<style lang="scss">
+@import '../../styles/resources';
+@import 'variables';
+
+.va-dropdown {
+  /* Solved the alignment problem (if we try to align inline and block elements) */
+  line-height: var(--va-dropdown-line-height);
+  font-family: var(--va-font-family);
+  display: var(--va-dropdown-display);
+  position: relative;
+  max-width: 100%;
+  vertical-align: middle;
+
+  &--disabled {
+    @include va-disabled;
+  }
+
+  &__content-wrapper {
+    z-index: var(--va-dropdown-content-wrapper-z-index);
+    font-family: var(--va-font-family);
+    top: 0;
+    left: 0;
+    position: absolute;
+  }
+}
+</style>
diff --git a/packages/ui/src/components/va-dropdown-new/_variables.scss b/packages/ui/src/components/va-dropdown-new/_variables.scss
new file mode 100644
index 0000000000..bbb3693fd1
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown-new/_variables.scss
@@ -0,0 +1,6 @@
+:root,
+:host {
+  --va-dropdown-line-height: 1;
+  --va-dropdown-content-wrapper-z-index: var(--va-z-index-teleport-overlay, 9);
+  --va-dropdown-display: inline-flex;
+}

From 683652c2682cbce8029a8be16a0fac0778a8ee86 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 21:21:58 +0200
Subject: [PATCH 17/43] Update NewDropdown docs

---
 .../ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index 267e00b4a0..a375ab75ec 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -101,8 +101,8 @@
             <div class="vertical-space"></div>
             <va-dropdown-new
               :model-value="true"
+              :stateful="false"
               :target="targetFlip"
-              class="grid place-items-center"
             >
               <template #anchor>
                 <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
@@ -128,6 +128,7 @@
             <div class="vertical-space horizontal-space"></div>
             <va-dropdown-new
               :model-value="true"
+              :stateful="false"
               :target="targetFlipShift"
             >
               <template #anchor>

From e251943d5fd1a4f7dc5c9c3118eed169ec5db268 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 21:24:56 +0200
Subject: [PATCH 18/43] NewDropdown add missing props

---
 .../va-dropdown-new/VaDropdownNew.vue         | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index f0149f7093..325647ce43 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -42,19 +42,19 @@ import { useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
 import { useCursorAnchor } from './useCursorAnchor'
 
-// TODO
-// teleport
-
 export default defineComponent({
   name: 'VaDropdownNew',
   props: {
     ...createStatefulProps(Boolean, true),
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
     trigger: {
       type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
       default: 'click',
       validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
     },
     closeOnClickOutside: { type: Boolean, default: true },
+    closeOnAnchorClick: { type: Boolean, default: true },
     placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
     keepAnchorWidth: { type: Boolean, default: false },
@@ -66,7 +66,7 @@ export default defineComponent({
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
     const valueComputed = computed({
-      get: () => statefulVal.value, // && !props.disabled && !props.readonly,
+      get: () => statefulVal.value && !props.disabled && !props.readonly,
       set (val) {
         statefulVal.value = val
         if (val) {
@@ -106,7 +106,7 @@ export default defineComponent({
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
 
       if (valueComputed.value) {
-        // emitAndClose('anchor-click', props.closeOnAnchorClick, e)
+        emitAndClose('anchor-click', props.closeOnAnchorClick, e)
       } else {
         if (props.trigger !== 'click') { return }
         valueComputed.value = true
@@ -114,11 +114,11 @@ export default defineComponent({
       }
     }
     const onContextmenu = (e: MouseEvent) => {
-      if (kebabCase(props.trigger) !== 'right-click') { return } // || props.disabled) { return }
+      if (kebabCase(props.trigger) !== 'right-click' || props.disabled) { return }
       e.preventDefault()
 
       if (valueComputed.value) {
-        // emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
+        emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
 
         if (props.cursor) {
           nextTick(() => { valueComputed.value = true })
@@ -130,14 +130,14 @@ export default defineComponent({
     }
     const onDblclick = () => { return undefined }
     const onMouseenter = () => {
-      if (props.trigger !== 'hover') { return } // || props.disabled) { return }
+      if (props.trigger !== 'hover' || props.disabled) { return }
       valueComputed.value = true
 
       // debounceHover(() => { valueComputed.value = true })
       // cancelUnHoverDebounce()
     }
     const onMouseleave = () => {
-      if (props.trigger !== 'hover') { return } // || props.disabled) { return }
+      if (props.trigger !== 'hover' || props.disabled) { return }
       valueComputed.value = false
 
       // if (props.isContentHoverable) {
@@ -191,6 +191,7 @@ export default defineComponent({
       const result = [
         offset(offsetComputed.value),
         // flip element, works for -start, -end
+        // boundary doesn't work with ssr (trying to access document)
         flip({
           boundary: isMounted.value ? target.value : undefined,
         }),

From 8556310b47d550a2b838f6e8252c1b493811bea2 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 22:21:05 +0200
Subject: [PATCH 19/43] DropdownNew anchor and inner anchor selectors

---
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 32 +++++++++++++++++++
 .../va-dropdown-new/VaDropdownNew.vue         |  9 ++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index a375ab75ec..5836857bcd 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -89,6 +89,38 @@
         Ctx dropdown
       </va-dropdown-new>
     </VbCard>
+    <VbCard title="Anchor selector">
+      <div>
+        <div
+          class="border-2 border-gray-1000 border-dashed"
+          id="anchor-selector"
+        >
+          Click me
+        </div>
+        <va-dropdown-new
+          :anchorSelector="'#anchor-selector'"
+        >
+          Anchor selector
+        </va-dropdown-new>
+      </div>
+    </VbCard>
+    <VbCard title="Inner anchor selector">
+      <va-dropdown-new
+        :anchorSelector="'#inner-anchor-selector'"
+      >
+        <template #anchor>
+          <div class="border-2 border-gray-1000 border-dashed">
+            <div
+              class="border-2 border-gray-1000 border-dashed m-4"
+              id="inner-anchor-selector"
+            >
+              Click me
+            </div>
+          </div>
+        </template>
+        Inner anchor selector
+      </va-dropdown-new>
+    </VbCard>
     <VbCard title="Flip + target">
       Scroll up
       <div class="overflow-hidden">
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 325647ce43..6a007cc9ff 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -41,18 +41,21 @@ import {
 import { useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
 import { useCursorAnchor } from './useCursorAnchor'
+import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
 
 export default defineComponent({
   name: 'VaDropdownNew',
   props: {
     ...createStatefulProps(Boolean, true),
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
+    anchorSelector: { type: String, default: '' },
+    innerAnchorSelector: { type: String, default: '' },
     trigger: {
       type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
       default: 'click',
       validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
     },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
     closeOnClickOutside: { type: Boolean, default: true },
     closeOnAnchorClick: { type: Boolean, default: true },
     placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
@@ -79,7 +82,7 @@ export default defineComponent({
 
     const isMounted = useIsMounted()
 
-    const anchor = useHTMLElement('anchor')
+    const { anchorRef: anchor } = useAnchorSelector(props)
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))

From b98a21f2d063e7f15785d16c3c9864a9a52a02a8 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 22:47:58 +0200
Subject: [PATCH 20/43] DropdownNew restore hover functionality

---
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 15 +++++-
 .../va-dropdown-new/VaDropdownNew.vue         | 47 +++++++++++++------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index 5836857bcd..023bcdd9ed 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -3,7 +3,9 @@
     <VbCard title="Click">
       <va-dropdown-new>
         <template #anchor>
-          Click me
+          <div>
+            Click me
+          </div>
         </template>
         Clicked
       </va-dropdown-new>
@@ -18,6 +20,17 @@
         Hovered
       </va-dropdown-new>
     </VbCard>
+    <VbCard title="Content not hoverable">
+      <va-dropdown-new
+        trigger="hover"
+        :is-content-hoverable="false"
+      >
+        <template #anchor>
+          Hover me
+        </template>
+        Hovered
+      </va-dropdown-new>
+    </VbCard>
     <VbCard title="Top">
       <va-dropdown-new
         placement="top"
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 6a007cc9ff..b59d1b3c90 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -19,6 +19,7 @@
       ref="floating"
       :style="floatingStyles"
       class="va-dropdown__content-wrapper"
+      v-on="floatingListeners"
     >
       <slot
       ></slot>
@@ -27,18 +28,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, nextTick, ref } from 'vue'
+import { defineComponent, PropType, computed, nextTick, ref, toRef } from 'vue'
 import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import {
   createStatefulProps,
   MaybeHTMLElementOrSelector,
-  useClickOutside,
+  useClickOutside, useDebounceFn,
   useHTMLElement,
   useHTMLElementSelector,
   useIsMounted, useStateful,
 } from '../../composables'
-import { useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
+import { useKeyboardNavigation, useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
 import { useCursorAnchor } from './useCursorAnchor'
 import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
@@ -58,6 +59,10 @@ export default defineComponent({
     readonly: { type: Boolean },
     closeOnClickOutside: { type: Boolean, default: true },
     closeOnAnchorClick: { type: Boolean, default: true },
+    closeOnContentClick: { type: Boolean, default: true },
+    hoverOverTimeout: { type: Number, default: 30 },
+    hoverOutTimeout: { type: Number, default: 200 },
+    isContentHoverable: { type: Boolean, default: true },
     placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
     keepAnchorWidth: { type: Boolean, default: false },
@@ -65,6 +70,8 @@ export default defineComponent({
     cursor: { type: Boolean, default: false },
     preventOverflow: { type: Boolean, default: false },
     teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    /** Not reactive */
+    keyboardNavigation: { type: Boolean, default: false },
   },
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
@@ -105,6 +112,9 @@ export default defineComponent({
     const teleportDisabled = computed(() => !teleport.value)
     const showFloating = computed(() => isMounted.value && valueComputed.value)
 
+    const { debounced: debounceHover, cancel: cancelHoverDebounce } = useDebounceFn(toRef(props, 'hoverOverTimeout'))
+    const { debounced: debounceUnHover, cancel: cancelUnHoverDebounce } = useDebounceFn(toRef(props, 'hoverOutTimeout'))
+
     const onClick = (e: MouseEvent) => {
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
 
@@ -134,21 +144,19 @@ export default defineComponent({
     const onDblclick = () => { return undefined }
     const onMouseenter = () => {
       if (props.trigger !== 'hover' || props.disabled) { return }
-      valueComputed.value = true
 
-      // debounceHover(() => { valueComputed.value = true })
-      // cancelUnHoverDebounce()
+      debounceHover(() => { valueComputed.value = true })
+      cancelUnHoverDebounce()
     }
     const onMouseleave = () => {
       if (props.trigger !== 'hover' || props.disabled) { return }
-      valueComputed.value = false
-
-      // if (props.isContentHoverable) {
-      //   debounceUnHover(() => { valueComputed.value = false })
-      // } else {
-      //   valueComputed.value = false
-      // }
-      // cancelHoverDebounce()
+
+      if (props.isContentHoverable) {
+        debounceUnHover(() => { valueComputed.value = false })
+      } else {
+        valueComputed.value = false
+      }
+      cancelHoverDebounce()
     }
 
     useMouseNavigation(anchor, {
@@ -159,11 +167,21 @@ export default defineComponent({
       mouseleave: onMouseleave,
     })
 
+    if (props.keyboardNavigation) {
+      useKeyboardNavigation(anchor, valueComputed)
+    }
+
     const emitAndClose = (eventName: Parameters<typeof emit>[0], close?: boolean, e?: Event) => {
       emit(eventName, e)
       if (close && props.trigger !== 'none') { valueComputed.value = false }
     }
 
+    const floatingListeners = {
+      mouseover: () => props.isContentHoverable && onMouseenter(),
+      mouseout: () => onMouseleave(),
+      click: () => emitAndClose('content-click', props.closeOnContentClick),
+    }
+
     useClickOutside([anchor, floating], () => {
       if (props.closeOnClickOutside && valueComputed.value) {
         emitAndClose('click-outside', props.closeOnClickOutside)
@@ -235,6 +253,7 @@ export default defineComponent({
       teleportDisabled,
       showFloating,
       teleportTarget,
+      floatingListeners,
     }
   },
 })

From eb173f30ada732db42c70c0210c6a1b40cff5cc1 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 23:25:41 +0200
Subject: [PATCH 21/43] DropdownNew render function and headless component

---
 .../va-dropdown-new/VaDropdownNew.vue         | 85 +++++++++++--------
 .../va-dropdown-new/useCursorAnchor.ts        |  2 +-
 .../va-dropdown/VaDropdown.demo.vue           | 15 ++++
 3 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index b59d1b3c90..ccabc8304b 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -1,34 +1,5 @@
-<template>
-  <div
-    ref="anchor"
-    :class="$attrs.class"
-    class="va-dropdown"
-    style="position: relative;"
-  >
-    <slot
-      name="anchor"
-    >
-    </slot>
-  </div>
-  <Teleport
-    v-if="showFloating"
-    :to="teleportTarget ?? undefined"
-    :disabled="teleportDisabled"
-  >
-    <div
-      ref="floating"
-      :style="floatingStyles"
-      class="va-dropdown__content-wrapper"
-      v-on="floatingListeners"
-    >
-      <slot
-      ></slot>
-    </div>
-  </Teleport>
-</template>
-
 <script lang="ts">
-import { defineComponent, PropType, computed, nextTick, ref, toRef } from 'vue'
+import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
 import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import {
@@ -37,12 +8,13 @@ import {
   useClickOutside, useDebounceFn,
   useHTMLElement,
   useHTMLElementSelector,
-  useIsMounted, useStateful,
+  useIsMounted, useStateful, useTranslation,
 } from '../../composables'
 import { useKeyboardNavigation, useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
 import { useCursorAnchor } from './useCursorAnchor'
 import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
+import { renderSlotNode } from '../../utils/headless'
 
 export default defineComponent({
   name: 'VaDropdownNew',
@@ -61,7 +33,7 @@ export default defineComponent({
     closeOnAnchorClick: { type: Boolean, default: true },
     closeOnContentClick: { type: Boolean, default: true },
     hoverOverTimeout: { type: Number, default: 30 },
-    hoverOutTimeout: { type: Number, default: 200 },
+    hoverOutTimeout: { type: Number, default: 22200 },
     isContentHoverable: { type: Boolean, default: true },
     placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
@@ -72,6 +44,7 @@ export default defineComponent({
     teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
     /** Not reactive */
     keyboardNavigation: { type: Boolean, default: false },
+    ariaLabel: { type: String, default: '$t:toggleDropdown' },
   },
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
@@ -116,6 +89,7 @@ export default defineComponent({
     const { debounced: debounceUnHover, cancel: cancelUnHoverDebounce } = useDebounceFn(toRef(props, 'hoverOutTimeout'))
 
     const onClick = (e: MouseEvent) => {
+      console.log('click')
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
 
       if (valueComputed.value) {
@@ -177,9 +151,11 @@ export default defineComponent({
     }
 
     const floatingListeners = {
-      mouseover: () => props.isContentHoverable && onMouseenter(),
-      mouseout: () => onMouseleave(),
-      click: () => emitAndClose('content-click', props.closeOnContentClick),
+      onMouseover: () => props.isContentHoverable && onMouseenter(),
+      onMouseout: () => onMouseleave(),
+      click: () => { console.log('floating click') },
+      onClick: () => { console.log('floating click') },
+      // onClick: () => emitAndClose('content-click', props.closeOnContentClick),
     }
 
     useClickOutside([anchor, floating], () => {
@@ -247,6 +223,7 @@ export default defineComponent({
     })
 
     return {
+      ...useTranslation(),
       anchor,
       floating,
       floatingStyles,
@@ -254,8 +231,46 @@ export default defineComponent({
       showFloating,
       teleportTarget,
       floatingListeners,
+      isMounted,
+      valueComputed,
     }
   },
+  render () {
+    const floatingSlotNode = renderSlotNode(this.$slots.default, {}, {
+      ref: 'floating',
+      class: 'va-dropdown__content-wrapper',
+      style: this.floatingStyles,
+      ...this.floatingListeners,
+    })
+
+    const anchorSlotVNode = renderSlotNode(this.$slots.anchor, {}, {
+      ref: 'anchor',
+      role: 'button',
+      class: ['va-dropdown'],
+      style: { position: 'relative' },
+      'aria-label': this.tp(this.$props.ariaLabel),
+      'aria-disabled': this.$props.disabled,
+      'aria-expanded': !!this.showFloating.value,
+      ...this.$attrs,
+      // class: ['va-dropdown', ...this.computedClass.asArray.value],
+    })
+
+    return h(Fragment, {}, [
+      anchorSlotVNode,
+      (this.isMounted && this.valueComputed) && h(
+        Teleport,
+        {
+          to: this.teleportTarget,
+          disabled: this.teleportDisabled,
+        },
+        [floatingSlotNode],
+      ),
+    ])
+    // return [
+    //   h('div', {}, 'aaaa'),
+    //   h('div', {}, 'bbbb'),
+    // ]
+  },
 })
 </script>
 
diff --git a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
index 7966519d40..c8cf90fa09 100644
--- a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
@@ -17,7 +17,7 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
   return computed(() => {
     return {
       getBoundingClientRect () {
-        const { x, y } = anchorRef.value!.getBoundingClientRect()
+        const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
         const { x: mx, y: my } = mouse
         const { x: ax, y: ay } = anchor
         const shiftX = ax - x
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index 9f4f65220b..3e2fb94712 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -1,5 +1,20 @@
 <template>
   <VbDemo>
+    <VbCard title="Cursor">
+      <va-dropdown
+        trigger="right-click"
+        placement="bottom-start"
+        cursor
+        teleport="body"
+      >
+        <template #anchor>
+          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
+            Right click
+          </div>
+        </template>
+        Ctx dropdown
+      </va-dropdown>
+    </VbCard>
     <VbCard title="Click">
       <va-dropdown>
         <template #anchor>

From d5df9ad620b4d8aadde264110bea5191634f89ab Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 6 Jun 2023 23:55:51 +0200
Subject: [PATCH 22/43] DropdownNew add disabled styles

---
 .../components/va-dropdown-new/VaDropdownNew.vue | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index ccabc8304b..18f7276247 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -2,9 +2,10 @@
 import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
 import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
+import pick from 'lodash/pick'
 import {
   createStatefulProps,
-  MaybeHTMLElementOrSelector,
+  MaybeHTMLElementOrSelector, useBem,
   useClickOutside, useDebounceFn,
   useHTMLElement,
   useHTMLElementSelector,
@@ -68,6 +69,7 @@ export default defineComponent({
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
     const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
 
+    const anchorClass = useBem('va-dropdown', () => pick(props, ['disabled']))
     const isPopoverFloating = computed(() => props.preventOverflow)
     const teleportTarget = computed<HTMLElement | undefined>(() => {
       if (teleport.value) {
@@ -153,9 +155,7 @@ export default defineComponent({
     const floatingListeners = {
       onMouseover: () => props.isContentHoverable && onMouseenter(),
       onMouseout: () => onMouseleave(),
-      click: () => { console.log('floating click') },
-      onClick: () => { console.log('floating click') },
-      // onClick: () => emitAndClose('content-click', props.closeOnContentClick),
+      onClick: () => emitAndClose('content-click', props.closeOnContentClick),
     }
 
     useClickOutside([anchor, floating], () => {
@@ -225,6 +225,7 @@ export default defineComponent({
     return {
       ...useTranslation(),
       anchor,
+      anchorClass,
       floating,
       floatingStyles,
       teleportDisabled,
@@ -246,13 +247,12 @@ export default defineComponent({
     const anchorSlotVNode = renderSlotNode(this.$slots.anchor, {}, {
       ref: 'anchor',
       role: 'button',
-      class: ['va-dropdown'],
+      class: ['va-dropdown', ...this.anchorClass.asArray.value],
       style: { position: 'relative' },
       'aria-label': this.tp(this.$props.ariaLabel),
       'aria-disabled': this.$props.disabled,
       'aria-expanded': !!this.showFloating.value,
       ...this.$attrs,
-      // class: ['va-dropdown', ...this.computedClass.asArray.value],
     })
 
     return h(Fragment, {}, [
@@ -266,10 +266,6 @@ export default defineComponent({
         [floatingSlotNode],
       ),
     ])
-    // return [
-    //   h('div', {}, 'aaaa'),
-    //   h('div', {}, 'bbbb'),
-    // ]
   },
 })
 </script>

From 02f7ed8ab69169b858401aee0b04bf38169c5c3a Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Wed, 7 Jun 2023 18:06:19 +0200
Subject: [PATCH 23/43] DropdownNew add missing props

---
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 21 +++++------
 .../va-dropdown-new/VaDropdownNew.vue         | 36 +++++++++++++------
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
index 023bcdd9ed..05f57cb3c1 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
@@ -111,7 +111,7 @@
           Click me
         </div>
         <va-dropdown-new
-          :anchorSelector="'#anchor-selector'"
+          anchorSelector="#anchor-selector"
         >
           Anchor selector
         </va-dropdown-new>
@@ -119,7 +119,7 @@
     </VbCard>
     <VbCard title="Inner anchor selector">
       <va-dropdown-new
-        :anchorSelector="'#inner-anchor-selector'"
+        anchorSelector="#inner-anchor-selector"
       >
         <template #anchor>
           <div class="border-2 border-gray-1000 border-dashed">
@@ -134,12 +134,12 @@
         Inner anchor selector
       </va-dropdown-new>
     </VbCard>
-    <VbCard title="Flip + target">
+    <VbCard title="Autoplacement + target">
       Scroll up
       <div class="overflow-hidden">
         <div
           class="scroll-container"
-          ref="targetFlip"
+          ref="autoplacementTargetRef"
           v-scroll-to-middle-y
         >
           <div class="content-container">
@@ -147,7 +147,7 @@
             <va-dropdown-new
               :model-value="true"
               :stateful="false"
-              :target="targetFlip"
+              :target="autoplacementTargetRef"
             >
               <template #anchor>
                 <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
@@ -160,12 +160,12 @@
         </div>
       </div>
     </VbCard>
-    <VbCard title="Autoplacement main and cross axis + target">
+    <VbCard title="Autoplacement and Stick to Edges + target">
       Scroll around
       <div class="overflow-hidden">
         <div
           class="scroll-container"
-          ref="targetFlipShift"
+          ref="autoplacementTargetStickRef"
           v-scroll-to-middle-y
           v-scroll-to-middle-x
         >
@@ -174,7 +174,8 @@
             <va-dropdown-new
               :model-value="true"
               :stateful="false"
-              :target="targetFlipShift"
+              :target="autoplacementTargetStickRef"
+              stick-to-edges
             >
               <template #anchor>
                 <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
@@ -203,8 +204,8 @@ export default {
   setup () {
     return {
       cursorTarget: ref(null),
-      targetFlip: ref(null),
-      targetFlipShift: ref(null),
+      autoplacementTargetRef: ref(null),
+      autoplacementTargetStickRef: ref(null),
     }
   },
   directives: {
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 18f7276247..53a79dc64c 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -9,7 +9,7 @@ import {
   useClickOutside, useDebounceFn,
   useHTMLElement,
   useHTMLElementSelector,
-  useIsMounted, useStateful, useTranslation,
+  useIsMounted, useStateful, useStatefulEmits, useTranslation,
 } from '../../composables'
 import { useKeyboardNavigation, useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
 import { DropdownOffsetProp } from '../va-dropdown/types'
@@ -39,14 +39,21 @@ export default defineComponent({
     placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
     keepAnchorWidth: { type: Boolean, default: false },
-    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
     cursor: { type: Boolean, default: false },
-    preventOverflow: { type: Boolean, default: false },
+    autoPlacement: { type: Boolean, default: true },
+    stickToEdges: { type: Boolean, default: false },
+    /** Viewport where dropdown will be rendered if preventOverflow is true. Autoplacement will be calculated relative to `target` */
+    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    /** Element where dropdown content will be rendered. */
     teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    preventOverflow: { type: Boolean, default: false },
     /** Not reactive */
     keyboardNavigation: { type: Boolean, default: false },
     ariaLabel: { type: String, default: '$t:toggleDropdown' },
   },
+
+  emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'close', 'open', 'anchor-dblclick'],
+
   setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
     const valueComputed = computed({
@@ -64,6 +71,7 @@ export default defineComponent({
     const isMounted = useIsMounted()
 
     const { anchorRef: anchor } = useAnchorSelector(props)
+    console.log('anchor', anchor)
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
@@ -187,15 +195,23 @@ export default defineComponent({
     const middlewareComputed = computed(() => {
       const result = [
         offset(offsetComputed.value),
-        // flip element, works for -start, -end
-        // boundary doesn't work with ssr (trying to access document)
-        flip({
-          boundary: isMounted.value ? target.value : undefined,
-        }),
-        // shift the element into the view
-        shift(),
       ]
 
+      if (props.autoPlacement) {
+        result.push(
+          // boundary doesn't work with ssr (trying to access document)
+          flip({
+            boundary: isMounted.value ? target.value : undefined,
+          }),
+        )
+      }
+
+      if (props.stickToEdges) {
+        result.push(
+          shift(),
+        )
+      }
+
       if (props.keepAnchorWidth) {
         result.push(size({
           apply ({ elements }) {

From d432dcf5ebbd78a888e4198a92a328fc82d53a2c Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Wed, 7 Jun 2023 18:15:18 +0200
Subject: [PATCH 24/43] VaDropdownNew small update

---
 packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
index 53a79dc64c..175e6da933 100644
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
@@ -100,7 +100,7 @@ export default defineComponent({
 
     const onClick = (e: MouseEvent) => {
       console.log('click')
-      if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click')) { return } // || props.disabled) { return }
+      if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click') || props.disabled) { return }
 
       if (valueComputed.value) {
         emitAndClose('anchor-click', props.closeOnAnchorClick, e)

From 002a59d1e4adce9b0b01776f1d5e664612f2707e Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 12:45:35 +0200
Subject: [PATCH 25/43] Replace old dropdown logic with new one

---
 packages/nuxt/src/config/components.ts        |   1 -
 packages/ui/src/components/index.ts           |   1 -
 .../va-dropdown-new/VaDropdownNew.demo.vue    | 253 -------
 .../va-dropdown-new/VaDropdownNew.vue         | 314 --------
 .../va-dropdown-new/_variables.scss           |   6 -
 .../src/components/va-dropdown-new/index.ts   |   4 -
 .../va-dropdown-new/useCursorAnchor.ts        |  41 --
 .../va-dropdown/VaDropdown.demo.vue           | 668 +++++-------------
 .../src/components/va-dropdown/VaDropdown.vue | 365 +++++-----
 .../va-dropdown/hooks/useCursorAnchor.ts      |  67 +-
 10 files changed, 371 insertions(+), 1349 deletions(-)
 delete mode 100644 packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
 delete mode 100644 packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
 delete mode 100644 packages/ui/src/components/va-dropdown-new/_variables.scss
 delete mode 100644 packages/ui/src/components/va-dropdown-new/index.ts
 delete mode 100644 packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts

diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts
index 841f2988bc..afbb1b11d8 100644
--- a/packages/nuxt/src/config/components.ts
+++ b/packages/nuxt/src/config/components.ts
@@ -35,7 +35,6 @@ export default [
   'VaDivider',
   'VaDropdown',
   'VaDropdownContent',
-  'VaDropdownNew',
   'VaFileUpload',
   'VaForm',
   'VaHover',
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index ba26f5ed50..0b5b94091f 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -40,7 +40,6 @@ export * from './va-date-input'
 export * from './va-date-picker'
 export * from './va-divider'
 export * from './va-dropdown'
-export * from './va-dropdown-new'
 export * from './va-form'
 export * from './va-hover'
 export * from './va-icon'
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
deleted file mode 100644
index 05f57cb3c1..0000000000
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.demo.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <VbDemo>
-    <VbCard title="Click">
-      <va-dropdown-new>
-        <template #anchor>
-          <div>
-            Click me
-          </div>
-        </template>
-        Clicked
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Hover">
-      <va-dropdown-new
-        trigger="hover"
-      >
-        <template #anchor>
-          Hover me
-        </template>
-        Hovered
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Content not hoverable">
-      <va-dropdown-new
-        trigger="hover"
-        :is-content-hoverable="false"
-      >
-        <template #anchor>
-          Hover me
-        </template>
-        Hovered
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Top">
-      <va-dropdown-new
-        placement="top"
-      >
-        <template #anchor>
-          Click me
-        </template>
-        Top
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Top-start">
-      <va-dropdown-new
-        placement="top-start"
-      >
-        <template #anchor>
-          Click me
-        </template>
-        TS
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Offset 20 40">
-      <va-dropdown-new
-        :offset="[20, 40]"
-      >
-        <template #anchor>
-          Click me
-        </template>
-        Offset
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Same width">
-      <va-dropdown-new
-        keepAnchorWidth
-      >
-        <template #anchor>
-          Click me
-        </template>
-        Looooong Dropdown
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Cursor">
-      <va-dropdown-new
-        trigger="right-click"
-        placement="bottom-start"
-        cursor
-      >
-        <template #anchor>
-          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
-            Right click
-          </div>
-        </template>
-        Ctx dropdown
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Cursor + target">
-      <va-dropdown-new
-        trigger="right-click"
-        placement="top-end"
-        :target="cursorTarget"
-        cursor
-      >
-        <template #anchor>
-          <div
-            class="w-32 h-32 border-2 border-gray-1000 border-dashed"
-            ref="cursorTarget"
-          >
-          </div>
-        </template>
-        Ctx dropdown
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Anchor selector">
-      <div>
-        <div
-          class="border-2 border-gray-1000 border-dashed"
-          id="anchor-selector"
-        >
-          Click me
-        </div>
-        <va-dropdown-new
-          anchorSelector="#anchor-selector"
-        >
-          Anchor selector
-        </va-dropdown-new>
-      </div>
-    </VbCard>
-    <VbCard title="Inner anchor selector">
-      <va-dropdown-new
-        anchorSelector="#inner-anchor-selector"
-      >
-        <template #anchor>
-          <div class="border-2 border-gray-1000 border-dashed">
-            <div
-              class="border-2 border-gray-1000 border-dashed m-4"
-              id="inner-anchor-selector"
-            >
-              Click me
-            </div>
-          </div>
-        </template>
-        Inner anchor selector
-      </va-dropdown-new>
-    </VbCard>
-    <VbCard title="Autoplacement + target">
-      Scroll up
-      <div class="overflow-hidden">
-        <div
-          class="scroll-container"
-          ref="autoplacementTargetRef"
-          v-scroll-to-middle-y
-        >
-          <div class="content-container">
-            <div class="vertical-space"></div>
-            <va-dropdown-new
-              :model-value="true"
-              :stateful="false"
-              :target="autoplacementTargetRef"
-            >
-              <template #anchor>
-                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
-                </div>
-              </template>
-              Dropdown
-            </va-dropdown-new>
-            <div class="vertical-space"></div>
-          </div>
-        </div>
-      </div>
-    </VbCard>
-    <VbCard title="Autoplacement and Stick to Edges + target">
-      Scroll around
-      <div class="overflow-hidden">
-        <div
-          class="scroll-container"
-          ref="autoplacementTargetStickRef"
-          v-scroll-to-middle-y
-          v-scroll-to-middle-x
-        >
-          <div class="content-container">
-            <div class="vertical-space horizontal-space"></div>
-            <va-dropdown-new
-              :model-value="true"
-              :stateful="false"
-              :target="autoplacementTargetStickRef"
-              stick-to-edges
-            >
-              <template #anchor>
-                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
-                </div>
-              </template>
-              <div>
-                Looooonger Dropdown
-              </div>
-            </va-dropdown-new>
-            <div class="vertical-space horizontal-space"></div>
-          </div>
-        </div>
-      </div>
-    </VbCard>
-  </VbDemo>
-</template>
-
-<script>
-import { ref } from 'vue'
-import VaDropdownNew from './VaDropdownNew.vue'
-
-export default {
-  components: {
-    VaDropdownNew,
-  },
-  setup () {
-    return {
-      cursorTarget: ref(null),
-      autoplacementTargetRef: ref(null),
-      autoplacementTargetStickRef: ref(null),
-    }
-  },
-  directives: {
-    scrollToMiddleY: {
-      mounted: (el) => {
-        const { scrollHeight, clientHeight } = el
-        el.scrollTop = (scrollHeight - clientHeight) / 2
-      },
-    },
-    scrollToMiddleX: {
-      mounted: (el) => {
-        const { scrollWidth, clientWidth } = el
-        el.scrollLeft = (scrollWidth - clientWidth) / 2
-      },
-    },
-  },
-}
-</script>
-
-<style scoped>
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.scroll-container {
-  width: 500px;
-  height: 300px;
-  overflow: auto;
-  position: relative;
-  border: 1px dashed black;
-}
-
-.content-container {
-  display: grid;
-  place-items: center;
-}
-
-.vertical-space {
-  height: 400px;
-}
-
-.horizontal-space {
-  width: 1000px;
-}
-</style>
diff --git a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue b/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
deleted file mode 100644
index 175e6da933..0000000000
--- a/packages/ui/src/components/va-dropdown-new/VaDropdownNew.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<script lang="ts">
-import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
-import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
-import kebabCase from 'lodash/kebabCase'
-import pick from 'lodash/pick'
-import {
-  createStatefulProps,
-  MaybeHTMLElementOrSelector, useBem,
-  useClickOutside, useDebounceFn,
-  useHTMLElement,
-  useHTMLElementSelector,
-  useIsMounted, useStateful, useStatefulEmits, useTranslation,
-} from '../../composables'
-import { useKeyboardNavigation, useMouseNavigation } from '../va-dropdown/hooks/useDropdownNavigation'
-import { DropdownOffsetProp } from '../va-dropdown/types'
-import { useCursorAnchor } from './useCursorAnchor'
-import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
-import { renderSlotNode } from '../../utils/headless'
-
-export default defineComponent({
-  name: 'VaDropdownNew',
-  props: {
-    ...createStatefulProps(Boolean, true),
-    anchorSelector: { type: String, default: '' },
-    innerAnchorSelector: { type: String, default: '' },
-    trigger: {
-      type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
-      default: 'click',
-      validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
-    },
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
-    closeOnClickOutside: { type: Boolean, default: true },
-    closeOnAnchorClick: { type: Boolean, default: true },
-    closeOnContentClick: { type: Boolean, default: true },
-    hoverOverTimeout: { type: Number, default: 30 },
-    hoverOutTimeout: { type: Number, default: 22200 },
-    isContentHoverable: { type: Boolean, default: true },
-    placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
-    offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
-    keepAnchorWidth: { type: Boolean, default: false },
-    cursor: { type: Boolean, default: false },
-    autoPlacement: { type: Boolean, default: true },
-    stickToEdges: { type: Boolean, default: false },
-    /** Viewport where dropdown will be rendered if preventOverflow is true. Autoplacement will be calculated relative to `target` */
-    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
-    /** Element where dropdown content will be rendered. */
-    teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
-    preventOverflow: { type: Boolean, default: false },
-    /** Not reactive */
-    keyboardNavigation: { type: Boolean, default: false },
-    ariaLabel: { type: String, default: '$t:toggleDropdown' },
-  },
-
-  emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'close', 'open', 'anchor-dblclick'],
-
-  setup (props, { emit }) {
-    const { valueComputed: statefulVal } = useStateful(props, emit)
-    const valueComputed = computed({
-      get: () => statefulVal.value && !props.disabled && !props.readonly,
-      set (val) {
-        statefulVal.value = val
-        if (val) {
-          emit('open')
-        } else {
-          emit('close')
-        }
-      },
-    })
-
-    const isMounted = useIsMounted()
-
-    const { anchorRef: anchor } = useAnchorSelector(props)
-    console.log('anchor', anchor)
-    const floating = useHTMLElement('floating')
-    const target = useHTMLElementSelector(computed(() => props.target || 'body'))
-    const teleport = useHTMLElementSelector(computed(() => props.teleport))
-    const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
-
-    const anchorClass = useBem('va-dropdown', () => pick(props, ['disabled']))
-    const isPopoverFloating = computed(() => props.preventOverflow)
-    const teleportTarget = computed<HTMLElement | undefined>(() => {
-      if (teleport.value) {
-        return teleport.value
-      }
-
-      if (!isPopoverFloating.value) {
-        // If not floating just render inside the parent element
-        return undefined
-      }
-
-      return target.value
-    })
-
-    const teleportDisabled = computed(() => !teleport.value)
-    const showFloating = computed(() => isMounted.value && valueComputed.value)
-
-    const { debounced: debounceHover, cancel: cancelHoverDebounce } = useDebounceFn(toRef(props, 'hoverOverTimeout'))
-    const { debounced: debounceUnHover, cancel: cancelUnHoverDebounce } = useDebounceFn(toRef(props, 'hoverOutTimeout'))
-
-    const onClick = (e: MouseEvent) => {
-      console.log('click')
-      if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click') || props.disabled) { return }
-
-      if (valueComputed.value) {
-        emitAndClose('anchor-click', props.closeOnAnchorClick, e)
-      } else {
-        if (props.trigger !== 'click') { return }
-        valueComputed.value = true
-        emit('anchor-click', e)
-      }
-    }
-    const onContextmenu = (e: MouseEvent) => {
-      if (kebabCase(props.trigger) !== 'right-click' || props.disabled) { return }
-      e.preventDefault()
-
-      if (valueComputed.value) {
-        emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
-
-        if (props.cursor) {
-          nextTick(() => { valueComputed.value = true })
-        }
-      } else {
-        valueComputed.value = true
-        emit('anchor-right-click', e)
-      }
-    }
-    const onDblclick = () => { return undefined }
-    const onMouseenter = () => {
-      if (props.trigger !== 'hover' || props.disabled) { return }
-
-      debounceHover(() => { valueComputed.value = true })
-      cancelUnHoverDebounce()
-    }
-    const onMouseleave = () => {
-      if (props.trigger !== 'hover' || props.disabled) { return }
-
-      if (props.isContentHoverable) {
-        debounceUnHover(() => { valueComputed.value = false })
-      } else {
-        valueComputed.value = false
-      }
-      cancelHoverDebounce()
-    }
-
-    useMouseNavigation(anchor, {
-      click: onClick,
-      contextmenu: onContextmenu,
-      dblclick: onDblclick,
-      mouseenter: onMouseenter,
-      mouseleave: onMouseleave,
-    })
-
-    if (props.keyboardNavigation) {
-      useKeyboardNavigation(anchor, valueComputed)
-    }
-
-    const emitAndClose = (eventName: Parameters<typeof emit>[0], close?: boolean, e?: Event) => {
-      emit(eventName, e)
-      if (close && props.trigger !== 'none') { valueComputed.value = false }
-    }
-
-    const floatingListeners = {
-      onMouseover: () => props.isContentHoverable && onMouseenter(),
-      onMouseout: () => onMouseleave(),
-      onClick: () => emitAndClose('content-click', props.closeOnContentClick),
-    }
-
-    useClickOutside([anchor, floating], () => {
-      if (props.closeOnClickOutside && valueComputed.value) {
-        emitAndClose('click-outside', props.closeOnClickOutside)
-      }
-    })
-
-    const placementComputed = computed(() => {
-      if (props.placement === 'auto') {
-        return 'bottom'
-      }
-
-      return props.placement
-    })
-
-    const offsetComputed = computed(() => {
-      const result = { mainAxis: 0, crossAxis: 0 }
-      if (Array.isArray(props.offset)) {
-        result.mainAxis = props.offset[0]
-        result.crossAxis = props.offset[1]
-      } else {
-        result.mainAxis = props.offset
-      }
-
-      return result
-    })
-
-    const middlewareComputed = computed(() => {
-      const result = [
-        offset(offsetComputed.value),
-      ]
-
-      if (props.autoPlacement) {
-        result.push(
-          // boundary doesn't work with ssr (trying to access document)
-          flip({
-            boundary: isMounted.value ? target.value : undefined,
-          }),
-        )
-      }
-
-      if (props.stickToEdges) {
-        result.push(
-          shift(),
-        )
-      }
-
-      if (props.keepAnchorWidth) {
-        result.push(size({
-          apply ({ elements }) {
-            const reference = elements.reference
-            const availableWidth = reference.getBoundingClientRect().width
-            Object.assign(elements.floating.style, {
-              maxWidth: `${availableWidth}px`,
-            })
-          },
-        }),
-        )
-      }
-
-      return result
-    })
-
-    const anchorComputed = computed(() => {
-      return props.cursor ? cursorAnchor.value : anchor.value
-    })
-
-    const { floatingStyles } = useFloating(anchorComputed, floating, {
-      placement: placementComputed,
-      whileElementsMounted: autoUpdate,
-      middleware: middlewareComputed,
-    })
-
-    return {
-      ...useTranslation(),
-      anchor,
-      anchorClass,
-      floating,
-      floatingStyles,
-      teleportDisabled,
-      showFloating,
-      teleportTarget,
-      floatingListeners,
-      isMounted,
-      valueComputed,
-    }
-  },
-  render () {
-    const floatingSlotNode = renderSlotNode(this.$slots.default, {}, {
-      ref: 'floating',
-      class: 'va-dropdown__content-wrapper',
-      style: this.floatingStyles,
-      ...this.floatingListeners,
-    })
-
-    const anchorSlotVNode = renderSlotNode(this.$slots.anchor, {}, {
-      ref: 'anchor',
-      role: 'button',
-      class: ['va-dropdown', ...this.anchorClass.asArray.value],
-      style: { position: 'relative' },
-      'aria-label': this.tp(this.$props.ariaLabel),
-      'aria-disabled': this.$props.disabled,
-      'aria-expanded': !!this.showFloating.value,
-      ...this.$attrs,
-    })
-
-    return h(Fragment, {}, [
-      anchorSlotVNode,
-      (this.isMounted && this.valueComputed) && h(
-        Teleport,
-        {
-          to: this.teleportTarget,
-          disabled: this.teleportDisabled,
-        },
-        [floatingSlotNode],
-      ),
-    ])
-  },
-})
-</script>
-
-<style lang="scss">
-@import '../../styles/resources';
-@import 'variables';
-
-.va-dropdown {
-  /* Solved the alignment problem (if we try to align inline and block elements) */
-  line-height: var(--va-dropdown-line-height);
-  font-family: var(--va-font-family);
-  display: var(--va-dropdown-display);
-  position: relative;
-  max-width: 100%;
-  vertical-align: middle;
-
-  &--disabled {
-    @include va-disabled;
-  }
-
-  &__content-wrapper {
-    z-index: var(--va-dropdown-content-wrapper-z-index);
-    font-family: var(--va-font-family);
-    top: 0;
-    left: 0;
-    position: absolute;
-  }
-}
-</style>
diff --git a/packages/ui/src/components/va-dropdown-new/_variables.scss b/packages/ui/src/components/va-dropdown-new/_variables.scss
deleted file mode 100644
index bbb3693fd1..0000000000
--- a/packages/ui/src/components/va-dropdown-new/_variables.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root,
-:host {
-  --va-dropdown-line-height: 1;
-  --va-dropdown-content-wrapper-z-index: var(--va-z-index-teleport-overlay, 9);
-  --va-dropdown-display: inline-flex;
-}
diff --git a/packages/ui/src/components/va-dropdown-new/index.ts b/packages/ui/src/components/va-dropdown-new/index.ts
deleted file mode 100644
index 6b7f70bdc6..0000000000
--- a/packages/ui/src/components/va-dropdown-new/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import withConfigTransport from '../../services/config-transport/withConfigTransport'
-import _VaDropdownNew from './VaDropdownNew.vue'
-
-export const VaDropdownNew = withConfigTransport(_VaDropdownNew)
diff --git a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
deleted file mode 100644
index c8cf90fa09..0000000000
--- a/packages/ui/src/components/va-dropdown-new/useCursorAnchor.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { computed, reactive, Ref } from 'vue'
-import { useEvent } from '../../composables'
-
-export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>) => {
-  const anchor = reactive({ x: 0, y: 0 })
-  const mouse = reactive({ x: 0, y: 0 })
-
-  useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
-    if (noUpdate.value) { return }
-    mouse.x = e.clientX
-    mouse.y = e.clientY
-    const { x, y } = anchorRef.value!.getBoundingClientRect()
-    anchor.x = x
-    anchor.y = y
-  }, anchorRef)
-
-  return computed(() => {
-    return {
-      getBoundingClientRect () {
-        const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
-        const { x: mx, y: my } = mouse
-        const { x: ax, y: ay } = anchor
-        const shiftX = ax - x
-        const shiftY = ay - y
-        const resX = mx - shiftX
-        const resY = my - shiftY
-        return {
-          width: 0,
-          height: 0,
-          x: resX,
-          y: resY,
-          top: resY,
-          right: resX,
-          bottom: resY,
-          left: resX,
-        }
-      },
-      contextElement: anchorRef.value,
-    }
-  })
-}
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index a15118d44f..7b369a2ae0 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -1,581 +1,253 @@
 <template>
   <VbDemo>
-    <VbCard title="Cursor">
-      <va-dropdown
-        trigger="right-click"
-        placement="bottom-start"
-        cursor
-        teleport="body"
-      >
-        <template #anchor>
-          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
-            Right click
-          </div>
-        </template>
-        Ctx dropdown
-      </va-dropdown>
-    </VbCard>
     <VbCard title="Click">
       <va-dropdown>
         <template #anchor>
-          <button>
-            Activator
-          </button>
+          <div>
+            Click me
+          </div>
         </template>
-        Dropdown text
+        Clicked
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Click outside won't close">
-      <va-dropdown
-        :close-on-click-outside="false"
-      >
-      <template #anchor>
-        <button>
-          Click
-        </button>
-      </template>
-        Should ignore click outside
-      </va-dropdown>
-    </VbCard>
-
-    <VbCard title="Anchor click won't close">
+    <VbCard title="Hover">
       <va-dropdown
-        :close-on-anchor-click="false"
+        trigger="hover"
       >
-      <template #anchor>
-        <button>
-          Click
-        </button>
-      </template>
-        Should ignore anchor click
-      </va-dropdown>
-    </VbCard>
-
-    <VbCard title="Hover">
-      <va-dropdown trigger="hover">
         <template #anchor>
-          <button>
-            Hover
-          </button>
+          Hover me
         </template>
-        Dropdown text
+        Hovered
       </va-dropdown>
     </VbCard>
-
     <VbCard title="Content not hoverable">
       <va-dropdown
         trigger="hover"
         :is-content-hoverable="false"
       >
-      <template #anchor>
-        <button>
-          Hover
-        </button>
-      </template>
-        Dropdown text
+        <template #anchor>
+          Hover me
+        </template>
+        Hovered
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Doesn't redraw on content change">
+    <VbCard title="Top">
       <va-dropdown
-        :close-on-content-click="false"
+        placement="top"
       >
         <template #anchor>
-          <button>
-            Click
-          </button>
+          Click me
         </template>
-        <button @click="redrawContentSize = redrawContentSize - 20">
-          -
-        </button>
-        <button @click="redrawContentSize = redrawContentSize + 20">
-          +
-        </button>
-        <div
-          :style="{
-            width: redrawContentSize + 'px',
-            height: redrawContentSize + 'px',
-            backgroundColor: '#14bb14',
-          }"
-        />
+        Top
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="No trigger">
-      <label>
-        <input
-          type="checkbox"
-          v-model="noTriggerValue"
-        > Show: {{ noTriggerValue }}
-      </label>
-
+    <VbCard title="Top-start">
       <va-dropdown
-        trigger="none"
-        :is-content-hoverable="false"
-        :modelValue="noTriggerValue"
+        placement="top-start"
       >
-      <template #anchor>
-        <button>
-          None
-        </button>
-      </template>
-        Dropdown text
-      </va-dropdown>
-    </VbCard>
-
-    <VbCard title="Events">
-      <label>
-        <input
-          type="checkbox"
-          v-model="logEvents"
-        > Log events (spammy): {{ logEvents }}
-      </label>
-      <template v-if="logEvents">
-        <label>
-          <input
-            type="checkbox"
-            v-model="eventsValue"
-          > Show: {{ eventsValue }}
-        </label>
-
-        <va-dropdown
-          trigger="none"
-          :is-content-hoverable="false"
-          :modelValue="eventsValue"
-          @clickOutside="$vb.log('Events: clickOutside')"
-          @anchorClick="$vb.log('Events: anchorClick')"
-        >
-        <template #anchor>
-          <button>
-            Click
-          </button>
-        </template>
-          Dropdown text
-        </va-dropdown>
-      </template>
-    </VbCard>
-
-    <VbCard title="Anchor width">
-      <va-dropdown :keep-anchor-width="keepAnchorWidth">
         <template #anchor>
-          <button>
-            --- Anchor ---
-          </button>
+          Click me
         </template>
-        Same width as anchor
+        TS
       </va-dropdown>
-      <input type="checkbox" v-model="keepAnchorWidth" />
     </VbCard>
-
-    <VbCard title="Anchor width with v-model true by default">
-      <va-dropdown v-model="anchorDefaultValue" keep-anchor-width>
+    <VbCard title="Offset 20 40">
+      <va-dropdown
+        :offset="[20, 40]"
+      >
         <template #anchor>
-          <button>
-            ------- Anchor ------
-          </button>
+          Click me
         </template>
-        Same width as anchor
+        Offset
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Disabled">
-      <va-dropdown disabled>
+    <VbCard title="Same width">
+      <va-dropdown
+        keepAnchorWidth
+      >
         <template #anchor>
-          <button>
-            Click
-          </button>
+          Click me
         </template>
-        Dropdown text
+        Looooong Dropdown
       </va-dropdown>
+    </VbCard>
+    <VbCard title="Cursor">
       <va-dropdown
-        disabled
-        trigger="hover"
+        trigger="right-click"
+        placement="bottom-start"
+        cursor
       >
-      <template #anchor>
-        <button>
-          Hover
-        </button>
-      </template>
-        Dropdown text
-      </va-dropdown>
-    </VbCard>
-
-    <VbCard title="Ignores hidden overflow in container">
-      <div style="width: 50px; height: 50px; overflow: hidden; border: 1px gray solid;">
-        <va-dropdown prevent-overflow>
-          <template #anchor>
-            <button>
-              Click
-            </button>
-          </template>
-          <div style="width: 150px; height: 150px; background: #4ae387;">
-            text
-          </div>
-        </va-dropdown>
-      </div>
-    </VbCard>
-
-    <VbCard title="DisableAttachment flag makes possible to render component inside initial parent">
-      <div style="width: 50px; height: 50px; overflow: hidden; position: relative; border: 1px gray solid;">
-        <va-dropdown>
-          <template #anchor>
-            <button>
-              Click
-            </button>
-          </template>
-          <div style="width: 150px; height: 150px; background: #4ae387;">
-            not fixed
-          </div>
-        </va-dropdown>
-      </div>
-      <div style="width: 50px; height: 50px; overflow: hidden; position: relative; border: 1px gray solid;">
-        <va-dropdown disableAttachment>
-          <template #anchor>
-            <button>
-              Click
-            </button>
-          </template>
-          <div style="width: 150px; height: 150px; background: #4ae387;">
-            fixed
-          </div>
-        </va-dropdown>
-      </div>
-    </VbCard>
-
-    <VbCard title="Can be closed from another component in context">
-      <va-dropdown>
         <template #anchor>
-          <button>
-            Click
-          </button>
+          <div class="w-32 h-32 border-2 border-gray-1000 border-dashed">
+            Right click
+          </div>
         </template>
-        <DropdownCloseButton />
+        Ctx dropdown
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Nesting 3x">
+    <VbCard title="Cursor + target">
       <va-dropdown
-        :close-on-content-click=false
+        trigger="right-click"
+        placement="top-end"
+        :target="cursorTarget"
+        cursor
       >
         <template #anchor>
-          <button>
-            Click
-          </button>
-        </template>
-        1
-        <va-dropdown
-          :close-on-content-click=false
-        >
-          <template #anchor>
-            <button>
-              Click
-            </button>
-          </template>
-          2
-          <va-dropdown
-            :close-on-content-click=false
+          <div
+            class="w-32 h-32 border-2 border-gray-1000 border-dashed"
+            ref="cursorTarget"
           >
-            <template #anchor>
-              <button>
-                Click
-              </button>
-            </template>
-            3
-          </va-dropdown>
-        </va-dropdown>
+          </div>
+        </template>
+        Ctx dropdown
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Placement">
-      <div style="display: flex; align-content: center; flex-direction: column; padding: 0 100px;">
+    <VbCard title="Anchor selector">
+      <div>
+        <div
+          class="border-2 border-gray-1000 border-dashed"
+          id="anchor-selector"
+        >
+          Click me
+        </div>
         <va-dropdown
-          v-for="placement in possiblePositions"
-          :key="placement"
-          :placement="placement"
+          anchorSelector="#anchor-selector"
         >
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              {{ placement }}
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">{{ placement }}</span>
+          Anchor selector
         </va-dropdown>
       </div>
     </VbCard>
-
-    <VbCard title="Root">
-      <va-dropdown attachElement=".VbPage__right-block" placement="left">
+    <VbCard title="Inner anchor selector">
+      <va-dropdown
+        anchorSelector="#inner-anchor-selector"
+      >
         <template #anchor>
-          <button
-            style="width: 70px; height: 70px;"
-          >
-            Stick to root
-          </button>
+          <div class="border-2 border-gray-1000 border-dashed">
+            <div
+              class="border-2 border-gray-1000 border-dashed m-4"
+              id="inner-anchor-selector"
+            >
+              Click me
+            </div>
+          </div>
         </template>
-        <span style="background-color: #222222; color: #babfc2;">Content</span>
+        Inner anchor selector
       </va-dropdown>
     </VbCard>
-
-    <VbCard title="Offset">
-      <div>
-        <va-dropdown :offset="40">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              40
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-        <va-dropdown :offset="[40, 200]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              [40, 200]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="left" :offset="[0, 40]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Left [0, 40]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="left" :offset="[40, 40]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Left [40, 40]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="right" :offset="[0, 40]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Right [0, 40]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="right" :offset="[40, 40]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Right [40, 40]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="top" :offset="[40, 200]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Top [40, 200]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="bottom-end" :offset="[0, 200]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
-            >
-              Bottom-end [0, 200]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-
-        <va-dropdown placement="bottom-start" :offset="[0, 200]">
-          <template #anchor>
-            <button
-              style="width: 70px; height: 70px;"
+    <VbCard title="Autoplacement + target">
+      Scroll up
+      <div class="overflow-hidden">
+        <div
+          class="scroll-container"
+          ref="autoplacementTargetRef"
+          v-scroll-to-middle-y
+        >
+          <div class="content-container">
+            <div class="vertical-space"></div>
+            <va-dropdown
+              :model-value="true"
+              :stateful="false"
+              :target="autoplacementTargetRef"
             >
-              Bottom-start [0, 200]
-            </button>
-          </template>
-          <span style="background-color: #222222; color: #babfc2;">Content</span>
-        </va-dropdown>
-      </div>
-    </VbCard>
-
-    <VbCard title="Dropdown Content">
-      <div>
-        <va-dropdown keep-anchor-width stateful>
-          <template #anchor>
-            <va-input placeholder="Auto complete" />
-          </template>
-
-          <va-dropdown-content>
-            <p>Minsk</p>
-            <p>Kyiv</p>
-            <p>London</p>
-          </va-dropdown-content>
-        </va-dropdown>
-        <va-dropdown stateful>
-          <template #anchor>
-            <va-input placeholder="Auto complete" />
-          </template>
-
-          <va-dropdown-content>
-            <p>City</p>
-            <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
-          </va-dropdown-content>
-        </va-dropdown>
-      </div>
-    </VbCard>
-
-    <VbCard title="Ref Target">
-      <div class="target" ref="target">
-        <va-dropdown keep-anchor-width :target="target" placement="left" prevent-overflow>
-          <template #anchor>
-            <div>Position left, but parent is target</div>
-          </template>
-
-          <va-dropdown-content>
-            <p>Minsk</p>
-            <p>Kyiv</p>
-            <p>London</p>
-          </va-dropdown-content>
-        </va-dropdown>
-      </div>
-    </VbCard>
-
-    <VbCard title="Auto placement">
-      <div class="target" ref="autoPlacementTarget">
-        <va-dropdown :target="autoPlacementTarget" placement="top" auto-placement prevent-overflow>
-          <template #anchor>
-            <va-badge right text="vertical overflow">
-              a
-            </va-badge>
-          </template>
-
-          <va-dropdown-content>
-            <p>Minsk</p>
-            <p>Kyiv</p>
-            <p>London</p>
-          </va-dropdown-content>
-        </va-dropdown>
-        <va-dropdown :target="autoPlacementTarget" placement="left" auto-placement prevent-overflow>
-          <template #anchor>
-            <va-badge bottom text="horizontal overflow">
-              rrrrrrrrrrrrrrrrrr
-            </va-badge>
-          </template>
-
-          <va-dropdown-content>
-            rrrrrrrrrrrrrrrrrrrr
-          </va-dropdown-content>
-        </va-dropdown>
+              <template #anchor>
+                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+                </div>
+              </template>
+              Dropdown
+            </va-dropdown>
+            <div class="vertical-space"></div>
+          </div>
+        </div>
       </div>
     </VbCard>
-
-    <VbCard style="border: 2rem solid blue; position: relative; margin: 6rem;">
-      <div style="border: 2rem solid red; box-sizing: border-box;">
-        <va-dropdown :target="autoPlacementTarget">
-          <template #anchor>
-            <button>Click</button>
-          </template>
-
-          <va-dropdown-content>
-            rrrrrrrrrrrrrrrrrrrr
-          </va-dropdown-content>
-        </va-dropdown>
+    <VbCard title="Autoplacement and Stick to Edges + target">
+      Scroll around
+      <div class="overflow-hidden">
+        <div
+          class="scroll-container"
+          ref="autoplacementTargetStickRef"
+          v-scroll-to-middle-y
+          v-scroll-to-middle-x
+        >
+          <div class="content-container">
+            <div class="vertical-space horizontal-space"></div>
+            <va-dropdown
+              :model-value="true"
+              :stateful="false"
+              :target="autoplacementTargetStickRef"
+              stick-to-edges
+            >
+              <template #anchor>
+                <div class="grid place-items-center h-24 w-24 border-2 border-gray-1000 border-dashed">
+                </div>
+              </template>
+              <div>
+                Looooonger Dropdown
+              </div>
+            </va-dropdown>
+            <div class="vertical-space horizontal-space"></div>
+          </div>
+        </div>
       </div>
     </VbCard>
-
-    <VbCard>
-      <va-dropdown
-        placement="right-start"
-        cursor
-        trigger="right-click"
-        auto-placement
-        stick-to-edges
-      >
-        <va-dropdown-content> Contextual popover! </va-dropdown-content>
-
-        <template #anchor>
-          <va-image
-            style="height: 300px; width: 300px;"
-            src="https://picsum.photos/1500"
-          >
-            <div>Right click this image</div>
-          </va-image>
-        </template>
-      </va-dropdown>
-    </VbCard>
   </VbDemo>
 </template>
 
 <script>
 import { ref } from 'vue'
-import { VaDropdown, VaDropdownContent } from './'
-import DropdownCloseButton from './__demo__/DropdownCloseButton'
-import { VaInput } from '../va-input'
-import { VaBadge } from '../va-badge'
-import { VaImage } from '../va-image'
+import VaDropdown from './VaDropdown.vue'
 
 export default {
-  components: { DropdownCloseButton, VaDropdown, VaInput, VaDropdownContent, VaBadge, VaImage },
-  data () {
-    return {
-      possiblePositions: [
-        'auto',
-        'top',
-        'right',
-        'bottom',
-        'left',
-        'bottom-start',
-        'bottom-end',
-        'right-start',
-        'right-end',
-        'left-start',
-        'left-end',
-      ],
-      noTriggerValue: false,
-      eventsValue: false,
-      logEvents: false,
-      redrawContentSize: 100,
-      anchorDefaultValue: true,
-      keepAnchorWidth: true,
-    }
+  components: {
+    VaDropdown,
   },
-
   setup () {
     return {
-      target: ref(null),
-      autoPlacementTarget: ref(null),
+      cursorTarget: ref(null),
+      autoplacementTargetRef: ref(null),
+      autoplacementTargetStickRef: ref(null),
     }
   },
+  directives: {
+    scrollToMiddleY: {
+      mounted: (el) => {
+        const { scrollHeight, clientHeight } = el
+        el.scrollTop = (scrollHeight - clientHeight) / 2
+      },
+    },
+    scrollToMiddleX: {
+      mounted: (el) => {
+        const { scrollWidth, clientWidth } = el
+        el.scrollLeft = (scrollWidth - clientWidth) / 2
+      },
+    },
+  },
 }
 </script>
 
-<style lang="scss" scoped>
-.target {
-  width: 300px;
-  background-color: #eeeeee;
-  height: 100px;
+<style scoped>
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.scroll-container {
+  width: 500px;
+  height: 300px;
+  overflow: auto;
+  position: relative;
+  border: 1px dashed black;
+}
+
+.content-container {
+  display: grid;
+  place-items: center;
+}
+
+.vertical-space {
+  height: 400px;
+}
+
+.horizontal-space {
+  width: 1000px;
 }
 </style>
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 02bb2e16fb..19070322f7 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -1,88 +1,60 @@
 <script lang="ts">
+import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
+import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
+import kebabCase from 'lodash/kebabCase'
+import pick from 'lodash/pick'
 import {
-  computed,
-  defineComponent,
-  h,
-  nextTick,
-  type PropType,
-  shallowRef,
-  toRef,
-  Fragment,
-  Teleport,
-} from 'vue'
-
-import pick from 'lodash/pick.js'
-import kebabCase from 'lodash/kebabCase.js'
-
-import {
-  useComponentPresetProp,
-  useStateful, useStatefulEmits, createStatefulProps,
-  useDebounceFn,
-  usePlacementAliasesProps,
-  useClickOutside,
-  useBem,
-  useHTMLElementSelector,
-  useIsMounted,
-  useDocument,
+  createStatefulProps,
+  MaybeHTMLElementOrSelector, useBem,
+  useClickOutside, useDebounceFn,
   useHTMLElement,
-  MaybeHTMLElementOrSelector,
-  useTranslation,
-  useDropdown,
+  useHTMLElementSelector,
+  useIsMounted, useStateful, useStatefulEmits, useTranslation,
 } from '../../composables'
-import { useAnchorSelector } from './hooks/useAnchorSelector'
-import { useCursorAnchor } from './hooks/useCursorAnchor'
 import { useKeyboardNavigation, useMouseNavigation } from './hooks/useDropdownNavigation'
-
+import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
+import { useCursorAnchor } from './hooks/useCursorAnchor'
+import { DropdownOffsetProp } from '../va-dropdown/types'
 import { renderSlotNode } from '../../utils/headless'
-import { warn } from '../../utils/console'
-
-import type { DropdownOffsetProp } from './types'
 
 export default defineComponent({
-  name: 'VaDropdown',
-
-  inheritAttrs: false,
-
+  name: 'VaDropdownNew',
   props: {
     ...createStatefulProps(Boolean, true),
-    ...useComponentPresetProp,
-    ...usePlacementAliasesProps,
-    disabled: { type: Boolean },
-    readonly: { type: Boolean },
     anchorSelector: { type: String, default: '' },
     innerAnchorSelector: { type: String, default: '' },
-    /** Viewport where dropdown will be rendered if preventOverflow is true. Autoplacement will be calculated relative to `target` */
-    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
-    /** Element where dropdown content will be rendered. */
-    teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
-    preventOverflow: { type: Boolean, default: false },
-    keepAnchorWidth: { type: Boolean, default: false },
-    isContentHoverable: { type: Boolean, default: true },
-    closeOnContentClick: { type: Boolean, default: true },
+    trigger: {
+      type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
+      default: 'click',
+      validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
+    },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
     closeOnClickOutside: { type: Boolean, default: true },
     closeOnAnchorClick: { type: Boolean, default: true },
+    closeOnContentClick: { type: Boolean, default: true },
     hoverOverTimeout: { type: Number, default: 30 },
     hoverOutTimeout: { type: Number, default: 200 },
+    isContentHoverable: { type: Boolean, default: true },
+    placement: { type: String as PropType<Placement | 'auto'>, default: 'bottom' },
     offset: { type: [Array, Number] as PropType<DropdownOffsetProp>, default: 0 },
-    stickToEdges: { type: Boolean, default: false },
-    autoPlacement: { type: Boolean, default: true },
+    keepAnchorWidth: { type: Boolean, default: false },
     cursor: { type: Boolean, default: false },
-    trigger: {
-      type: String as PropType<'click' | 'right-click' | 'hover' | 'dblclick' | 'none'>,
-      default: 'click',
-      validator: (value: string) => ['click', 'right-click', 'hover', 'dblclick', 'none'].includes(value),
-    },
+    autoPlacement: { type: Boolean, default: true },
+    stickToEdges: { type: Boolean, default: false },
+    /** Viewport where dropdown will be rendered if preventOverflow is true. Autoplacement will be calculated relative to `target` */
+    target: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    /** Element where dropdown content will be rendered. */
+    teleport: { type: [String, Object] as PropType<MaybeHTMLElementOrSelector>, default: undefined },
+    preventOverflow: { type: Boolean, default: false },
     /** Not reactive */
     keyboardNavigation: { type: Boolean, default: false },
-
     ariaLabel: { type: String, default: '$t:toggleDropdown' },
   },
 
   emits: [...useStatefulEmits, 'anchor-click', 'anchor-right-click', 'content-click', 'click-outside', 'close', 'open', 'anchor-dblclick'],
 
-  setup (props, { emit, slots, attrs }) {
-    const contentRef = shallowRef<HTMLElement>()
-
+  setup (props, { emit }) {
     const { valueComputed: statefulVal } = useStateful(props, emit)
     const valueComputed = computed({
       get: () => statefulVal.value && !props.disabled && !props.readonly,
@@ -96,19 +68,71 @@ export default defineComponent({
       },
     })
 
-    const computedClass = useBem('va-dropdown', () => pick(props, ['disabled']))
+    const isMounted = useIsMounted()
+
+    const { anchorRef: anchor } = useAnchorSelector(props)
+    console.log('anchor', anchor)
+    const floating = useHTMLElement('floating')
+    const target = useHTMLElementSelector(computed(() => props.target || 'body'))
+    const teleport = useHTMLElementSelector(computed(() => props.teleport))
+    const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
+
+    const anchorClass = useBem('va-dropdown', () => pick(props, ['disabled']))
+    const isPopoverFloating = computed(() => props.preventOverflow)
+    const teleportTarget = computed<HTMLElement | undefined>(() => {
+      if (teleport.value) {
+        return teleport.value
+      }
+
+      if (!isPopoverFloating.value) {
+        // If not floating just render inside the parent element
+        return undefined
+      }
+
+      return target.value
+    })
+
+    const teleportDisabled = computed(() => !teleport.value)
+    const showFloating = computed(() => isMounted.value && valueComputed.value)
 
     const { debounced: debounceHover, cancel: cancelHoverDebounce } = useDebounceFn(toRef(props, 'hoverOverTimeout'))
     const { debounced: debounceUnHover, cancel: cancelUnHoverDebounce } = useDebounceFn(toRef(props, 'hoverOutTimeout'))
 
-    const onMouseEnter = () => {
+    const onClick = (e: MouseEvent) => {
+      console.log('click')
+      if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click') || props.disabled) { return }
+
+      if (valueComputed.value) {
+        emitAndClose('anchor-click', props.closeOnAnchorClick, e)
+      } else {
+        if (props.trigger !== 'click') { return }
+        valueComputed.value = true
+        emit('anchor-click', e)
+      }
+    }
+    const onContextmenu = (e: MouseEvent) => {
+      if (kebabCase(props.trigger) !== 'right-click' || props.disabled) { return }
+      e.preventDefault()
+
+      if (valueComputed.value) {
+        emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
+
+        if (props.cursor) {
+          nextTick(() => { valueComputed.value = true })
+        }
+      } else {
+        valueComputed.value = true
+        emit('anchor-right-click', e)
+      }
+    }
+    const onDblclick = () => { return undefined }
+    const onMouseenter = () => {
       if (props.trigger !== 'hover' || props.disabled) { return }
 
       debounceHover(() => { valueComputed.value = true })
       cancelUnHoverDebounce()
     }
-
-    const onMouseLeave = () => {
+    const onMouseleave = () => {
       if (props.trigger !== 'hover' || props.disabled) { return }
 
       if (props.isContentHoverable) {
@@ -119,184 +143,143 @@ export default defineComponent({
       cancelHoverDebounce()
     }
 
+    useMouseNavigation(anchor, {
+      click: onClick,
+      contextmenu: onContextmenu,
+      dblclick: onDblclick,
+      mouseenter: onMouseenter,
+      mouseleave: onMouseleave,
+    })
+
+    if (props.keyboardNavigation) {
+      useKeyboardNavigation(anchor, valueComputed)
+    }
+
     const emitAndClose = (eventName: Parameters<typeof emit>[0], close?: boolean, e?: Event) => {
       emit(eventName, e)
       if (close && props.trigger !== 'none') { valueComputed.value = false }
     }
 
-    const elRef = useHTMLElement('computedAnchorRef')
-
-    if (props.keyboardNavigation) {
-      useKeyboardNavigation(elRef, valueComputed)
+    const floatingListeners = {
+      onMouseover: () => props.isContentHoverable && onMouseenter(),
+      onMouseout: () => onMouseleave(),
+      onClick: () => emitAndClose('content-click', props.closeOnContentClick),
     }
 
-    useMouseNavigation(elRef, {
-      click (e) {
-        if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click') || props.disabled) { return }
-
-        if (valueComputed.value) {
-          emitAndClose('anchor-click', props.closeOnAnchorClick, e)
-        } else {
-          if (props.trigger !== 'click') { return }
-          valueComputed.value = true
-          emit('anchor-click', e)
-        }
-      },
-      contextmenu (e) {
-        if (kebabCase(props.trigger) !== 'right-click' || props.disabled) { return }
-        e.preventDefault()
-
-        if (valueComputed.value) {
-          emitAndClose('anchor-right-click', props.closeOnAnchorClick, e)
-
-          if (props.cursor) {
-            nextTick(() => { valueComputed.value = true })
-          }
-        } else {
-          valueComputed.value = true
-          emit('anchor-right-click', e)
-        }
-      },
-      dblclick (e) {
-        if (props.trigger !== 'dblclick' || props.disabled) { return }
-        if (valueComputed.value) {
-          emitAndClose('anchor-dblclick', props.closeOnAnchorClick, e)
-
-          if (props.cursor) {
-            nextTick(() => { valueComputed.value = true })
-          }
-        } else {
-          valueComputed.value = true
-          emit('anchor-dblclick', e)
-        }
-      },
-      mouseenter: onMouseEnter,
-      mouseleave: onMouseLeave,
-    })
-
-    const { anchorRef: computedAnchorRef } = useAnchorSelector(props)
-    useClickOutside([computedAnchorRef, contentRef], () => {
+    useClickOutside([anchor, floating], () => {
       if (props.closeOnClickOutside && valueComputed.value) {
         emitAndClose('click-outside', props.closeOnClickOutside)
       }
     })
 
-    const cursorAnchor = useCursorAnchor(computedAnchorRef, valueComputed)
-    const document = useDocument()
-    const isPopoverFloating = computed(() => props.preventOverflow)
+    const placementComputed = computed(() => {
+      if (props.placement === 'auto') {
+        return 'bottom'
+      }
 
-    const target = useHTMLElementSelector(computed(() => props.target || 'body'))
-    const teleport = useHTMLElementSelector(computed(() => props.teleport))
+      return props.placement
+    })
 
-    const targetComputed = computed(() => {
-      if (computedAnchorRef.value && !target.value?.contains?.(computedAnchorRef.value)) { return document.value?.body }
+    const offsetComputed = computed(() => {
+      const result = { mainAxis: 0, crossAxis: 0 }
+      if (Array.isArray(props.offset)) {
+        result.mainAxis = props.offset[0]
+        result.crossAxis = props.offset[1]
+      } else {
+        result.mainAxis = props.offset
+      }
 
-      return target.value
+      return result
     })
 
-    const teleportTargetComputed = computed<HTMLElement | undefined>(() => {
-      if (teleport.value) {
-        return teleport.value
+    const middlewareComputed = computed(() => {
+      const result = [
+        offset(offsetComputed.value),
+      ]
+
+      if (props.autoPlacement) {
+        result.push(
+          // boundary doesn't work with ssr (trying to access document)
+          flip({
+            boundary: isMounted.value ? target.value : undefined,
+          }),
+        )
       }
 
-      if (!isPopoverFloating.value) {
-        // If not floating just render inside the parent element
-        return elRef.value?.parentElement || undefined
+      if (props.stickToEdges) {
+        result.push(
+          shift(),
+        )
       }
 
-      return targetComputed.value
-    })
+      if (props.keepAnchorWidth) {
+        result.push(size({
+          apply ({ elements }) {
+            const reference = elements.reference
+            const availableWidth = reference.getBoundingClientRect().width
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+            })
+          },
+        }),
+        )
+      }
 
-    const teleportDisabled = computed(() => {
-      if (teleport.value) { return false }
-      return props.disabled || !isPopoverFloating.value
+      return result
     })
 
-    const anchorRef = computed(() => {
-      if (props.target) {
-        return target.value
-      }
-
-      return props.cursor ? cursorAnchor.value : computedAnchorRef.value
+    const anchorComputed = computed(() => {
+      return props.cursor ? cursorAnchor.value : anchor.value
     })
-    useDropdown(
-      anchorRef,
-      contentRef,
-      computed(() => ({
-        keepAnchorWidth: props.keepAnchorWidth,
-        offset: props.offset,
-        stickToEdges: props.stickToEdges,
-        autoPlacement: props.autoPlacement,
-        root: teleportTargetComputed.value,
-        viewport: targetComputed.value,
-        shift: props.preventOverflow,
-      })),
-      props,
-    )
 
-    const isMounted = useIsMounted()
+    const { floatingStyles } = useFloating(anchorComputed, floating, {
+      placement: placementComputed,
+      whileElementsMounted: autoUpdate,
+      middleware: middlewareComputed,
+    })
 
     return {
       ...useTranslation(),
+      anchor,
+      anchorClass,
+      floating,
+      floatingStyles,
+      teleportDisabled,
+      showFloating,
+      teleportTarget,
+      floatingListeners,
       isMounted,
       valueComputed,
-      computedAnchorRef,
-      computedClass,
-      onMouseEnter,
-      teleportTargetComputed,
-      teleportDisabled,
-      onMouseLeave,
-      emitAndClose,
-      contentRef,
     }
   },
-
   render () {
-    const slotBinds = {
-      value: this.valueComputed.value,
-      hide: () => { this.valueComputed.value = false },
-      show: () => { this.valueComputed.value = true },
-    }
-
-    const defaultSlotVNode = renderSlotNode(this.$slots.default, slotBinds, {
-      ref: 'contentRef',
+    const floatingSlotNode = renderSlotNode(this.$slots.default, {}, {
+      ref: 'floating',
       class: 'va-dropdown__content-wrapper',
-      onMouseOver: () => this.$props.isContentHoverable && this.onMouseEnter(),
-      onMouseOut: () => this.onMouseLeave(),
-      onClick: () => this.emitAndClose('content-click', this.$props.closeOnContentClick),
+      style: this.floatingStyles,
+      ...this.floatingListeners,
     })
 
-    const anchorSlotVNode = renderSlotNode(this.$slots.anchor, slotBinds, {
-      ref: 'computedAnchorRef',
+    const anchorSlotVNode = renderSlotNode(this.$slots.anchor, {}, {
+      ref: 'anchor',
       role: 'button',
-      class: ['va-dropdown', ...this.computedClass.asArray.value],
+      class: ['va-dropdown', ...this.anchorClass.asArray.value],
       style: { position: 'relative' },
       'aria-label': this.tp(this.$props.ariaLabel),
       'aria-disabled': this.$props.disabled,
-      'aria-expanded': !!this.valueComputed.value,
+      'aria-expanded': !!this.showFloating.value,
       ...this.$attrs,
     })
 
-    if (!anchorSlotVNode) {
-      warn('VaDropdown: You must provide an anchor slot')
-      return
-    }
-
-    if (!defaultSlotVNode) {
-      warn('VaDropdown: default slot is missing')
-      return h(anchorSlotVNode)
-    }
-
     return h(Fragment, {}, [
       anchorSlotVNode,
-
       (this.isMounted && this.valueComputed) && h(
         Teleport,
         {
-          to: this.teleportTargetComputed,
+          to: this.teleportTarget,
           disabled: this.teleportDisabled,
         },
-        [defaultSlotVNode],
+        [floatingSlotNode],
       ),
     ])
   },
diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 00a43a5fdb..9a4fb1c8e2 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -1,54 +1,41 @@
-import { computed, reactive, Ref, watchEffect } from 'vue'
-import { useEvent } from '../../../composables/useEvent'
+import { computed, reactive, Ref } from 'vue'
+import { useEvent } from '../../../composables'
 
-/** Returns fake HTML Element which `getBoundingClientRect` method returns mouse position */
 export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>) => {
+  const anchor = reactive({ x: 0, y: 0 })
   const mouse = reactive({ x: 0, y: 0 })
 
   useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
+    if (noUpdate.value) { return }
+    mouse.x = e.clientX
+    mouse.y = e.clientY
     const { x, y } = anchorRef.value!.getBoundingClientRect()
-    mouse.x = e.clientX - x
-    mouse.y = e.clientY - y
+    anchor.x = x
+    anchor.y = y
   }, anchorRef)
 
-  const mouseOffset = {
-    x: 0,
-    y: 0,
-  }
-
-  watchEffect(() => {
-    if (noUpdate.value) { return }
-    mouseOffset.x = mouse.x
-    mouseOffset.y = mouse.y
-  })
-
   return computed(() => {
-    if (!anchorRef.value) { return undefined }
-
-    const target = anchorRef.value
-
-    const getBoundingClientRect = () => {
-      const rect = target.getBoundingClientRect()
-      const x = rect.left + mouseOffset.x
-      const y = rect.top + mouseOffset.y
-
-      return {
-        ...rect,
-        width: 1,
-        height: 1,
-        x: x,
-        y: y,
-        bottom: y + 1,
-        right: x + 1,
-        left: x,
-        top: y,
-      }
-    }
-
     return {
       getBoundingClientRect () {
-        return getBoundingClientRect()
+        const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
+        const { x: mx, y: my } = mouse
+        const { x: ax, y: ay } = anchor
+        const shiftX = ax - x
+        const shiftY = ay - y
+        const resX = mx - shiftX
+        const resY = my - shiftY
+        return {
+          width: 0,
+          height: 0,
+          x: resX,
+          y: resY,
+          top: resY,
+          right: resX,
+          bottom: resY,
+          left: resX,
+        }
       },
-    } as unknown as HTMLElement // TODO: Change to DOMRectable instead of HTMLElement
+      contextElement: anchorRef.value,
+    }
   })
 }

From 21f587d92cbeefff85147a515c805d617aebb538 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 12:48:36 +0200
Subject: [PATCH 26/43] Update dropdown demo

---
 packages/ui/src/components/va-dropdown/VaDropdown.demo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index 7b369a2ae0..e91706d916 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -88,7 +88,7 @@
     <VbCard title="Cursor + target">
       <va-dropdown
         trigger="right-click"
-        placement="top-end"
+        placement="bottom-start"
         :target="cursorTarget"
         cursor
       >

From 68e73d6425447d432cd6a418122087a2f02d146f Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:20:10 +0200
Subject: [PATCH 27/43] Fix plugin logic

---
 .../components/va-dropdown/VaDropdown.demo.vue   | 16 ++++++++++++++--
 .../ui/src/components/va-dropdown/VaDropdown.vue |  9 ++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index e91706d916..deb21fca38 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -111,7 +111,7 @@
           Click me
         </div>
         <va-dropdown
-          anchorSelector="#anchor-selector"
+          anchor-selector="#anchor-selector"
         >
           Anchor selector
         </va-dropdown>
@@ -119,7 +119,7 @@
     </VbCard>
     <VbCard title="Inner anchor selector">
       <va-dropdown
-        anchorSelector="#inner-anchor-selector"
+        inner-anchor-selector="#inner-anchor-selector"
       >
         <template #anchor>
           <div class="border-2 border-gray-1000 border-dashed">
@@ -134,6 +134,16 @@
         Inner anchor selector
       </va-dropdown>
     </VbCard>
+    <VbCard title="Plugin">
+      <va-dropdown>
+        <template #anchor>
+          <div>
+            Click me
+          </div>
+        </template>
+        <DropdownCloseButton />
+      </va-dropdown>
+    </VbCard>
     <VbCard title="Autoplacement + target">
       Scroll up
       <div class="overflow-hidden">
@@ -196,10 +206,12 @@
 <script>
 import { ref } from 'vue'
 import VaDropdown from './VaDropdown.vue'
+import DropdownCloseButton from '@/components/va-dropdown/__demo__/DropdownCloseButton.vue'
 
 export default {
   components: {
     VaDropdown,
+    DropdownCloseButton,
   },
   setup () {
     return {
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 19070322f7..01e1064910 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -18,7 +18,7 @@ import { DropdownOffsetProp } from '../va-dropdown/types'
 import { renderSlotNode } from '../../utils/headless'
 
 export default defineComponent({
-  name: 'VaDropdownNew',
+  name: 'VaDropdown',
   props: {
     ...createStatefulProps(Boolean, true),
     anchorSelector: { type: String, default: '' },
@@ -71,7 +71,6 @@ export default defineComponent({
     const isMounted = useIsMounted()
 
     const { anchorRef: anchor } = useAnchorSelector(props)
-    console.log('anchor', anchor)
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
@@ -99,7 +98,6 @@ export default defineComponent({
     const { debounced: debounceUnHover, cancel: cancelUnHoverDebounce } = useDebounceFn(toRef(props, 'hoverOutTimeout'))
 
     const onClick = (e: MouseEvent) => {
-      console.log('click')
       if ((props.trigger !== 'click' && kebabCase(props.trigger) !== 'right-click') || props.disabled) { return }
 
       if (valueComputed.value) {
@@ -238,6 +236,9 @@ export default defineComponent({
       middleware: middlewareComputed,
     })
 
+    const hide = () => { valueComputed.value = false }
+    const show = () => { valueComputed.value = true }
+
     return {
       ...useTranslation(),
       anchor,
@@ -250,6 +251,8 @@ export default defineComponent({
       floatingListeners,
       isMounted,
       valueComputed,
+      hide,
+      show,
     }
   },
   render () {

From c2a5c36dfcbe4a9592806f266907bb6267a59603 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:23:02 +0200
Subject: [PATCH 28/43] rollback navigationRoutes

---
 packages/docs/page-config/navigationRoutes.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index cc02755c0a..0a1282552c 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/packages/docs/page-config/navigationRoutes.ts
@@ -277,7 +277,6 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "color-input",
         displayName: "menu.colorInput",
       },
-
       {
         category: 'menu.categories.layout',
         name: 'aspect-ratio',
@@ -377,15 +376,10 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "dropdown",
         displayName: "menu.dropdown",
       },
-      {
-        name: "dropdown-new",
-        displayName: "menu.dropdownNew",
-      },
       {
         name: "spacer",
         displayName: "menu.spacer",
       },
-
       {
         category: "menu.categories.other",
         name: "affix",

From f8b2188597877b828793bd54a3167f3800edb784 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:23:51 +0200
Subject: [PATCH 29/43] rollback docs

---
 .../ui-elements/dropdown-new/api-options.ts   |   8 --
 .../dropdown-new/components/Coordinates.vue   |  62 ----------
 .../dropdown-new/examples/Cursor.vue          |  20 ---
 .../dropdown-new/examples/Default.vue         |   9 --
 .../examples/PlacementAndOffset.vue           | 116 ------------------
 .../dropdown-new/examples/PreventOverflow.vue |  48 --------
 .../dropdown-new/examples/Trigger.vue         |  56 ---------
 .../ui-elements/dropdown-new/index.ts         |  25 ----
 .../dropdown-new/translation/en.json          |  26 ----
 9 files changed, 370 deletions(-)
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/index.ts
 delete mode 100644 packages/docs/page-config/ui-elements/dropdown-new/translation/en.json

diff --git a/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts b/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
deleted file mode 100644
index 24ff1513ed..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/api-options.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ManualApiOptions } from "@/components/DocsApi/ManualApiOptions";
-
-export default {
-  props: {},
-  events: {},
-  methods: {},
-  slots: {},
-} as ManualApiOptions;
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue b/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
deleted file mode 100644
index 9a4178f5d8..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/components/Coordinates.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <svg
-    class="placement-coordinates"
-    xmlns="http://www.w3.org/2000/svg"
-    width="104"
-    height="104"
-    fill="none"
-  >
-    <g>
-      <path
-        :style="computedStyle.y"
-        d="M50.5 102a1.5 1.5 0 0 0 3 0h-3ZM53.06.94a1.5 1.5 0 0 0-2.12 0l-9.55 9.55a1.5 1.5 0 1 0 2.12 2.12L52 4.12l8.49 8.49a1.5 1.5 0 1 0 2.12-2.12L53.06.94ZM53.5 102V2h-3v100h3Z"
-      />
-      <path
-        :style="computedStyle.x"
-        d="M2 50.5a1.5 1.5 0 0 0 0 3v-3Zm101.06 2.56a1.5 1.5 0 0 0 0-2.12l-9.55-9.55a1.5 1.5 0 1 0-2.12 2.12L99.88 52l-8.49 8.49a1.5 1.5 0 1 0 2.12 2.12l9.55-9.55ZM2 53.5h100v-3H2v3Z"
-      />
-    </g>
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-
-const props = defineProps({
-  placement: {
-    type: String,
-    default: "top",
-  },
-});
-
-const main = computed(() =>
-  ["top", "bottom", "auto"].some((p) => props.placement.includes(p)) ? "y" : "x"
-);
-const cross = computed(() => (main.value === "y" ? "x" : "y"));
-const mainReversed = computed(() =>
-  ["bottom", "left", "auto"].some((p) => props.placement.includes(p))
-);
-const crossReversed = computed(() => cross.value === "y");
-
-const computedStyle = computed(() => {
-  return {
-    [main.value]: {
-      fill: "var(--va-primary)",
-      transform: mainReversed.value ? "scale(-1) translate(-100%, -100%)" : "",
-    },
-    [cross.value]: {
-      fill: "var(--va-secondary)",
-      opacity: 0.3,
-      transform: crossReversed.value ? "scale(-1) translate(-100%, -100%)" : "",
-    },
-  };
-});
-</script>
-
-<style lang="scss" scoped>
-.placement-coordinates {
-  border: 1px solid var(--va-divider);
-  padding: 4px;
-  box-sizing: content-box;
-}
-</style>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
deleted file mode 100644
index 3ea49990ab..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/Cursor.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <va-dropdown
-    placement="right-start"
-    cursor
-    trigger="right-click"
-    auto-placement
-    stick-to-edges
-  >
-    <va-dropdown-content> Contextual popover! </va-dropdown-content>
-
-    <template #anchor>
-      <va-image
-        style="height: 300px; width: 300px;"
-        src="https://picsum.photos/1500"
-      >
-        <va-badge text="Right click this image" />
-      </va-image>
-    </template>
-  </va-dropdown>
-</template>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
deleted file mode 100644
index 1c4adb66bc..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/Default.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <va-dropdown-new>
-    <template #anchor>
-      <va-button> Dropdownable </va-button>
-    </template>
-
-    <va-dropdown-content> Dropped down! </va-dropdown-content>
-  </va-dropdown-new>
-</template>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
deleted file mode 100644
index 12047f263e..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/PlacementAndOffset.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-  <table>
-    <tr>
-      <td colspan="2">
-        <div class="title va-text-center mb-2">
-          Offset direction
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td
-        colspan="2"
-        style="padding: 4rem;"
-      >
-        <div class="flex flex-col items-center">
-          <va-dropdown-new
-            :model-value="true"
-            :placement="placementWIthAlias"
-            :close-on-click-outside="false"
-            :close-on-anchor-click="false"
-            :close-on-content-click="false"
-            :offset="offset"
-          >
-            <template #anchor>
-              <div><Coordinates :placement="placement" /></div>
-            </template>
-
-            <va-dropdown-content> Dropdown </va-dropdown-content>
-          </va-dropdown-new>
-        </div>
-      </td>
-    </tr>
-    <tr>
-      <td>Placement:</td>
-      <td>
-        <va-select
-          v-model="placementWIthAlias"
-          :options="placements"
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style="color: var(--va-primary);">
-        Main:
-      </td>
-      <td>
-        <va-counter
-          v-model="offset[0]"
-          manual-input
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style="color: var(--va-secondary);">
-        Cross:
-      </td>
-      <td>
-        <va-counter
-          v-model="offset[1]"
-          manual-input
-        />
-      </td>
-    </tr>
-  </table>
-</template>
-
-<script>
-import { ref, computed } from "vue";
-
-import { aliasToPlacement } from "vuestic-ui/src/composables";
-
-import Coordinates from "../components/Coordinates.vue";
-
-const aliases = [
-  "top-left",
-  "left-top",
-  "top-right",
-  "right-top",
-  "bottom-left",
-  "left-bottom",
-  "bottom-right",
-  "right-bottom",
-];
-
-export default {
-  components: { Coordinates },
-
-  setup: () => {
-    const placementWIthAlias = ref("auto");
-    return {
-      placementWIthAlias,
-      placement: computed(() => {
-        return (
-          aliasToPlacement[placementWIthAlias.value] || placementWIthAlias.value
-        );
-      }),
-      placements: ["top", "bottom", "left", "right"]
-        .reduce(
-          (acc, position) => [
-            ...acc,
-            position,
-            `${position}-start`,
-            `${position}-end`,
-            `${position}-center`,
-          ],
-          ["auto"]
-        )
-        .concat(aliases),
-    };
-  },
-
-  data: () => ({
-    offset: [10, 0],
-  }),
-};
-</script>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
deleted file mode 100644
index 67644f4396..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/PreventOverflow.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div
-    class="demo-viewport"
-    style="overflow: hidden;"
-  >
-    <div
-      class="demo-ignore-overflow"
-      style="overflow: hidden;"
-    >
-      <va-dropdown
-        :model-value="true"
-        :auto-placement="false"
-        trigger="none"
-        placement="top"
-        target=".demo-viewport"
-        prevent-overflow
-      >
-        <div class="demo-square" />
-
-        <template #anchor>
-          <button>Anchor</button>
-        </template>
-      </va-dropdown>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.demo-square {
-  background-color: var(--va-primary);
-  width: 100px;
-  height: 100vh;
-}
-
-.demo-viewport {
-  overflow: hidden;
-  position: relative;
-  padding: 4rem;
-  border: 2px solid var(--va-danger);
-}
-
-.demo-ignore-overflow {
-  padding: 4rem;
-  overflow: hidden;
-  position: relative;
-  border: 2px solid var(--va-success);
-}
-</style>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue b/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
deleted file mode 100644
index 7bde6776c0..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/examples/Trigger.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <va-dropdown-new>
-    <template #anchor>
-      <va-button class="mr-2">
-        Click
-      </va-button>
-    </template>
-
-    <va-dropdown-content> Dropped down! </va-dropdown-content>
-  </va-dropdown-new>
-
-  <va-dropdown-new trigger="right-click">
-    <template #anchor>
-      <va-button class="mr-2">
-        Right click
-      </va-button>
-    </template>
-
-    <va-dropdown-content> Dropped down! </va-dropdown-content>
-  </va-dropdown-new>
-
-  <va-dropdown-new trigger="hover">
-    <template #anchor>
-      <va-button> Hover </va-button>
-    </template>
-
-    <va-dropdown-content> Dropped down! </va-dropdown-content>
-  </va-dropdown-new>
-
-  <div class="mt-2 flex">
-    <va-dropdown-new
-      v-model="doShowDropdown"
-      trigger="none"
-      class="mr-2"
-      :close-on-click-outside="false"
-    >
-      <template #anchor>
-        <va-button> None </va-button>
-      </template>
-
-      <va-dropdown-content> Dropped down! </va-dropdown-content>
-    </va-dropdown-new>
-
-    <va-button @click="doShowDropdown = !doShowDropdown">
-      {{ doShowDropdown ? "hide" : "show" }} dropdown
-    </va-button>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return { doShowDropdown: false };
-  },
-};
-</script>
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/index.ts b/packages/docs/page-config/ui-elements/dropdown-new/index.ts
deleted file mode 100644
index c038c22134..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import apiOptions from "./api-options";
-
-import specs from "./specs.md?raw";
-
-export default definePageConfig({
-  blocks: [
-    block.title("dropdown-new.title"),
-    block.paragraph("dropdown-new.text"),
-
-    // examples/
-    block.example("Default"),
-
-    block.example("PlacementAndOffset"),
-
-    block.example("Trigger"),
-
-    block.example("Cursor"),
-
-    block.example("PreventOverflow"),
-
-    // block.api("VaDropdown", apiOptions),
-    //
-    // block.collapse("useDropdown hook specs", [block.markdown(specs)]),
-  ],
-});
diff --git a/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json b/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json
deleted file mode 100644
index b999b02cbb..0000000000
--- a/packages/docs/page-config/ui-elements/dropdown-new/translation/en.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "title": "Dropdown",
-  "text": "Dropdown component is a **headless** component that allow you to show some content near anchor. It is more utility component. You can use it with `VaDropdownContent` or `VaCard` component. This component looks like popover, but without any additional styling as `VaPopover` has.",
-  "examples": {
-    "default": {
-      "title": "Default usage",
-      "text": ""
-    },
-    "placementAndOffset": {
-      "title": "Placement and Offset",
-      "text": "You can place dropdown any direction you want. Offset is calculated relative to `placement` prop. We use `main` and `cross` offset. Means `main` will be relative to `placement` direction while `cross` is perpendicular. `auto` placement will be `bottom` by default, but will change to `top` if it is not possible to display on bottom."
-    },
-    "trigger": {
-      "title": "Trigger",
-      "text": "You can use `click`, `hover` or `none` trigger which will open dropdown. If you want dropdown to be opened only programmatically use `none` trigger"
-    },
-    "cursor": {
-      "title": "Place on cursor",
-      "text": "You can render dropdown content on cursor position. It is useful to use `cursor` props with `auto-placement` so if content do not fit target it will be placed somewhere else."
-    },
-    "preventOverflow": {
-      "title": "Prevent overflow",
-      "text": "By default dropdown content is rendered as body child. This way we prevent any overflow. In example below `overflow: hidden` of green box is ignored. But we still able to respec overflow by changing `target` prop. In example below `overflow: hidden` of red box is hiding dropdown content."
-    }
-  }
-}
\ No newline at end of file

From 337aa3c628fc93acbff7c2de3286a31267631263 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:25:31 +0200
Subject: [PATCH 30/43] remove unused composables

---
 packages/ui/src/composables/index.ts       |   2 -
 packages/ui/src/composables/useDomRect.ts  |  41 ---
 packages/ui/src/composables/useDropdown.ts | 275 ---------------------
 3 files changed, 318 deletions(-)
 delete mode 100644 packages/ui/src/composables/useDomRect.ts
 delete mode 100644 packages/ui/src/composables/useDropdown.ts

diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 0fee4bf565..9d0f65d13d 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -15,8 +15,6 @@ export * from './useCurrentComponentId'
 export * from './useDebounce'
 export * from './useDeprecated'
 export * from './useDocument'
-export * from './useDomRect'
-export * from './useDropdown'
 export * from './useElementBackground'
 export * from './useElementRef'
 export * from './useEmitProxy'
diff --git a/packages/ui/src/composables/useDomRect.ts b/packages/ui/src/composables/useDomRect.ts
deleted file mode 100644
index f60b0ef190..0000000000
--- a/packages/ui/src/composables/useDomRect.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Ref, ref, watch } from 'vue'
-import { unwrapEl } from '../utils/unwrapEl'
-import { useRequestAnimationFrame } from './useRequestAnimationFrame'
-
-const keys = ['x', 'y', 'width', 'height', 'top', 'left', 'right', 'bottom']
-const isDomRectEqual = (a: any, b: any) => {
-  for (let i = 0; i < keys.length; i++) {
-    if (a[keys[i]] !== b[keys[i]]) {
-      return false
-    }
-  }
-  return true
-}
-
-export const useDomRect = (target: Ref<Element | undefined>) => {
-  const domRect = ref<DOMRect | null>(null)
-
-  let prev = {}
-  useRequestAnimationFrame(() => {
-    const el = unwrapEl(target.value)
-    if (!el) { return }
-    const rect = el.getBoundingClientRect()
-    if (!isDomRectEqual(rect, prev)) {
-      domRect.value = rect
-    }
-    prev = rect
-  })
-
-  watch(target, (newVal) => {
-    const el = unwrapEl(newVal)
-    if (el) {
-      domRect.value = el.getBoundingClientRect()
-    } else {
-      domRect.value = null
-    }
-  })
-
-  return {
-    domRect,
-  }
-}
diff --git a/packages/ui/src/composables/useDropdown.ts b/packages/ui/src/composables/useDropdown.ts
deleted file mode 100644
index 91724946f6..0000000000
--- a/packages/ui/src/composables/useDropdown.ts
+++ /dev/null
@@ -1,275 +0,0 @@
-import { computed, unref, watchPostEffect, type Ref } from 'vue'
-
-import { useDomRect } from './useDomRect'
-import { useDocument } from './useDocument'
-
-import { unwrapEl } from '../utils/unwrapEl'
-
-import type {
-  PlacementAlignment,
-  PlacementPosition,
-  UsePlacementAliasesProps,
-  ParsedPlacement,
-} from './usePlacementAliases'
-
-import {
-  type Middleware,
-  type Placement,
-  useFloating,
-  offset as offsetFn,
-  autoPlacement as autoPlacementFn,
-  shift as shiftFn,
-  autoUpdate,
-  flip,
-} from '@floating-ui/vue'
-
-export type Offset = number | [number, number]
-
-type Coords = { x: number, y: number }
-type AlignCoords = { main: number, cross: number }
-
-const coordsToCss = ({ x, y }: Coords) => ({ left: `${x}px`, top: `${y}px` })
-
-const parseOffset = (offset: Offset): AlignCoords => {
-  return Array.isArray(offset) ? { main: offset[0], cross: offset[1] } : { main: offset, cross: 0 }
-}
-
-const calculateContentAlignment = (align: PlacementAlignment, anchorStart: number, anchorSize: number, contentSize: number) => {
-  if (align === 'start') { return anchorStart }
-  if (align === 'end') { return anchorStart + anchorSize - contentSize }
-
-  return anchorStart + (anchorSize - contentSize) / 2
-}
-
-const calculateContentCoords = (
-  position: PlacementPosition,
-  align: PlacementAlignment,
-  anchor: DOMRect,
-  content: DOMRect,
-) => {
-  const alignmentX = calculateContentAlignment(align, anchor.left, anchor.width, content.width)
-  const alignmentY = calculateContentAlignment(align, anchor.top, anchor.height, content.height)
-
-  switch (position) {
-    case 'top': return { x: alignmentX, y: anchor.top - content.height }
-    case 'left': return { y: alignmentY, x: anchor.left - content.width }
-    case 'right': return { y: alignmentY, x: anchor.right }
-    case 'bottom':
-    default: return { x: alignmentX, y: anchor.bottom }
-  }
-}
-
-const calculateOffsetCoords = (position: PlacementPosition, offset: Offset): Coords => {
-  const { main, cross } = parseOffset(offset)
-
-  switch (position) {
-    case 'left': return { y: cross, x: -main }
-    case 'right': return { y: cross, x: main }
-    case 'top': return { y: -main, x: cross }
-    case 'bottom':
-    default: return { y: main, x: cross }
-  }
-}
-
-/** Returns how much content overflow */
-const calculateContentOverflow = (coords: Coords, content: DOMRect, viewport: DOMRect) => {
-  const xMax = viewport.right
-  const yMax = viewport.bottom
-  const xMin = viewport.left
-  const yMin = viewport.top
-
-  return {
-    top: Math.max(yMin - coords.y, 0),
-    bottom: Math.max((coords.y + content.height) - yMax, 0),
-    left: Math.max(xMin - coords.x, 0),
-    right: Math.max((coords.x + content.width) - xMax, 0),
-  }
-}
-
-const clamp = (min: number, v: number, max: number) => Math.max(Math.min(v, max), min)
-
-const calculateClipToEdge = (coords: Coords, offsetCoords: Coords, content: DOMRect, anchor: DOMRect, viewport: DOMRect) => {
-  const { top, bottom, left, right } = calculateContentOverflow(coords, content, viewport)
-
-  // Add left overflow, sub right overflow so content always stick to edge
-  const x = coords.x - right + left
-  const y = coords.y - bottom + top
-
-  const { x: offsetX, y: offsetY } = offsetCoords
-
-  return {
-    // Clamp content position near anchor, so any content edge should touch anchor edge
-    x: clamp(anchor.left + offsetX - content.width, x, anchor.right + offsetX),
-    y: clamp(anchor.top + offsetY - content.height, y, anchor.bottom + offsetY),
-  }
-}
-
-const getAutoPlacement = (
-  position: PlacementPosition,
-  align: PlacementAlignment,
-  coords: Coords,
-  content: DOMRect,
-  viewport: DOMRect,
-): ParsedPlacement => {
-  const overflow = calculateContentOverflow(coords, content, viewport)
-  const convertPlacement = (position: PlacementPosition, align: PlacementAlignment) => ({ position, align })
-
-  const newPlacements: Record<PlacementPosition, PlacementPosition> = {
-    top: 'bottom',
-    bottom: 'top',
-    right: 'left',
-    left: 'right',
-  }
-
-  if (!overflow[position]) { return convertPlacement(position, align) }
-
-  // TODO: This is not recursive, if there is overflow in left and right - still will be a problem
-  // Might need to use some different algorithm here
-  const newPlacement = newPlacements[position]
-
-  if (newPlacement === 'bottom' || newPlacement === 'top') {
-    // cross: →
-    if (overflow.left) { return convertPlacement(newPlacement, 'start') }
-    if (overflow.right) { return convertPlacement(newPlacement, 'end') }
-  }
-
-  if (newPlacement === 'left' || newPlacement === 'right') {
-    // cross: ↓
-    if (overflow.top) { return convertPlacement(newPlacement, 'start') }
-    if (overflow.bottom) { return convertPlacement(newPlacement, 'end') }
-  }
-
-  return convertPlacement(newPlacement, 'center')
-}
-
-const findFirstRelativeParent = (el: Element | null) => {
-  while (el) {
-    // TODO: Remove the el.style.position after fix of this issue: https://github.com/nuxt/framework/issues/3587
-    // TODO: Remove from the va-dropdown.vue the inline style (position: relative)
-    const positionValue = window.getComputedStyle(el).getPropertyValue('position') ||
-      (el as HTMLElement).style.position
-
-    if (positionValue === 'relative') { return el }
-
-    el = el.parentElement
-  }
-
-  return document.body
-}
-
-export type usePopoverOptions = {
-  keepAnchorWidth?: boolean,
-  autoPlacement?: boolean,
-  stickToEdges?: boolean,
-  offset?: Offset,
-  /** Root element selector */
-  root?: string | HTMLElement,
-  viewport?: HTMLElement,
-  shift?: boolean,
-}
-
-/**
- * Updates `contentRef` css, make it position fixed and moves relative to `anchorRef`
- * @param anchorRef
- * @param contentRef
- * @param options make options reactive if you want popover to react on options change.
- * @param props
- */
-export const useDropdown = (
-  anchorRef: Ref<HTMLElement | undefined>,
-  contentRef: Ref<HTMLElement | undefined>,
-  options: usePopoverOptions | Ref<usePopoverOptions>,
-  props: UsePlacementAliasesProps,
-) => {
-  const documentRef = useDocument()
-  const rootRef = computed(() => {
-    if (!documentRef.value) { return undefined }
-
-    const { root } = unref(options)
-
-    if (root) {
-      let el
-      if (typeof root === 'string') {
-        el = documentRef.value.querySelector(root)
-      } else {
-        el = root
-      }
-      if (!el) { return documentRef.value.body }
-      return findFirstRelativeParent(el)
-    }
-
-    return documentRef.value.body
-  })
-  const { domRect: anchorDomRect } = useDomRect(anchorRef)
-
-  const computedPlacement = computed(() => props.placement === 'auto' ? 'bottom' : props.placement as Placement)
-
-  const { x, y, strategy, update } = useFloating(anchorRef, contentRef, {
-    placement: computedPlacement.value,
-    whileElementsMounted: autoUpdate,
-    middleware: computed(() => {
-      const middleware: Middleware[] = []
-      const { offset, autoPlacement, shift } = unref(options)
-
-      if (offset) {
-        middleware.push(offsetFn(Array.isArray(offset)
-          ? {
-            mainAxis: offset[0],
-            crossAxis: offset[1],
-          }
-          : {
-            mainAxis: offset,
-            crossAxis: 0,
-          }))
-      }
-
-      if (autoPlacement) {
-        middleware.push(flip({ crossAxis: !shift }))
-      }
-      // if (autoPlacement) {
-      //   middleware.push(autoPlacementFn())
-      // } else {
-      //   middleware.push(flip({
-      //     crossAxis: !shift,
-      //   }))
-      // }
-
-      if (shift) {
-        // preventOverflow renamed to shift now
-        middleware.push(shiftFn({
-          padding: 5,
-          // TODO: the rootBoundary should be the rootRef, but it doesn't work
-          // rootBoundary: anchorRef.value ? useDomRect(anchorRef).domRect.value as Rect : 'viewport',
-        }))
-      }
-      return middleware
-    }),
-  })
-
-  watchPostEffect(() => {
-    if (!rootRef.value || !contentRef.value) { return }
-
-    if (unwrapEl(contentRef.value)) {
-      let widthCss = {}
-      const { keepAnchorWidth } = unref(options)
-      if (keepAnchorWidth) {
-        const { width } = anchorDomRect.value || {}
-        widthCss = { width: `${width}px`, maxWidth: `${width}px` }
-      }
-
-      Object.assign(unwrapEl(contentRef.value)!.style, {
-        position: strategy.value,
-        ...coordsToCss({ x: x.value || 0, y: y.value || 0 }),
-        ...widthCss,
-      })
-    }
-  })
-
-  return {
-    anchorDomRect,
-    x,
-    y,
-    strategy,
-    update,
-  }
-}

From ba2fdae747153b4a03fc31426cb6752f81102f5c Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 14:11:03 +0200
Subject: [PATCH 31/43] Extract useDropdown hook

---
 .../src/components/va-dropdown/VaDropdown.vue |  89 ++++-----------
 .../va-dropdown/hooks/useCursorAnchor.ts      |   7 +-
 .../va-dropdown/hooks/useDropdown.ts          | 102 ++++++++++++++++++
 .../ui/src/components/va-dropdown/types.ts    |  14 +++
 4 files changed, 142 insertions(+), 70 deletions(-)
 create mode 100644 packages/ui/src/components/va-dropdown/hooks/useDropdown.ts

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 01e1064910..be41676fdd 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -1,21 +1,24 @@
 <script lang="ts">
 import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
-import { useFloating, autoUpdate, flip, shift, Placement, offset, size } from '@floating-ui/vue'
+import { Placement } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import pick from 'lodash/pick'
 import {
+  MaybeHTMLElementOrSelector,
   createStatefulProps,
-  MaybeHTMLElementOrSelector, useBem,
-  useClickOutside, useDebounceFn,
+  useBem,
+  useClickOutside,
+  useDebounceFn,
   useHTMLElement,
   useHTMLElementSelector,
   useIsMounted, useStateful, useStatefulEmits, useTranslation,
 } from '../../composables'
+import { renderSlotNode } from '../../utils/headless'
 import { useKeyboardNavigation, useMouseNavigation } from './hooks/useDropdownNavigation'
-import { useAnchorSelector } from '../va-dropdown/hooks/useAnchorSelector'
+import { useAnchorSelector } from './hooks/useAnchorSelector'
 import { useCursorAnchor } from './hooks/useCursorAnchor'
-import { DropdownOffsetProp } from '../va-dropdown/types'
-import { renderSlotNode } from '../../utils/headless'
+import { DropdownOffsetProp } from './types'
+import { useDropdown } from './hooks/useDropdown'
 
 export default defineComponent({
   name: 'VaDropdown',
@@ -170,71 +173,23 @@ export default defineComponent({
       }
     })
 
-    const placementComputed = computed(() => {
-      if (props.placement === 'auto') {
-        return 'bottom'
-      }
-
-      return props.placement
-    })
-
-    const offsetComputed = computed(() => {
-      const result = { mainAxis: 0, crossAxis: 0 }
-      if (Array.isArray(props.offset)) {
-        result.mainAxis = props.offset[0]
-        result.crossAxis = props.offset[1]
-      } else {
-        result.mainAxis = props.offset
-      }
-
-      return result
-    })
-
-    const middlewareComputed = computed(() => {
-      const result = [
-        offset(offsetComputed.value),
-      ]
-
-      if (props.autoPlacement) {
-        result.push(
-          // boundary doesn't work with ssr (trying to access document)
-          flip({
-            boundary: isMounted.value ? target.value : undefined,
-          }),
-        )
-      }
-
-      if (props.stickToEdges) {
-        result.push(
-          shift(),
-        )
-      }
-
-      if (props.keepAnchorWidth) {
-        result.push(size({
-          apply ({ elements }) {
-            const reference = elements.reference
-            const availableWidth = reference.getBoundingClientRect().width
-            Object.assign(elements.floating.style, {
-              maxWidth: `${availableWidth}px`,
-            })
-          },
-        }),
-        )
-      }
-
-      return result
-    })
-
     const anchorComputed = computed(() => {
       return props.cursor ? cursorAnchor.value : anchor.value
     })
 
-    const { floatingStyles } = useFloating(anchorComputed, floating, {
-      placement: placementComputed,
-      whileElementsMounted: autoUpdate,
-      middleware: middlewareComputed,
-    })
+    const { floatingStyles } = useDropdown(
+      anchorComputed,
+      floating,
+      target,
+      isMounted,
+      computed(() => ({
+        placement: props.placement,
+        offset: props.offset,
+        autoPlacement: props.autoPlacement,
+        stickToEdges: props.stickToEdges,
+        keepAnchorWidth: props.keepAnchorWidth,
+      })),
+    )
 
     const hide = () => { valueComputed.value = false }
     const show = () => { valueComputed.value = true }
diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 9a4fb1c8e2..afe20e61e9 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -1,7 +1,8 @@
-import { computed, reactive, Ref } from 'vue'
+import { computed, ComputedRef, reactive, Ref } from 'vue'
 import { useEvent } from '../../../composables'
+import { CursorAnchor } from '../types'
 
-export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>) => {
+export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>): ComputedRef<CursorAnchor> => {
   const anchor = reactive({ x: 0, y: 0 })
   const mouse = reactive({ x: 0, y: 0 })
 
@@ -9,7 +10,7 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
     if (noUpdate.value) { return }
     mouse.x = e.clientX
     mouse.y = e.clientY
-    const { x, y } = anchorRef.value!.getBoundingClientRect()
+    const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
     anchor.x = x
     anchor.y = y
   }, anchorRef)
diff --git a/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
new file mode 100644
index 0000000000..5ccdd1ed6d
--- /dev/null
+++ b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
@@ -0,0 +1,102 @@
+import { computed, Ref, unref } from 'vue'
+import {
+  autoUpdate,
+  flip,
+  offset,
+  Placement,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/vue'
+import { CursorAnchor, DropdownOffsetProp } from '../types'
+
+type useDropdownOptions = {
+  placement: Placement | 'auto',
+  offset: DropdownOffsetProp,
+  autoPlacement: boolean,
+  stickToEdges: boolean,
+  keepAnchorWidth: boolean,
+}
+
+export const useDropdown = (
+  anchorComputed: Ref<HTMLElement| CursorAnchor | undefined>,
+  floating: Ref<HTMLElement | undefined>,
+  target: Ref<HTMLElement | undefined>,
+  isMounted: Ref<boolean>,
+  options: Ref<useDropdownOptions>,
+) => {
+  const {
+    placement,
+    offset: dropdownOffset,
+    autoPlacement,
+    stickToEdges,
+    keepAnchorWidth,
+  } = unref(options)
+
+  const placementComputed = computed(() => {
+    if (placement === 'auto') {
+      return 'bottom'
+    }
+
+    return placement
+  })
+
+  const offsetComputed = computed(() => {
+    const result = { mainAxis: 0, crossAxis: 0 }
+    if (Array.isArray(dropdownOffset)) {
+      result.mainAxis = dropdownOffset[0]
+      result.crossAxis = dropdownOffset[1]
+    }
+
+    if (typeof dropdownOffset === 'number') {
+      result.mainAxis = dropdownOffset
+    }
+
+    return result
+  })
+
+  const middlewareComputed = computed(() => {
+    const result = [
+      offset(offsetComputed.value),
+    ]
+
+    if (autoPlacement) {
+      result.push(
+        // boundary doesn't work with ssr (trying to access document)
+        flip({
+          boundary: isMounted.value ? target.value : undefined,
+        }),
+      )
+    }
+
+    if (stickToEdges) {
+      result.push(
+        shift(),
+      )
+    }
+
+    if (keepAnchorWidth) {
+      result.push(size({
+        apply ({ elements }) {
+          const reference = elements.reference
+          const availableWidth = reference.getBoundingClientRect().width
+          Object.assign(elements.floating.style, {
+            maxWidth: `${availableWidth}px`,
+          })
+        },
+      }))
+    }
+
+    return result
+  })
+
+  const { floatingStyles } = useFloating(anchorComputed, floating, {
+    placement: placementComputed,
+    whileElementsMounted: autoUpdate,
+    middleware: middlewareComputed,
+  })
+
+  return {
+    floatingStyles,
+  }
+}
diff --git a/packages/ui/src/components/va-dropdown/types.ts b/packages/ui/src/components/va-dropdown/types.ts
index f3c052f7cf..e7f98e0fcc 100644
--- a/packages/ui/src/components/va-dropdown/types.ts
+++ b/packages/ui/src/components/va-dropdown/types.ts
@@ -1 +1,15 @@
 export type DropdownOffsetProp = number | [number, number]
+
+export type CursorAnchor = {
+  getBoundingClientRect(): {
+    width: number,
+    height: number,
+    x: number,
+    y: number,
+    top: number,
+    right: number,
+    bottom: number,
+    left: number
+  },
+  contextElement: HTMLElement | undefined
+}

From f2c0a060f1297feeb4baa1925aa74bf2094d2fb2 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 14:13:13 +0200
Subject: [PATCH 32/43] rollback

---
 packages/docs/page-config/navigationRoutes.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/docs/page-config/navigationRoutes.ts b/packages/docs/page-config/navigationRoutes.ts
index 0a1282552c..e4e20bdf3b 100644
--- a/packages/docs/page-config/navigationRoutes.ts
+++ b/packages/docs/page-config/navigationRoutes.ts
@@ -277,6 +277,7 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "color-input",
         displayName: "menu.colorInput",
       },
+
       {
         category: 'menu.categories.layout',
         name: 'aspect-ratio',
@@ -380,6 +381,7 @@ export const navigationRoutes: NavigationRoute[] = [
         name: "spacer",
         displayName: "menu.spacer",
       },
+
       {
         category: "menu.categories.other",
         name: "affix",

From 9ea79f968b598eff1b40a01599529bf3bea2543b Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 14:13:47 +0200
Subject: [PATCH 33/43] rollback

---
 packages/docs/translations/en.json | 28 ----------------------------
 1 file changed, 28 deletions(-)

diff --git a/packages/docs/translations/en.json b/packages/docs/translations/en.json
index 4affa58975..088cf50882 100644
--- a/packages/docs/translations/en.json
+++ b/packages/docs/translations/en.json
@@ -1465,34 +1465,6 @@
       "methods": {},
       "slots": {}
     },
-    "VaDropdownNew": {
-      "props": {
-        "anchorSelector": "Anchor CSS selector instead of passing slot",
-        "innerAnchorSelector": "Anchor CSS selector inside passed slot",
-        "autoPlacement": "If dropdown doesn't fit viewport, it will be placed automatically to fit viewport",
-        "closeOnAnchorClick": "Dropdown will be closed when anchor is clicked",
-        "closeOnClickOutside": "Dropdown will be closed when clicked outside dropdown content and anchor",
-        "closeOnContentClick": "Dropdown will be closed when clicked inside dropdown content",
-        "cursor": "Dropdown will be rendered relative to cursor position",
-        "hoverOutTimeout": "Time in `ms` after mouse leave dropdown before it will be closed",
-        "hoverOverTimeout": "Time in `ms` after mouse enter dropdown before it will be opened",
-        "isContentHoverable": "If true, dropdown content will be hoverable",
-        "keepAnchorWidth": "If true, dropdown content will have exact same width as anchor",
-        "offset": "Dropdown content will be moved by main and cross axis according to current `placement`",
-        "placement": "Dropdown content will be placed on `placement` side of anchor",
-        "stickToEdges": "Dropdown will not be rendered outside of viewport. It will be moved in opposite direction",
-        "trigger": "Action which will open and close dropdown",
-        "target": "Dropdown content parent. Dropdown content will be attached to `target` to prevent overflow",
-        "preventOverflow": "If true, dropdown will be teleported to `target` ignoring `overflow: hidden` on relative position elements"
-      },
-      "events": {
-        "anchorClick": "The event is triggered when anchor is clicked",
-        "clickOutside": "The event is triggered when clicked outside dropdown content and anchor",
-        "contentClick": "The event is triggered when clicked inside dropdown content"
-      },
-      "methods": {},
-      "slots": {}
-    },
     "VaScrollContainer": {
       "props": {
         "horizontal": "Enables horizontal scrolling.",

From 83a743e81cb5ef6dc32a3132257a7e7ddc9b1457 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 15:31:45 +0200
Subject: [PATCH 34/43] Return VaDropdown warnings

---
 packages/ui/src/components/va-dropdown/VaDropdown.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index be41676fdd..043b68a660 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -14,6 +14,7 @@ import {
   useIsMounted, useStateful, useStatefulEmits, useTranslation,
 } from '../../composables'
 import { renderSlotNode } from '../../utils/headless'
+import { warn } from '../../utils/console'
 import { useKeyboardNavigation, useMouseNavigation } from './hooks/useDropdownNavigation'
 import { useAnchorSelector } from './hooks/useAnchorSelector'
 import { useCursorAnchor } from './hooks/useCursorAnchor'
@@ -229,6 +230,16 @@ export default defineComponent({
       ...this.$attrs,
     })
 
+    if (!anchorSlotVNode) {
+      warn('VaDropdown: You must provide an anchor slot')
+      return
+    }
+
+    if (!floatingSlotNode) {
+      warn('VaDropdown: default slot is missing')
+      return h(anchorSlotVNode)
+    }
+
     return h(Fragment, {}, [
       anchorSlotVNode,
       (this.isMounted && this.valueComputed) && h(

From 11bfcffdf54705f15571a387cf6c1c6e6037fa78 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Fri, 9 Jun 2023 15:32:42 +0200
Subject: [PATCH 35/43] Update anchor selector demo

---
 packages/ui/src/components/va-dropdown/VaDropdown.demo.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index deb21fca38..fc327824a6 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -113,6 +113,9 @@
         <va-dropdown
           anchor-selector="#anchor-selector"
         >
+          <template #anchor>
+            <div></div>
+          </template>
           Anchor selector
         </va-dropdown>
       </div>

From a28642a562a456a0259e29950b1931d886b10cc8 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 00:47:34 +0200
Subject: [PATCH 36/43] Updates after review

---
 .../src/components/va-dropdown/VaDropdown.vue | 19 +++++++++----------
 .../va-dropdown/hooks/useCursorAnchor.ts      |  7 +++++++
 .../va-dropdown/hooks/useDropdown.ts          |  3 +--
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 043b68a660..da6cdaef9e 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -78,7 +78,9 @@ export default defineComponent({
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
-    const cursorAnchor = props.cursor ? useCursorAnchor(anchor, valueComputed) : ref(undefined)
+    const cursorAnchor = computed(() => props.cursor
+      ? useCursorAnchor(anchor, valueComputed)
+      : ref(undefined))
 
     const anchorClass = useBem('va-dropdown', () => pick(props, ['disabled']))
     const isPopoverFloating = computed(() => props.preventOverflow)
@@ -174,15 +176,15 @@ export default defineComponent({
       }
     })
 
+    const cursorAnchorValue = cursorAnchor.value
     const anchorComputed = computed(() => {
-      return props.cursor ? cursorAnchor.value : anchor.value
+      return props.cursor ? cursorAnchorValue.value : anchor.value
     })
 
     const { floatingStyles } = useDropdown(
       anchorComputed,
       floating,
       target,
-      isMounted,
       computed(() => ({
         placement: props.placement,
         offset: props.offset,
@@ -212,7 +214,9 @@ export default defineComponent({
     }
   },
   render () {
-    const floatingSlotNode = renderSlotNode(this.$slots.default, {}, {
+    const showFloating = this.isMounted && this.valueComputed
+
+    const floatingSlotNode = showFloating && renderSlotNode(this.$slots.default, {}, {
       ref: 'floating',
       class: 'va-dropdown__content-wrapper',
       style: this.floatingStyles,
@@ -235,14 +239,9 @@ export default defineComponent({
       return
     }
 
-    if (!floatingSlotNode) {
-      warn('VaDropdown: default slot is missing')
-      return h(anchorSlotVNode)
-    }
-
     return h(Fragment, {}, [
       anchorSlotVNode,
-      (this.isMounted && this.valueComputed) && h(
+      (floatingSlotNode) && h(
         Teleport,
         {
           to: this.teleportTarget,
diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index afe20e61e9..9acdaf628c 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -2,6 +2,13 @@ import { computed, ComputedRef, reactive, Ref } from 'vue'
 import { useEvent } from '../../../composables'
 import { CursorAnchor } from '../types'
 
+/**
+ * Returns floating-ui compatible virtual element (https://floating-ui.com/docs/virtual-elements)
+ * Floating UI can't update position of the element that is not in the DOM, so we need to update it manually
+ * We save mouse position relatively to the anchor and recalculate it once anchor position changes
+ * @param anchorRef anchor element ref
+ * @param noUpdate flag that indicates that we should not update the position of the dropdown
+ */
 export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>): ComputedRef<CursorAnchor> => {
   const anchor = reactive({ x: 0, y: 0 })
   const mouse = reactive({ x: 0, y: 0 })
diff --git a/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
index 5ccdd1ed6d..cd50330e89 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
@@ -22,7 +22,6 @@ export const useDropdown = (
   anchorComputed: Ref<HTMLElement| CursorAnchor | undefined>,
   floating: Ref<HTMLElement | undefined>,
   target: Ref<HTMLElement | undefined>,
-  isMounted: Ref<boolean>,
   options: Ref<useDropdownOptions>,
 ) => {
   const {
@@ -64,7 +63,7 @@ export const useDropdown = (
       result.push(
         // boundary doesn't work with ssr (trying to access document)
         flip({
-          boundary: isMounted.value ? target.value : undefined,
+          boundary: typeof document === undefined ? target.value : undefined,
         }),
       )
     }

From 24bd40308f6e14ac334c3e82c21b9130415fa9ac Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 10:47:25 +0200
Subject: [PATCH 37/43] Updates after review

---
 packages/ui/src/components/va-dropdown/VaDropdown.vue  | 10 ++++------
 .../components/va-dropdown/hooks/useCursorAnchor.ts    |  8 ++++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index da6cdaef9e..cc4fe63a85 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { h, defineComponent, PropType, computed, nextTick, ref, toRef, Fragment, Teleport } from 'vue'
+import { h, defineComponent, PropType, computed, nextTick, toRef, Fragment, Teleport } from 'vue'
 import { Placement } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import pick from 'lodash/pick'
@@ -78,9 +78,6 @@ export default defineComponent({
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
-    const cursorAnchor = computed(() => props.cursor
-      ? useCursorAnchor(anchor, valueComputed)
-      : ref(undefined))
 
     const anchorClass = useBem('va-dropdown', () => pick(props, ['disabled']))
     const isPopoverFloating = computed(() => props.preventOverflow)
@@ -176,9 +173,10 @@ export default defineComponent({
       }
     })
 
-    const cursorAnchorValue = cursorAnchor.value
     const anchorComputed = computed(() => {
-      return props.cursor ? cursorAnchorValue.value : anchor.value
+      if (!props.cursor) { return anchor.value }
+
+      return useCursorAnchor(anchor, valueComputed).value
     })
 
     const { floatingStyles } = useDropdown(
diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 9acdaf628c..2743855df9 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -4,8 +4,8 @@ import { CursorAnchor } from '../types'
 
 /**
  * Returns floating-ui compatible virtual element (https://floating-ui.com/docs/virtual-elements)
- * Floating UI can't update position of the element that is not in the DOM, so we need to update it manually
- * We save mouse position relatively to the anchor and recalculate it once anchor position changes
+ * Floating UI can't update position of the element that is not in the DOM automatically, so we need to update it manually
+ * We save mouse position relatively to the anchor el and recalculate it once anchor position changes
  * @param anchorRef anchor element ref
  * @param noUpdate flag that indicates that we should not update the position of the dropdown
  */
@@ -25,6 +25,10 @@ export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdat
   return computed(() => {
     return {
       getBoundingClientRect () {
+        // mx, my - mouse position when dropdown was opened
+        // ax, ay - anchor position when dropdown was opened
+        // x, y - current anchor position
+        // shiftX, shiftY - difference between anchor position when dropdown was opened and current anchor position
         const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
         const { x: mx, y: my } = mouse
         const { x: ax, y: ay } = anchor

From d1ce32f9a5ec740827420d7a6dba6c3d699868fe Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:15:26 +0200
Subject: [PATCH 38/43] Fix overflow issues

---
 packages/ui/src/components/va-dropdown/VaDropdown.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index cc4fe63a85..e2a5305494 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -88,13 +88,16 @@ export default defineComponent({
 
       if (!isPopoverFloating.value) {
         // If not floating just render inside the parent element
-        return undefined
+        return anchor.value?.parentElement || undefined
       }
 
       return target.value
     })
 
-    const teleportDisabled = computed(() => !teleport.value)
+    const teleportDisabled = computed(() => {
+      if (teleport.value) { return false }
+      return props.disabled || !isPopoverFloating.value
+    })
     const showFloating = computed(() => isMounted.value && valueComputed.value)
 
     const { debounced: debounceHover, cancel: cancelHoverDebounce } = useDebounceFn(toRef(props, 'hoverOverTimeout'))

From c0b23de86a7d7e94707e0e790407a1cf7468b2c6 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:41:22 +0200
Subject: [PATCH 39/43] Update cursorAnchor calculations

---
 .../va-dropdown/hooks/useCursorAnchor.ts      | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 2743855df9..6e78a7d66a 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -4,38 +4,29 @@ import { CursorAnchor } from '../types'
 
 /**
  * Returns floating-ui compatible virtual element (https://floating-ui.com/docs/virtual-elements)
- * Floating UI can't update position of the element that is not in the DOM automatically, so we need to update it manually
- * We save mouse position relatively to the anchor el and recalculate it once anchor position changes
+ * Floating UI can't automatically update position of the element that is not in the DOM, so we need to update it manually
+ * We save mouse position relatively to the anchor element and recalculate it once anchor position changes
  * @param anchorRef anchor element ref
  * @param noUpdate flag that indicates that we should not update the position of the dropdown
  */
 export const useCursorAnchor = (anchorRef: Ref<HTMLElement | undefined>, noUpdate: Ref<boolean>): ComputedRef<CursorAnchor> => {
-  const anchor = reactive({ x: 0, y: 0 })
-  const mouse = reactive({ x: 0, y: 0 })
+  const position = reactive({ x: 0, y: 0 })
 
   useEvent(['mousemove', 'mousedown', 'mouseup'], (e: MouseEvent) => {
     if (noUpdate.value) { return }
-    mouse.x = e.clientX
-    mouse.y = e.clientY
     const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
-    anchor.x = x
-    anchor.y = y
+
+    position.x = e.clientX - x
+    position.y = e.clientY - y
   }, anchorRef)
 
   return computed(() => {
     return {
       getBoundingClientRect () {
-        // mx, my - mouse position when dropdown was opened
-        // ax, ay - anchor position when dropdown was opened
-        // x, y - current anchor position
-        // shiftX, shiftY - difference between anchor position when dropdown was opened and current anchor position
+        // anchor position possibly changed, we need to update the position of the floating element
         const { x, y } = anchorRef.value?.getBoundingClientRect() ?? { x: 0, y: 0 }
-        const { x: mx, y: my } = mouse
-        const { x: ax, y: ay } = anchor
-        const shiftX = ax - x
-        const shiftY = ay - y
-        const resX = mx - shiftX
-        const resY = my - shiftY
+        const resX = position.x + x
+        const resY = position.y + y
         return {
           width: 0,
           height: 0,

From aeb3892f8341f218649134a7d1a68e09ef327ad0 Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:45:49 +0200
Subject: [PATCH 40/43] Small updates

---
 packages/ui/src/components/va-dropdown/VaDropdown.demo.vue | 1 +
 packages/ui/src/components/va-dropdown/VaDropdown.vue      | 6 ++----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index fc327824a6..2412f98c91 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -97,6 +97,7 @@
             class="w-32 h-32 border-2 border-gray-1000 border-dashed"
             ref="cursorTarget"
           >
+            Right click
           </div>
         </template>
         Ctx dropdown
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index e2a5305494..6b36234e2d 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -215,9 +215,7 @@ export default defineComponent({
     }
   },
   render () {
-    const showFloating = this.isMounted && this.valueComputed
-
-    const floatingSlotNode = showFloating && renderSlotNode(this.$slots.default, {}, {
+    const floatingSlotNode = this.showFloating && renderSlotNode(this.$slots.default, {}, {
       ref: 'floating',
       class: 'va-dropdown__content-wrapper',
       style: this.floatingStyles,
@@ -231,7 +229,7 @@ export default defineComponent({
       style: { position: 'relative' },
       'aria-label': this.tp(this.$props.ariaLabel),
       'aria-disabled': this.$props.disabled,
-      'aria-expanded': !!this.showFloating.value,
+      'aria-expanded': !!this.showFloating,
       ...this.$attrs,
     })
 

From 7844dc4aae695089f1766619dd2f8c7a8b95b9af Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:51:03 +0200
Subject: [PATCH 41/43] Update after review

---
 packages/ui/src/components/va-dropdown/VaDropdown.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 6b36234e2d..c848dbcdfc 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { h, defineComponent, PropType, computed, nextTick, toRef, Fragment, Teleport } from 'vue'
+import { h, defineComponent, PropType, computed, nextTick, toRef, ref, Fragment, Teleport } from 'vue'
 import { Placement } from '@floating-ui/vue'
 import kebabCase from 'lodash/kebabCase'
 import pick from 'lodash/pick'
@@ -75,6 +75,7 @@ export default defineComponent({
     const isMounted = useIsMounted()
 
     const { anchorRef: anchor } = useAnchorSelector(props)
+    const cursorAnchor = computed(() => props.cursor ? useCursorAnchor(anchor, valueComputed).value : undefined)
     const floating = useHTMLElement('floating')
     const target = useHTMLElementSelector(computed(() => props.target || 'body'))
     const teleport = useHTMLElementSelector(computed(() => props.teleport))
@@ -177,9 +178,7 @@ export default defineComponent({
     })
 
     const anchorComputed = computed(() => {
-      if (!props.cursor) { return anchor.value }
-
-      return useCursorAnchor(anchor, valueComputed).value
+      return cursorAnchor.value || anchor.value
     })
 
     const { floatingStyles } = useDropdown(

From e2600357a4fbb53892f2a335dc745dd094f3122f Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:45:43 +0200
Subject: [PATCH 42/43] Update after review

---
 .../ui-elements/dropdown/examples/Cursor.vue     |  3 +--
 .../components/va-dropdown/VaDropdown.demo.vue   |  3 ---
 .../ui/src/components/va-dropdown/VaDropdown.vue | 13 +++++++++----
 .../va-dropdown/hooks/useAnchorSelector.ts       |  6 +++++-
 .../components/va-dropdown/hooks/useDropdown.ts  | 16 +++++-----------
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
index 3ea49990ab..077e2ee488 100644
--- a/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
+++ b/packages/docs/page-config/ui-elements/dropdown/examples/Cursor.vue
@@ -1,10 +1,9 @@
 <template>
   <va-dropdown
+    :auto-placement="false"
     placement="right-start"
     cursor
     trigger="right-click"
-    auto-placement
-    stick-to-edges
   >
     <va-dropdown-content> Contextual popover! </va-dropdown-content>
 
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
index 2412f98c91..cfd4107cab 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.demo.vue
@@ -114,9 +114,6 @@
         <va-dropdown
           anchor-selector="#anchor-selector"
         >
-          <template #anchor>
-            <div></div>
-          </template>
           Anchor selector
         </va-dropdown>
       </div>
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index c848dbcdfc..88d58c0b05 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -14,12 +14,12 @@ import {
   useIsMounted, useStateful, useStatefulEmits, useTranslation,
 } from '../../composables'
 import { renderSlotNode } from '../../utils/headless'
-import { warn } from '../../utils/console'
 import { useKeyboardNavigation, useMouseNavigation } from './hooks/useDropdownNavigation'
 import { useAnchorSelector } from './hooks/useAnchorSelector'
 import { useCursorAnchor } from './hooks/useCursorAnchor'
 import { DropdownOffsetProp } from './types'
 import { useDropdown } from './hooks/useDropdown'
+import { warn } from '../../utils/console'
 
 export default defineComponent({
   name: 'VaDropdown',
@@ -89,7 +89,7 @@ export default defineComponent({
 
       if (!isPopoverFloating.value) {
         // If not floating just render inside the parent element
-        return anchor.value?.parentElement || undefined
+        return undefined
       }
 
       return target.value
@@ -232,8 +232,13 @@ export default defineComponent({
       ...this.$attrs,
     })
 
-    if (!anchorSlotVNode) {
-      warn('VaDropdown: You must provide an anchor slot')
+    if (!this.$props.anchorSelector && !anchorSlotVNode) {
+      warn('VaDropdown: #anchor slot is missing')
+      return
+    }
+
+    if (this.showFloating && !floatingSlotNode) {
+      warn('VaDropdown: default slot is missing')
       return
     }
 
diff --git a/packages/ui/src/components/va-dropdown/hooks/useAnchorSelector.ts b/packages/ui/src/components/va-dropdown/hooks/useAnchorSelector.ts
index 7be0565220..dff4c8e776 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useAnchorSelector.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useAnchorSelector.ts
@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 
-import { useDocument, extractHTMLElement } from '../../../composables'
+import { useDocument, extractHTMLElement, useIsMounted } from '../../../composables'
 
 export const useAnchorSelector = (
   props: {
@@ -10,12 +10,16 @@ export const useAnchorSelector = (
 ) => {
   const anchorRef = ref<HTMLElement>()
   const document = useDocument()
+  const isMounted = useIsMounted()
 
   const computedAnchorRef = computed<HTMLElement | undefined>({
     set (v: HTMLElement | undefined) {
       anchorRef.value = extractHTMLElement(v)
     },
     get () {
+      // eslint-disable-next-line no-unused-expressions
+      isMounted.value // querySelector can return undefined before component mounted
+
       if (props.anchorSelector) {
         return document.value?.querySelector<HTMLElement>(props.anchorSelector) ?? anchorRef.value
       } else if (props.innerAnchorSelector && anchorRef.value) {
diff --git a/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
index cd50330e89..530c2da5c4 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useDropdown.ts
@@ -1,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, Ref } from 'vue'
 import {
   autoUpdate,
   flip,
@@ -24,23 +24,16 @@ export const useDropdown = (
   target: Ref<HTMLElement | undefined>,
   options: Ref<useDropdownOptions>,
 ) => {
-  const {
-    placement,
-    offset: dropdownOffset,
-    autoPlacement,
-    stickToEdges,
-    keepAnchorWidth,
-  } = unref(options)
-
   const placementComputed = computed(() => {
-    if (placement === 'auto') {
+    if (options.value.placement === 'auto') {
       return 'bottom'
     }
 
-    return placement
+    return options.value.placement
   })
 
   const offsetComputed = computed(() => {
+    const dropdownOffset = options.value.offset
     const result = { mainAxis: 0, crossAxis: 0 }
     if (Array.isArray(dropdownOffset)) {
       result.mainAxis = dropdownOffset[0]
@@ -55,6 +48,7 @@ export const useDropdown = (
   })
 
   const middlewareComputed = computed(() => {
+    const { autoPlacement, stickToEdges, keepAnchorWidth } = options.value
     const result = [
       offset(offsetComputed.value),
     ]

From 70e567342b99aca1d4cd0248c9cbf6d1a2cae67c Mon Sep 17 00:00:00 2001
From: ilearnjs <20753143+ilearnjs@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:53:45 +0200
Subject: [PATCH 43/43] Update comment

---
 packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
index 6e78a7d66a..a03f1d376f 100644
--- a/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
+++ b/packages/ui/src/components/va-dropdown/hooks/useCursorAnchor.ts
@@ -5,7 +5,7 @@ import { CursorAnchor } from '../types'
 /**
  * Returns floating-ui compatible virtual element (https://floating-ui.com/docs/virtual-elements)
  * Floating UI can't automatically update position of the element that is not in the DOM, so we need to update it manually
- * We save mouse position relatively to the anchor element and recalculate it once anchor position changes
+ * We save mouse position relatively to the anchor element and recalculate it once anchor position changes (after scroll/resize/...)
  * @param anchorRef anchor element ref
  * @param noUpdate flag that indicates that we should not update the position of the dropdown
  */