@gitlab/ui 97.3.0 → 98.0.0

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

@@ -42,6 +42,8 @@ export const props = {
   transProps: makeProp(PROP_TYPE_OBJECT)
 }
 
+const hasAnimateSupport = Boolean(Element.prototype.animate)
+
 // --- Main component ---
 
 // @vue/component
@@ -67,8 +69,19 @@ export const BVTransition = /*#__PURE__*/ extend({
     transProps = {
       mode: props.mode,
       ...transProps,
-      // We always need `css` true
-      css: true
+      /*
+       bootstrap-vue says: We always need `css` true
+
+       @gitlab/ui says: OMG. THE FREAKING TRANSITIONS.
+       So apparently jsdom doesn't implement animations (who can blame them)
+       but a Vue Transition relies on the native animationend/transitionend
+       events in order to fire onAfterLeave. jsdom will never fire the `onAfterLeave`
+       which is relied on by e.g. the tooltip component to do it's `hidden` logic.
+
+       So if in specs, we set `css: false`, everything will work as expected.
+       The best way we have found is to do a feature detection on `Element.prototype.animate`
+       */
+      css: hasAnimateSupport
     }
 
     const dataCopy = { ...data }

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

@@ -39,8 +39,6 @@ export const NAME_INPUT_GROUP_TEXT = 'BInputGroupText'
 export const NAME_LINK = 'BLink'
 export const NAME_MODAL = 'BModal'
 export const NAME_NAV = 'BNav'
-export const NAME_NAVBAR = 'BNavbar'
-export const NAME_NAVBAR_BRAND = 'BNavbarBrand'
 export const NAME_NAV_ITEM = 'BNavItem'
 export const NAME_NAV_ITEM_DROPDOWN = 'BNavItemDropdown'
 export const NAME_POPOVER = 'BPopover'

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

@@ -40,9 +40,6 @@ export const HAS_PASSIVE_EVENT_SUPPORT = (() => {
   return passiveEventSupported
 })()
 
-export const HAS_TOUCH_SUPPORT =
-  IS_BROWSER && ('ontouchstart' in DOCUMENT.documentElement || NAVIGATOR.maxTouchPoints > 0)
-
 export const HAS_POINTER_EVENT_SUPPORT =
   IS_BROWSER && Boolean(WINDOW.PointerEvent || WINDOW.MSPointerEvent)
 

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

@@ -5,6 +5,9 @@ import { VBTooltip } from './tooltip'
 // Key which we use to store tooltip object on element
 const BV_TOOLTIP = '__BV_Tooltip__'
 
+/**
+ * @gitlab/ui Note: These specs have been rewritten to be working with jest >= 29
+ */
 describe('v-b-tooltip directive', () => {
   const originalCreateRange = document.createRange
   const origGetBCR = Element.prototype.getBoundingClientRect
@@ -40,9 +43,27 @@ describe('v-b-tooltip directive', () => {
     Element.prototype.getBoundingClientRect = origGetBCR
   })
 
-  it('should have BVTooltip Vue class instance', async () => {
-    jest.useFakeTimers()
+  /**
+   * Little helper to wait until a tooltip is shown after a click
+   *
+   * @param $button {VueTestUtils.VueWrapper}
+   * @returns {Promise<void>}
+   */
+  function waitForTooltipAfterClickOn($button) {
+    return new Promise(resolve => {
+      const resolver = () => {
+        $button.vm.$root.$off('bv::tooltip::shown', resolver)
+        resolve()
+      }
+
+      $button.vm.$root.$on('bv::tooltip::shown', resolver)
+
+      // Trigger click
+      $button.trigger('click')
+    })
+  }
 
+  it('should have BVTooltip Vue class instance', async () => {
     const App = {
       directives: {
         bTooltip: VBTooltip
@@ -50,34 +71,24 @@ describe('v-b-tooltip directive', () => {
       template: '<button v-b-tooltip title="foobar">button</button>'
     }
 
-    const wrapper = mount(App, {
+    const $button = mount(App, {
       attachTo: document.body
     })
 
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
+    expect($button.vm).toBeDefined()
+    await waitNT($button.vm)
     await waitRAF()
 
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    const $button = wrapper.find('button')
+    expect($button.element.tagName).toBe('BUTTON')
 
     // Should have instance of popover class on it
     expect($button.element[BV_TOOLTIP]).toBeDefined()
     expect($button.element[BV_TOOLTIP].$options.name).toBe('BVTooltip')
 
-    wrapper.destroy()
+    $button.destroy()
   })
 
   it('should work', async () => {
-    jest.useFakeTimers()
-
     const App = {
       directives: {
         bTooltip: VBTooltip
@@ -85,23 +96,15 @@ describe('v-b-tooltip directive', () => {
       template: '<button v-b-tooltip.click.html title="<b>foobar</b>">button</button>'
     }
 
-    const wrapper = mount(App, {
+    const $button = mount(App, {
       attachTo: document.body
     })
 
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
+    expect($button.vm).toBeDefined()
+    await waitNT($button.vm)
     await waitRAF()
 
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    const $button = wrapper.find('button')
+    expect($button.element.tagName).toBe('BUTTON')
 
     // Should have instance of popover class on it
     expect($button.element[BV_TOOLTIP]).toBeDefined()
@@ -109,13 +112,7 @@ describe('v-b-tooltip directive', () => {
 
     expect($button.attributes('aria-describedby')).toBeUndefined()
 
-    // Trigger click
-    await $button.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
-    await waitRAF()
+    await waitForTooltipAfterClickOn($button)
 
     expect($button.attributes('aria-describedby')).toBeDefined()
     const adb = $button.attributes('aria-describedby')
@@ -124,12 +121,10 @@ describe('v-b-tooltip directive', () => {
     expect(tip).not.toBe(null)
     expect(tip.classList.contains('tooltip')).toBe(true)
 
-    wrapper.destroy()
+    $button.destroy()
   })
 
   it('should not show tooltip when title is empty', async () => {
-    jest.useFakeTimers()
-
     const App = {
       directives: {
         bTooltip: VBTooltip
@@ -137,23 +132,15 @@ describe('v-b-tooltip directive', () => {
       template: '<button v-b-tooltip.click title="">button</button>'
     }
 
-    const wrapper = mount(App, {
+    const $button = mount(App, {
       attachTo: document.body
     })
 
-    expect(wrapper.vm).toBeDefined()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
+    expect($button.vm).toBeDefined()
+    await waitNT($button.vm)
     await waitRAF()
 
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    const $button = wrapper.find('button')
+    expect($button.element.tagName).toBe('BUTTON')
 
     // Should have instance of popover class on it
     expect($button.element[BV_TOOLTIP]).toBeDefined()
@@ -163,20 +150,13 @@ describe('v-b-tooltip directive', () => {
 
     // Trigger click
     await $button.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
-    await waitRAF()
 
     expect($button.attributes('aria-describedby')).toBeUndefined()
 
-    wrapper.destroy()
+    $button.destroy()
   })
 
   it('variant and customClass should work', async () => {
-    jest.useFakeTimers()
-
     const App = {
       directives: {
         bTooltip: VBTooltip
@@ -184,30 +164,17 @@ describe('v-b-tooltip directive', () => {
       template: `<button v-b-tooltip.click.html.v-info="{ customClass: 'foobar'}" title="<b>foobar</b>">button</button>`
     }
 
-    const wrapper = mount(App, {
+    const $button = mount(App, {
       attachTo: document.body
     })
 
-    expect(wrapper.vm).toBeDefined()
-    expect(wrapper.element.tagName).toBe('BUTTON')
-    const $button = wrapper.find('button')
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    await waitNT(wrapper.vm)
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
+    expect($button.vm).toBeDefined()
+    await waitNT($button.vm)
     await waitRAF()
 
-    // Trigger click
-    await $button.trigger('click')
-    await waitRAF()
-    await waitRAF()
-    jest.runOnlyPendingTimers()
-    await waitNT(wrapper.vm)
-    await waitRAF()
+    expect($button.element.tagName).toBe('BUTTON')
+
+    await waitForTooltipAfterClickOn($button)
 
     expect($button.attributes('aria-describedby')).toBeDefined()
     const adb = $button.attributes('aria-describedby')
@@ -218,6 +185,6 @@ describe('v-b-tooltip directive', () => {
     expect(tip.classList.contains('b-tooltip-info')).toBe(true)
     expect(tip.classList.contains('foobar')).toBe(true)
 
-    wrapper.destroy()
+    $button.destroy()
   })
 })

package/src/vendor/bootstrap-vue/src/index.js

@@ -128,10 +128,6 @@ export { BNav } from './components/nav/nav'
 export { BNavItem } from './components/nav/nav-item'
 export { BNavItemDropdown } from './components/nav/nav-item-dropdown'
 
-// export * from './components/navbar'
-export { BNavbar } from './components/navbar/navbar'
-export { BNavbarBrand } from './components/navbar/navbar-brand'
-
 // export * from './components/popover'
 export { BPopover } from './components/popover/popover'
 

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

@@ -1,7 +1,6 @@
 import Popper from 'popper.js'
 import { extend } from '../vue'
 import { NAME_DROPDOWN } from '../constants/components'
-import { HAS_TOUCH_SUPPORT } from '../constants/env'
 import {
   EVENT_NAME_CLICK,
   EVENT_NAME_HIDDEN,
@@ -29,7 +28,6 @@ import { HTMLElement } from '../constants/safe-types'
 import { BvEvent } from '../utils/bv-event.class'
 import { attemptFocus, closest, contains, isVisible, requestAF, selectAll } from '../utils/dom'
 import { getRootEventName, stopEvent } from '../utils/events'
-import { isNull } from '../utils/inspect'
 import { mergeDeep, sortKeys } from '../utils/object'
 import { makeProp, makePropsConfigurable } from '../utils/props'
 import { warn } from '../utils/warn'
@@ -93,9 +91,6 @@ export const dropdownMixin = extend({
   provide() {
     return { getBvDropdown: () => this }
   },
-  inject: {
-    getBvNavbar: { default: () => () => null }
-  },
   props,
   data() {
     return {
@@ -104,12 +99,6 @@ export const dropdownMixin = extend({
     }
   },
   computed: {
-    bvNavbar() {
-      return this.getBvNavbar()
-    },
-    inNavbar() {
-      return !isNull(this.bvNavbar)
-    },
     toggler() {
       const { toggle } = this.$refs
       return toggle ? toggle.$el || toggle : null
@@ -128,10 +117,7 @@ export const dropdownMixin = extend({
       // Position `static` is needed to allow menu to "breakout" of the `scrollParent`
       // boundaries when boundary is anything other than `scrollParent`
       // See: https://github.com/twbs/bootstrap/issues/24251#issuecomment-341413786
-      return this.boundary !== 'scrollParent' && !this.inNavbar ? 'position-static' : ''
-    },
-    hideDelay() {
-      return this.inNavbar ? (HAS_TOUCH_SUPPORT ? 300 : 50) : 0
+      return this.boundary !== 'scrollParent' ? 'position-static' : ''
     }
   },
   watch: {
@@ -176,7 +162,6 @@ export const dropdownMixin = extend({
   created() {
     // Create private non-reactive props
     this.$_popper = null
-    this.$_hideTimeout = null
   },
   /* istanbul ignore next */
   deactivated() {
@@ -192,7 +177,6 @@ export const dropdownMixin = extend({
     this.visible = false
     this.whileOpenListen(false)
     this.destroyPopper()
-    this.clearHideTimeout()
     removeElementToInstance(this.$el)
   },
   methods: {
@@ -208,19 +192,16 @@ export const dropdownMixin = extend({
         return
       }
 
-      // Only instantiate Popper.js when dropdown is not in `<b-navbar>`
-      if (!this.inNavbar) {
-        if (typeof Popper === 'undefined') {
-          /* istanbul ignore next */
-          warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN)
-        } else {
-          // For dropup with alignment we use the parent element as popper container
-          let el = (this.dropup && this.right) || this.split ? this.$el : this.$refs.toggle
-          // Make sure we have a reference to an element, not a component!
-          el = el.$el || el
-          // Instantiate Popper.js
-          this.createPopper(el)
-        }
+      if (typeof Popper === 'undefined') {
+        /* istanbul ignore next */
+        warn('Popper.js not found. Falling back to CSS positioning', NAME_DROPDOWN)
+      } else {
+        // For dropup with alignment we use the parent element as popper container
+        let el = (this.dropup && this.right) || this.split ? this.$el : this.$refs.toggle
+        // Make sure we have a reference to an element, not a component!
+        el = el.$el || el
+        // Instantiate Popper.js
+        this.createPopper(el)
       }
 
       // Ensure other menus are closed
@@ -259,10 +240,6 @@ export const dropdownMixin = extend({
         this.$_popper.scheduleUpdate()
       } catch {}
     },
-    clearHideTimeout() {
-      clearTimeout(this.$_hideTimeout)
-      this.$_hideTimeout = null
-    },
     getPopperConfig() {
       let placement = PLACEMENT_BOTTOM_START
       if (this.dropup) {
@@ -400,8 +377,7 @@ export const dropdownMixin = extend({
     hideHandler(event) {
       const { target } = event
       if (this.visible && !contains(this.$refs.menu, target) && !contains(this.toggler, target)) {
-        this.clearHideTimeout()
-        this.$_hideTimeout = setTimeout(() => this.hide(), this.hideDelay)
+        this.hide()
       }
     },
     // Document click-out listener

package/src/vendor/bootstrap-vue/src/utils/config.spec.js

@@ -18,8 +18,26 @@ describe('utils/config', () => {
     resetConfig()
   })
 
-  it('getConfig() works', async () => {
-    expect(getConfig()).toEqual({})
+  /**
+   * We needed to adjust this test to have it reflect the @gitlab/ui defaults
+   */
+  it('getConfig() works and has @gitlab/ui defaults', async () => {
+    expect(getConfig()).toEqual({
+      BPopover: {
+        delay: {
+          hide: 150,
+          show: 50
+        }
+      },
+      BTooltip: {
+        boundaryPadding: 5,
+        customClass: 'gl-tooltip',
+        delay: {
+          hide: 0,
+          show: 500
+        }
+      }
+    })
   })
 
   it('setConfig() works', async () => {

package/dist/components/base/navbar/navbar.js

@@ -1,48 +0,0 @@
-import { BNavbar } from '../../../vendor/bootstrap-vue/src/components/navbar/navbar';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlNavbar',
-  components: {
-    BNavbar
-  },
-  inheritAttrs: false
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-navbar',_vm._g(_vm._b({staticClass:"gl-navbar"},'b-navbar',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/vendor/bootstrap-vue/src/components/navbar/index.js

@@ -1,2 +0,0 @@
-export { BNavbar } from './navbar';
-export { BNavbarBrand } from './navbar-brand';

package/dist/vendor/bootstrap-vue/src/components/navbar/navbar-brand.js

@@ -1,40 +0,0 @@
-import { extend, mergeData } from '../../vue';
-import { NAME_NAVBAR_BRAND } from '../../constants/components';
-import { PROP_TYPE_STRING } from '../../constants/props';
-import { omit, sortKeys } from '../../utils/object';
-import { makePropsConfigurable, makeProp, pluckProps } from '../../utils/props';
-import { props as props$1, BLink } from '../link/link';
-
-// --- Props ---
-
-const linkProps = omit(props$1, ['event', 'routerTag']);
-linkProps.href.default = undefined;
-linkProps.to.default = undefined;
-const props = makePropsConfigurable(sortKeys({
-  ...linkProps,
-  tag: makeProp(PROP_TYPE_STRING, 'div')
-}), NAME_NAVBAR_BRAND);
-
-// --- Main component ---
-
-// @vue/component
-const BNavbarBrand = /*#__PURE__*/extend({
-  name: NAME_NAVBAR_BRAND,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      children
-    } = _ref;
-    const isLink = props.to || props.href;
-    const tag = isLink ? BLink : props.tag;
-    return h(tag, mergeData(data, {
-      staticClass: 'navbar-brand',
-      props: isLink ? pluckProps(linkProps, props) : {}
-    }), children);
-  }
-});
-
-export { BNavbarBrand, props };

package/dist/vendor/bootstrap-vue/src/components/navbar/navbar.js

@@ -1,72 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_NAVBAR } from '../../constants/components';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING } from '../../constants/props';
-import { getBreakpoints } from '../../utils/config';
-import { isTag } from '../../utils/dom';
-import { isString } from '../../utils/inspect';
-import { makePropsConfigurable, makeProp } from '../../utils/props';
-import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-
-// --- Props ---
-
-const props = makePropsConfigurable({
-  fixed: makeProp(PROP_TYPE_STRING),
-  print: makeProp(PROP_TYPE_BOOLEAN, false),
-  sticky: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'nav'),
-  toggleable: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
-  type: makeProp(PROP_TYPE_STRING, 'light'),
-  variant: makeProp(PROP_TYPE_STRING)
-}, NAME_NAVBAR);
-
-// --- Main component ---
-
-// @vue/component
-const BNavbar = /*#__PURE__*/extend({
-  name: NAME_NAVBAR,
-  mixins: [normalizeSlotMixin],
-  provide() {
-    return {
-      getBvNavbar: () => this
-    };
-  },
-  props,
-  computed: {
-    breakpointClass() {
-      const {
-        toggleable
-      } = this;
-      const xs = getBreakpoints()[0];
-      let breakpoint = null;
-      if (toggleable && isString(toggleable) && toggleable !== xs) {
-        breakpoint = `navbar-expand-${toggleable}`;
-      } else if (toggleable === false) {
-        breakpoint = 'navbar-expand';
-      }
-      return breakpoint;
-    }
-  },
-  render(h) {
-    const {
-      tag,
-      type,
-      variant,
-      fixed
-    } = this;
-    return h(tag, {
-      staticClass: 'navbar',
-      class: [{
-        'd-print': this.print,
-        'sticky-top': this.sticky,
-        [`navbar-${type}`]: type,
-        [`bg-${variant}`]: variant,
-        [`fixed-${fixed}`]: fixed
-      }, this.breakpointClass],
-      attrs: {
-        role: isTag(tag, 'nav') ? null : 'navigation'
-      }
-    }, [this.normalizeSlot()]);
-  }
-});
-
-export { BNavbar, props };

package/src/components/base/navbar/navbar.md

@@ -1,4 +0,0 @@
-### Navbar
-
-The component <navbar> is a wrapper that positions branding, navigation, and other elements into a
-concise header.

package/src/components/base/navbar/navbar.vue

@@ -1,17 +0,0 @@
-<script>
-import { BNavbar } from '../../../vendor/bootstrap-vue/src/components/navbar/navbar';
-
-export default {
-  name: 'GlNavbar',
-  components: {
-    BNavbar,
-  },
-  inheritAttrs: false,
-};
-</script>
-
-<template>
-  <b-navbar class="gl-navbar" v-bind="$attrs" v-on="$listeners">
-    <slot></slot>
-  </b-navbar>
-</template>