From 8128d4432f8fce676b5b115c5831116761fd9ada Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 3 Jun 2024 17:01:00 -0400
Subject: [PATCH 01/38] feat(kpop): refactor using floating ui [KHCP-11957]

---
 package.json                 |   3 +-
 src/components/KPop/KPop.vue | 867 +++++++++++++++--------------------
 src/types/pop.ts             |  17 +-
 yarn.lock                    |  30 +-
 4 files changed, 408 insertions(+), 509 deletions(-)

diff --git a/package.json b/package.json
index 7f68741493..241bee1d4e 100644
--- a/package.json
+++ b/package.json
@@ -53,13 +53,12 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.5",
     "@kong/icons": "^1.9.2",
-    "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "focus-trap": "^7.5.4",
     "focus-trap-vue": "^4.0.3",
-    "popper.js": "^1.16.1",
     "sortablejs": "^1.15.2",
     "swrv": "^1.0.4",
     "uuid": "^9.0.1",
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index e4f5595c97..0f3bd6a6b2 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -1,41 +1,42 @@
 <template>
   <component
     :is="tag"
-    :id="targetId"
-    ref="root"
-    :aria-controls="$slots.default ? popoverId : undefined"
-    :aria-expanded="$slots.default ? (!!isOpen || undefined) : undefined"
-    :role="$slots.default ? 'button' : null"
-    @keyup.enter.stop.prevent="showPopper"
-    @keyup.esc="hidePopper"
+    ref="kPopoverElement"
+    class="k-popover"
   >
-    <slot>
-      <KButton
-        :aria-controls="popoverId || undefined"
-        :aria-expanded="!!isOpen || undefined"
-        data-testid="popover-button"
-      >
-        {{ buttonText }}
-      </KButton>
-    </slot>
+    <div
+      ref="triggerWrapperElement"
+      class="popover-trigger-wrapper"
+    >
+      <slot>
+        <KButton
+          :aria-controls="popoverId || undefined"
+          data-testid="popover-button"
+        >
+          {{ buttonText }}
+        </KButton>
+      </slot>
+    </div>
+
     <Transition name="kongponents-fade-transition">
       <div
-        v-show="isOpen"
+        v-show="isVisible"
         :id="popoverId"
-        ref="popper"
+        ref="popoverElement"
         :aria-labelledby="$slots.title || title ? titleId : undefined"
-        class="k-popover"
-        :class="popoverClassObj"
+        class="popover"
+        :class="popoverClassesObj"
         role="dialog"
         :style="popoverStyle"
+        :x-placement="placement"
       >
-        <!-- click on close button is handled by handleClick method -->
         <button
           v-if="!hideCloseIcon"
           ref="popoverCloseButton"
           class="popover-close-button"
-          :tabindex="isOpen ? 0 : -1"
+          :tabindex="isVisible ? 0 : -1"
           type="button"
+          @click="hidePopover"
         >
           <CloseIcon
             class="popover-close-icon"
@@ -74,358 +75,231 @@
   </component>
 </template>
 
-<script lang="ts">
-// TODO: Popper.js needs to be updated/replaced. For now, leave as-is without Composition API implementation
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { defineComponent } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import Popper from 'popper.js'
-import useUtilities from '@/composables/useUtilities'
-import KButton from '@/components/KButton/KButton.vue'
+import { computePosition, offset } from '@floating-ui/dom'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
+import { v4 as uuid4 } from 'uuid'
+import useUtilities from '@/composables/useUtilities'
 import { CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import type { Placement } from '@floating-ui/dom'
 
-const { getSizeFromString } = useUtilities()
-
-export default defineComponent({
-  name: 'KPop',
-  components: { KButton, CloseIcon },
-  expose: ['updatePopper'],
-  props: {
-    /**
-     * The target element to append the popper to
-     */
-    target: {
-      type: String,
-      default: '',
-    },
-    /**
-     * The tag to wrap the popover around
-     */
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    /**
-     * If not using the default slot, the text on the button
-     * that triggers the popover
-     */
-    buttonText: {
-      type: String,
-      default: '',
-    },
-    /**
-     * The title of the Popover header
-     */
-    title: {
-      type: String,
-      default: '',
-    },
-    /**
-     * The position of the popover
-     * 'top' | 'bottom' | 'left' | 'right'
-     */
-    placement: {
-      type: String as PropType<PopPlacements>,
-      validator: (value: PopPlacements): boolean => PopPlacementsArray.includes(value),
-      default: 'auto',
-    },
-    /**
-     * How the Popover will trigger
-     * 'click' | 'hover'
-     */
-    trigger: {
-      type: String as PropType<PopTrigger>,
-      default: 'click',
-      validator: (value: PopTrigger): boolean => PopTriggerArray.includes(value),
-    },
-    /**
-     * The width of the Popover body
-     */
-    width: {
-      type: String,
-      default: '200',
-    },
-    /**
-     * Set the max-width of the popover
-     */
-    maxWidth: {
-      type: String,
-      default: 'auto',
-    },
-    /**
-     * The maxHeight of the Popover body - undocumented and only used within KSelect
-     */
-    maxHeight: {
-      type: String,
-      default: 'auto',
-    },
-    /**
-     * Custom classes that will be applied to the popover
-     */
-    popoverClasses: {
-      type: String,
-      default: '',
-    },
-    /**
-    * Custom popover timeout setting
-     */
-    popoverTimeout: {
-      type: Number,
-      default: 300,
-    },
-    /**
-     * An optional flag passed in to trigger the Popover to hide - useful for external events like zooming or panning
-     */
-    hidePopover: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * A flag for disabling the popover
-     */
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * A flag to hide the triangle pointing to the trigger element
-     */
-    hideCaret: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Whether popover should be closed when popover content is clicked
-     */
-    closeOnPopoverClick: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-     */
-    positionFixed: {
-      type: Boolean,
-      default: true,
-    },
-    /**
-     * z-index - to control z-index value of the popover
-     */
-    zIndex: {
-      type: Number,
-      default: 1000,
-    },
-    hideCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  buttonText: {
+    type: String,
+    default: '',
   },
-  emits: ['open', 'close', 'popover-click'],
-  data() {
-    return {
-      popper: null,
-      reference: null,
-      isOpen: false,
-      popoverId: uuidv4(),
-      targetId: uuidv4(),
-      titleId: uuidv4(),
-      KUI_ICON_SIZE_30,
-    }
+  title: {
+    type: String,
+    default: '',
   },
-  computed: {
-    popoverStyle: function() {
-      return {
-        width: getSizeFromString(this.width),
-        maxWidth: getSizeFromString(this.maxWidth),
-        maxHeight: getSizeFromString(this.maxHeight),
-      }
-    },
-    popoverClassObj: function() {
-      return [this.popoverClasses, { 'hide-caret': this.hideCaret }]
-    },
+  placement: {
+    type: String as PropType<PopPlacements>,
+    validator: (value: PopPlacements): boolean => PopPlacementsArray.includes(value),
+    default: 'bottom',
   },
-  watch: {
-    hidePopover: function() {
-      // whenever this prop gets updated, hide the popper
-      if (this.isOpen) {
-        this.hidePopper()
-      }
-    },
-    disabled: {
-      handler() {
-        if (this.isOpen) {
-          this.hidePopper()
-        }
-      },
-      immediate: true,
-    },
+  trigger: {
+    type: String as PropType<PopTrigger>,
+    default: 'click',
+    validator: (value: PopTrigger): boolean => PopTriggerArray.includes(value),
   },
-  mounted() {
-    if (!this.$el.children) {
-      this.reference = this.$el
-    } else {
-      this.reference = this.$el.children[0]
-    }
-    this.bindEvents()
+  popoverTimeout: {
+    type: Number,
+    default: 300,
+  },
+  hideCloseIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideCaret: {
+    type: Boolean,
+    default: false,
+  },
+  closeOnPopoverClick: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  beforeUnmount() {
-    const popper = this.$refs.popper
+  width: {
+    type: String,
+    default: '200',
+  },
+  maxWidth: {
+    type: String,
+    default: 'auto',
+  },
+  maxHeight: {
+    type: String,
+    default: 'auto',
+  },
+  popoverClasses: {
+    type: String,
+    default: '',
+  },
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  zIndex: {
+    type: Number,
+    default: 1000,
+  },
+})
 
-    if (document) {
-      document.documentElement.removeEventListener('click', this.handleClick)
-    }
+const emit = defineEmits(['open', 'close', 'popover-click'])
 
-    if (popper) {
-      popper.removeEventListener('click', this.onPopperContentClick)
-      popper.removeEventListener('mouseenter', this.showPopper)
-      popper.removeEventListener('focusin', this.showPopper)
-      popper.removeEventListener('mouseleave', this.hidePopper)
-      popper.removeEventListener('focusout', this.hidePopper)
-    }
+const { getSizeFromString } = useUtilities()
+
+const popoverId = uuid4()
+const titleId = uuid4()
+const kPopoverElement = ref<HTMLElement | null>(null)
+const triggerWrapperElement = ref<HTMLElement | null>(null)
+const popoverElement = ref<HTMLElement | null>(null)
+const isVisible = ref<boolean>(false)
+
+const popoverTrigger = computed((): HTMLElement | null => triggerWrapperElement.value && triggerWrapperElement.value?.children[0] ? triggerWrapperElement.value?.children[0] as HTMLElement : null)
 
-    if (this.reference) {
-      this.reference.removeEventListener('mouseenter', this.createInstance)
-      this.reference.removeEventListener('mouseleave', this.toggle)
-      this.reference.removeEventListener('focus', this.createInstance)
-      this.reference.removeEventListener('blur', this.toggle)
+const timer = ref<number | null>(null)
+
+const togglePopover = () => {
+  if (!props.disabled) {
+    if (!isVisible.value) {
+      isVisible.value = true
+    } else {
+      hidePopover()
     }
+  }
+}
 
-    this.destroy()
-  },
-  methods: {
-    hidePopper() {
-      if (this.trigger !== 'hover') {
-        this.isOpen = false
-      }
+const showPopover = () => {
+  if (timer.value) {
+    clearTimeout(timer.value)
+  }
 
-      this.timer = setTimeout(() => {
-        this.$emit('close')
-        this.destroy()
-      }, this.popoverTimeout)
-    },
-    showPopper() {
-      if (this.disabled) return
-      if (this.timer) clearTimeout(this.timer)
-      if (this.popperTimer) clearTimeout(this.popperTimer)
-      if (!this.isOpen) {
-        this.isOpen = true
-        this.$emit('open')
-      }
-    },
-    onPopperContentClick(e) {
-      if (e.target !== this.$refs.popoverCloseButton) {
-        this.$emit('popover-click')
-      }
-    },
-    updatePopper() {
-      if (this.popper && typeof this.popper.update === 'function') {
-        this.popper.update()
-      }
-    },
-    async createInstance() {
-      // destroy any previous poppers before creating new one
-      this.destroy()
-      this.showPopper()
-      const placement = (this.placement || 'auto').replace(/[A-Z]/g, '-$&').toLowerCase()
-      const popperEl = this.$refs.popper
-      let theTarget = null
-      if (document) {
-        theTarget = (this.target && !!document.querySelector(this.target))
-          ? document.querySelector(this.target)
-          : document.getElementById(this.targetId)
-      }
+  isVisible.value = true
+}
 
-      if (theTarget) {
-        theTarget.appendChild(popperEl)
-        // Hide overflow to prevent page jump
-        theTarget.style.overflow = 'auto'
-      }
+const hidePopover = () => {
+  timer.value = setTimeout(() => {
+    isVisible.value = false
+  }, props.trigger === 'hover' ? props.popoverTimeout : 0)
+}
 
-      await this.$nextTick()
-      this.popper = new Popper(this.reference, popperEl, {
-        placement,
-        // Use positionFixed to avoid popover content being cut off by parent boundaries
-        positionFixed: this.positionFixed,
-        modifiers: {
-          // Ensures element does not ovflow outside of boundary
-          preventOverflow: {
-            enabled: true,
-            boundariesElement: 'viewport',
-          },
-        },
-      })
-      await this.$nextTick()
-      if (theTarget) {
-        // Remove overflow attribute now that rendering is complete
-        theTarget.style.removeProperty('overflow')
-      }
-      this.updatePopper()
-    },
-    handleClick(e) {
-      const hidePopperAndStopPropagation = () => {
-        // Stop event propagation only when the click event is about to hide popper
-        e.stopPropagation()
-        this.hidePopper()
-      }
+const onPopoverClick = () => {
+  if (props.closeOnPopoverClick) {
+    hidePopover()
+  }
+
+  emit('popover-click')
+}
+
+const clickHandler = (event: Event) => {
+  const target = event.target as HTMLElement
 
-      if (e.target === this.$refs.popoverCloseButton) {
-        hidePopperAndStopPropagation()
+  if (!kPopoverElement.value?.contains(target)) {
+    hidePopover()
+  }
+}
+
+const updatePosition = () => {
+  if (popoverTrigger.value && popoverElement.value) {
+    computePosition(popoverTrigger.value, popoverElement.value, {
+      placement: props.placement as Placement,
+      middleware: [
+        // only need the offset for top and left placements
+        ...(props.placement.includes('top') || props.placement.includes('left') ? [offset(10)] : []),
+      ],
+    }).then(({ x, y }) => {
+      if (popoverElement.value) {
+        Object.assign(popoverElement.value.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+          position: 'fixed',
+        })
       }
+    })
+  }
+}
 
-      if (this.reference && this.reference.contains(e.target) && (this.$refs.popper && !this.$refs.popper.contains(e.target))) {
-        // If the click is on or within the trigger element and not on the popover element
-        if (this.isOpen) {
-          hidePopperAndStopPropagation()
-        } else {
-          this.createInstance()
-        }
-      } else if (this.$refs.popper && this.$refs.popper.contains(e.target)) {
-        // If the click is on or within the popover element
-        if (this.closeOnPopoverClick) {
-          hidePopperAndStopPropagation()
-        }
-      } else if (this.isOpen) {
-        // Click outside
-        hidePopperAndStopPropagation()
+const popoverStyle = computed(() => {
+  return {
+    width: getSizeFromString(props.width),
+    maxWidth: getSizeFromString(props.maxWidth),
+    maxHeight: getSizeFromString(props.maxHeight),
+  }
+})
+
+const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
+
+onMounted(() => {
+  if (document) {
+    document.addEventListener('click', clickHandler)
+
+    if (popoverTrigger.value) {
+      if (props.trigger === 'hover') {
+        popoverTrigger.value.addEventListener('mouseenter', showPopover)
+        popoverTrigger.value.addEventListener('mouseleave', hidePopover)
+      } else {
+        popoverTrigger.value.addEventListener('click', togglePopover)
       }
-    },
-    bindEvents() {
-      const popper = this.$refs.popper
-      if (popper) {
-        if (this.trigger === 'hover') {
-          this.reference.addEventListener('mouseenter', this.createInstance)
-          this.reference.addEventListener('focus', this.createInstance)
-          this.reference.addEventListener('mouseleave', this.hidePopper)
-          this.reference.addEventListener('blur', this.hidePopper)
-          popper.addEventListener('mouseenter', this.showPopper)
-          // this is important event listener that allows to keyboard navigate through the popover without closing it
-          popper.addEventListener('focusin', this.showPopper)
-          popper.addEventListener('mouseleave', this.hidePopper)
-          // has to come in pair with focusin
-          popper.addEventListener('focusout', this.hidePopper)
-        }
+    }
+
+    if (popoverElement.value) {
+      popoverElement.value.addEventListener('click', onPopoverClick)
 
-        popper.addEventListener('click', this.onPopperContentClick)
+      if (props.trigger === 'hover') {
+        popoverElement.value.addEventListener('mouseenter', showPopover)
+        popoverElement.value.addEventListener('mouseleave', hidePopover)
       }
+    }
+  }
+})
 
-      if (document) {
-        document.documentElement.addEventListener('click', this.handleClick)
+onBeforeUnmount(() => {
+  if (document) {
+    document.removeEventListener('click', clickHandler)
+
+    if (popoverTrigger.value) {
+      if (props.trigger === 'hover') {
+        popoverTrigger.value.removeEventListener('mouseenter', showPopover)
+        popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
+      } else {
+        popoverTrigger.value.removeEventListener('click', togglePopover)
       }
-    },
-    destroy() {
-      if (this.popper) {
-        this.isOpen = false
-        this.popper.disableEventListeners()
-        this.popper = null
+    }
+
+    if (popoverElement.value) {
+      popoverElement.value.removeEventListener('click', onPopoverClick)
+
+      if (props.trigger === 'hover') {
+        popoverElement.value.removeEventListener('mouseenter', showPopover)
+        popoverElement.value.removeEventListener('mouseleave', hidePopover)
       }
-    },
-  },
+    }
+  }
+
+  if (popoverElement.value) {
+    popoverElement.value.remove()
+  }
+})
+
+watch(isVisible, async (val) => {
+  if (val) {
+    updatePosition()
+    emit('open')
+  } else {
+    emit('close')
+  }
+})
+
+defineExpose({
+  hidePopover,
 })
 </script>
 
@@ -438,6 +312,15 @@ $kPopCaretOffset: 16px;
 
 /* Component mixins */
 
+@mixin popoverInitialStyles {
+  // needs to be set for positioning to work smoothly
+  // https://floating-ui.com/docs/computePosition#initial-layout
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: max-content;
+}
+
 @mixin kPopCaret {
   &:after, &:before {
     border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
@@ -461,195 +344,203 @@ $kPopCaretOffset: 16px;
 
 /* Component styles */
 
-.k-popover, :deep(.k-popover) {
-  background-color: var(--kui-color-background, $kui-color-background);
-  border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
-  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-  box-shadow: var(--kui-shadow, $kui-shadow);
-  display: flex;
-  flex-direction: column;
-  font-family: var(--kui-font-family-text, $kui-font-family-text);
-  gap: var(--kui-space-40, $kui-space-40);
-  max-width: none;
-  padding: var(--kui-space-60, $kui-space-60);
-  position: relative;
-  text-align: left;
-  white-space: normal;
-  z-index: v-bind('zIndex');
-
-  .popover-close-button {
-    @include defaultButtonReset;
-
-    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-    margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
-    outline: none;
-    position: absolute;
-    right: 0;
-    top: 0;
+.k-popover {
+  .popover-trigger-wrapper {
+    display: inline-block;
+  }
 
-    &:hover, &:focus {
-      color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
-    }
+  .popover {
+    @include popoverInitialStyles;
 
-    &:focus-visible {
-      box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
-    }
+    background-color: var(--kui-color-background, $kui-color-background);
+    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+    box-shadow: var(--kui-shadow, $kui-shadow);
+    display: flex;
+    flex-direction: column;
+    font-family: var(--kui-font-family-text, $kui-font-family-text);
+    gap: var(--kui-space-40, $kui-space-40);
+    max-width: none;
+    padding: var(--kui-space-60, $kui-space-60);
+    position: relative;
+    text-align: left;
+    white-space: normal;
+    z-index: v-bind('zIndex');
+
+    .popover-close-button {
+      @include defaultButtonReset;
+
+      border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+      color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+      margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
+      outline: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      &:hover, &:focus {
+        color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+      }
+
+      &:focus-visible {
+        box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+      }
 
-    .popover-close-icon {
-      pointer-events: none;
+      .popover-close-icon {
+        pointer-events: none;
+      }
     }
-  }
 
-  .popover-header {
-    align-items: baseline;
-    display: flex;
+    .popover-header {
+      align-items: baseline;
+      display: flex;
 
-    .popover-title {
-      color: var(--kui-color-text, $kui-color-text);
-      font-size: var(--kui-font-size-40, $kui-font-size-40);
-      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
-      line-height: var(--kui-line-height-30, $kui-line-height-30);
+      .popover-title {
+        color: var(--kui-color-text, $kui-color-text);
+        font-size: var(--kui-font-size-40, $kui-font-size-40);
+        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+        line-height: var(--kui-line-height-30, $kui-line-height-30);
 
-      &.close-icon-spacing {
-        margin-right: var(--kui-space-60, $kui-space-60);
+        &.close-icon-spacing {
+          margin-right: var(--kui-space-60, $kui-space-60);
+        }
       }
     }
-  }
 
-  .popover-content {
-    color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
-    font-size: var(--kui-font-size-20, $kui-font-size-20);
-    font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-    line-height: var(--kui-line-height-20, $kui-line-height-20);
+    .popover-content {
+      color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
+      font-size: var(--kui-font-size-20, $kui-font-size-20);
+      font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+      line-height: var(--kui-line-height-20, $kui-line-height-20);
 
-    &.close-icon-spacing {
-      margin-right: var(--kui-space-60, $kui-space-60);
+      &.close-icon-spacing {
+        margin-right: var(--kui-space-60, $kui-space-60);
+      }
     }
-  }
 
-  .popover-footer {
-    align-items: center;
-    display: flex;
-    gap: var(--kui-space-40, $kui-space-40);
-  }
+    .popover-footer {
+      align-items: center;
+      display: flex;
+      gap: var(--kui-space-40, $kui-space-40);
+    }
 
-  // placement and caret styles
+    // placement and caret styles
 
-  &[x-placement^="bottom"] {
-    margin-top: var(--kui-space-50, $kui-space-50);
+    &[x-placement^="bottom"] {
+      margin-top: var(--kui-space-50, $kui-space-50);
 
-    @include kPopCaret;
+      @include kPopCaret;
 
-    &:after, &:before {
-      bottom: 100%;
-      left: 50%;
-    }
+      &:after, &:before {
+        bottom: 100%;
+        left: 50%;
+      }
 
-    &:after {
-      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-      border-bottom-color: var(--kui-color-background, $kui-color-background);
-    }
+      &:after {
+        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+        border-bottom-color: var(--kui-color-background, $kui-color-background);
+      }
 
-    &:before {
-      border-bottom-color: var(--kui-color-border, $kui-color-border);
+      &:before {
+        border-bottom-color: var(--kui-color-border, $kui-color-border);
+      }
     }
-  }
 
-  &[x-placement^="top"] {
-    margin-bottom: var(--kui-space-60, $kui-space-60);
+    &[x-placement^="top"] {
+      margin-bottom: var(--kui-space-60, $kui-space-60);
 
-    @include kPopCaret;
+      @include kPopCaret;
 
-    &:after, &:before {
-      left: 50%;
-      top: 100%;
-    }
+      &:after, &:before {
+        left: 50%;
+        top: 100%;
+      }
 
-    &:after {
-      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-      border-top-color: var(--kui-color-background, $kui-color-background);
-    }
+      &:after {
+        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+        border-top-color: var(--kui-color-background, $kui-color-background);
+      }
 
-    &:before {
-      border-top-color: var(--kui-color-border, $kui-color-border);
+      &:before {
+        border-top-color: var(--kui-color-border, $kui-color-border);
+      }
     }
-  }
 
-  &[x-placement^="left"] {
-    margin-right: var(--kui-space-60, $kui-space-60);
+    &[x-placement^="left"] {
+      margin-right: var(--kui-space-60, $kui-space-60);
 
-    @include kPopCaret;
+      @include kPopCaret;
 
-    &:after, &:before {
-      left: 100%;
-      top: 50%;
-      transform: translate(50%, -50%);
-    }
+      &:after, &:before {
+        left: 100%;
+        top: 50%;
+        transform: translate(50%, -50%);
+      }
 
-    &:after {
-      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-      border-left-color: var(--kui-color-background, $kui-color-background);
-    }
+      &:after {
+        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+        border-left-color: var(--kui-color-background, $kui-color-background);
+      }
 
-    &:before {
-      border-left-color: var(--kui-color-border, $kui-color-border);
+      &:before {
+        border-left-color: var(--kui-color-border, $kui-color-border);
+      }
     }
-  }
 
-  &[x-placement^="right"] {
-    margin-left: var(--kui-space-60, $kui-space-60);
+    &[x-placement^="right"] {
+      margin-left: var(--kui-space-60, $kui-space-60);
 
-    @include kPopCaret;
+      @include kPopCaret;
 
-    &:after, &:before {
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-    }
+      &:after, &:before {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
 
-    &:after {
-      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-      border-right-color: var(--kui-color-background, $kui-color-background);
-    }
+      &:after {
+        /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+        border-right-color: var(--kui-color-background, $kui-color-background);
+      }
 
-    &:before {
-      border-right-color: var(--kui-color-border, $kui-color-border);
+      &:before {
+        border-right-color: var(--kui-color-border, $kui-color-border);
+      }
     }
-  }
 
-  &[x-placement^="top-start"],
-  &[x-placement^="bottom-start"] {
-    &:after, &:before {
-      left: $kPopCaretOffset;
+    &[x-placement^="top-start"],
+    &[x-placement^="bottom-start"] {
+      &:after, &:before {
+        left: $kPopCaretOffset;
+      }
     }
-  }
 
-  &[x-placement^="top-end"],
-  &[x-placement^="bottom-end"] {
-    &:after, &:before {
-      left: calc(100% - $kPopCaretOffset);
+    &[x-placement^="top-end"],
+    &[x-placement^="bottom-end"] {
+      &:after, &:before {
+        left: calc(100% - $kPopCaretOffset);
+      }
     }
-  }
 
-  &[x-placement^="right-start"],
-  &[x-placement^="left-start"] {
-    &:after, &:before {
-      top: $kPopCaretOffset;
+    &[x-placement^="right-start"],
+    &[x-placement^="left-start"] {
+      &:after, &:before {
+        top: $kPopCaretOffset;
+      }
     }
-  }
 
-  &[x-placement^="right-end"],
-  &[x-placement^="left-end"] {
-    &:after, &:before {
-      top: calc(100% - $kPopCaretOffset);
+    &[x-placement^="right-end"],
+    &[x-placement^="left-end"] {
+      &:after, &:before {
+        top: calc(100% - $kPopCaretOffset);
+      }
     }
-  }
 
-  &.hide-caret {
-    &:after,
-    &:before {
-      display: none;
+    &.hide-caret {
+      &:after,
+      &:before {
+        display: none;
+      }
     }
   }
 }
diff --git a/src/types/pop.ts b/src/types/pop.ts
index 2c63536f68..4afcb53c16 100644
--- a/src/types/pop.ts
+++ b/src/types/pop.ts
@@ -5,19 +5,18 @@ export const PopTriggerArray = ['click', 'hover'] as const
 export type PopTrigger = AnyElementOf<typeof PopTriggerArray>
 
 export const PopPlacementsArray = [
-  'auto',
   'top',
-  'topStart',
-  'topEnd',
+  'top-start',
+  'top-end',
   'left',
-  'leftStart',
-  'leftEnd',
+  'left-start',
+  'left-end',
   'right',
-  'rightStart',
-  'rightEnd',
+  'right-start',
+  'right-end',
   'bottom',
-  'bottomStart',
-  'bottomEnd',
+  'bottom-start',
+  'bottom-end',
 ] as const
 
 export type PopPlacements = AnyElementOf<typeof PopPlacementsArray>
diff --git a/yarn.lock b/yarn.lock
index c07f09cab7..81135a2584 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1026,6 +1026,26 @@
   resolved "https://registry.yarnpkg.com/@evilmartians/lefthook/-/lefthook-1.6.13.tgz#dd2c1f771acd7f5ff2249a3d85fe4b975d3b9b6a"
   integrity sha512-w89+h5IXkGzJQwxVycgDuVGAQkERKeB084lNdE/2Ree2e1TCFCWtXZxkrzuvFICcEXwDGiElvZbwRE/wnrqUKQ==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.2.tgz#d37f3e0ac1f1c756c7de45db13303a266226851a"
+  integrity sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.6.5":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
+  integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
+  integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
+
 "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1473,11 +1493,6 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
-"@popperjs/core@^2.11.8":
-  version "2.11.8"
-  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
-  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
-
 "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
@@ -7333,11 +7348,6 @@ plimit-lit@^1.2.6:
   dependencies:
     queue-lit "^1.5.0"
 
-popper.js@^1.16.1:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 postcss-cli@^11.0.0:
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-11.0.0.tgz#649f4b9af447501feb6cbca7f7505a132f90442b"

From d73838523029236e80635f2e319addd21dccf4d0 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 11:09:23 -0400
Subject: [PATCH 02/38] fix(kpop): refactor using @floating-ui/vue [KHCP-11957]

---
 package.json                 |   3 +-
 src/components/KPop/KPop.vue | 258 ++++++++++++++++-------------------
 yarn.lock                    |  23 +++-
 3 files changed, 139 insertions(+), 145 deletions(-)

diff --git a/package.json b/package.json
index 241bee1d4e..4eee8a6804 100644
--- a/package.json
+++ b/package.json
@@ -53,8 +53,9 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.5",
+    "@floating-ui/vue": "^1.0.6",
     "@kong/icons": "^1.9.2",
+    "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "focus-trap": "^7.5.4",
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 0f3bd6a6b2..6247a144db 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -30,45 +30,47 @@
         :style="popoverStyle"
         :x-placement="placement"
       >
-        <button
-          v-if="!hideCloseIcon"
-          ref="popoverCloseButton"
-          class="popover-close-button"
-          :tabindex="isVisible ? 0 : -1"
-          type="button"
-          @click="hidePopover"
-        >
-          <CloseIcon
-            class="popover-close-icon"
-            :size="KUI_ICON_SIZE_30"
-          />
-        </button>
-        <div
-          v-if="$slots.title || title"
-          class="popover-header"
-        >
+        <div class="popover-container">
+          <button
+            v-if="!hideCloseIcon"
+            ref="popoverCloseButton"
+            class="popover-close-button"
+            :tabindex="isVisible ? 0 : -1"
+            type="button"
+            @click="hidePopover"
+          >
+            <CloseIcon
+              class="popover-close-icon"
+              :size="KUI_ICON_SIZE_30"
+            />
+          </button>
           <div
             v-if="$slots.title || title"
-            :id="titleId"
-            class="popover-title"
-            :class="{ 'close-icon-spacing': !hideCloseIcon }"
+            class="popover-header"
           >
-            <slot name="title">
-              {{ title }}
-            </slot>
+            <div
+              v-if="$slots.title || title"
+              :id="titleId"
+              class="popover-title"
+              :class="{ 'close-icon-spacing': !hideCloseIcon }"
+            >
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </div>
+          </div>
+          <div
+            class="popover-content"
+            :class="{ 'close-icon-spacing': !hideCloseIcon && !($slots.title || title) }"
+          >
+            <slot name="content" />
+          </div>
+          <div
+            v-if="$slots.footer"
+            class="popover-footer"
+          >
+            <slot name="footer" />
           </div>
-        </div>
-        <div
-          class="popover-content"
-          :class="{ 'close-icon-spacing': !hideCloseIcon && !($slots.title || title) }"
-        >
-          <slot name="content" />
-        </div>
-        <div
-          v-if="$slots.footer"
-          class="popover-footer"
-        >
-          <slot name="footer" />
         </div>
       </div>
     </Transition>
@@ -78,14 +80,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { computePosition, offset } from '@floating-ui/dom'
+import { useFloating } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
 import { v4 as uuid4 } from 'uuid'
 import useUtilities from '@/composables/useUtilities'
 import { CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
-import type { Placement } from '@floating-ui/dom'
 
 const props = defineProps({
   buttonText: {
@@ -207,26 +208,6 @@ const clickHandler = (event: Event) => {
   }
 }
 
-const updatePosition = () => {
-  if (popoverTrigger.value && popoverElement.value) {
-    computePosition(popoverTrigger.value, popoverElement.value, {
-      placement: props.placement as Placement,
-      middleware: [
-        // only need the offset for top and left placements
-        ...(props.placement.includes('top') || props.placement.includes('left') ? [offset(10)] : []),
-      ],
-    }).then(({ x, y }) => {
-      if (popoverElement.value) {
-        Object.assign(popoverElement.value.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-          position: 'fixed',
-        })
-      }
-    })
-  }
-}
-
 const popoverStyle = computed(() => {
   return {
     width: getSizeFromString(props.width),
@@ -238,6 +219,11 @@ const popoverStyle = computed(() => {
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
 onMounted(() => {
+  useFloating(popoverTrigger, popoverElement, {
+    placement: props.placement,
+    strategy: 'fixed',
+  })
+
   if (document) {
     document.addEventListener('click', clickHandler)
 
@@ -283,15 +269,10 @@ onBeforeUnmount(() => {
       }
     }
   }
-
-  if (popoverElement.value) {
-    popoverElement.value.remove()
-  }
 })
 
 watch(isVisible, async (val) => {
   if (val) {
-    updatePosition()
     emit('open')
   } else {
     emit('close')
@@ -312,15 +293,6 @@ $kPopCaretOffset: 16px;
 
 /* Component mixins */
 
-@mixin popoverInitialStyles {
-  // needs to be set for positioning to work smoothly
-  // https://floating-ui.com/docs/computePosition#initial-layout
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: max-content;
-}
-
 @mixin kPopCaret {
   &:after, &:before {
     border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
@@ -350,87 +322,89 @@ $kPopCaretOffset: 16px;
   }
 
   .popover {
-    @include popoverInitialStyles;
-
-    background-color: var(--kui-color-background, $kui-color-background);
-    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
-    border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
-    box-shadow: var(--kui-shadow, $kui-shadow);
-    display: flex;
-    flex-direction: column;
-    font-family: var(--kui-font-family-text, $kui-font-family-text);
-    gap: var(--kui-space-40, $kui-space-40);
-    max-width: none;
-    padding: var(--kui-space-60, $kui-space-60);
-    position: relative;
-    text-align: left;
-    white-space: normal;
     z-index: v-bind('zIndex');
 
-    .popover-close-button {
-      @include defaultButtonReset;
+    // need to wrap popover content in a container because we cannot set position: relative; as that will break the floating positioning
+    .popover-container {
+      background-color: var(--kui-color-background, $kui-color-background);
+      border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+      border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+      box-shadow: var(--kui-shadow, $kui-shadow);
+      display: flex;
+      flex-direction: column;
+      font-family: var(--kui-font-family-text, $kui-font-family-text);
+      gap: var(--kui-space-40, $kui-space-40);
+      max-width: none;
+      padding: var(--kui-space-60, $kui-space-60);
+      position: relative;
+      text-align: left;
+      white-space: normal;
+
+      .popover-close-button {
+        @include defaultButtonReset;
+
+        border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+        color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+        margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
+        outline: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        &:hover, &:focus {
+          color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+        }
 
-      border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-      color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-      margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
-      outline: none;
-      position: absolute;
-      right: 0;
-      top: 0;
+        &:focus-visible {
+          box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+        }
 
-      &:hover, &:focus {
-        color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+        .popover-close-icon {
+          pointer-events: none;
+        }
       }
 
-      &:focus-visible {
-        box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
-      }
+      .popover-header {
+        align-items: baseline;
+        display: flex;
 
-      .popover-close-icon {
-        pointer-events: none;
-      }
-    }
+        .popover-title {
+          color: var(--kui-color-text, $kui-color-text);
+          font-size: var(--kui-font-size-40, $kui-font-size-40);
+          font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+          line-height: var(--kui-line-height-30, $kui-line-height-30);
 
-    .popover-header {
-      align-items: baseline;
-      display: flex;
+          &.close-icon-spacing {
+            margin-right: var(--kui-space-60, $kui-space-60);
+          }
+        }
+      }
 
-      .popover-title {
-        color: var(--kui-color-text, $kui-color-text);
-        font-size: var(--kui-font-size-40, $kui-font-size-40);
-        font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
-        line-height: var(--kui-line-height-30, $kui-line-height-30);
+      .popover-content {
+        color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
+        font-size: var(--kui-font-size-20, $kui-font-size-20);
+        font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+        line-height: var(--kui-line-height-20, $kui-line-height-20);
 
         &.close-icon-spacing {
           margin-right: var(--kui-space-60, $kui-space-60);
         }
       }
-    }
-
-    .popover-content {
-      color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
-      font-size: var(--kui-font-size-20, $kui-font-size-20);
-      font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-      line-height: var(--kui-line-height-20, $kui-line-height-20);
 
-      &.close-icon-spacing {
-        margin-right: var(--kui-space-60, $kui-space-60);
+      .popover-footer {
+        align-items: center;
+        display: flex;
+        gap: var(--kui-space-40, $kui-space-40);
       }
     }
 
-    .popover-footer {
-      align-items: center;
-      display: flex;
-      gap: var(--kui-space-40, $kui-space-40);
-    }
-
     // placement and caret styles
 
-    &[x-placement^="bottom"] {
-      margin-top: var(--kui-space-50, $kui-space-50);
-
+    &[x-placement^="bottom"] .popover-container {
       @include kPopCaret;
 
+      margin-top: var(--kui-space-50, $kui-space-50);
+
       &:after, &:before {
         bottom: 100%;
         left: 50%;
@@ -446,7 +420,7 @@ $kPopCaretOffset: 16px;
       }
     }
 
-    &[x-placement^="top"] {
+    &[x-placement^="top"] .popover-container {
       margin-bottom: var(--kui-space-60, $kui-space-60);
 
       @include kPopCaret;
@@ -466,7 +440,7 @@ $kPopCaretOffset: 16px;
       }
     }
 
-    &[x-placement^="left"] {
+    &[x-placement^="left"] .popover-container {
       margin-right: var(--kui-space-60, $kui-space-60);
 
       @include kPopCaret;
@@ -487,7 +461,7 @@ $kPopCaretOffset: 16px;
       }
     }
 
-    &[x-placement^="right"] {
+    &[x-placement^="right"] .popover-container {
       margin-left: var(--kui-space-60, $kui-space-60);
 
       @include kPopCaret;
@@ -508,35 +482,35 @@ $kPopCaretOffset: 16px;
       }
     }
 
-    &[x-placement^="top-start"],
-    &[x-placement^="bottom-start"] {
+    &[x-placement^="top-start"] .popover-container,
+    &[x-placement^="bottom-start"] .popover-container {
       &:after, &:before {
         left: $kPopCaretOffset;
       }
     }
 
-    &[x-placement^="top-end"],
-    &[x-placement^="bottom-end"] {
+    &[x-placement^="top-end"] .popover-container,
+    &[x-placement^="bottom-end"] .popover-container {
       &:after, &:before {
         left: calc(100% - $kPopCaretOffset);
       }
     }
 
-    &[x-placement^="right-start"],
-    &[x-placement^="left-start"] {
+    &[x-placement^="right-start"] .popover-container,
+    &[x-placement^="left-start"] .popover-container {
       &:after, &:before {
         top: $kPopCaretOffset;
       }
     }
 
-    &[x-placement^="right-end"],
-    &[x-placement^="left-end"] {
+    &[x-placement^="right-end"] .popover-container,
+    &[x-placement^="left-end"] .popover-container {
       &:after, &:before {
         top: calc(100% - $kPopCaretOffset);
       }
     }
 
-    &.hide-caret {
+    &.hide-caret .popover-container {
       &:after,
       &:before {
         display: none;
diff --git a/yarn.lock b/yarn.lock
index 81135a2584..c65819535a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1033,7 +1033,7 @@
   dependencies:
     "@floating-ui/utils" "^0.2.0"
 
-"@floating-ui/dom@^1.6.5":
+"@floating-ui/dom@^1.6.1":
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
   integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
@@ -1041,11 +1041,20 @@
     "@floating-ui/core" "^1.0.0"
     "@floating-ui/utils" "^0.2.0"
 
-"@floating-ui/utils@^0.2.0":
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
+"@floating-ui/vue@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/vue/-/vue-1.0.6.tgz#31860a12f1135d19554c232d99c5bab631c5c576"
+  integrity sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    "@floating-ui/utils" "^0.2.1"
+    vue-demi ">=0.13.0"
+
 "@gar/promisify@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -1493,6 +1502,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
+"@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
@@ -9194,6 +9208,11 @@ vitepress@^1.2.2:
     vite "^5.2.11"
     vue "^3.4.27"
 
+vue-demi@>=0.13.0:
+  version "0.14.8"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
+  integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==
+
 vue-demi@>=0.14.7:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"

From 3a011b38927a938c8de44a1ab89bcb35290ca2f5 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 12:30:59 -0400
Subject: [PATCH 03/38] fix(kpop): trigger and positioning fixes [KHCP-11957]

---
 src/components/KPop/KPop.vue | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 6247a144db..15b02cccf4 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { useFloating } from '@floating-ui/vue'
+import { useFloating, autoUpdate } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
 import { v4 as uuid4 } from 'uuid'
@@ -151,6 +151,10 @@ const props = defineProps({
     type: Number,
     default: 1000,
   },
+  positionFixed: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['open', 'close', 'popover-click'])
@@ -171,7 +175,7 @@ const timer = ref<number | null>(null)
 const togglePopover = () => {
   if (!props.disabled) {
     if (!isVisible.value) {
-      isVisible.value = true
+      showPopover()
     } else {
       hidePopover()
     }
@@ -213,24 +217,28 @@ const popoverStyle = computed(() => {
     width: getSizeFromString(props.width),
     maxWidth: getSizeFromString(props.maxWidth),
     maxHeight: getSizeFromString(props.maxHeight),
+    ...floatingStyles.value,
   }
 })
 
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
-onMounted(() => {
-  useFloating(popoverTrigger, popoverElement, {
-    placement: props.placement,
-    strategy: 'fixed',
-  })
+const { floatingStyles } = useFloating(popoverTrigger, popoverElement, {
+  placement: props.placement,
+  strategy: props.positionFixed ? 'fixed' : 'absolute',
+  whileElementsMounted: autoUpdate,
+})
 
+onMounted(() => {
   if (document) {
     document.addEventListener('click', clickHandler)
 
     if (popoverTrigger.value) {
       if (props.trigger === 'hover') {
         popoverTrigger.value.addEventListener('mouseenter', showPopover)
+        popoverTrigger.value.addEventListener('focus', showPopover)
         popoverTrigger.value.addEventListener('mouseleave', hidePopover)
+        popoverTrigger.value.addEventListener('blur', hidePopover)
       } else {
         popoverTrigger.value.addEventListener('click', togglePopover)
       }
@@ -241,7 +249,9 @@ onMounted(() => {
 
       if (props.trigger === 'hover') {
         popoverElement.value.addEventListener('mouseenter', showPopover)
+        popoverElement.value.addEventListener('focusin', showPopover)
         popoverElement.value.addEventListener('mouseleave', hidePopover)
+        popoverElement.value.addEventListener('focusout', hidePopover)
       }
     }
   }
@@ -254,7 +264,9 @@ onBeforeUnmount(() => {
     if (popoverTrigger.value) {
       if (props.trigger === 'hover') {
         popoverTrigger.value.removeEventListener('mouseenter', showPopover)
+        popoverTrigger.value.removeEventListener('focus', showPopover)
         popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
+        popoverTrigger.value.removeEventListener('blur', hidePopover)
       } else {
         popoverTrigger.value.removeEventListener('click', togglePopover)
       }
@@ -265,13 +277,15 @@ onBeforeUnmount(() => {
 
       if (props.trigger === 'hover') {
         popoverElement.value.removeEventListener('mouseenter', showPopover)
+        popoverElement.value.removeEventListener('focusin', showPopover)
         popoverElement.value.removeEventListener('mouseleave', hidePopover)
+        popoverElement.value.removeEventListener('focusout', hidePopover)
       }
     }
   }
 })
 
-watch(isVisible, async (val) => {
+watch(isVisible, (val) => {
   if (val) {
     emit('open')
   } else {

From da59aa891317976f35003ee1d02a7396cbc49253 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 12:37:24 -0400
Subject: [PATCH 04/38] fix: ts

---
 .../KCodeBlock/KCodeBlockIconButton.vue           |  2 +-
 src/components/KCopy/KCopy.vue                    |  4 ++--
 src/components/KTable/ColumnVisibilityMenu.vue    |  4 ++--
 src/types/label.ts                                | 15 ++-------------
 4 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/KCodeBlock/KCodeBlockIconButton.vue b/src/components/KCodeBlock/KCodeBlockIconButton.vue
index e26c83b6f9..599eee22a3 100644
--- a/src/components/KCodeBlock/KCodeBlockIconButton.vue
+++ b/src/components/KCodeBlock/KCodeBlockIconButton.vue
@@ -1,7 +1,7 @@
 <template>
   <KTooltip
     class="code-block-action-tooltip"
-    placement="bottomStart"
+    placement="bottom-start"
     :popover-timeout="300"
     :text="copyTooltipText"
   >
diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
index 315b61cb1e..abe59fe59e 100644
--- a/src/components/KCopy/KCopy.vue
+++ b/src/components/KCopy/KCopy.vue
@@ -14,7 +14,7 @@
         v-if="format !== 'hidden'"
         :class="[textTooltipClasses]"
         data-testid="copy-tooltip-wrapper"
-        placement="bottomStart"
+        placement="bottom-start"
         position-fixed
         :text="textTooltipLabel"
       >
@@ -30,7 +30,7 @@
       <KTooltip
         class="text-icon-wrapper"
         max-width="500px"
-        placement="bottomStart"
+        placement="bottom-start"
         position-fixed
         :text="tooltipText"
       >
diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index f5ca524c1b..3f6838f9d1 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -2,11 +2,11 @@
   <div class="table-column-visibility-menu">
     <KDropdown
       data-testid="table-column-visibility-menu"
-      :kpop-attributes="{ placement: 'bottomEnd' }"
+      :kpop-attributes="{ placement: 'bottom-end' }"
       @toggle-dropdown="handleDropdownToggle"
     >
       <KTooltip
-        placement="bottomEnd"
+        placement="bottom-end"
         :text="isDropdownOpen ? undefined : 'Show/Hide Columns'"
       >
         <KButton
diff --git a/src/types/label.ts b/src/types/label.ts
index 603f06b40e..6273c684a7 100644
--- a/src/types/label.ts
+++ b/src/types/label.ts
@@ -1,17 +1,6 @@
-export type Placement = 'auto'
-| 'top'
-| 'topStart'
-| 'topEnd'
-| 'left'
-| 'leftStart'
-| 'leftEnd'
-| 'right'
-| 'rightStart'
-| 'rightEnd'
-| 'bottom'
-| 'bottomStart'
-| 'bottomEnd'
+import type { PopPlacements } from '@/types'
 
+export type Placement = PopPlacements
 export interface TooltipAttributes {
   label?: string
   placement?: Placement

From 9f7da5e9e157341f863a1fd25a68fbb2141e7097 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 12:55:34 -0400
Subject: [PATCH 05/38] fix(*): kpop selectors and placements [KHCP-11957]

---
 docs/components/datetime-picker.md             |  2 +-
 docs/components/dropdown.md                    |  4 ++--
 docs/components/popover.md                     |  2 +-
 docs/components/tooltip.md                     |  4 ++--
 sandbox/pages/SandboxDateTimePicker.vue        |  4 ++--
 .../KDateTimePicker/KDateTimePicker.vue        |  6 +++---
 src/components/KDropdown/KDropdown.vue         |  4 ++--
 src/components/KMultiselect/KMultiselect.vue   |  2 +-
 src/components/KPop/KPop.cy.ts                 | 18 +++++++++---------
 src/components/KPop/KPop.vue                   |  2 ++
 src/components/KSelect/KSelect.vue             |  2 +-
 src/components/KTooltip/KTooltip.cy.ts         |  4 ++--
 src/components/KTooltip/KTooltip.vue           |  2 +-
 13 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/docs/components/datetime-picker.md b/docs/components/datetime-picker.md
index 2214df808e..b31930515f 100644
--- a/docs/components/datetime-picker.md
+++ b/docs/components/datetime-picker.md
@@ -122,7 +122,7 @@ Boolean to disable the input component. Defaults to `false`.
 
 ### popoverPlacement
 
-Prop to define the positioning of the popover in relation to the trigger element (see [KPopover placement prop](/components/popover#placement) for details). Default value is `bottomStart`.
+Prop to define the positioning of the popover in relation to the trigger element (see [KPopover placement prop](/components/popover#placement) for details). Default value is `bottom-start`.
 
 ## Examples
 
diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 817efd05c8..df655359a2 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -90,13 +90,13 @@ The width of the dropdown body (defaults to `auto`). Currently we support number
 Use the `kpopAttributes` prop to configure the KPop [props](/components/popover) dropdown.
 
 <ClientOnly>
-  <KDropdown trigger-text="Documentation" :kpop-attributes="{ placement: 'leftStart' }" :items="deepClone(defaultItems)" />
+  <KDropdown trigger-text="Documentation" :kpop-attributes="{ placement: 'left-start' }" :items="deepClone(defaultItems)" />
 </ClientOnly>
 
 ```html
 <KDropdown 
   trigger-text="Documentation"
-  :kpop-attributes="{ placement: 'leftStart' }"
+  :kpop-attributes="{ placement: 'left-start' }"
   :items="items"
 />
 ```
diff --git a/docs/components/popover.md b/docs/components/popover.md
index 3daba7a81b..39ac8f26ea 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -113,7 +113,7 @@ Accepted values are:
 
 ```html
 <KPop
-  placement="bottomEnd"
+  placement="bottom-end"
   button-text="Open popover"
 >
   <template #content>
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index f94637e56d..1725dbe64c 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -66,13 +66,13 @@ Here are the different options:
   <KTooltip placement="bottom" text="A tooltip that appears on the bottom.">
     <KButton>bottom</KButton>
   </KTooltip>
-  <KTooltip placement="topEnd" text="A tooltip that appears on the top.">
+  <KTooltip placement="top-end" text="A tooltip that appears on the top.">
     <KButton>topEnd</KButton>
   </KTooltip>
   <KTooltip placement="left" text="A tooltip that appears on the left.">
     <KButton>left</KButton>
   </KTooltip>
-  <KTooltip placement="bottomStart" text="A tooltip that appears on the bottom.">
+  <KTooltip placement="bottom-start" text="A tooltip that appears on the bottom.">
     <KButton>bottomStart</KButton>
   </KTooltip>
 </div>
diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
index 8e83ea7709..b4c0bf6290 100644
--- a/sandbox/pages/SandboxDateTimePicker.vue
+++ b/sandbox/pages/SandboxDateTimePicker.vue
@@ -18,7 +18,7 @@
       <SandboxSectionComponent title="popoverPlacement">
         <KDateTimePicker
           mode="dateTime"
-          popover-placement="bottomEnd"
+          popover-placement="bottom-end"
         />
       </SandboxSectionComponent>
       <SandboxSectionComponent title="clearButton">
@@ -139,7 +139,7 @@
           <div>
             <KDateTimePicker
               mode="dateTime"
-              popover-placement="bottomEnd"
+              popover-placement="bottom-end"
               range
             />
           </div>
diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 2802e740c4..6d542287bb 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -266,7 +266,7 @@ const props = defineProps({
    */
   popoverPlacement: {
     type: String as PropType<PopPlacements>,
-    default: 'bottomStart',
+    default: 'bottom-start',
     validator: (value: PopPlacements):boolean => {
       return PopPlacementsArray.includes(value)
     },
@@ -582,7 +582,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
 .k-datetime-picker {
   // For aesthetic purposes when relative time frames are present
   &.set-min-width {
-    .k-popover {
+    .popover {
       min-width: 360px;
     }
   }
@@ -642,7 +642,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
     }
   }
 
-  :deep(.k-popover) {
+  :deep(.popover) {
     border: var(--kui-border-width-10, kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
     max-height: 90vh;
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index b61450dc3d..df7168f3a1 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -165,7 +165,7 @@ const defaultKPopAttributes = {
   popoverClasses: 'k-dropdown-popover',
   popoverTimeout: 0,
   positionFixed: true,
-  placement: 'bottomStart' as PopPlacements,
+  placement: 'bottom-start' as PopPlacements,
 }
 
 const boundKPopAttributes = {
@@ -228,7 +228,7 @@ onMounted(() => {
 .k-dropdown {
   width: fit-content;
 
-  :deep(.k-popover.k-dropdown-popover) {
+  :deep(.popover.k-dropdown-popover) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     margin-top: var(--kui-space-30, $kui-space-30);
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index a1e3d32642..32a026b935 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -478,7 +478,7 @@ const getBadgeAppearance = (item?: MultiselectItem): BadgeAppearance => {
 
 const defaultKPopAttributes = {
   hideCaret: true,
-  placement: 'bottomStart' as PopPlacements,
+  placement: 'bottom-start' as PopPlacements,
   popoverTimeout: 0,
   popoverClasses: 'multiselect-popover',
 }
diff --git a/src/components/KPop/KPop.cy.ts b/src/components/KPop/KPop.cy.ts
index 914bc68569..70c2ec721a 100644
--- a/src/components/KPop/KPop.cy.ts
+++ b/src/components/KPop/KPop.cy.ts
@@ -49,7 +49,7 @@ describe('KPop', () => {
       },
     })
     cy.get('.slottedEl').click()
-    cy.get('.k-popover').invoke('width').should('eq', width)
+    cy.get('.popover').invoke('width').should('eq', width)
   })
 
   it('renders with correct title', () => {
@@ -80,9 +80,9 @@ describe('KPop', () => {
       },
     })
 
-    cy.get('.k-popover').should('not.be.visible')
+    cy.get('.popover').should('not.be.visible')
     cy.get('.slottedEl').click()
-    cy.get('.k-popover').should('be.visible')
+    cy.get('.popover').should('be.visible')
   })
 
   it('shows element on hover', () => {
@@ -96,15 +96,15 @@ describe('KPop', () => {
       },
     })
 
-    cy.get('.k-popover').should('not.be.visible')
+    cy.get('.popover').should('not.be.visible')
     cy.get('.slottedEl').trigger('mouseenter')
-    cy.get('.k-popover').should('be.visible')
+    cy.get('.popover').should('be.visible')
   })
 
   it('renders with correct default zIndex', () => {
     mount(KPop)
 
-    cy.get('.k-popover').should('have.css', 'z-index', '1000')
+    cy.get('.popover').should('have.css', 'z-index', '1000')
   })
 
   it('renders with custom zIndex', () => {
@@ -114,7 +114,7 @@ describe('KPop', () => {
       },
     })
 
-    cy.get('.k-popover').should('have.css', 'z-index', '2200')
+    cy.get('.popover').should('have.css', 'z-index', '2200')
   })
 
   it('does not render close icon when prop is false', () => {
@@ -138,8 +138,8 @@ describe('KPop', () => {
     })
 
     cy.get('.slottedEl').click()
-    cy.get('.k-popover').should('be.visible')
+    cy.get('.popover').should('be.visible')
     cy.get('.popover-close-button').click()
-    cy.get('.k-popover').should('not.be.visible')
+    cy.get('.popover').should('not.be.visible')
   })
 })
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 15b02cccf4..24fe8be208 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -331,6 +331,8 @@ $kPopCaretOffset: 16px;
 /* Component styles */
 
 .k-popover {
+  display: flex;
+
   .popover-trigger-wrapper {
     display: inline-block;
   }
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 79d15f9c1a..d90577fe80 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -764,7 +764,7 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)
     }
   }
 
-  :deep(.select-popover.k-popover) {
+  :deep(.select-popover.popover .popover-container) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     padding: var(--kui-space-20, $kui-space-20) var(--kui-space-0, $kui-space-0);
diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index 72f2919460..7abc4439e0 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -53,7 +53,7 @@ describe('KTooltip', () => {
       },
     })
 
-    cy.get('.k-tooltip.k-popover').should('have.css', 'z-index', '9999')
+    cy.get('.k-tooltip.popover').should('have.css', 'z-index', '9999')
   })
 
   it('renders with custom zIndex', () => {
@@ -64,6 +64,6 @@ describe('KTooltip', () => {
       },
     })
 
-    cy.get('.k-tooltip.k-popover').should('have.css', 'z-index', '92929')
+    cy.get('.k-tooltip.popover').should('have.css', 'z-index', '92929')
   })
 })
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 0486e5a1b6..4b13035cee 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -123,7 +123,7 @@ const computedClass = computed((): string => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.k-tooltip.k-popover) {
+:deep(.k-tooltip.popover .popover-container) {
   background-color: var(--kui-color-background-inverse, $kui-color-background-inverse);
   border: none;
   border-radius: var(--kui-border-radius-20, $kui-border-radius-20);

From 9918fdc5fc22068bea7ebf3e3fdd4818dba16c5e Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 13:21:17 -0400
Subject: [PATCH 06/38] fix(kpop): auto placement [KHCP-11957]

---
 src/components/KPop/KPop.vue | 18 ++++++++++++------
 src/types/pop.ts             |  1 +
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 24fe8be208..121bbcdb87 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -28,7 +28,7 @@
         :class="popoverClassesObj"
         role="dialog"
         :style="popoverStyle"
-        :x-placement="placement"
+        :x-placement="calculatedPlacement"
       >
         <div class="popover-container">
           <button
@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { useFloating, autoUpdate } from '@floating-ui/vue'
+import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
 import { v4 as uuid4 } from 'uuid'
@@ -100,7 +100,7 @@ const props = defineProps({
   placement: {
     type: String as PropType<PopPlacements>,
     validator: (value: PopPlacements): boolean => PopPlacementsArray.includes(value),
-    default: 'bottom',
+    default: 'auto',
   },
   trigger: {
     type: String as PropType<PopTrigger>,
@@ -223,9 +223,15 @@ const popoverStyle = computed(() => {
 
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
-const { floatingStyles } = useFloating(popoverTrigger, popoverElement, {
-  placement: props.placement,
+const { floatingStyles, placement: calculatedPlacement } = useFloating(popoverTrigger, popoverElement, {
+  ...(props.placement === 'auto' ? { middleware: [autoPlacement()] } : { placement: props.placement }),
   strategy: props.positionFixed ? 'fixed' : 'absolute',
+  /**
+   * floating-ui docs don't recommend using whileElementsMounted with v-show
+   * but otherwise the popover won't update its position even when using manual update method
+   * so we keep using autoUpdate for now
+   * Docs: https://floating-ui.com/docs/vue#anchoring
+   */
   whileElementsMounted: autoUpdate,
 })
 
@@ -340,7 +346,7 @@ $kPopCaretOffset: 16px;
   .popover {
     z-index: v-bind('zIndex');
 
-    // need to wrap popover content in a container because we cannot set position: relative; as that will break the floating positioning
+    // need to wrap popover content in a container because we cannot set position: relative; as that will break the floating-ui positioning
     .popover-container {
       background-color: var(--kui-color-background, $kui-color-background);
       border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
diff --git a/src/types/pop.ts b/src/types/pop.ts
index 4afcb53c16..4f2a2b403a 100644
--- a/src/types/pop.ts
+++ b/src/types/pop.ts
@@ -5,6 +5,7 @@ export const PopTriggerArray = ['click', 'hover'] as const
 export type PopTrigger = AnyElementOf<typeof PopTriggerArray>
 
 export const PopPlacementsArray = [
+  'auto',
   'top',
   'top-start',
   'top-end',

From 2df98aaa81ed6d52698cb4c86a8aa2c4398a0779 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 15:00:29 -0400
Subject: [PATCH 07/38] fix(*): kpop styles and placements [KHCP-11957]

---
 docs/components/tooltip.md                   |  7 +-
 src/components/KLabel/KLabel.vue             |  2 +-
 src/components/KMultiselect/KMultiselect.vue |  2 +-
 src/components/KPop/KPop.vue                 | 66 ++++++++--------
 src/components/KSelect/KSelect.vue           |  2 +-
 src/components/KTooltip/KTooltip.cy.ts       |  3 +-
 src/components/KTooltip/KTooltip.vue         | 83 ++++++++------------
 7 files changed, 76 insertions(+), 89 deletions(-)

diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 1725dbe64c..07bbb565bb 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -56,7 +56,7 @@ Here are the different options:
 
 <ul>
   <li
-    v-for="p in ['auto', 'top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'right', 'rightStart', 'rightEnd', 'bottom', 'bottomStart', 'bottomEnd']"
+    v-for="p in PopPlacementsArray"
     :key="p">
     <code>{{ p }}</code>
   </li>
@@ -67,13 +67,13 @@ Here are the different options:
     <KButton>bottom</KButton>
   </KTooltip>
   <KTooltip placement="top-end" text="A tooltip that appears on the top.">
-    <KButton>topEnd</KButton>
+    <KButton>top-end</KButton>
   </KTooltip>
   <KTooltip placement="left" text="A tooltip that appears on the left.">
     <KButton>left</KButton>
   </KTooltip>
   <KTooltip placement="bottom-start" text="A tooltip that appears on the bottom.">
-    <KButton>bottomStart</KButton>
+    <KButton>bottom-start</KButton>
   </KTooltip>
 </div>
 
@@ -161,6 +161,7 @@ The content slot allows you to slot in any html content
 
 <script setup lang="ts">
 import { InfoIcon } from '@kong/icons'
+import { PopPlacementsArray } from '@/types'
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index d424ba1573..93a559a93a 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -16,8 +16,8 @@
       <InfoIcon
         class="tooltip-trigger-icon"
         :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
+        decorative
         tabindex="0"
-        title="More info"
       />
       <template #content>
         <slot name="tooltip">{{ info || help }}</slot>
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index 32a026b935..32e8b7ef03 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -1186,7 +1186,7 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
     }
   }
 
-  :deep(.multiselect-popover) {
+  :deep(.multiselect-popover .popover-container) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     padding: var(--kui-space-20, $kui-space-20) var(--kui-space-0, $kui-space-0);
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 121bbcdb87..82c3c3c0d1 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -422,85 +422,85 @@ $kPopCaretOffset: 16px;
 
     // placement and caret styles
 
-    &[x-placement^="bottom"] .popover-container {
+    &[x-placement^="top"] .popover-container {
       @include kPopCaret;
 
-      margin-top: var(--kui-space-50, $kui-space-50);
+      margin-bottom: var(--kui-space-60, $kui-space-60);
 
       &:after, &:before {
-        bottom: 100%;
         left: 50%;
+        top: 100%;
       }
 
       &:after {
         /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-        border-bottom-color: var(--kui-color-background, $kui-color-background);
+        border-top-color: var(--kui-color-background, $kui-color-background);
       }
 
       &:before {
-        border-bottom-color: var(--kui-color-border, $kui-color-border);
+        border-top-color: var(--kui-color-border, $kui-color-border);
       }
     }
 
-    &[x-placement^="top"] .popover-container {
-      margin-bottom: var(--kui-space-60, $kui-space-60);
-
+    &[x-placement^="right"] .popover-container {
       @include kPopCaret;
 
+      margin-left: var(--kui-space-60, $kui-space-60);
+
       &:after, &:before {
-        left: 50%;
-        top: 100%;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
       }
 
       &:after {
         /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-        border-top-color: var(--kui-color-background, $kui-color-background);
+        border-right-color: var(--kui-color-background, $kui-color-background);
       }
 
       &:before {
-        border-top-color: var(--kui-color-border, $kui-color-border);
+        border-right-color: var(--kui-color-border, $kui-color-border);
       }
     }
 
-    &[x-placement^="left"] .popover-container {
-      margin-right: var(--kui-space-60, $kui-space-60);
-
+    &[x-placement^="bottom"] .popover-container {
       @include kPopCaret;
 
+      margin-top: var(--kui-space-50, $kui-space-50);
+
       &:after, &:before {
-        left: 100%;
-        top: 50%;
-        transform: translate(50%, -50%);
+        bottom: 100%;
+        left: 50%;
       }
 
       &:after {
         /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-        border-left-color: var(--kui-color-background, $kui-color-background);
+        border-bottom-color: var(--kui-color-background, $kui-color-background);
       }
 
       &:before {
-        border-left-color: var(--kui-color-border, $kui-color-border);
+        border-bottom-color: var(--kui-color-border, $kui-color-border);
       }
     }
 
-    &[x-placement^="right"] .popover-container {
-      margin-left: var(--kui-space-60, $kui-space-60);
-
+    &[x-placement^="left"] .popover-container {
       @include kPopCaret;
 
+      margin-right: var(--kui-space-60, $kui-space-60);
+
       &:after, &:before {
-        right: 100%;
+        left: 100%;
         top: 50%;
-        transform: translateY(-50%);
+        transform: translate(50%, -50%);
       }
 
       &:after {
         /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
-        border-right-color: var(--kui-color-background, $kui-color-background);
+        border-left-color: var(--kui-color-background, $kui-color-background);
       }
 
       &:before {
-        border-right-color: var(--kui-color-border, $kui-color-border);
+        border-left-color: var(--kui-color-border, $kui-color-border);
       }
     }
 
@@ -511,17 +511,17 @@ $kPopCaretOffset: 16px;
       }
     }
 
-    &[x-placement^="top-end"] .popover-container,
-    &[x-placement^="bottom-end"] .popover-container {
+    &[x-placement^="right-start"] .popover-container,
+    &[x-placement^="left-start"] .popover-container {
       &:after, &:before {
-        left: calc(100% - $kPopCaretOffset);
+        top: $kPopCaretOffset;
       }
     }
 
-    &[x-placement^="right-start"] .popover-container,
-    &[x-placement^="left-start"] .popover-container {
+    &[x-placement^="top-end"] .popover-container,
+    &[x-placement^="bottom-end"] .popover-container {
       &:after, &:before {
-        top: $kPopCaretOffset;
+        left: calc(100% - $kPopCaretOffset);
       }
     }
 
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index d90577fe80..737446c290 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -368,7 +368,7 @@ const hasDropdownFooter = computed((): boolean => !!(slots['dropdown-footer-text
 const defaultKPopAttributes = {
   popoverClasses: `select-popover ${hasDropdownFooter.value ? `has-${props.dropdownFooterTextPosition}-dropdown-footer` : ''}`,
   popoverTimeout: 0,
-  placement: 'bottomStart' as PopPlacements,
+  placement: 'bottom-start' as PopPlacements,
   hideCaret: true,
 }
 
diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index 7abc4439e0..236ab3b9e0 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -1,8 +1,9 @@
 import { mount } from 'cypress/vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import { h } from 'vue'
+import { PopPlacementsArray } from '@/types'
 
-const positions = ['top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'right', 'rightStart', 'rightEnd', 'bottom', 'bottomStart', 'bottomEnd']
+const positions = PopPlacementsArray
 
 const rendersCorrectPosition = (variant: string) => {
   it(`renders tooltip to the ${variant} side`, () => {
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 4b13035cee..76021629f5 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -6,7 +6,7 @@
     hide-close-icon
     :max-width="maxWidth"
     :placement="placement"
-    :popover-classes="`k-tooltip ${computedClass}`"
+    popover-classes="k-tooltip"
     :popover-timeout="100"
     :position-fixed="positionFixed"
     trigger="hover"
@@ -61,7 +61,7 @@ const props = defineProps({
   */
   placement: {
     type: String as PropType<PopPlacements>,
-    default: 'bottom',
+    default: 'top',
     validator: (value: PopPlacements):boolean => {
       return PopPlacementsArray.includes(value)
     },
@@ -103,74 +103,59 @@ const slots = useSlots()
 const showTooltip = computed((): boolean => !!props.text || !!props.label || !!slots.content)
 
 const randomTooltipId = uuidv4()
-
-const computedClass = computed((): string => {
-  let placementClass = ''
-  const placementDirections = ['top', 'right', 'bottom', 'left']
-
-  placementDirections.forEach((direction) => {
-    if (props.placement.toLocaleLowerCase().includes(direction)) {
-      if (placementClass) {
-        placementClass += ` tooltip-${direction}`
-      } else {
-        placementClass = `tooltip-${direction}`
-      }
-    }
-  })
-
-  return placementClass
-})
 </script>
 
 <style lang="scss" scoped>
-:deep(.k-tooltip.popover .popover-container) {
-  background-color: var(--kui-color-background-inverse, $kui-color-background-inverse);
-  border: none;
-  border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-  padding: var(--kui-space-30, $kui-space-30);
-  z-index: v-bind('zIndex');
-
-  .popover-content {
-    color: var(--kui-color-text-inverse, $kui-color-text-inverse);
-    font-family: var(--kui-font-family-text, $kui-font-family-text);
-    font-size: var(--kui-font-size-20, $kui-font-size-20);
-    font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
-    line-height: var(--kui-line-height-20, $kui-line-height-20);
-
-    code {
-      color: var(--kui-color-text-decorative-aqua, $kui-color-text-decorative-aqua);
-    }
-
-    a {
+:deep(.k-tooltip.popover) {
+  .popover-container {
+    background-color: var(--kui-color-background-inverse, $kui-color-background-inverse);
+    border: none;
+    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+    padding: var(--kui-space-30, $kui-space-30);
+    z-index: v-bind('zIndex');
+
+    .popover-content {
       color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+      font-family: var(--kui-font-family-text, $kui-font-family-text);
+      font-size: var(--kui-font-size-20, $kui-font-size-20);
+      font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
+      line-height: var(--kui-line-height-20, $kui-line-height-20);
 
-      &:hover {
-        color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker);
+      code {
+        color: var(--kui-color-text-decorative-aqua, $kui-color-text-decorative-aqua);
       }
 
-      &:focus-visible {
-        color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
-      }
+      a {
+        color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+
+        &:hover {
+          color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker);
+        }
+
+        &:focus-visible {
+          color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+        }
 
-      &:active {
-        color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+        &:active {
+          color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+        }
       }
     }
   }
 
-  &.tooltip-top {
+  &[x-placement^="top"] .popover-container {
     margin-bottom: var(--kui-space-20, $kui-space-20);
   }
 
-  &.tooltip-right {
+  &[x-placement^="right"] .popover-container {
     margin-left: var(--kui-space-20, $kui-space-20);
   }
 
-  &.tooltip-bottom {
+  &[x-placement^="bottom"] .popover-container {
     margin-top: var(--kui-space-20, $kui-space-20);
   }
 
-  &.tooltip-left {
+  &[x-placement^="left"] .popover-container {
     margin-right: var(--kui-space-20, $kui-space-20);
   }
 }

From 8caeb068c91344a336f3ac5c290c9a8e6ca66840 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 16:12:25 -0400
Subject: [PATCH 08/38] test(kmultiselect, ktooltip): fix component tests
 [KHCP-11957]

---
 src/components/KPop/KPop.vue           | 1 +
 src/components/KTooltip/KTooltip.cy.ts | 3 +++
 src/components/KTooltip/KTooltip.vue   | 2 +-
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 82c3c3c0d1..f50fba849e 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -341,6 +341,7 @@ $kPopCaretOffset: 16px;
 
   .popover-trigger-wrapper {
     display: inline-block;
+    width: 100%;
   }
 
   .popover {
diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index 236ab3b9e0..29197bec4e 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -20,6 +20,9 @@ const rendersCorrectPosition = (variant: string) => {
       },
     })
 
+    // add some padding on the side so that tooltip doesn't collide with viewport
+    cy.get('.k-popover').invoke('css', 'padding', '150px')
+
     cy.get('button').click()
 
     cy.get('.k-tooltip').should('be.visible').and('have.text', `I'm on the ${variant} side!`)
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 76021629f5..87153556ec 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -11,6 +11,7 @@
     :position-fixed="positionFixed"
     trigger="hover"
     width="auto"
+    :z-index="zIndex"
   >
     <slot />
 
@@ -112,7 +113,6 @@ const randomTooltipId = uuidv4()
     border: none;
     border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     padding: var(--kui-space-30, $kui-space-30);
-    z-index: v-bind('zIndex');
 
     .popover-content {
       color: var(--kui-color-text-inverse, $kui-color-text-inverse);

From a9429d49c7de7cd9cb15640294484a17a74876f7 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 17:12:16 -0400
Subject: [PATCH 09/38] fix(*): update kpop usage [KHCP-11957]

---
 sandbox/pages/SandboxPop.vue                  | 58 +++++++++----------
 .../KDateTimePicker/KDateTimePicker.vue       | 15 +++--
 src/components/KDropdown/KDropdown.vue        | 15 ++---
 src/components/KMultiselect/KMultiselect.vue  |  1 -
 src/components/KSelect/KSelect.vue            |  1 -
 src/types/date-time-picker.ts                 |  2 +-
 6 files changed, 43 insertions(+), 49 deletions(-)

diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
index f3d1babfcb..7def908661 100644
--- a/sandbox/pages/SandboxPop.vue
+++ b/sandbox/pages/SandboxPop.vue
@@ -97,21 +97,6 @@
           </template>
         </KPop>
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="hidePopover">
-        <p>
-          <span v-if="!hidingPopover">Hide popover: <code>false</code></span>
-          <span v-else>Hiding popover in: {{ timeoutValue }}</span>
-        </p>
-        <KPop :hide-popover="showPopover">
-          <KButton @click="startPopoverTimeout">
-            Button
-          </KButton>
-
-          <template #content>
-            Popover content.
-          </template>
-        </KPop>
-      </SandboxSectionComponent>
       <SandboxSectionComponent title="disabled">
         <KPop
           button-text="Button"
@@ -239,26 +224,52 @@
           </KPop>
         </KComponent>
       </SandboxSectionComponent>
+
+      <!-- Exposed Methods -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Exposed Methods"
+      />
+      <SandboxSectionComponent title="hidePopover">
+        <p>
+          <span v-if="!hidingPopover">Hide popover: <code>false</code></span>
+          <span v-else>Hiding popover in: {{ timeoutValue }}</span>
+        </p>
+        <KPop ref="kPop">
+          <KButton @click="startPopoverTimeout">
+            Button
+          </KButton>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>
 
 <script setup lang="ts">
-import { inject, nextTick, ref, watch } from 'vue'
+import { inject, ref } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
 import { PopPlacementsArray } from '@/types'
+import { KPop } from '@/components'
 
+const kPop = ref<InstanceType<typeof KPop> | null>(null)
 const hidingPopover = ref<boolean>(false)
 const interval = ref<any>(null)
-const showPopover = ref<boolean>(true)
 const timeoutValue = ref<number>(3)
 
 const startPopoverTimeout = () => {
   hidingPopover.value = true
 
   setTimeout(() => {
-    showPopover.value = false
+    kPop.value?.hidePopover()
+    clearInterval(interval.value)
+    hidingPopover.value = false
+    timeoutValue.value = 3
+    interval.value = null
   }, 3000)
 
   interval.value = setInterval(() => {
@@ -266,17 +277,6 @@ const startPopoverTimeout = () => {
   }, 1000)
 }
 
-watch(showPopover, async (value) => {
-  if (!value) {
-    await nextTick()
-    clearInterval(interval.value)
-    hidingPopover.value = false
-    showPopover.value = true
-    timeoutValue.value = 3
-    interval.value = null
-  }
-})
-
 const onEvent = (message: string): void => {
   console.log(message)
 }
diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 6d542287bb..b2258f7b5d 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -6,14 +6,15 @@
     :style="widthStyle"
   >
     <KPop
+      ref="kPop"
       :disabled="disabled"
       hide-caret
       hide-close-icon
-      :hide-popover="state.hidePopover"
       :placement="popoverPlacement"
       position-fixed
       width="auto"
-      @open="state.hidePopover = false"
+      @close="state.popoverOpen = false"
+      @open="state.popoverOpen = true"
     >
       <div
         class="datetime-picker-trigger-wrapper"
@@ -44,7 +45,7 @@
       </div>
 
       <template
-        v-if="!state.hidePopover"
+        v-if="!state.popoverOpen"
         #content
       >
         <!-- Custom | Relative toggle -->
@@ -111,7 +112,7 @@
       </template>
 
       <template
-        v-if="!state.hidePopover"
+        v-if="!state.popoverOpen"
         #footer
       >
         <div class="datetime-picker-footer-container">
@@ -278,6 +279,8 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: TimeRange | null): void
 }>()
 
+const kPop = ref<InstanceType<typeof KPop> | null>(null)
+
 // https://vcalendar.io/datepicker.html#model-config
 const modelConfig = { type: 'number' }
 
@@ -352,7 +355,7 @@ const localTz = Intl.DateTimeFormat().resolvedOptions().timeZone
 const state = reactive<DateTimePickerState>({
   abbreviatedDisplay: props.placeholder,
   fullRangeDisplay: '',
-  hidePopover: false,
+  popoverOpen: false,
   selectedRange: { start: new Date(), end: new Date(), timePeriodsKey: '' },
   previouslySelectedRange: { start: new Date(), end: new Date(), timePeriodsKey: '' },
   selectedTimeframe: props.timePeriods[0]?.values[0],
@@ -487,7 +490,7 @@ const submitTimeFrame = async (): Promise<void> => {
     emit('update:modelValue', { start: state.selectedRange.start, end: null })
   }
 
-  state.hidePopover = true
+  kPop.value?.hidePopover()
   updateDisplay()
 }
 
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index df7168f3a1..f03b1e074f 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -5,11 +5,11 @@
   >
     <KToggle v-slot="{ toggle, isToggled }">
       <KPop
+        ref="kPop"
         v-bind="boundKPopAttributes"
         :close-on-popover-click="!isToggled.value"
         data-testid="k-dropdown-popover"
         hide-close-icon
-        :hide-popover="hidePopover"
         @close="() => handleTriggerToggle(isToggled, toggle, false)"
         @open="() => handleTriggerToggle(isToggled, toggle, true)"
         @popover-click="() => handleTriggerToggle(isToggled, toggle, false)"
@@ -72,7 +72,7 @@
 
 <script lang="ts" setup>
 import type { PropType, Ref } from 'vue'
-import { computed, onMounted, ref, watch, nextTick } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { ButtonAppearance, DropdownItem, PopPlacements } from '@/types'
 import { ButtonAppearances } from '@/types'
 import KButton from '@/components/KButton/KButton.vue'
@@ -156,10 +156,9 @@ const emit = defineEmits<{
   (e: 'change', value: DropdownItem): void;
 }>()
 
-const hidePopover = ref<boolean>(false)
-
 const tooltipComponent = computed(() => props.disabledTooltip ? KTooltip : 'div')
 
+const kPop = ref<InstanceType<typeof KPop> | null>(null)
 const defaultKPopAttributes = {
   hideCaret: true,
   popoverClasses: 'k-dropdown-popover',
@@ -188,13 +187,7 @@ const handleSelection = (item: DropdownItem): void => {
 }
 
 const handleCloseDropdown = async (): Promise<void> => {
-  hidePopover.value = true
-
-  // reset the hidePopover value so it's ready for the next time the dropdown is opened
-  // need nextTick to ensure the popover is hidden before resetting the value
-  await nextTick(() => {
-    hidePopover.value = false
-  })
+  kPop.value?.hidePopover()
 }
 
 const handleTriggerToggle = (isToggled: Ref<boolean>, toggle: () => void, isOpen: boolean): void => {
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index 32e8b7ef03..3d44069151 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -27,7 +27,6 @@
           hide-close-icon
           v-bind="boundKPopAttributes"
           :position-fixed="positionFixed"
-          :target="`[id='${multiselectWrapperId}']`"
           @close="() => handleToggle(false, isToggled, toggle)"
           @open="() => handleToggle(true, isToggled, toggle)"
         >
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 737446c290..31e71245f0 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -27,7 +27,6 @@
         close-on-popover-click
         hide-close-icon
         :position-fixed="positionFixed"
-        :target="`[id='${selectWrapperId}']`"
         @close="() => onClose(toggle, isToggled.value)"
         @open="() => onOpen(toggle)"
         @popover-click="() => onPopoverClick(toggle)"
diff --git a/src/types/date-time-picker.ts b/src/types/date-time-picker.ts
index eaff361b6c..0c4ed2623f 100644
--- a/src/types/date-time-picker.ts
+++ b/src/types/date-time-picker.ts
@@ -42,7 +42,7 @@ export interface TimeFrameSection {
 export interface DateTimePickerState {
   abbreviatedDisplay: string
   fullRangeDisplay?: string
-  hidePopover: boolean
+  popoverOpen: boolean
   selectedRange: TimeRange
   previouslySelectedRange: TimeRange
   selectedTimeframe: TimePeriod

From 67150c0f8f011b422c6e9b22bbfaf05e412fafed Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 17:12:52 -0400
Subject: [PATCH 10/38] docs(popover): update component docs [KHCP-11957]

---
 docs/components/popover.md           | 10 ----------
 docs/guide/migrating-to-version-9.md |  4 ++++
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/docs/components/popover.md b/docs/components/popover.md
index 39ac8f26ea..1876928292 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -378,12 +378,6 @@ Maximum width of the popover container. Default value is `auto`.
 </KPop>
 ```
 
-### target
-
-This is the target element selector that the popover is appended to. By default its the KPop wrapper element.
-
-Example: `#my-element-id`
-
 ### tag
 
 KPop wrapper element type. Default value is `div`.
@@ -403,10 +397,6 @@ List of class names you want to assign to `.k-popover` element.
 </KPop>
 ```
 
-### hidePopover
-
-Optional boolean flag to hide the popover. Useful for external events. Default value is `false`.
-
 ### zIndex
 
 Pass a number to use for the `z-index` property. Default value is `1000`.
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index c01ffe0331..0af3b2d26b 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -342,6 +342,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Constants, Types & Interfaces
 
 * `TimeRange` - `start` and `end` keys are now defined as `Date | null`
+* `hidePopover` property in `DateTimePickerState` interface has been renamed to `popoverOpen`
 
 ### KDropdownMenu
 
@@ -635,6 +636,8 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `testMode` prop has been removed
 * `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
 * `positionFixed` prop default value has been changed to `true`
+* `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
+* `target` prop has been removed (popover element is always mounted to `.k-popover` element)
 
 #### Slots
 
@@ -652,6 +655,7 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `k-popover-title` class has been replaced with `popover-title`
 * `k-popover-content` class has been replaced with `popover-content`
 * `k-popover-footer` class has been replaced with `popover-footer`
+* `k-popover` class has been replaced with `popover` (instead, `k-popover` class has been given to outer-most element)
 
 ### KPrompt
 

From 0568a73e0a540cf0b3315ac07f23a86245826037 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 17:26:12 -0400
Subject: [PATCH 11/38] docs: update migration doc [KHCP-11957]

---
 docs/guide/migrating-to-version-9.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 0af3b2d26b..ee6dfc9932 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -636,6 +636,7 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `testMode` prop has been removed
 * `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
 * `positionFixed` prop default value has been changed to `true`
+* `placement` prop options have changed, see [Constants, Types & Interfaces](#constants-types--interfaces-15) for more details
 * `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
 * `target` prop has been removed (popover element is always mounted to `.k-popover` element)
 
@@ -657,6 +658,11 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `k-popover-footer` class has been replaced with `popover-footer`
 * `k-popover` class has been replaced with `popover` (instead, `k-popover` class has been given to outer-most element)
 
+#### Constants, Types & Interfaces
+
+* format of most placement options in `PopPlacementsArray` has changed: `topStart` -> `top-start`, `rightEnd` -> `right-end`, etc.
+  * same applies to `PopPlacements` type
+
 ### KPrompt
 
 #### Props

From fb5269fc34ed76ed42ffe30afc159593185f5b53 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 4 Jun 2024 17:35:36 -0400
Subject: [PATCH 12/38] fix(kdatetimepicker): update kpop usage [KHCP-11957]

---
 src/components/KDateTimePicker/KDateTimePicker.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index b2258f7b5d..bb057dfad7 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -44,10 +44,7 @@
         />
       </div>
 
-      <template
-        v-if="!state.popoverOpen"
-        #content
-      >
+      <template #content>
         <!-- Custom | Relative toggle -->
         <KSegmentedControl
           v-if="hasTimePeriods && hasCalendar"
@@ -111,10 +108,7 @@
         </div>
       </template>
 
-      <template
-        v-if="!state.popoverOpen"
-        #footer
-      >
+      <template #footer>
         <div class="datetime-picker-footer-container">
           <KButton
             v-if="clearButton"

From 901904011f8045f0e258d9ef6831d12cc711a0f6 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 09:59:44 -0400
Subject: [PATCH 13/38] fix(*): address pr feedback [KHCP-11957]

---
 sandbox/pages/SandboxPop.vue           | 21 +++++++++++++++++++++
 src/components/KDropdown/KDropdown.vue |  2 +-
 src/components/KPop/KPop.vue           | 10 ++++++----
 src/components/KTooltip/KTooltip.vue   |  2 +-
 4 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
index 7def908661..1276504170 100644
--- a/sandbox/pages/SandboxPop.vue
+++ b/sandbox/pages/SandboxPop.vue
@@ -139,6 +139,27 @@
           </KPop>
         </KComponent>
       </SandboxSectionComponent>
+      <SandboxSectionComponent title="positionFixed">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ positionFixed: true }"
+        >
+          <KInputSwitch
+            v-model="data.positionFixed"
+            label="Position fixed"
+          />
+
+          <KPop
+            :key="data.positionFixed ? 'fixed' : 'absolute'"
+            button-text="Button"
+            :position-fixed="data.positionFixed"
+          >
+            <template #content>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </template>
+          </KPop>
+        </KComponent>
+      </SandboxSectionComponent>
 
       <!-- Slots -->
       <SandboxTitleComponent
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index f03b1e074f..18da2caaa0 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -221,7 +221,7 @@ onMounted(() => {
 .k-dropdown {
   width: fit-content;
 
-  :deep(.popover.k-dropdown-popover) {
+  :deep(.popover.k-dropdown-popover .popover-container) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
     margin-top: var(--kui-space-30, $kui-space-30);
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index f50fba849e..b844c612aa 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -34,6 +34,7 @@
           <button
             v-if="!hideCloseIcon"
             ref="popoverCloseButton"
+            aria-label="Close popover"
             class="popover-close-button"
             :tabindex="isVisible ? 0 : -1"
             type="button"
@@ -41,6 +42,7 @@
           >
             <CloseIcon
               class="popover-close-icon"
+              decorative
               :size="KUI_ICON_SIZE_30"
             />
           </button>
@@ -235,6 +237,10 @@ const { floatingStyles, placement: calculatedPlacement } = useFloating(popoverTr
   whileElementsMounted: autoUpdate,
 })
 
+defineExpose({
+  hidePopover,
+})
+
 onMounted(() => {
   if (document) {
     document.addEventListener('click', clickHandler)
@@ -298,10 +304,6 @@ watch(isVisible, (val) => {
     emit('close')
   }
 })
-
-defineExpose({
-  hidePopover,
-})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 87153556ec..7de98b5058 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -62,7 +62,7 @@ const props = defineProps({
   */
   placement: {
     type: String as PropType<PopPlacements>,
-    default: 'top',
+    default: 'bottom',
     validator: (value: PopPlacements):boolean => {
       return PopPlacementsArray.includes(value)
     },

From e14b25fc54026896ef4cd1154c909b45930c7495 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 10:22:58 -0400
Subject: [PATCH 14/38] fix(kpop): position absolute placement [KHCP-11957]

---
 docs/components/popover.md   | 10 +++++++---
 src/components/KPop/KPop.vue |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/components/popover.md b/docs/components/popover.md
index 1876928292..4462853146 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -94,7 +94,9 @@ Placement of the popover.
 Accepted values are:
 <ul>
   <li v-for="placement in PopPlacementsArray" :key="`${placement}-placement`">
-    <code>{{ placement }}</code> {{ placement === 'auto' ? '(default)' : '' }}
+    <code>{{ placement }}</code> 
+    <span v-if="placement === 'auto'" v-html="getDefaultPlacementMessage(true)" />
+    <span v-if="placement === 'top'" v-html="getDefaultPlacementMessage(false)" />
   </li>
 </ul>
 
@@ -268,13 +270,13 @@ Boolean to control whether or not the popover should close when a user clicks wi
 A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries. Defaults to `true`.
 
 <div class="position-fixed-container">
-  <KPop button-text="Fixed positioning" positioning="top">
+  <KPop button-text="Fixed positioning" placement="top">
     <template #content>
       Popover content.
     </template>
   </KPop>
 
-  <KPop :position-fixed="false" positioning="top">
+  <KPop :position-fixed="false" placement="top">
     <KButton appearance="danger">
       Non-fixed positioning
     </KButton>
@@ -523,6 +525,8 @@ Fires when the popover content is clicked.
 
 <script setup lang="ts">
 import { PopPlacementsArray } from '@/types'
+
+const getDefaultPlacementMessage = (value: boolean) => `(default when <a href="#positionfixed"><code>positionFixed</code> prop</a> is <code>${value}</code>)`
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index b844c612aa..27fdfcefa7 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -225,8 +225,10 @@ const popoverStyle = computed(() => {
 
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
+const popoverPlacement = computed((): PopPlacements => props.positionFixed ? props.placement : 'top')
+
 const { floatingStyles, placement: calculatedPlacement } = useFloating(popoverTrigger, popoverElement, {
-  ...(props.placement === 'auto' ? { middleware: [autoPlacement()] } : { placement: props.placement }),
+  ...(popoverPlacement.value === 'auto' ? { middleware: [autoPlacement()] } : { placement: popoverPlacement.value }),
   strategy: props.positionFixed ? 'fixed' : 'absolute',
   /**
    * floating-ui docs don't recommend using whileElementsMounted with v-show

From 88d2692e71de1a5a7c8c9ab14d5507d4d3151cf8 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 10:41:37 -0400
Subject: [PATCH 15/38] fix(kdatetimepicker): fix popover styling [KHCP-11957]

---
 src/components/KDateTimePicker/KDateTimePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index bb057dfad7..df2d9a88ca 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -639,7 +639,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
     }
   }
 
-  :deep(.popover) {
+  :deep(.popover .popover-container) {
     border: var(--kui-border-width-10, kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
     max-height: 90vh;

From aaa8767769ff26a3fd54e47d2dc44608cb7e418e Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 11:07:32 -0400
Subject: [PATCH 16/38] fix(*): misc fixes [KHCP-11957]

---
 sandbox/pages/SandboxDateTimePicker.vue | 2 +-
 src/components/KDropdown/KDropdown.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
index b4c0bf6290..ace221584d 100644
--- a/sandbox/pages/SandboxDateTimePicker.vue
+++ b/sandbox/pages/SandboxDateTimePicker.vue
@@ -139,7 +139,7 @@
           <div>
             <KDateTimePicker
               mode="dateTime"
-              popover-placement="bottom-end"
+              popover-placement="top-end"
               range
             />
           </div>
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index 18da2caaa0..9fde219ea1 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -18,7 +18,7 @@
           :is="tooltipComponent"
           class="dropdown-trigger"
           data-testid="dropdown-trigger"
-          :label="disabledTooltip"
+          :label="disabledTooltip ? disabledTooltip : undefined"
           :max-width="!!disabledTooltip ? '240' : undefined"
           :position="!!disabledTooltip ? 'bottom' : undefined"
           :position-fixed="!!disabledTooltip ? true : undefined"

From e9b31e5638ca3b78248c9b8f350825b95d84cf66 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 11:29:45 -0400
Subject: [PATCH 17/38] fix(kpop): misc fixes [KHCP-11957]

---
 src/components/KPop/KPop.vue | 103 ++++++++++++++++-------------------
 1 file changed, 48 insertions(+), 55 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 27fdfcefa7..dde65694dc 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -175,21 +175,21 @@ const popoverTrigger = computed((): HTMLElement | null => triggerWrapperElement.
 const timer = ref<number | null>(null)
 
 const togglePopover = () => {
-  if (!props.disabled) {
-    if (!isVisible.value) {
-      showPopover()
-    } else {
-      hidePopover()
-    }
+  if (!isVisible.value) {
+    showPopover()
+  } else {
+    hidePopover()
   }
 }
 
 const showPopover = () => {
-  if (timer.value) {
-    clearTimeout(timer.value)
-  }
+  if (!props.disabled) {
+    if (timer.value) {
+      clearTimeout(timer.value)
+    }
 
-  isVisible.value = true
+    isVisible.value = true
+  }
 }
 
 const hidePopover = () => {
@@ -198,18 +198,25 @@ const hidePopover = () => {
   }, props.trigger === 'hover' ? props.popoverTimeout : 0)
 }
 
-const onPopoverClick = () => {
-  if (props.closeOnPopoverClick) {
-    hidePopover()
-  }
-
-  emit('popover-click')
-}
-
 const clickHandler = (event: Event) => {
   const target = event.target as HTMLElement
 
-  if (!kPopoverElement.value?.contains(target)) {
+  if (triggerWrapperElement.value?.contains(target) && !popoverElement.value?.contains(target)) {
+    // toggle popover if clicked within the trigger
+
+    togglePopover()
+  } else if (popoverElement.value?.contains(target) && !triggerWrapperElement.value?.contains(target)) {
+    // emit popover-click event if clicked within the popover
+    // also close the popover if closeOnPopoverClick is true
+
+    if (props.closeOnPopoverClick) {
+      hidePopover()
+    }
+
+    emit('popover-click')
+  } else if (isVisible.value && !kPopoverElement.value?.contains(target)) {
+    // close popover if clicked outside of the popover
+
     hidePopover()
   }
 }
@@ -245,28 +252,22 @@ defineExpose({
 
 onMounted(() => {
   if (document) {
+    // handle various click events to determine how to handle the click event in a generic clickHandler function
+    // we don't set any other click event listeners on purpose to avoid conflict of event listeners
     document.addEventListener('click', clickHandler)
 
-    if (popoverTrigger.value) {
-      if (props.trigger === 'hover') {
-        popoverTrigger.value.addEventListener('mouseenter', showPopover)
-        popoverTrigger.value.addEventListener('focus', showPopover)
-        popoverTrigger.value.addEventListener('mouseleave', hidePopover)
-        popoverTrigger.value.addEventListener('blur', hidePopover)
-      } else {
-        popoverTrigger.value.addEventListener('click', togglePopover)
-      }
+    if (popoverTrigger.value && props.trigger === 'hover') {
+      popoverTrigger.value.addEventListener('mouseenter', showPopover)
+      popoverTrigger.value.addEventListener('focus', showPopover)
+      popoverTrigger.value.addEventListener('mouseleave', hidePopover)
+      popoverTrigger.value.addEventListener('blur', hidePopover)
     }
 
-    if (popoverElement.value) {
-      popoverElement.value.addEventListener('click', onPopoverClick)
-
-      if (props.trigger === 'hover') {
-        popoverElement.value.addEventListener('mouseenter', showPopover)
-        popoverElement.value.addEventListener('focusin', showPopover)
-        popoverElement.value.addEventListener('mouseleave', hidePopover)
-        popoverElement.value.addEventListener('focusout', hidePopover)
-      }
+    if (popoverElement.value && props.trigger === 'hover') {
+      popoverElement.value.addEventListener('mouseenter', showPopover)
+      popoverElement.value.addEventListener('focusin', showPopover)
+      popoverElement.value.addEventListener('mouseleave', hidePopover)
+      popoverElement.value.addEventListener('focusout', hidePopover)
     }
   }
 })
@@ -275,26 +276,18 @@ onBeforeUnmount(() => {
   if (document) {
     document.removeEventListener('click', clickHandler)
 
-    if (popoverTrigger.value) {
-      if (props.trigger === 'hover') {
-        popoverTrigger.value.removeEventListener('mouseenter', showPopover)
-        popoverTrigger.value.removeEventListener('focus', showPopover)
-        popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
-        popoverTrigger.value.removeEventListener('blur', hidePopover)
-      } else {
-        popoverTrigger.value.removeEventListener('click', togglePopover)
-      }
+    if (popoverTrigger.value && props.trigger === 'hover') {
+      popoverTrigger.value.removeEventListener('mouseenter', showPopover)
+      popoverTrigger.value.removeEventListener('focus', showPopover)
+      popoverTrigger.value.removeEventListener('mouseleave', hidePopover)
+      popoverTrigger.value.removeEventListener('blur', hidePopover)
     }
 
-    if (popoverElement.value) {
-      popoverElement.value.removeEventListener('click', onPopoverClick)
-
-      if (props.trigger === 'hover') {
-        popoverElement.value.removeEventListener('mouseenter', showPopover)
-        popoverElement.value.removeEventListener('focusin', showPopover)
-        popoverElement.value.removeEventListener('mouseleave', hidePopover)
-        popoverElement.value.removeEventListener('focusout', hidePopover)
-      }
+    if (popoverElement.value && props.trigger === 'hover') {
+      popoverElement.value.removeEventListener('mouseenter', showPopover)
+      popoverElement.value.removeEventListener('focusin', showPopover)
+      popoverElement.value.removeEventListener('mouseleave', hidePopover)
+      popoverElement.value.removeEventListener('focusout', hidePopover)
     }
   }
 })

From 2d70302369538e666e535088bf56a6714b613b5a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 11:33:53 -0400
Subject: [PATCH 18/38] fix(kdropdown): minor styling fix [KHCP-11957]

---
 src/components/KPagination/KPagination.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
index 5e53b2f3b6..a07e28b98e 100644
--- a/src/components/KPagination/KPagination.vue
+++ b/src/components/KPagination/KPagination.vue
@@ -421,6 +421,8 @@ watch(pageCount, (newVal, oldVal) => {
       margin-left: var(--kui-space-30, $kui-space-30);
 
       :deep(.popover-content) {
+        border-bottom-left-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+        border-bottom-right-radius: var(--kui-border-radius-30, $kui-border-radius-30);
         max-height: 200px;
         overflow-y: auto;
       }

From f4b1d322c47cb9b57c82abf9dd7cef5b8f2be46a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 14:07:27 -0400
Subject: [PATCH 19/38] fix(kpop): auto update logic [KHCP-11957]

---
 src/components/KPop/KPop.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index dde65694dc..feeb6fe4f6 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -201,7 +201,7 @@ const hidePopover = () => {
 const clickHandler = (event: Event) => {
   const target = event.target as HTMLElement
 
-  if (triggerWrapperElement.value?.contains(target) && !popoverElement.value?.contains(target)) {
+  if (popoverTrigger.value?.contains(target) && !popoverElement.value?.contains(target)) {
     // toggle popover if clicked within the trigger
 
     togglePopover()
@@ -234,16 +234,9 @@ const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret':
 
 const popoverPlacement = computed((): PopPlacements => props.positionFixed ? props.placement : 'top')
 
-const { floatingStyles, placement: calculatedPlacement } = useFloating(popoverTrigger, popoverElement, {
+const { floatingStyles, placement: calculatedPlacement, update: updatePosition } = useFloating(popoverTrigger, popoverElement, {
   ...(popoverPlacement.value === 'auto' ? { middleware: [autoPlacement()] } : { placement: popoverPlacement.value }),
   strategy: props.positionFixed ? 'fixed' : 'absolute',
-  /**
-   * floating-ui docs don't recommend using whileElementsMounted with v-show
-   * but otherwise the popover won't update its position even when using manual update method
-   * so we keep using autoUpdate for now
-   * Docs: https://floating-ui.com/docs/vue#anchoring
-   */
-  whileElementsMounted: autoUpdate,
 })
 
 defineExpose({
@@ -270,6 +263,10 @@ onMounted(() => {
       popoverElement.value.addEventListener('focusout', hidePopover)
     }
   }
+
+  if (popoverTrigger.value && popoverElement.value) {
+    autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
+  }
 })
 
 onBeforeUnmount(() => {

From 4164ae13cb73720772328cd46ed97c0fbd991e30 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 14:34:05 -0400
Subject: [PATCH 20/38] docs(popover): default slot note [KHCP-11957]

---
 docs/components/popover.md | 70 +++++++++++++++++++++++++++++++++-----
 1 file changed, 62 insertions(+), 8 deletions(-)

diff --git a/docs/components/popover.md b/docs/components/popover.md
index 4462853146..da27fed8d2 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -431,10 +431,7 @@ Slot for passing custom popover trigger element.
 When providing your custom element as popover trigger, make sure to set appropriate `tabindex` attribute in order to make popover accessible for assistive technology users.
 :::
 
-<KPop
-  width="auto"
-  hide-close-icon
->
+<KPop hide-close-icon>
   <KInput
     label="Password"
     type="password"
@@ -446,10 +443,7 @@ When providing your custom element as popover trigger, make sure to set appropri
 </KPop>
 
 ```html
-<KPop
-  width="auto"
-  hide-close-icon
->
+<KPop hide-close-icon>
   <KInput
     label="Password"
     type="password"
@@ -461,6 +455,54 @@ When providing your custom element as popover trigger, make sure to set appropri
 </KPop>
 ```
 
+:::danger
+KPop logic is built on the presumption that trigger element is going to be in the DOM when the component is mounted. If you need to render the element conditionally, avoid setting `v-if` directive on the trigger element directly and render the entire KPop component conditionally instead.
+
+<span class="inline-title">
+  <CheckIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_SUCCESS" /> <b>Correct:</b>
+</span>
+
+```html
+<KPop v-if="!loading">
+  <KButton>Open popover</KButton>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+
+<span class="inline-title">
+  <CloseIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_DANGER" /> <b>Incorrect:</b>
+</span>
+
+```html
+<KPop>
+  <KButton v-if="!loading">Open popover</KButton>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+
+<span class="inline-title">
+  <CloseIcon :size="KUI_ICON_SIZE_30" :color="KUI_COLOR_TEXT_DANGER" /> <b>Incorrect:</b>
+</span>
+
+```html
+<KPop>
+  <template
+    #default
+    v-if="!loading"
+  >
+    <KButton>Open popover</KButton>
+  </template>
+  <template #content>
+    ...
+  </template>
+</KPop>
+```
+:::
+
 ### title
 
 Slot for passing custom popover title.
@@ -525,6 +567,8 @@ Fires when the popover content is clicked.
 
 <script setup lang="ts">
 import { PopPlacementsArray } from '@/types'
+import { CheckIcon, CloseIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30, KUI_COLOR_TEXT_SUCCESS, KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
 
 const getDefaultPlacementMessage = (value: boolean) => `(default when <a href="#positionfixed"><code>positionFixed</code> prop</a> is <code>${value}</code>)`
 </script>
@@ -557,4 +601,14 @@ const getDefaultPlacementMessage = (value: boolean) => `(default when <a href="#
 .button-right {
   margin-left: $kui-space-auto;
 }
+
+.inline-title {
+  display: flex;
+  gap: $kui-space-30;
+  align-items: center;
+
+  &:not(:first-of-type) {
+    margin-top: $kui-space-40;
+  }
+}
 </style>
\ No newline at end of file

From 27ea6e4745258e04fb0d6d4196cb7f7c843e0958 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 14:49:56 -0400
Subject: [PATCH 21/38] fix(kpop): add comment [KHCP-11957]

---
 src/components/KPop/KPop.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index feeb6fe4f6..aa198753da 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -265,6 +265,7 @@ onMounted(() => {
   }
 
   if (popoverTrigger.value && popoverElement.value) {
+    // start the auto updates for the popover position
     autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
   }
 })

From c25487926b13fcaaae0591fd24ede73c71b3e16a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 16:31:01 -0400
Subject: [PATCH 22/38] fix(kpop): cleanup auto updates [KHCP-11957]

---
 src/components/KPop/KPop.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index aa198753da..6c527a0d82 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -239,6 +239,8 @@ const { floatingStyles, placement: calculatedPlacement, update: updatePosition }
   strategy: props.positionFixed ? 'fixed' : 'absolute',
 })
 
+const floatingUpdates = ref<Function | null>(null)
+
 defineExpose({
   hidePopover,
 })
@@ -266,7 +268,9 @@ onMounted(() => {
 
   if (popoverTrigger.value && popoverElement.value) {
     // start the auto updates for the popover position
-    autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
+    // autoUpdate cleanup function
+    // docs: https://floating-ui.com/docs/autoUpdate#usage
+    floatingUpdates.value = autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
   }
 })
 
@@ -288,6 +292,11 @@ onBeforeUnmount(() => {
       popoverElement.value.removeEventListener('focusout', hidePopover)
     }
   }
+
+  if (floatingUpdates.value) {
+    // need to cleanup the auto updates
+    floatingUpdates.value()
+  }
 })
 
 watch(isVisible, (val) => {

From d9bd325243c8623c4b780e4bc22836fa7c1463df Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 16:57:40 -0400
Subject: [PATCH 23/38] fix(kpop): popover flip and shift [KHCP-11957]

---
 sandbox/pages/SandboxDateTimePicker.vue | 2 +-
 src/components/KPop/KPop.vue            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/sandbox/pages/SandboxDateTimePicker.vue b/sandbox/pages/SandboxDateTimePicker.vue
index ace221584d..b4c0bf6290 100644
--- a/sandbox/pages/SandboxDateTimePicker.vue
+++ b/sandbox/pages/SandboxDateTimePicker.vue
@@ -139,7 +139,7 @@
           <div>
             <KDateTimePicker
               mode="dateTime"
-              popover-placement="top-end"
+              popover-placement="bottom-end"
               range
             />
           </div>
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 6c527a0d82..4ef91e281f 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -82,7 +82,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { useFloating, autoUpdate, autoPlacement } from '@floating-ui/vue'
+import { useFloating, autoUpdate, autoPlacement, flip, shift } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
 import { v4 as uuid4 } from 'uuid'
@@ -235,7 +235,7 @@ const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret':
 const popoverPlacement = computed((): PopPlacements => props.positionFixed ? props.placement : 'top')
 
 const { floatingStyles, placement: calculatedPlacement, update: updatePosition } = useFloating(popoverTrigger, popoverElement, {
-  ...(popoverPlacement.value === 'auto' ? { middleware: [autoPlacement()] } : { placement: popoverPlacement.value }),
+  ...(popoverPlacement.value === 'auto' ? { middleware: [autoPlacement()] } : { placement: popoverPlacement.value, middleware: [flip(), shift()] }),
   strategy: props.positionFixed ? 'fixed' : 'absolute',
 })
 

From 10510064bc167be089192ec5dca11634d5793d5b Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 17:01:18 -0400
Subject: [PATCH 24/38] test(ktooltip): remove invoke css [KHCP-11957]

---
 src/components/KTooltip/KTooltip.cy.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/KTooltip/KTooltip.cy.ts b/src/components/KTooltip/KTooltip.cy.ts
index 29197bec4e..236ab3b9e0 100644
--- a/src/components/KTooltip/KTooltip.cy.ts
+++ b/src/components/KTooltip/KTooltip.cy.ts
@@ -20,9 +20,6 @@ const rendersCorrectPosition = (variant: string) => {
       },
     })
 
-    // add some padding on the side so that tooltip doesn't collide with viewport
-    cy.get('.k-popover').invoke('css', 'padding', '150px')
-
     cy.get('button').click()
 
     cy.get('.k-tooltip').should('be.visible').and('have.text', `I'm on the ${variant} side!`)

From a71be92fc1c00808c22ccaa79b0b9647ee9f5b71 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 17:28:32 -0400
Subject: [PATCH 25/38] fix(kpop): popover element width [KHCP-11957]

---
 src/components/KDateTimePicker/KDateTimePicker.vue | 2 +-
 src/components/KPop/KPop.vue                       | 4 ++--
 src/components/KTooltip/KTooltip.vue               | 2 +-
 src/composables/useUtilities.ts                    | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 8b342138b5..5293e5ff41 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -12,7 +12,7 @@
       hide-close-icon
       :placement="popoverPlacement"
       position-fixed
-      width="auto"
+      width="max-content"
       @close="state.popoverOpen = false"
       @open="state.popoverOpen = true"
     >
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 4ef91e281f..0168b2f17d 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -135,7 +135,7 @@ const props = defineProps({
   },
   maxWidth: {
     type: String,
-    default: 'auto',
+    default: '100vw', // need to set for Floating UI to work properly
   },
   maxHeight: {
     type: String,
@@ -223,7 +223,7 @@ const clickHandler = (event: Event) => {
 
 const popoverStyle = computed(() => {
   return {
-    width: getSizeFromString(props.width),
+    width: props.width === 'auto' ? 'max-content' : getSizeFromString(props.width), // need to set to max-content for Floating UI to work properly
     maxWidth: getSizeFromString(props.maxWidth),
     maxHeight: getSizeFromString(props.maxHeight),
     ...floatingStyles.value,
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 7de98b5058..7e48355c34 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -10,7 +10,7 @@
     :popover-timeout="100"
     :position-fixed="positionFixed"
     trigger="hover"
-    width="auto"
+    width="max-content"
     :z-index="zIndex"
   >
     <slot />
diff --git a/src/composables/useUtilities.ts b/src/composables/useUtilities.ts
index ac9ead7252..f667536fe6 100644
--- a/src/composables/useUtilities.ts
+++ b/src/composables/useUtilities.ts
@@ -232,6 +232,7 @@ export default function useUtilities() {
    */
   const getSizeFromString = (sizeStr: string): string => {
     return sizeStr === 'auto' ||
+      sizeStr === 'max-content' ||
       sizeStr.endsWith('%') ||
       sizeStr.endsWith('vw') ||
       sizeStr.endsWith('vh') ||

From 81a15c83d2a9dbcf9cd2f92922d4f8aaed4afa11 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 17:42:31 -0400
Subject: [PATCH 26/38] fix(kpop): fix resize observer loop issue [KHCP-11957]

---
 src/components/KPop/KPop.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 0168b2f17d..ac2bc49c41 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -270,7 +270,9 @@ onMounted(() => {
     // start the auto updates for the popover position
     // autoUpdate cleanup function
     // docs: https://floating-ui.com/docs/autoUpdate#usage
-    floatingUpdates.value = autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
+    floatingUpdates.value = autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition, {
+      elementResize: false, // fixes ResizeObserver loop issue
+    })
   }
 })
 

From 04dd28a011ea65e73e84fedc1f63bdadb502d712 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 22:19:30 -0400
Subject: [PATCH 27/38] fix(kpop): floating ui middleware magic [KHCP-11957]

---
 .../KDateTimePicker/KDateTimePicker.vue       |  2 +-
 src/components/KPop/KPop.cy.ts                |  2 +-
 src/components/KPop/KPop.vue                  | 43 +++++++++++++------
 src/components/KTooltip/KTooltip.vue          |  2 +-
 src/composables/useUtilities.ts               |  1 -
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 5293e5ff41..8b342138b5 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -12,7 +12,7 @@
       hide-close-icon
       :placement="popoverPlacement"
       position-fixed
-      width="max-content"
+      width="auto"
       @close="state.popoverOpen = false"
       @open="state.popoverOpen = true"
     >
diff --git a/src/components/KPop/KPop.cy.ts b/src/components/KPop/KPop.cy.ts
index 70c2ec721a..e8d8c6eb8e 100644
--- a/src/components/KPop/KPop.cy.ts
+++ b/src/components/KPop/KPop.cy.ts
@@ -49,7 +49,7 @@ describe('KPop', () => {
       },
     })
     cy.get('.slottedEl').click()
-    cy.get('.popover').invoke('width').should('eq', width)
+    cy.get('.popover .popover-container').invoke('width').should('eq', width)
   })
 
   it('renders with correct title', () => {
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index ac2bc49c41..1032f5c8dd 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -27,10 +27,13 @@
         class="popover"
         :class="popoverClassesObj"
         role="dialog"
-        :style="popoverStyle"
+        :style="floatingStyles"
         :x-placement="calculatedPlacement"
       >
-        <div class="popover-container">
+        <div
+          class="popover-container"
+          :style="popoverStyles"
+        >
           <button
             v-if="!hideCloseIcon"
             ref="popoverCloseButton"
@@ -82,7 +85,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
 import type { PropType } from 'vue'
-import { useFloating, autoUpdate, autoPlacement, flip, shift } from '@floating-ui/vue'
+import { useFloating, autoUpdate, autoPlacement, flip, shift, size } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
 import { v4 as uuid4 } from 'uuid'
@@ -135,7 +138,7 @@ const props = defineProps({
   },
   maxWidth: {
     type: String,
-    default: '100vw', // need to set for Floating UI to work properly
+    default: 'auto',
   },
   maxHeight: {
     type: String,
@@ -221,12 +224,11 @@ const clickHandler = (event: Event) => {
   }
 }
 
-const popoverStyle = computed(() => {
+const popoverStyles = computed(() => {
   return {
-    width: props.width === 'auto' ? 'max-content' : getSizeFromString(props.width), // need to set to max-content for Floating UI to work properly
+    width: getSizeFromString(props.width),
     maxWidth: getSizeFromString(props.maxWidth),
     maxHeight: getSizeFromString(props.maxHeight),
-    ...floatingStyles.value,
   }
 })
 
@@ -235,8 +237,25 @@ const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret':
 const popoverPlacement = computed((): PopPlacements => props.positionFixed ? props.placement : 'top')
 
 const { floatingStyles, placement: calculatedPlacement, update: updatePosition } = useFloating(popoverTrigger, popoverElement, {
-  ...(popoverPlacement.value === 'auto' ? { middleware: [autoPlacement()] } : { placement: popoverPlacement.value, middleware: [flip(), shift()] }),
+  ...(popoverPlacement.value === 'auto' && { middleware: [autoPlacement()] }), // when placement is auto just use autoPlacement middleware
+  ...(popoverPlacement.value !== 'auto' && {
+    placement: popoverPlacement.value,
+    middleware: [
+      flip(),
+      shift(),
+      size({
+        apply({ elements, availableHeight }) {
+          requestAnimationFrame(() => {
+            Object.assign(elements.floating.style, {
+              maxHeight: `${availableHeight}px`,
+            })
+          })
+        },
+      }),
+    ],
+  }),
   strategy: props.positionFixed ? 'fixed' : 'absolute',
+  transform: false,
 })
 
 const floatingUpdates = ref<Function | null>(null)
@@ -270,9 +289,7 @@ onMounted(() => {
     // start the auto updates for the popover position
     // autoUpdate cleanup function
     // docs: https://floating-ui.com/docs/autoUpdate#usage
-    floatingUpdates.value = autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition, {
-      elementResize: false, // fixes ResizeObserver loop issue
-    })
+    floatingUpdates.value = autoUpdate(popoverTrigger.value, popoverElement.value, updatePosition)
   }
 })
 
@@ -351,6 +368,9 @@ $kPopCaretOffset: 16px;
   }
 
   .popover {
+    // need max-width: 100vw; and width: max-content; for Floating UI to work properly
+    max-width: 100vw;
+    width: max-content;
     z-index: v-bind('zIndex');
 
     // need to wrap popover content in a container because we cannot set position: relative; as that will break the floating-ui positioning
@@ -363,7 +383,6 @@ $kPopCaretOffset: 16px;
       flex-direction: column;
       font-family: var(--kui-font-family-text, $kui-font-family-text);
       gap: var(--kui-space-40, $kui-space-40);
-      max-width: none;
       padding: var(--kui-space-60, $kui-space-60);
       position: relative;
       text-align: left;
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 7e48355c34..7de98b5058 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -10,7 +10,7 @@
     :popover-timeout="100"
     :position-fixed="positionFixed"
     trigger="hover"
-    width="max-content"
+    width="auto"
     :z-index="zIndex"
   >
     <slot />
diff --git a/src/composables/useUtilities.ts b/src/composables/useUtilities.ts
index f667536fe6..ac9ead7252 100644
--- a/src/composables/useUtilities.ts
+++ b/src/composables/useUtilities.ts
@@ -232,7 +232,6 @@ export default function useUtilities() {
    */
   const getSizeFromString = (sizeStr: string): string => {
     return sizeStr === 'auto' ||
-      sizeStr === 'max-content' ||
       sizeStr.endsWith('%') ||
       sizeStr.endsWith('vw') ||
       sizeStr.endsWith('vh') ||

From 00e5841d8e25b86fa7ba64df0ccd625fe7093993 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 5 Jun 2024 23:24:17 -0400
Subject: [PATCH 28/38] fix(kpop): remove position fixed prop [KHCP-11957]

---
 docs/components/popover.md           | 49 +---------------------------
 docs/guide/migrating-to-version-9.md |  1 +
 sandbox/pages/SandboxPop.vue         | 21 ------------
 src/components/KPop/KPop.vue         | 27 +++++++--------
 4 files changed, 16 insertions(+), 82 deletions(-)

diff --git a/docs/components/popover.md b/docs/components/popover.md
index da27fed8d2..3f36aa6ff7 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -95,8 +95,7 @@ Accepted values are:
 <ul>
   <li v-for="placement in PopPlacementsArray" :key="`${placement}-placement`">
     <code>{{ placement }}</code> 
-    <span v-if="placement === 'auto'" v-html="getDefaultPlacementMessage(true)" />
-    <span v-if="placement === 'top'" v-html="getDefaultPlacementMessage(false)" />
+    <span v-if="placement === 'auto'">(default)</span>
   </li>
 </ul>
 
@@ -265,38 +264,6 @@ Boolean to control whether or not the popover should close when a user clicks wi
 </KPop>
 ```
 
-### positionFixed
-
-A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries. Defaults to `true`.
-
-<div class="position-fixed-container">
-  <KPop button-text="Fixed positioning" placement="top">
-    <template #content>
-      Popover content.
-    </template>
-  </KPop>
-
-  <KPop :position-fixed="false" placement="top">
-    <KButton appearance="danger">
-      Non-fixed positioning
-    </KButton>
-    <template #content>
-      Popover content.
-    </template>
-  </KPop>
-</div>
-
-```html
-<KPop
-  :position-fixed="false"
-  button-text="Open popover"
->
-  <template #content>
-    Popover content.
-  </template>
-</KPop>
-```
-
 ### hideCloseIcon
 
 Boolean to hide close button in popover content.
@@ -569,8 +536,6 @@ Fires when the popover content is clicked.
 import { PopPlacementsArray } from '@/types'
 import { CheckIcon, CloseIcon } from '@kong/icons'
 import { KUI_ICON_SIZE_30, KUI_COLOR_TEXT_SUCCESS, KUI_COLOR_TEXT_DANGER } from '@kong/design-tokens'
-
-const getDefaultPlacementMessage = (value: boolean) => `(default when <a href="#positionfixed"><code>positionFixed</code> prop</a> is <code>${value}</code>)`
 </script>
 
 <style lang="scss" scoped>
@@ -586,18 +551,6 @@ const getDefaultPlacementMessage = (value: boolean) => `(default when <a href="#
   gap: $kui-space-40;
 }
 
-.position-fixed-container {
-  background-color: $kui-color-background-neutral-weakest;
-  border: $kui-border-width-10 dashed $kui-color-border-neutral-weak;
-  width: fit-content;
-  padding: $kui-space-90;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  gap: $kui-space-50;
-  border-radius: $kui-border-radius-30;
-}
-
 .button-right {
   margin-left: $kui-space-auto;
 }
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index ee6dfc9932..3af47573de 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -639,6 +639,7 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `placement` prop options have changed, see [Constants, Types & Interfaces](#constants-types--interfaces-15) for more details
 * `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
 * `target` prop has been removed (popover element is always mounted to `.k-popover` element)
+* `positionFixed` prop has been removed (popover element uses `position: fixed;` as a default)
 
 #### Slots
 
diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
index 1276504170..7def908661 100644
--- a/sandbox/pages/SandboxPop.vue
+++ b/sandbox/pages/SandboxPop.vue
@@ -139,27 +139,6 @@
           </KPop>
         </KComponent>
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="positionFixed">
-        <KComponent
-          v-slot="{ data }"
-          :data="{ positionFixed: true }"
-        >
-          <KInputSwitch
-            v-model="data.positionFixed"
-            label="Position fixed"
-          />
-
-          <KPop
-            :key="data.positionFixed ? 'fixed' : 'absolute'"
-            button-text="Button"
-            :position-fixed="data.positionFixed"
-          >
-            <template #content>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </template>
-          </KPop>
-        </KComponent>
-      </SandboxSectionComponent>
 
       <!-- Slots -->
       <SandboxTitleComponent
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 1032f5c8dd..59288c4192 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -156,10 +156,6 @@ const props = defineProps({
     type: Number,
     default: 1000,
   },
-  positionFixed: {
-    type: Boolean,
-    default: true,
-  },
 })
 
 const emit = defineEmits(['open', 'close', 'popover-click'])
@@ -234,19 +230,24 @@ const popoverStyles = computed(() => {
 
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
-const popoverPlacement = computed((): PopPlacements => props.positionFixed ? props.placement : 'top')
-
 const { floatingStyles, placement: calculatedPlacement, update: updatePosition } = useFloating(popoverTrigger, popoverElement, {
-  ...(popoverPlacement.value === 'auto' && { middleware: [autoPlacement()] }), // when placement is auto just use autoPlacement middleware
-  ...(popoverPlacement.value !== 'auto' && {
-    placement: popoverPlacement.value,
+  ...(props.placement === 'auto' && { middleware: [autoPlacement()] }), // when placement is auto just use autoPlacement middleware
+  ...(props.placement !== 'auto' && {
+    placement: props.placement,
     middleware: [
-      flip(),
-      shift(),
+      shift(), // Shifts the floating element to keep it in view.
+      flip(), // Changes the placement of the floating element to keep it in view.
+      /**
+       * ! Needs to be placed after flip middleware
+       * Need to use the size middleware to set the max-width and max-height of the popover
+       * So that it's can prefer the original position as much as possible
+       * Docs: https://floating-ui.com/docs/size#using-with-flip
+       */
       size({
-        apply({ elements, availableHeight }) {
+        apply({ elements, availableWidth, availableHeight }) {
           requestAnimationFrame(() => {
             Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
               maxHeight: `${availableHeight}px`,
             })
           })
@@ -254,7 +255,7 @@ const { floatingStyles, placement: calculatedPlacement, update: updatePosition }
       }),
     ],
   }),
-  strategy: props.positionFixed ? 'fixed' : 'absolute',
+  strategy: 'fixed',
   transform: false,
 })
 

From 0918c78b4b52e00ea557e87bc8392069bdea8246 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 6 Jun 2024 09:45:22 -0400
Subject: [PATCH 29/38] fix: lint:fix

---
 src/components/KPop/KPop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 59288c4192..b755356c08 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -259,7 +259,7 @@ const { floatingStyles, placement: calculatedPlacement, update: updatePosition }
   transform: false,
 })
 
-const floatingUpdates = ref<Function | null>(null)
+const floatingUpdates = ref<() => void>()
 
 defineExpose({
   hidePopover,

From 41ea59f070e2016bacbff4d15bdf07ead5e5ca20 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 6 Jun 2024 09:56:40 -0400
Subject: [PATCH 30/38] test(kdropdown): fix component test [KHCP-11957]

---
 src/components/KDropdown/KDropdown.cy.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/KDropdown/KDropdown.cy.ts b/src/components/KDropdown/KDropdown.cy.ts
index 50d6de5fc4..be7a3911d6 100644
--- a/src/components/KDropdown/KDropdown.cy.ts
+++ b/src/components/KDropdown/KDropdown.cy.ts
@@ -50,7 +50,7 @@ describe('KDropdown', () => {
 
     cy.getTestId('dropdown-trigger').click({ force: true })
 
-    cy.get('.k-dropdown-popover').invoke('width').should('eq', width)
+    cy.get('.k-dropdown-popover .popover-container').invoke('width').should('eq', width)
   })
 
   it('renders disabled props when passed', () => {
@@ -261,7 +261,7 @@ describe('KDropdownItem', () => {
         disabled: true,
       },
       attrs: {
-        onClick: () => {},
+        onClick: () => { },
       },
     })
 

From f5d6e09f7386c610cd99ce8cf27f33794c20623c Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Thu, 6 Jun 2024 14:38:46 -0400
Subject: [PATCH 31/38] fix: apply pr feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 docs/guide/migrating-to-version-9.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 3af47573de..b7a378761d 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -637,9 +637,9 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
 * `positionFixed` prop default value has been changed to `true`
 * `placement` prop options have changed, see [Constants, Types & Interfaces](#constants-types--interfaces-15) for more details
-* `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
+* `hidePopover` prop has been removed. Instead, you can use the method `hidePopover` exposed by the component
 * `target` prop has been removed (popover element is always mounted to `.k-popover` element)
-* `positionFixed` prop has been removed (popover element uses `position: fixed;` as a default)
+* `positionFixed` prop has been removed (popover element always uses `position: fixed`)
 
 #### Slots
 

From f5215f5e758de48bb6ffe41fa96a327263e51ee1 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 6 Jun 2024 14:39:21 -0400
Subject: [PATCH 32/38] fix(*): remove position fixed prop [KHCP-11957]

---
 docs/components/multiselect.md                     |  4 ----
 docs/components/select.md                          |  4 ----
 docs/components/tooltip.md                         |  4 ----
 docs/guide/migrating-to-version-9.md               | 13 ++++++++++++-
 src/components/KBadge/KBadge.vue                   |  1 -
 src/components/KCopy/KCopy.vue                     |  2 --
 src/components/KDateTimePicker/KDateTimePicker.vue |  1 -
 src/components/KDropdown/KDropdown.vue             |  2 --
 src/components/KLabel/KLabel.vue                   |  1 -
 src/components/KMultiselect/KMultiselect.vue       |  8 --------
 src/components/KPop/KPop.vue                       |  1 +
 src/components/KSelect/KSelect.vue                 |  8 --------
 src/components/KTable/KTable.vue                   |  1 -
 src/components/KTooltip/KTooltip.vue               |  8 --------
 src/types/label.ts                                 |  1 -
 15 files changed, 13 insertions(+), 46 deletions(-)

diff --git a/docs/components/multiselect.md b/docs/components/multiselect.md
index 3b0389ca61..36a240f0b9 100644
--- a/docs/components/multiselect.md
+++ b/docs/components/multiselect.md
@@ -301,10 +301,6 @@ Accepted values: `sticky` (default) and `static`.
 <KMultiselect dropdown-footer-text-position="static" dropdown-footer-text="Static dropdown footer text" :items="items" />
 ```
 
-### positionFixed
-
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [`KPop` docs](popover.html#positionfixed) for more information.
-
 ### loading
 
 You can use the `loading` prop to show a loading indicator in place of the chevron while fetching data from API.
diff --git a/docs/components/select.md b/docs/components/select.md
index d49dd57111..62da931c1b 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -360,10 +360,6 @@ Reuse the same display format provided via the [`item-template` slot](#itemtempl
 </KSelect>
 ```
 
-### positionFixed
-
-Use fixed positioning for the select dropdown to avoid content being clipped by the boundaries of its parent container. See [KPopover](/components/popover#positionfixed) docs for more information.
-
 ### enableItemCreation
 
 When used in conjunction with `enableFiltering` set to `true`, KSelect will suggest adding a new value when filtering produces no results.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 07bbb565bb..b37b969ee5 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -83,10 +83,6 @@ Here are the different options:
 </KTooltip>
 ```
 
-### positionFixed
-
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `true`. See [KPop docs](/components/popover#positionfixed) for more information.
-
 ### maxWidth
 
 You can set the maximum width of the tooltip container with the `maxWidth` property. `maxWidth` defaults to `auto`.
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index b7a378761d..2b200f13aa 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -497,6 +497,10 @@ This component has been removed.
 * `k-input-label` class has been renamed to `k-label`
 * `is-required` class has been renamed to `required`
 
+#### Constant, Types & Interfaces
+
+* `positionFixed` parameter was removed from `TooltipAttributes` interface
+
 ### KMenu
 
 This component has been removed.
@@ -564,6 +568,7 @@ This component is deprecated and will be removed in the next major release.
 * default value of `collapsedContext` prop has changed to `true`
 * default value of `selectedRowCount` prop has changed to `1`
 * `expandSelected` prop has been removed
+* `positionFixed` prop has been removed
 
 #### Events
 
@@ -635,9 +640,14 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
 * `popoverTransitions` prop has been removed
 * `testMode` prop has been removed
 * `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
+<<<<<<< Updated upstream
 * `positionFixed` prop default value has been changed to `true`
 * `placement` prop options have changed, see [Constants, Types & Interfaces](#constants-types--interfaces-15) for more details
 * `hidePopover` prop has been removed. Instead, you can use the method `hidePopover` exposed by the component
+=======
+* `placement` prop options have changed, see _Constants, Types & Interfaces_ section for more details
+* `hidePopover` prop has been removed. Instead, you can use exposed by the component `hidePopover` method
+>>>>>>> Stashed changes
 * `target` prop has been removed (popover element is always mounted to `.k-popover` element)
 * `positionFixed` prop has been removed (popover element always uses `position: fixed`)
 
@@ -748,6 +758,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `overlayLabel` prop has been removed
 * `filterFunc` prop has been renamed to `filterFunction`
 * `autosuggest` prop has been removed and replaced with `enableFiltering` prop. Should you want to simply enable default component-handled filtering or perform async fetching behind the scenes, you can use this prop in combination with`@query-change` event to achieve that
+* `positionFixed` prop has been removed
 
 #### Events
 
@@ -919,7 +930,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 * `testMode` prop has been removed
 * `label` prop has been deprecated in favor of `text` prop
-* default value of `positionFixed` prop has been changed to `true`
+* `positionFixed` prop has been removed
 
 #### Structure
 
diff --git a/src/components/KBadge/KBadge.vue b/src/components/KBadge/KBadge.vue
index b7f866aaa3..7b0ffc6297 100644
--- a/src/components/KBadge/KBadge.vue
+++ b/src/components/KBadge/KBadge.vue
@@ -7,7 +7,6 @@
       :is="showTooltip ? 'KTooltip' : 'div'"
       class="badge-content"
       :class="{ 'icon-after': !iconBefore }"
-      :position-fixed="showTooltip ? true : undefined"
     >
       <template
         v-if="showTooltip"
diff --git a/src/components/KCopy/KCopy.vue b/src/components/KCopy/KCopy.vue
index abe59fe59e..446fa68605 100644
--- a/src/components/KCopy/KCopy.vue
+++ b/src/components/KCopy/KCopy.vue
@@ -15,7 +15,6 @@
         :class="[textTooltipClasses]"
         data-testid="copy-tooltip-wrapper"
         placement="bottom-start"
-        position-fixed
         :text="textTooltipLabel"
       >
         <div
@@ -31,7 +30,6 @@
         class="text-icon-wrapper"
         max-width="500px"
         placement="bottom-start"
-        position-fixed
         :text="tooltipText"
       >
         <KClipboardProvider v-slot="{ copyToClipboard }">
diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 2298e0988e..93459970ee 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -11,7 +11,6 @@
       hide-caret
       hide-close-icon
       :placement="popoverPlacement"
-      position-fixed
       width="auto"
       @close="state.popoverOpen = false"
       @open="state.popoverOpen = true"
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index 2f63b7a2f6..60f5ded6ab 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -21,7 +21,6 @@
           :label="disabledTooltip ? disabledTooltip : undefined"
           :max-width="!!disabledTooltip ? '240' : undefined"
           :position="!!disabledTooltip ? 'bottom' : undefined"
-          :position-fixed="!!disabledTooltip ? true : undefined"
         >
           <slot
             :is-open="isToggled.value"
@@ -163,7 +162,6 @@ const defaultKPopAttributes = {
   hideCaret: true,
   popoverClasses: 'k-dropdown-popover',
   popoverTimeout: 0,
-  positionFixed: true,
   placement: 'bottom-start' as PopPlacements,
 }
 
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index 93a559a93a..49076e618a 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -10,7 +10,6 @@
       v-if="hasTooltip"
       v-bind="tooltipAttributes"
       class="label-tooltip"
-      position-fixed
       :tooltip-id="tooltipId"
     >
       <InfoIcon
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index 967b075397..ad9efd2c6b 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -26,7 +26,6 @@
           ref="popper"
           hide-close-icon
           v-bind="boundKPopAttributes"
-          :position-fixed="positionFixed"
           @close="() => handleToggle(false, isToggled, toggle)"
           @open="() => handleToggle(true, isToggled, toggle)"
         >
@@ -396,13 +395,6 @@ const props = defineProps({
     // Items must have a label & value
     validator: (items: MultiselectItem[]) => !items.length || (items.every(i => i.label !== undefined && i.value !== undefined) && itemValuesAreUnique(items)),
   },
-  /**
-   * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-   */
-  positionFixed: {
-    type: Boolean,
-    default: true,
-  },
   /**
    * Override default filter functionality of case-insensitive search on label
    */
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index b755356c08..8d712e25b3 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -370,6 +370,7 @@ $kPopCaretOffset: 16px;
 
   .popover {
     // need max-width: 100vw; and width: max-content; for Floating UI to work properly
+    // gets overwritten by the size middleware once the popover is positioned
     max-width: 100vw;
     width: max-content;
     z-index: v-bind('zIndex');
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index dd7206a93c..b9b292123c 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -26,7 +26,6 @@
         v-bind="boundKPopAttributes"
         close-on-popover-click
         hide-close-icon
-        :position-fixed="positionFixed"
         @close="() => onClose(toggle, isToggled.value)"
         @open="() => onOpen(toggle)"
         @popover-click="() => onPopoverClick(toggle)"
@@ -269,13 +268,6 @@ const props = defineProps({
     // Items must have a label & value
     validator: (items: SelectItem[]) => !items.length || items.every(i => i.label !== undefined && i.value !== undefined),
   },
-  /**
-   * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-   */
-  positionFixed: {
-    type: Boolean,
-    default: true,
-  },
   /**
    * Control whether the input supports filtering.
    */
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 19a61595c3..ad0916511c 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -150,7 +150,6 @@
                   <KTooltip
                     v-if="column.tooltip || $slots[getColumnTooltipSlotName(column.key)]"
                     :data-testid="getColumnTooltipSlotName(column.key)"
-                    position-fixed
                     :tooltip-id="`${getColumnTooltipSlotName(column.key)}-${tableId}`"
                   >
                     <InfoIcon
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 7de98b5058..1a78b46bdb 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -8,7 +8,6 @@
     :placement="placement"
     popover-classes="k-tooltip"
     :popover-timeout="100"
-    :position-fixed="positionFixed"
     trigger="hover"
     width="auto"
     :z-index="zIndex"
@@ -68,13 +67,6 @@ const props = defineProps({
     },
   },
   /**
-  * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-  */
-  positionFixed: {
-    type: Boolean,
-    default: true,
-  },
-  /**
   * Set the max-width of the ktooltip
   */
   maxWidth: {
diff --git a/src/types/label.ts b/src/types/label.ts
index 6273c684a7..f10b03110a 100644
--- a/src/types/label.ts
+++ b/src/types/label.ts
@@ -4,6 +4,5 @@ export type Placement = PopPlacements
 export interface TooltipAttributes {
   label?: string
   placement?: Placement
-  positionFixed?: boolean
   maxWidth?: string
 }

From 8c3982ab92a1994533fd21171d5eacfc1680dc66 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 6 Jun 2024 14:55:21 -0400
Subject: [PATCH 33/38] fix(kpop): minor fix [KHCP-11957]

---
 src/components/KPop/KPop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 8d712e25b3..683fa654f0 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -240,7 +240,7 @@ const { floatingStyles, placement: calculatedPlacement, update: updatePosition }
       /**
        * ! Needs to be placed after flip middleware
        * Need to use the size middleware to set the max-width and max-height of the popover
-       * So that it's can prefer the original position as much as possible
+       * So that it can prefer the original position as much as possible
        * Docs: https://floating-ui.com/docs/size#using-with-flip
        */
       size({

From f87058cea5060caca0159311ca8b254380716c0d Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 7 Jun 2024 11:02:45 -0400
Subject: [PATCH 34/38] fix(kpop): placement backwards compitability
 [KHCP-11957]

---
 src/components/KPop/KPop.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 683fa654f0..3d953d2120 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -230,10 +230,18 @@ const popoverStyles = computed(() => {
 
 const popoverClassesObj = computed(() => [props.popoverClasses, { 'hide-caret': props.hideCaret }])
 
+/**
+ * Backwards compatibility for the placement prop
+ * Converts the placement prop to the correct format for Floating UI
+ * E.g.: 'topStart' -> 'top-start'
+ * TODO: remove this once we've upgraded to v9 across the board
+ */
+const popoverPlacement = computed((): PopPlacements => props.placement.trim().replace(/ /g, '-').replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase()).replace(/--+/g, '-').replace(/-+$/g, '') as PopPlacements)
+
 const { floatingStyles, placement: calculatedPlacement, update: updatePosition } = useFloating(popoverTrigger, popoverElement, {
-  ...(props.placement === 'auto' && { middleware: [autoPlacement()] }), // when placement is auto just use autoPlacement middleware
-  ...(props.placement !== 'auto' && {
-    placement: props.placement,
+  ...(popoverPlacement.value === 'auto' && { middleware: [autoPlacement()] }), // when placement is auto just use autoPlacement middleware
+  ...(popoverPlacement.value !== 'auto' && {
+    placement: popoverPlacement.value,
     middleware: [
       shift(), // Shifts the floating element to keep it in view.
       flip(), // Changes the placement of the floating element to keep it in view.

From 1faa5bf4138d708a318a0892260246d6a9c0aa59 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 7 Jun 2024 15:01:30 -0400
Subject: [PATCH 35/38] fix(kbadge, kmultiselect): fix truncated item jumpy bug
 [KHCP-11957]

---
 sandbox/pages/SandboxMultiselect.vue         |  2 +-
 src/components/KBadge/KBadge.vue             | 49 ++++++++------------
 src/components/KMultiselect/KMultiselect.vue |  2 +-
 3 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/sandbox/pages/SandboxMultiselect.vue b/sandbox/pages/SandboxMultiselect.vue
index 48a401a128..e733d320fc 100644
--- a/sandbox/pages/SandboxMultiselect.vue
+++ b/sandbox/pages/SandboxMultiselect.vue
@@ -281,7 +281,7 @@ import type { MultiselectItem } from '@/types'
 import { KongIcon } from '@kong/icons'
 
 const multiselectItems: MultiselectItem[] = [{
-  label: 'Service A',
+  label: 'Service A (long truncated with ellipsis item)',
   value: 'a',
   selected: true,
 }, {
diff --git a/src/components/KBadge/KBadge.vue b/src/components/KBadge/KBadge.vue
index 7b0ffc6297..3571ef2f70 100644
--- a/src/components/KBadge/KBadge.vue
+++ b/src/components/KBadge/KBadge.vue
@@ -5,24 +5,22 @@
   >
     <component
       :is="showTooltip ? 'KTooltip' : 'div'"
-      class="badge-content"
-      :class="{ 'icon-after': !iconBefore }"
+      :text="showTooltip ? tooltip : undefined"
     >
-      <template
-        v-if="showTooltip"
-        #content
-      >
-        {{ tooltip }}
-      </template>
-      <slot
-        v-if="$slots.icon"
-        name="icon"
-      />
       <div
-        ref="badgeTextElement"
-        class="badge-content-wrapper"
+        class="badge-content"
+        :class="{ 'icon-after': !iconBefore }"
       >
-        <slot />
+        <slot
+          v-if="$slots.icon"
+          name="icon"
+        />
+        <div
+          ref="badgeTextElement"
+          class="badge-content-wrapper"
+        >
+          <slot />
+        </div>
       </div>
     </component>
   </div>
@@ -30,13 +28,12 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, nextTick, onMounted } from 'vue'
 import KButton from '@/components/KButton/KButton.vue'
 import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import type { BadgeAppearance } from '@/types'
 import { BadgeAppearances, BadgeMethodAppearances } from '@/types'
 import useUtilities from '@/composables/useUtilities'
-import { ResizeObserverHelper } from '@/utilities/resizeObserverHelper'
 
 const { getSizeFromString } = useUtilities()
 
@@ -77,7 +74,7 @@ const props = defineProps({
    */
   maxWidth: {
     type: String,
-    default: '200px',
+    default: '200',
   },
   /**
    * A boolean whether or not to show the icon before the badge text (or after).
@@ -92,15 +89,15 @@ const isMethodBadge = computed(() => {
   return Object.keys(BadgeMethodAppearances).includes(props.appearance)
 })
 
-const badgeTextElement = ref<HTMLDivElement>()
+const badgeTextElement = ref<HTMLDivElement | null>()
 
-const resizeObserver = ref<ResizeObserverHelper>()
 const isTruncated = ref<boolean>(false)
 
 const maxWidth = computed((): string => getSizeFromString(props.maxWidth))
 
-const setTruncation = (): void => {
+const setTruncation = async (): Promise<void> => {
   if (badgeTextElement.value) {
+    await nextTick()
     isTruncated.value = badgeTextElement.value.offsetWidth < badgeTextElement.value.scrollWidth
   }
 }
@@ -118,15 +115,7 @@ const showTooltip = computed((): boolean => {
 })
 
 onMounted(() => {
-  resizeObserver.value = ResizeObserverHelper.create(setTruncation)
-
-  resizeObserver.value.observe(badgeTextElement.value as HTMLDivElement)
-})
-
-onUnmounted(() => {
-  if (resizeObserver.value) {
-    resizeObserver.value.unobserve(badgeTextElement.value as HTMLDivElement)
-  }
+  setTruncation()
 })
 </script>
 
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index ad9efd2c6b..9a1b50079f 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -653,7 +653,7 @@ const stageSelections = () => {
   setTimeout(() => {
     const elem = multiselectSelectionsStagingElement.value
 
-    if (!props.collapsedContext) {
+    if (props.collapsedContext) {
       // if it's collapsed don't do calculations, because we don't display badges
       stagingKey.value++
       return

From abdcf518506e6769d9add847a3cd8398580c0bf5 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 7 Jun 2024 15:12:58 -0400
Subject: [PATCH 36/38] fix(kpop): popover trigger wrapper display [KHCP-11957]

---
 src/components/KDateTimePicker/KDateTimePicker.vue | 1 +
 src/components/KPop/KPop.vue                       | 2 +-
 src/components/KSelect/KSelect.vue                 | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index 93459970ee..770fae590d 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -585,6 +585,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
 
   .datetime-picker-trigger-wrapper {
     position: relative;
+    width: 100%;
 
     .datetime-picker-trigger {
       @include inputDefaults;
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 3d953d2120..ba0df454dd 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -372,7 +372,7 @@ $kPopCaretOffset: 16px;
   display: flex;
 
   .popover-trigger-wrapper {
-    display: inline-block;
+    display: inline-flex;
     width: 100%;
   }
 
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index b9b292123c..ff5d8b896c 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -704,6 +704,7 @@ $kSelectInputHelpTextHeight: calc(var(--kui-line-height-20, $kui-line-height-20)
 
   .select-wrapper {
     position: relative;
+    width: 100%;
   }
 
   .select-input {

From 5610c907d7343f5e08896866f71ff9ee56cd6721 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 10 Jun 2024 09:37:23 -0400
Subject: [PATCH 37/38] fix(kdropdown): minor fix [KHCP-11957]

---
 src/components/KDropdown/KDropdown.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index 60f5ded6ab..ce9dd74dd2 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -219,6 +219,10 @@ onMounted(() => {
 .k-dropdown {
   width: fit-content;
 
+  .dropdown-trigger {
+    width: 100%;
+  }
+
   :deep(.popover.k-dropdown-popover .popover-container) {
     border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     border-radius: var(--kui-border-radius-30, $kui-border-radius-30);

From db1b459c79c685c4896a719cf033b49915a5cc4d Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 10 Jun 2024 09:54:53 -0400
Subject: [PATCH 38/38] fix: misc fix [KHCP-11957]

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 055e26b7f4..d4a4d3e8af 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.6",
     "@kong/icons": "^1.13.0",
     "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",