From 6c823fb0d128f09cc9bfc0a77c17db3ea8a32cc4 Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 15 Oct 2024 07:05:35 +0300
Subject: [PATCH 1/2] fix: do not apply extra styles when non-headless

---
 .../va-dropdown/VaDropdown.stories.ts           | 17 +++++++++++++++++
 .../src/components/va-dropdown/VaDropdown.vue   | 14 ++++++++------
 packages/ui/src/utils/headless.ts               |  7 +++++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.stories.ts b/packages/ui/src/components/va-dropdown/VaDropdown.stories.ts
index a2352393fb..0bbfaf7d66 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.stories.ts
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.stories.ts
@@ -503,3 +503,20 @@ export const ScopedAttr = () => ({
   components: { DropdownScopedAttr },
   template: '<DropdownScopedAttr/>',
 })
+
+export const Multiroot = () => ({
+  components: { VaDropdown, VaDropdownContent },
+  template: `
+    <VaDropdown>
+      <template #anchor>
+        <div>First root</div>
+        <div>Second root</div>
+      </template>
+      <VaDropdownContent>
+        <div style="height: 600px; width: 100px;">
+          Content
+        </div>
+      </VaDropdownContent>
+    </VaDropdown>
+    `,
+})
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 91a9b361b3..7991e4ad73 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -281,13 +281,15 @@ export default defineComponent({
 @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;
+
+  &.va-headless-wrapper {
+    /* Solved the alignment problem (if we try to align inline and block elements) */
+    line-height: var(--va-dropdown-line-height);
+    display: var(--va-dropdown-display);
+    max-width: 100%;
+    vertical-align: middle;
+  }
 
   &--disabled {
     @include va-disabled;
diff --git a/packages/ui/src/utils/headless.ts b/packages/ui/src/utils/headless.ts
index 83ad34219d..10e19ac339 100644
--- a/packages/ui/src/utils/headless.ts
+++ b/packages/ui/src/utils/headless.ts
@@ -1,4 +1,4 @@
-import { VNode, h, Teleport, Suspense, Comment, Fragment, Text, Slot } from 'vue'
+import { VNode, h, Teleport, Suspense, Comment, Fragment, Text, Slot, normalizeClass } from 'vue'
 
 type NodeAttributes = Record<string, any>
 
@@ -63,7 +63,10 @@ export const renderSlotNode = (slot: Slot | undefined, slotBind: any = {}, nodeA
   if (nonCommentChildren.length === 0) { return null }
   if (nonCommentChildren.length === 1) { return toNode(nonCommentChildren[0], nodeAttributes) }
 
-  return h('div', nodeAttributes, children)
+  return h('div', {
+    ...nodeAttributes,
+    class: normalizeClass([nodeAttributes.class, 'va-headless-wrapper']),
+  }, children)
 }
 
 export const renderSlotNodes = (slot: Slot | undefined, slotBind: any = {}, nodeAttributes: NodeAttributes = {}) => {

From a1640c0762ea3213dd75e77351e0d5aafde6faef Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Tue, 15 Oct 2024 08:03:01 +0300
Subject: [PATCH 2/2] fix: remove extra wrapper in button-dropdown

---
 .../va-button-dropdown/VaButtonDropdown.vue   | 138 ++++++++----------
 .../src/components/va-dropdown/VaDropdown.vue |   2 -
 2 files changed, 62 insertions(+), 78 deletions(-)

diff --git a/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue b/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue
index da9882ada6..193bd9dd84 100644
--- a/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue
+++ b/packages/ui/src/components/va-button-dropdown/VaButtonDropdown.vue
@@ -1,78 +1,78 @@
 <template>
-  <div class="va-button-dropdown" :class="computedClass">
+  <va-dropdown
+    v-if="!$props.split"
+    v-bind="vaDropdownProps"
+    v-model="valueComputed"
+    :disabled="$props.disabled || $props.disableDropdown"
+    :class="['va-button-dropdown']"
+  >
+    <template #anchor>
+      <va-button
+        :aria-label="tp($props.ariaLabel)"
+        v-bind="{ ...computedButtonIcons, ...buttonPropsComputed }"
+        v-on="listeners"
+      >
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </va-button>
+    </template>
+
+    <slot name="content">
+      <va-dropdown-content>
+        <slot />
+      </va-dropdown-content>
+    </slot>
+  </va-dropdown>
+
+  <va-button-group
+    v-else
+    v-bind="buttonPropsComputed"
+    :class="['va-button-dropdown', 'va-button-dropdown--split']"
+  >
+    <va-button
+      v-if="!$props.leftIcon"
+      :disabled="$props.disabled || $props.disableButton"
+      v-bind="computedMainButtonProps"
+      v-on="mainButtonListeners"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </va-button>
+
     <va-dropdown
-      v-if="!$props.split"
       v-bind="vaDropdownProps"
       v-model="valueComputed"
       :disabled="$props.disabled || $props.disableDropdown"
+      :teleport="$el"
     >
       <template #anchor>
         <va-button
-          :aria-label="tp($props.ariaLabel)"
-          v-bind="{ ...computedButtonIcons, ...buttonPropsComputed }"
+          :aria-label="$props.ariaLabel || t('toggleDropdown')"
+          :disabled="$props.disabled || $props.disableDropdown"
+          :icon="computedIcon"
+          :icon-color="$props.iconColor"
           v-on="listeners"
-        >
-          <slot name="label">
-            {{ label }}
-          </slot>
-        </va-button>
+          @keydown.esc.prevent="hideDropdown"
+        />
       </template>
-
-      <slot name="content">
-        <va-dropdown-content>
-          <slot />
-        </va-dropdown-content>
-      </slot>
+      <va-dropdown-content>
+        <slot />
+      </va-dropdown-content>
     </va-dropdown>
 
-    <va-button-group
-      v-else
-      v-bind="buttonPropsComputed"
+    <va-button
+      v-if="$props.leftIcon"
+      :disabled="$props.disabled || $props.disableButton"
+      v-bind="computedMainButtonProps"
+      v-on="mainButtonListeners"
     >
-      <va-button
-        v-if="!$props.leftIcon"
-        :disabled="$props.disabled || $props.disableButton"
-        v-bind="computedMainButtonProps"
-        v-on="mainButtonListeners"
-      >
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </va-button>
-
-      <va-dropdown
-        v-bind="vaDropdownProps"
-        v-model="valueComputed"
-        :disabled="$props.disabled || $props.disableDropdown"
-        :teleport="$el"
-      >
-        <template #anchor>
-          <va-button
-            :aria-label="$props.ariaLabel || t('toggleDropdown')"
-            :disabled="$props.disabled || $props.disableDropdown"
-            :icon="computedIcon"
-            :icon-color="$props.iconColor"
-            v-on="listeners"
-            @keydown.esc.prevent="hideDropdown"
-          />
-        </template>
-        <va-dropdown-content>
-          <slot />
-        </va-dropdown-content>
-      </va-dropdown>
-
-      <va-button
-        v-if="$props.leftIcon"
-        :disabled="$props.disabled || $props.disableButton"
-        v-bind="computedMainButtonProps"
-        v-on="mainButtonListeners"
-      >
-        <slot name="label">
-          {{ label }}
-        </slot>
-      </va-button>
-    </va-button-group>
-  </div>
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </va-button>
+  </va-button-group>
 </template>
 
 <script lang="ts">
@@ -147,10 +147,6 @@ const { valueComputed } = useStateful(props, emit)
 
 const computedIcon = computed(() => valueComputed.value ? props.openedIcon : props.icon)
 
-const computedClass = useBem('va-button-dropdown', () => ({
-  split: props.split,
-}))
-
 const slots = useSlots()
 
 const computedButtonIcons = computed(() => {
@@ -208,18 +204,8 @@ defineExpose({
 @import '../../styles/resources';
 
 .va-button-dropdown {
-  display: inline-block;
-  font-family: var(--va-font-family);
-  vertical-align: middle;
-
   .va-button {
     margin: var(--va-button-dropdown-button-margin);
   }
-
-  &--split {
-    .va-button {
-      @include keyboard-focus-outline($offset: -2px);
-    }
-  }
 }
 </style>
diff --git a/packages/ui/src/components/va-dropdown/VaDropdown.vue b/packages/ui/src/components/va-dropdown/VaDropdown.vue
index 7991e4ad73..6faeb67002 100644
--- a/packages/ui/src/components/va-dropdown/VaDropdown.vue
+++ b/packages/ui/src/components/va-dropdown/VaDropdown.vue
@@ -281,8 +281,6 @@ export default defineComponent({
 @import 'variables';
 
 .va-dropdown {
-  position: relative;
-
   &.va-headless-wrapper {
     /* Solved the alignment problem (if we try to align inline and block elements) */
     line-height: var(--va-dropdown-line-height);