@gitlab/ui 126.3.3 → 126.4.0

package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -3,13 +3,8 @@
  */
 
 import { NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP } from '../../../constants/components'
-import {
-  EVENT_NAME_DESTROYED,
-  EVENT_NAME_HIDDEN,
-  EVENT_NAME_HIDE,
-  EVENT_NAME_SHOW,
-  HOOK_EVENT_NAME_DESTROYED
-} from '../../../constants/events'
+import { EVENT_NAME_DESTROYED, EVENT_NAME_HIDE, EVENT_NAME_SHOW } from '../../../constants/events'
+import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
 import { useParentMixin } from '../../../mixins/use-parent'
 import { concat } from '../../../utils/array'
 import { getComponentConfig } from '../../../utils/config'
@@ -77,8 +72,8 @@ const plugin = Vue => {
       }
     },
     mounted() {
-      // Self destruct handler
-      const handleDestroy = () => {
+      // Self destruct handler (stored as instance property for use in onAfterLeave)
+      this.$_handleDestroy = () => {
         // Ensure the toast has been force hidden
         this.localShow = false
         this.doRender = false
@@ -93,16 +88,23 @@ const plugin = Vue => {
         })
       }
       // Self destruct if parent destroyed
-      this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy)
-      // Self destruct after hidden
-      this.$once(EVENT_NAME_HIDDEN, handleDestroy)
+      onInstanceDestroy(this.bvParent, this.$_handleDestroy)
       // Self destruct when toaster is destroyed
       this.listenOnRoot(getRootEventName(NAME_TOASTER, EVENT_NAME_DESTROYED), toaster => {
         /* istanbul ignore next: hard to test */
         if (toaster === this.toaster) {
-          handleDestroy()
+          this.$_handleDestroy()
         }
       })
+    },
+    methods: {
+      // Override parent's onAfterLeave to self-destruct after hidden
+      onAfterLeave() {
+        // Call parent's implementation
+        BToast.options.methods.onAfterLeave.call(this)
+        // Self destruct after hidden
+        this.$_handleDestroy()
+      }
     }
   })
 

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-popper.js

@@ -12,9 +12,9 @@ import {
   EVENT_NAME_HIDDEN,
   EVENT_NAME_HIDE,
   EVENT_NAME_SHOW,
-  EVENT_NAME_SHOWN,
-  HOOK_EVENT_NAME_DESTROYED
+  EVENT_NAME_SHOWN
 } from '../../../constants/events'
+import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
 import {
   PROP_TYPE_ARRAY_STRING,
   PROP_TYPE_NUMBER_STRING,
@@ -136,12 +136,8 @@ export const BVPopper = /*#__PURE__*/ extend({
     this.$_popper = null
     // Ensure we show as we mount
     this.localShow = true
-    // Create popper instance before shown
-    this.$on(EVENT_NAME_SHOW, el => {
-      this.popperCreate(el)
-    })
-    // Self destruct handler
-    const handleDestroy = () => {
+    // Self destruct handler (stored as instance property for use in afterLeave)
+    this.$_handleDestroy = () => {
       this.$nextTick(() => {
         // In a `requestAF()` to release control back to application
         requestAF(() => {
@@ -150,9 +146,7 @@ export const BVPopper = /*#__PURE__*/ extend({
       })
     }
     // Self destruct if parent destroyed
-    this.bvParent.$once(HOOK_EVENT_NAME_DESTROYED, handleDestroy)
-    // Self destruct after hidden
-    this.$once(EVENT_NAME_HIDDEN, handleDestroy)
+    onInstanceDestroy(this.bvParent, this.$_handleDestroy)
   },
   beforeMount() {
     // Ensure that the attachment position is correct before mounting
@@ -236,10 +230,17 @@ export const BVPopper = /*#__PURE__*/ extend({
         props: { appear: true, noFade },
         on: {
           // Events used by parent component/instance
-          beforeEnter: el => this.$emit(EVENT_NAME_SHOW, el),
+          beforeEnter: el => {
+            this.popperCreate(el)
+            this.$emit(EVENT_NAME_SHOW, el)
+          },
           afterEnter: el => this.$emit(EVENT_NAME_SHOWN, el),
           beforeLeave: el => this.$emit(EVENT_NAME_HIDE, el),
-          afterLeave: el => this.$emit(EVENT_NAME_HIDDEN, el)
+          afterLeave: el => {
+            this.$emit(EVENT_NAME_HIDDEN, el)
+            // Self destruct after hidden
+            this.$_handleDestroy()
+          }
         }
       },
       [this.localShow ? this.renderTemplate(h) : h()]

package/src/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip.js

@@ -18,10 +18,9 @@ import {
   EVENT_NAME_MOUSELEAVE,
   EVENT_NAME_SHOW,
   EVENT_NAME_SHOWN,
-  EVENT_OPTIONS_NO_CAPTURE,
-  HOOK_EVENT_NAME_BEFORE_DESTROY,
-  HOOK_EVENT_NAME_DESTROYED
+  EVENT_OPTIONS_NO_CAPTURE
 } from '../../../constants/events'
+import { onInstanceDestroy } from '../../../utils/on-instance-destroy'
 import { useParentMixin } from '../../../mixins/use-parent'
 import { arrayIncludes, concat, from as arrayFrom } from '../../../utils/array'
 import { getInstanceFromElement } from '../../../utils/element-to-vue-instance-registry'
@@ -65,7 +64,7 @@ import { toInteger } from '../../../utils/number'
 import { keys } from '../../../utils/object'
 import { warn } from '../../../utils/warn'
 import { BvEvent } from '../../../utils/bv-event.class'
-import { createNewChildComponent } from '../../../utils/create-new-child-component'
+import { createNewChildComponent, eventProp } from '../../../utils/create-new-child-component'
 import { listenOnRootMixin } from '../../../mixins/listen-on-root'
 import { BVTooltipTemplate } from './bv-tooltip-template'
 
@@ -250,7 +249,7 @@ export const BVTooltip = /*#__PURE__*/ extend({
 
     // Destroy ourselves when the parent is destroyed
     if (this.bvParent) {
-      this.bvParent.$once(HOOK_EVENT_NAME_BEFORE_DESTROY, () => {
+      onInstanceDestroy(this.bvParent, () => {
         this.$nextTick(() => {
           // In a `requestAF()` to release control back to application
           requestAF(() => {
@@ -343,29 +342,23 @@ export const BVTooltip = /*#__PURE__*/ extend({
           // Ensure the following are integers
           offset: toInteger(this.offset, 0),
           arrowPadding: toInteger(this.arrowPadding, 0),
-          boundaryPadding: toInteger(this.boundaryPadding, 0)
+          boundaryPadding: toInteger(this.boundaryPadding, 0),
+          // Template transition phase events (handled once only)
+          [eventProp(EVENT_NAME_SHOW, { once: true })]: this.onTemplateShow,
+          [eventProp(EVENT_NAME_SHOWN, { once: true })]: this.onTemplateShown,
+          [eventProp(EVENT_NAME_HIDE, { once: true })]: this.onTemplateHide,
+          [eventProp(EVENT_NAME_HIDDEN, { once: true })]: this.onTemplateHidden,
+          // Convenience events from template
+          [eventProp(EVENT_NAME_FOCUSIN)]: this.handleEvent,
+          [eventProp(EVENT_NAME_FOCUSOUT)]: this.handleEvent,
+          [eventProp(EVENT_NAME_MOUSEENTER)]: this.handleEvent,
+          [eventProp(EVENT_NAME_MOUSELEAVE)]: this.handleEvent
         }
       }))
       // We set the initial reactive data (values that can be changed while open)
       this.handleTemplateUpdate()
-      // Template transition phase events (handled once only)
-      // When the template has mounted, but not visibly shown yet
-      $tip.$once(EVENT_NAME_SHOW, this.onTemplateShow)
-      // When the template has completed showing
-      $tip.$once(EVENT_NAME_SHOWN, this.onTemplateShown)
-      // When the template has started to hide
-      $tip.$once(EVENT_NAME_HIDE, this.onTemplateHide)
-      // When the template has completed hiding
-      $tip.$once(EVENT_NAME_HIDDEN, this.onTemplateHidden)
       // When the template gets destroyed for any reason
-      $tip.$once(HOOK_EVENT_NAME_DESTROYED, this.destroyTemplate)
-      // Convenience events from template
-      // To save us from manually adding/removing DOM
-      // listeners to tip element when it is open
-      $tip.$on(EVENT_NAME_FOCUSIN, this.handleEvent)
-      $tip.$on(EVENT_NAME_FOCUSOUT, this.handleEvent)
-      $tip.$on(EVENT_NAME_MOUSEENTER, this.handleEvent)
-      $tip.$on(EVENT_NAME_MOUSELEAVE, this.handleEvent)
+      onInstanceDestroy($tip, this.destroyTemplate)
       // Mount (which triggers the `show`)
       $tip.$mount(container.appendChild(document.createElement('div')))
       // Template will automatically remove its markup from DOM when hidden

package/src/vendor/bootstrap-vue/src/components/tooltip/tooltip.js

@@ -28,7 +28,7 @@ import { getScopeId } from '../../utils/get-scope-id'
 import { isUndefinedOrNull } from '../../utils/inspect'
 import { pick } from '../../utils/object'
 import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { createNewChildComponent } from '../../utils/create-new-child-component'
+import { createNewChildComponent, eventProp } from '../../utils/create-new-child-component'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BVTooltip } from './helpers/bv-tooltip'
 
@@ -197,17 +197,18 @@ export const BTooltip = /*#__PURE__*/ extend({
       // Create the instance
       const $toolpop = (this.$_toolpop = createNewChildComponent(this, Component, {
         // Pass down the scoped style ID
-        _scopeId: scopeId || undefined
+        _scopeId: scopeId || undefined,
+        propsData: {
+          [eventProp(EVENT_NAME_SHOW)]: this.onShow,
+          [eventProp(EVENT_NAME_SHOWN)]: this.onShown,
+          [eventProp(EVENT_NAME_HIDE)]: this.onHide,
+          [eventProp(EVENT_NAME_HIDDEN)]: this.onHidden,
+          [eventProp(EVENT_NAME_DISABLED)]: this.onDisabled,
+          [eventProp(EVENT_NAME_ENABLED)]: this.onEnabled
+        }
       }))
       // Set the initial data
       $toolpop.updateData(this.templateData)
-      // Set listeners
-      $toolpop.$on(EVENT_NAME_SHOW, this.onShow)
-      $toolpop.$on(EVENT_NAME_SHOWN, this.onShown)
-      $toolpop.$on(EVENT_NAME_HIDE, this.onHide)
-      $toolpop.$on(EVENT_NAME_HIDDEN, this.onHidden)
-      $toolpop.$on(EVENT_NAME_DISABLED, this.onDisabled)
-      $toolpop.$on(EVENT_NAME_ENABLED, this.onEnabled)
       // Initially disabled?
       if (this[MODEL_PROP_NAME_ENABLED]) {
         // Initially disabled

package/src/vendor/bootstrap-vue/src/components/transition/bv-transition.js

@@ -86,6 +86,10 @@ export const BVTransition = /*#__PURE__*/ extend({
 
     const dataCopy = { ...data }
     delete dataCopy.props
+    Object.keys(props).forEach(key => {
+      delete dataCopy[key]
+    })
+
     return h(
       'transition',
       // Any transition event listeners will get merged here

package/src/vendor/bootstrap-vue/src/components/transporter/transporter.js

@@ -1,4 +1,4 @@
-import { Vue, extend, isVue3 } from '../../vue'
+import { isVue3, extend } from '../../vue'
 import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components'
 import { IS_BROWSER } from '../../constants/env'
 import {
@@ -79,7 +79,7 @@ export const props = {
 // --- Main component ---
 
 // @vue/component
-const BVTransporterVue2 = /*#__PURE__*/ extend({
+export const BVTransporter = /*#__PURE__*/ extend({
   name: NAME_TRANSPORTER,
   mixins: [normalizeSlotMixin],
   props,
@@ -87,28 +87,41 @@ const BVTransporterVue2 = /*#__PURE__*/ extend({
     disabled: {
       immediate: true,
       handler(disabled) {
+        // Vue 2 only: manage manual portaling
+        if (isVue3(this)) return
+
         disabled ? this.unmountTarget() : this.$nextTick(this.mountTarget)
       }
     }
   },
   created() {
-    // Create private non-reactive props
+    // Vue 2 only: create private non-reactive props
+    if (isVue3(this)) return
+
     this.$_defaultFn = null
     this.$_target = null
   },
   beforeMount() {
+    // Vue 2 only
+    if (isVue3(this)) return
+
     this.mountTarget()
   },
   updated() {
+    // Vue 2 only
     // We need to make sure that all children have completed updating
     // before rendering in the target
     // `vue-simple-portal` has the this in a `$nextTick()`,
     // while `portal-vue` doesn't
     // Just trying to see if the `$nextTick()` delay is required or not
     // Since all slots in Vue 2.6.x are always functions
+    if (isVue3(this)) return
     this.updateTarget()
   },
   beforeDestroy() {
+    // Vue 2 only
+    if (isVue3(this)) return
+
     this.unmountTarget()
     this.$_defaultFn = null
   },
@@ -167,36 +180,33 @@ const BVTransporterVue2 = /*#__PURE__*/ extend({
     }
   },
   render(h) {
-    // This component has no root element, so only a single VNode is allowed
-    if (this.disabled) {
-      const $nodes = concat(this.normalizeSlot()).filter(identity)
-      if ($nodes.length > 0 && !$nodes[0].text) {
-        return $nodes[0]
+    if (isVue3(this)) {
+      // Vue 3: use native Teleport
+      if (this.disabled) {
+        const $nodes = concat(this.normalizeSlot()).filter(identity)
+        if ($nodes.length > 0) {
+          return $nodes[0]
+        }
       }
+
+      const { Teleport } = this.$.appContext.config.globalProperties.constructor
+
+      return h(
+        Teleport,
+        {
+          to: this.container
+        },
+        this.normalizeSlot()
+      )
     }
-    return h()
-  }
-})
 
-const BVTransporterVue3 = /*#__PURE__*/ extend({
-  name: NAME_TRANSPORTER,
-  mixins: [normalizeSlotMixin],
-  props,
-  render(h) {
+    // Vue 2: this component has no root element, so only a single VNode is allowed
     if (this.disabled) {
       const $nodes = concat(this.normalizeSlot()).filter(identity)
-      if ($nodes.length > 0) {
+      if ($nodes.length > 0 && !$nodes[0].text) {
         return $nodes[0]
       }
     }
-    return h(
-      Vue.Teleport,
-      {
-        to: this.container
-      },
-      this.normalizeSlot()
-    )
+    return h()
   }
 })
-
-export const BVTransporter = isVue3 ? BVTransporterVue3 : BVTransporterVue2

package/src/vendor/bootstrap-vue/src/constants/events.js

@@ -1,5 +1,3 @@
-import { isVue3 } from '../vue'
-
 export const EVENT_NAME_ACTIVATE_TAB = 'activate-tab'
 export const EVENT_NAME_BLUR = 'blur'
 export const EVENT_NAME_CANCEL = 'cancel'
@@ -45,9 +43,6 @@ export const EVENT_NAME_SORT_CHANGED = 'sort-changed'
 export const EVENT_NAME_TOGGLE = 'toggle'
 export const EVENT_NAME_UPDATE = 'update'
 
-export const HOOK_EVENT_NAME_BEFORE_DESTROY = isVue3 ? 'vnodeBeforeUnmount' : 'hook:beforeDestroy'
-export const HOOK_EVENT_NAME_DESTROYED = isVue3 ? 'vNodeUnmounted' : 'hook:destroyed'
-
 export const MODEL_EVENT_NAME_PREFIX = 'update:'
 
 export const ROOT_EVENT_NAME_PREFIX = 'bv'

package/src/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -2,7 +2,7 @@ import { NAME_TOOLTIP } from '../../constants/components'
 import { IS_BROWSER } from '../../constants/env'
 import { EVENT_NAME_SHOW } from '../../constants/events'
 import { concat } from '../../utils/array'
-import { isVue3, nextTick } from '../../vue'
+import { isVue3 } from '../../vue'
 import { getComponentConfig } from '../../utils/config'
 import { getScopeId } from '../../utils/get-scope-id'
 import { identity } from '../../utils/identity'
@@ -18,7 +18,7 @@ import {
 import { looseEqual } from '../../utils/loose-equal'
 import { toInteger } from '../../utils/number'
 import { keys } from '../../utils/object'
-import { createNewChildComponent } from '../../utils/create-new-child-component'
+import { createNewChildComponent, eventProp } from '../../utils/create-new-child-component'
 import { BVTooltip } from '../../components/tooltip/helpers/bv-tooltip'
 
 // Key which we use to store tooltip object on element
@@ -86,7 +86,9 @@ const parseBindings = (bindings, vnode) => /* istanbul ignore next: not easy to
   // If title is not provided, try title attribute
   if (isUndefined(config.title)) {
     // Try attribute
-    const attrs = isVue3 ? vnode.props : (vnode.data || {}).attrs
+    const attrs = isVue3(getInstanceFromDirective(vnode, bindings))
+      ? vnode.props
+      : (vnode.data || {}).attrs
     config.title = attrs && !isUndefinedOrNull(attrs.title) ? attrs.title : undefined
   }
 
@@ -195,17 +197,19 @@ const applyTooltip = (el, bindings, vnode) => {
     const parent = getInstanceFromDirective(vnode, bindings)
     el[BV_TOOLTIP] = createNewChildComponent(parent, BVTooltip, {
       // Add the parent's scoped style attribute data
-      _scopeId: getScopeId(parent, undefined)
-    })
-    el[BV_TOOLTIP].__bv_prev_data__ = {}
-    el[BV_TOOLTIP].$on(EVENT_NAME_SHOW, () => /* istanbul ignore next: for now */ {
-      // Before showing the tooltip, we update the title if it is a function
-      if (isFunction(config.title)) {
-        el[BV_TOOLTIP].updateData({
-          title: config.title(el)
-        })
+      _scopeId: getScopeId(parent, undefined),
+      propsData: {
+        [eventProp(EVENT_NAME_SHOW)]: () => /* istanbul ignore next: for now */ {
+          // Before showing the tooltip, we update the title if it is a function
+          if (isFunction(config.title)) {
+            el[BV_TOOLTIP].updateData({
+              title: config.title(el)
+            })
+          }
+        }
       }
     })
+    el[BV_TOOLTIP].__bv_prev_data__ = {}
   }
   const data = {
     title: config.title,
@@ -260,7 +264,7 @@ export const VBTooltip = {
   // waits until the containing component and children have finished updating
   componentUpdated(el, bindings, vnode) {
     // Performed in a `$nextTick()` to prevent render update loops
-    nextTick(() => {
+    getInstanceFromDirective(vnode, bindings).$nextTick(() => {
       applyTooltip(el, bindings, vnode)
     })
   },

package/src/vendor/bootstrap-vue/src/directives/visible/visible.js

@@ -36,12 +36,12 @@ import { requestAF } from '../../utils/dom'
 import { isFunction } from '../../utils/inspect'
 import { looseEqual } from '../../utils/loose-equal'
 import { clone, keys } from '../../utils/object'
-import { nextTick } from '../../vue'
+import { getInstanceFromDirective } from '../../utils/get-instance-from-directive'
 
 const OBSERVER_PROP_NAME = '__bv__visibility_observer'
 
 class VisibilityObserver {
-  constructor(el, options) {
+  constructor(el, options, instance) {
     this.el = el
     this.callback = options.callback
     this.margin = options.margin || 0
@@ -49,6 +49,7 @@ class VisibilityObserver {
     this.observer = null
     this.visible = undefined
     this.doneOnce = false
+    this.instance = instance
     // Create the observer instance (if possible)
     this.createObserver()
   }
@@ -88,7 +89,7 @@ class VisibilityObserver {
 
     // Start observing in a `$nextTick()` (to allow DOM to complete rendering)
     /* istanbul ignore next: IntersectionObserver not supported in JSDOM */
-    nextTick(() => {
+    this.instance.$nextTick(() => {
       requestAF(() => {
         // Placed in an `if` just in case we were destroyed before
         // this `requestAnimationFrame` runs
@@ -128,7 +129,8 @@ const destroy = el => {
   delete el[OBSERVER_PROP_NAME]
 }
 
-const bind = (el, { value, modifiers }) => {
+const bind = (el, bindings, vnode) => {
+  const { value, modifiers } = bindings
   // `value` is the callback function
   const options = {
     margin: '0px',
@@ -147,26 +149,28 @@ const bind = (el, { value, modifiers }) => {
   // Destroy any previous observer
   destroy(el)
   // Create new observer
-  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options)
+  const instance = getInstanceFromDirective(vnode, bindings)
+  el[OBSERVER_PROP_NAME] = new VisibilityObserver(el, options, instance)
   // Store the current modifiers on the object (cloned)
   el[OBSERVER_PROP_NAME]._prevModifiers = clone(modifiers)
 }
 
 // When the directive options may have been updated (or element)
-const componentUpdated = (el, { value, oldValue, modifiers }, vnode) => {
+const componentUpdated = (el, bindings, vnode) => {
+  const { value, oldValue, modifiers } = bindings
   // Compare value/oldValue and modifiers to see if anything has changed
   // and if so, destroy old observer and create new observer
   /* istanbul ignore next */
-  modifiers = clone(modifiers)
+  const clonedModifiers = clone(modifiers)
   /* istanbul ignore next */
   if (
     el &&
     (value !== oldValue ||
       !el[OBSERVER_PROP_NAME] ||
-      !looseEqual(modifiers, el[OBSERVER_PROP_NAME]._prevModifiers))
+      !looseEqual(clonedModifiers, el[OBSERVER_PROP_NAME]._prevModifiers))
   ) {
     // Re-bind on element
-    bind(el, { value, modifiers }, vnode)
+    bind(el, bindings, vnode)
   }
 }
 

package/src/vendor/bootstrap-vue/src/mixins/attrs.js

@@ -1,19 +1,3 @@
 import { makePropCacheMixin } from '../utils/cache'
-import { extend, isVue3 } from '../vue'
 
-const attrsMixinVue2 = makePropCacheMixin('$attrs', 'bvAttrs')
-const attrsMixinVue3 = extend({
-  computed: {
-    bvAttrs() {
-      const bvAttrs = { ...this.$attrs }
-      Object.keys(bvAttrs).forEach(key => {
-        if (bvAttrs[key] === undefined) {
-          delete bvAttrs[key]
-        }
-      })
-      return bvAttrs
-    }
-  }
-})
-
-export const attrsMixin = isVue3 ? attrsMixinVue3 : attrsMixinVue2
+export const attrsMixin = makePropCacheMixin('$attrs', 'bvAttrs')

package/src/vendor/bootstrap-vue/src/mixins/dropdown.js

@@ -142,7 +142,7 @@ export const dropdownMixin = extend({
           this.visibleChangePrevented = true
           this.visible = oldValue
           // Just in case a child element triggered `this.hide(true)`
-          this.$off(EVENT_NAME_HIDDEN, this.focusToggler)
+          this.$_focusOnHidden = false
           return
         }
         if (newValue) {
@@ -223,6 +223,11 @@ export const dropdownMixin = extend({
       this.emitOnRoot(ROOT_EVENT_NAME_HIDDEN, this)
       this.$emit(EVENT_NAME_HIDDEN)
       this.destroyPopper()
+      // Handle pending focus request
+      if (this.$_focusOnHidden) {
+        this.$_focusOnHidden = false
+        this.focusToggler()
+      }
     },
     createPopper(element) {
       this.destroyPopper()
@@ -299,7 +304,7 @@ export const dropdownMixin = extend({
       this.visible = false
       if (refocus) {
         // Child element is closing the dropdown on click
-        this.$once(EVENT_NAME_HIDDEN, this.focusToggler)
+        this.$_focusOnHidden = true
       }
     },
     // Called only by a button that toggles the menu
@@ -361,7 +366,7 @@ export const dropdownMixin = extend({
         this.visible = false
         stopEvent(event)
         // Return focus to original trigger button
-        this.$once(EVENT_NAME_HIDDEN, this.focusToggler)
+        this.$_focusOnHidden = true
       }
     },
     // Called only in split button mode, for the split button

package/src/vendor/bootstrap-vue/src/mixins/has-listener.js

@@ -9,7 +9,7 @@ import { isArray, isUndefined } from '../utils/inspect'
 export const hasListenerMixin = extend({
   methods: {
     hasListener(name) {
-      if (isVue3) {
+      if (isVue3(this)) {
         return true
       }
       // Only includes listeners registered via `v-on:name`

package/src/vendor/bootstrap-vue/src/mixins/listeners.js

@@ -1,24 +1,24 @@
-import { makePropCacheMixin } from '../utils/cache'
-import { extend, isVue3 } from '../vue'
+import { isVue3 } from '../vue'
+import { makePropCacheMixin, getInternalPropName } from '../utils/cache'
 
-const listenersMixinVue2 = makePropCacheMixin('$listeners', 'bvListeners')
-
-const listenersMixinVue3 = extend({
-  data() {
-    return {
-      bvListeners: {}
-    }
-  },
+const internalPropName = getInternalPropName('bvListeners')
+export const listenersMixin = makePropCacheMixin('$listeners', 'bvListeners').extend({
   created() {
-    this.bvListeners = {
+    if (!isVue3(this)) {
+      return
+    }
+
+    this[internalPropName] = {
+      // bug: this.$listeners is non-reactive in Vue.js 3 compat
       ...this.$listeners
     }
   },
   beforeUpdate() {
-    this.bvListeners = {
+    if (!isVue3(this)) {
+      return
+    }
+    this[internalPropName] = {
       ...this.$listeners
     }
   }
 })
-
-export const listenersMixin = isVue3 ? listenersMixinVue3 : listenersMixinVue2

package/src/vendor/bootstrap-vue/src/utils/cache.js

@@ -1,4 +1,4 @@
-import { extend } from '../vue'
+import { extend, isVue3 } from '../vue'
 import { cloneDeep } from './clone-deep'
 import { looseEqual } from './loose-equal'
 import { hasOwnProperty, keys } from './object'
@@ -25,13 +25,33 @@ export const makePropWatcher = propName => ({
   }
 })
 
-export const makePropCacheMixin = (propName, proxyPropName) =>
-  extend({
+export const getInternalPropName = proxyPropName => `bv_internal__${proxyPropName}`
+
+export const makePropCacheMixin = (propName, proxyPropName) => {
+  const internalPropName = getInternalPropName(proxyPropName)
+  return extend({
     data() {
-      return { [proxyPropName]: cloneDeep(this[propName]) }
+      return { [internalPropName]: isVue3(this) ? null : cloneDeep(this[propName] || {}) }
+    },
+    computed: {
+      [proxyPropName]() {
+        if (internalPropName in this && this[internalPropName]) {
+          return this[internalPropName]
+        }
+        const result = { ...this[propName] }
+        Object.keys(result).forEach(key => {
+          if (result[key] === undefined) {
+            delete result[key]
+          }
+        })
+        return result
+      }
     },
-    watch: {
-      // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
-      [propName]: makePropWatcher(proxyPropName)
+    created() {
+      if (!isVue3(this)) {
+        // Work around unwanted re-renders: https://github.com/vuejs/vue/issues/10115
+        this.$watch(propName, makePropWatcher(internalPropName).handler)
+      }
     }
   })
+}