@gitlab/ui 137.2.3 → 137.2.5

package/dist/components/base/badge/badge.js

@@ -105,9 +105,11 @@ var script = {
     }
   },
   computed: {
+    hasContent() {
+      return Boolean(this.$scopedSlots.default);
+    },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
+      return Boolean(this.icon) && !this.hasContent;
     },
     isCircularIcon() {
       return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
@@ -142,7 +144,7 @@ var script = {
     },
     classes() {
       return ['gl-badge', 'badge', 'badge-pill', variantClass[this.variant], {
-        '!gl-px-2': !this.$scopedSlots.default
+        '!gl-px-2': !this.hasContent
       }];
     }
   },
@@ -160,7 +162,7 @@ var 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(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.computedTag,_vm._g(_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role}},'component',_vm.computedProps,false),_vm.$listeners),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon && _vm.hasContent },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.hasContent)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -338,14 +338,10 @@ var script = {
     },
     handleAutoClose(e) {
       var _this$$refs$baseDropd, _this$$refs$baseDropd2;
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && // The optional chaining here is to accommodate specs that use shallow mounting.
-      // Ideally, those specs would either:
-      //  - stub out the `BaseDropdown` component to include a stub `containsElement` method, or
-      //  - use a full mount.
-      //
-      // Unfortunately, GitLab has many specs which do neither of these. So the simpler thing to do
-      // is to optionally chain the method call here.
-      (_this$$refs$baseDropd = (_this$$refs$baseDropd2 = this.$refs.baseDropdown).containsElement) !== null && _this$$refs$baseDropd !== void 0 && _this$$refs$baseDropd.call(_this$$refs$baseDropd2, e.target)) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && // The ref is null when an item action destroys this component before the click bubbles here.
+      // The method is optionally chained to accommodate specs that shallow mount without stubbing
+      // `BaseDropdown`'s `containsElement`; GitLab has many such specs.
+      (_this$$refs$baseDropd = this.$refs.baseDropdown) !== null && _this$$refs$baseDropd !== void 0 && (_this$$refs$baseDropd2 = _this$$refs$baseDropd.containsElement) !== null && _this$$refs$baseDropd2 !== void 0 && _this$$refs$baseDropd2.call(_this$$refs$baseDropd, e.target)) {
         this.closeAndFocus();
       }
     },

package/dist/directives/outside/outside.js

@@ -15,11 +15,16 @@ const defaultEventType = click;
  */
 const activeEventTypes = new Set();
 let lastMousedown = null;
+let isMouseDown = false;
 const globalListener = event => {
   callbacks.forEach((_ref, element) => {
     let callback = _ref.callback,
       eventTypes = _ref.eventTypes;
-    const originalEvent = event.type === click ? lastMousedown || event : event;
+    // Safari doesn't focus <button> on click; focus moves to <body>, firing a focusin outside the
+    // dropdown before the button's own click handler runs. Fall back to the mousedown target only
+    // while the mouse is still down, so a later focusin (e.g. Tab) isn't judged by a stale target.
+    const usesMousedownFallback = event.type === click || event.type === focusin && isMouseDown;
+    const originalEvent = usesMousedownFallback ? lastMousedown || event : event;
     if (
     // Ignore events that aren't targeted outside the element
     element.contains(originalEvent.target) ||
@@ -44,16 +49,33 @@ const globalListener = event => {
 // We need to listen for mouse events because text selection fires click event only when selection ends.
 // This means that the click event target could differ from the element where it originally started.
 // As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+// This also covers the Safari focusin case described above, since that focusin is triggered by the
+// same mousedown.
 const onMousedown = event => {
   lastMousedown = event;
+  isMouseDown = true;
 };
+
+// Only clear the "is the mouse down" flag here. lastMousedown must survive until the click
+// fires (click comes after mouseup), or releasing a text selection outside the element would
+// wrongly close the dropdown.
+const onMouseup = () => {
+  isMouseDown = false;
+};
+const mousedown = 'mousedown';
+const mouseup = 'mouseup';
 const startListening = eventTypes => {
   eventTypes.forEach(eventType => {
     if (!activeEventTypes.has(eventType)) {
       // Listening to mousedown events, ensures that a text selection doesn't trigger the
-      // GlOutsideDirective 'click' callback if the selection started within the target element.
-      if (eventType === click) {
-        document.addEventListener('mousedown', onMousedown);
+      // GlOutsideDirective 'click' callback if the selection started within the target element,
+      // and that a Safari focus-loss 'focusin' doesn't trigger the callback either. Tracked via
+      // activeEventTypes too, so it's only ever bound/unbound once, regardless of whether 'click'
+      // and 'focusin' are (de)activated together or separately.
+      if ((eventType === click || eventType === focusin) && !activeEventTypes.has(mousedown)) {
+        document.addEventListener(mousedown, onMousedown);
+        document.addEventListener(mouseup, onMouseup);
+        activeEventTypes.add(mousedown);
       }
 
       // Added { capture: true } to all event types to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
@@ -66,6 +88,7 @@ const startListening = eventTypes => {
     }
   });
   lastMousedown = null;
+  isMouseDown = false;
 };
 const stopListening = eventTypesToUnbind => {
   eventTypesToUnbind.forEach(eventType => {
@@ -79,8 +102,12 @@ const stopListening = eventTypesToUnbind => {
       }
     }
   });
-  if (eventTypesToUnbind.includes(click) && !activeEventTypes.has(click)) {
-    document.removeEventListener('mousedown', onMousedown);
+
+  // Only unbind mousedown once neither 'click' nor 'focusin' need it anymore.
+  if (activeEventTypes.has(mousedown) && !activeEventTypes.has(click) && !activeEventTypes.has(focusin)) {
+    document.removeEventListener(mousedown, onMousedown);
+    document.removeEventListener(mouseup, onMouseup);
+    activeEventTypes.delete(mousedown);
   }
 };
 function parseBinding(_ref3) {

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

@@ -1,4 +1,4 @@
-import { extend, isVue3 } from '../../vue';
+import { extend, isVue3, getVue3Constructor } from '../../vue';
 import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components';
 import { IS_BROWSER } from '../../constants/env';
 import { HTMLElement } from '../../constants/safe-types';
@@ -193,7 +193,8 @@ const BVTransporter = /*#__PURE__*/extend({
           return $nodes[0];
         }
       }
-      const Teleport = this.$.appContext.config.globalProperties.constructor.Teleport;
+      const _getVue3Constructor = getVue3Constructor(this),
+        Teleport = _getVue3Constructor.Teleport;
       return h(Teleport, {
         to: this.container
       }, this.normalizeSlot());

package/dist/vendor/bootstrap-vue/src/utils/create-new-child-component.js

@@ -1,4 +1,4 @@
-import { isVue3 } from '../vue';
+import { isVue3, getVue3Constructor } from '../vue';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -119,9 +119,6 @@ const extractEventHandlers = config => {
     cleanConfig
   };
 };
-const getVue3Constructor = parent => {
-  return parent.$.appContext.config.globalProperties.constructor;
-};
 const BUILTIN_DIRECTIVES = ['show', 'model', 'bind', 'cloak', 'else', 'else-if', 'for', 'html', 'if', 'memo', 'on', 'once', 'pre', 'slot', 'text'];
 const resolveComponentOptions = Component => {
   const opts = typeof Component === 'function' && Component.options ? {

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

@@ -41,6 +41,16 @@ if (isGlobalVue3) {
   };
 }
 const isVue3 = instance => Boolean(instance.$);
+
+// Roots created with `new (Vue.extend(Comp))()` expose `Comp`, not `Vue`, as the
+// constructor. Walk up to the base so its options are never merged into helpers.
+const getVue3Constructor = instance => {
+  let Ctor = instance.$.appContext.config.globalProperties.constructor;
+  while (Ctor.super) {
+    Ctor = Ctor.super;
+  }
+  return Ctor;
+};
 const extend = Vue.extend.bind(Vue);
 function mergeData() {
   var _result$attrs, _result$props;
@@ -52,4 +62,4 @@ function mergeData() {
   };
 }
 
-export { COMPONENT_UID_KEY, REF_FOR_KEY, extend, isGlobalVue3, isVue3, mergeData };
+export { COMPONENT_UID_KEY, REF_FOR_KEY, extend, getVue3Constructor, isGlobalVue3, isVue3, mergeData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.2.3",
+  "version": "137.2.5",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -137,7 +137,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.18.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.6.0",
+    "autoprefixer": "10.6.1",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "15.21.1",

package/src/components/base/badge/badge.vue

@@ -110,9 +110,11 @@ export default {
     },
   },
   computed: {
+    hasContent() {
+      return Boolean(this.$scopedSlots.default);
+    },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.icon && Object.keys(this.$slots).length === 0);
+      return Boolean(this.icon) && !this.hasContent;
     },
     isCircularIcon() {
       return this.iconOpticallyAligned || ['issue-open-m', 'issue-close'].includes(this.icon);
@@ -141,7 +143,7 @@ export default {
         'badge',
         'badge-pill',
         variantClass[this.variant],
-        { '!gl-px-2': !this.$scopedSlots.default },
+        { '!gl-px-2': !this.hasContent },
       ];
     },
   },
@@ -168,11 +170,10 @@ export default {
       v-if="icon"
       class="gl-badge-icon"
       :size="iconSizeComputed"
-      :class="{ '-gl-ml-2': isCircularIcon }"
+      :class="{ '-gl-ml-2': isCircularIcon && hasContent }"
       :name="icon"
     />
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <span v-if="$slots.default" class="gl-badge-content">
+    <span v-if="hasContent" class="gl-badge-content">
       <slot></slot>
     </span>
   </component>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -370,14 +370,10 @@ export default {
       if (
         this.autoClose &&
         e.target.closest(ITEM_SELECTOR) &&
-        // The optional chaining here is to accommodate specs that use shallow mounting.
-        // Ideally, those specs would either:
-        //  - stub out the `BaseDropdown` component to include a stub `containsElement` method, or
-        //  - use a full mount.
-        //
-        // Unfortunately, GitLab has many specs which do neither of these. So the simpler thing to do
-        // is to optionally chain the method call here.
-        this.$refs.baseDropdown.containsElement?.(e.target)
+        // The ref is null when an item action destroys this component before the click bubbles here.
+        // The method is optionally chained to accommodate specs that shallow mount without stubbing
+        // `BaseDropdown`'s `containsElement`; GitLab has many such specs.
+        this.$refs.baseDropdown?.containsElement?.(e.target)
       ) {
         this.closeAndFocus();
       }

package/src/directives/outside/outside.js

@@ -15,10 +15,15 @@ const defaultEventType = click;
  */
 const activeEventTypes = new Set();
 let lastMousedown = null;
+let isMouseDown = false;
 
 const globalListener = (event) => {
   callbacks.forEach(({ callback, eventTypes }, element) => {
-    const originalEvent = event.type === click ? lastMousedown || event : event;
+    // Safari doesn't focus <button> on click; focus moves to <body>, firing a focusin outside the
+    // dropdown before the button's own click handler runs. Fall back to the mousedown target only
+    // while the mouse is still down, so a later focusin (e.g. Tab) isn't judged by a stale target.
+    const usesMousedownFallback = event.type === click || (event.type === focusin && isMouseDown);
+    const originalEvent = usesMousedownFallback ? lastMousedown || event : event;
     if (
       // Ignore events that aren't targeted outside the element
       element.contains(originalEvent.target) ||
@@ -45,17 +50,35 @@ const globalListener = (event) => {
 // We need to listen for mouse events because text selection fires click event only when selection ends.
 // This means that the click event target could differ from the element where it originally started.
 // As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+// This also covers the Safari focusin case described above, since that focusin is triggered by the
+// same mousedown.
 const onMousedown = (event) => {
   lastMousedown = event;
+  isMouseDown = true;
 };
 
+// Only clear the "is the mouse down" flag here. lastMousedown must survive until the click
+// fires (click comes after mouseup), or releasing a text selection outside the element would
+// wrongly close the dropdown.
+const onMouseup = () => {
+  isMouseDown = false;
+};
+
+const mousedown = 'mousedown';
+const mouseup = 'mouseup';
+
 const startListening = (eventTypes) => {
   eventTypes.forEach((eventType) => {
     if (!activeEventTypes.has(eventType)) {
       // Listening to mousedown events, ensures that a text selection doesn't trigger the
-      // GlOutsideDirective 'click' callback if the selection started within the target element.
-      if (eventType === click) {
-        document.addEventListener('mousedown', onMousedown);
+      // GlOutsideDirective 'click' callback if the selection started within the target element,
+      // and that a Safari focus-loss 'focusin' doesn't trigger the callback either. Tracked via
+      // activeEventTypes too, so it's only ever bound/unbound once, regardless of whether 'click'
+      // and 'focusin' are (de)activated together or separately.
+      if ((eventType === click || eventType === focusin) && !activeEventTypes.has(mousedown)) {
+        document.addEventListener(mousedown, onMousedown);
+        document.addEventListener(mouseup, onMouseup);
+        activeEventTypes.add(mousedown);
       }
 
       // Added { capture: true } to all event types to prevent the behavior discussed in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1686#note_412545027
@@ -67,6 +90,7 @@ const startListening = (eventTypes) => {
   });
 
   lastMousedown = null;
+  isMouseDown = false;
 };
 
 const stopListening = (eventTypesToUnbind) => {
@@ -79,8 +103,15 @@ const stopListening = (eventTypesToUnbind) => {
     }
   });
 
-  if (eventTypesToUnbind.includes(click) && !activeEventTypes.has(click)) {
-    document.removeEventListener('mousedown', onMousedown);
+  // Only unbind mousedown once neither 'click' nor 'focusin' need it anymore.
+  if (
+    activeEventTypes.has(mousedown) &&
+    !activeEventTypes.has(click) &&
+    !activeEventTypes.has(focusin)
+  ) {
+    document.removeEventListener(mousedown, onMousedown);
+    document.removeEventListener(mouseup, onMouseup);
+    activeEventTypes.delete(mousedown);
   }
 };
 

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

@@ -1,4 +1,4 @@
-import { isVue3, extend } from '../../vue'
+import { isVue3, extend, getVue3Constructor } from '../../vue'
 import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components'
 import { IS_BROWSER } from '../../constants/env'
 import { HTMLElement } from '../../constants/safe-types'
@@ -199,7 +199,7 @@ export const BVTransporter = /*#__PURE__*/ extend({
         }
       }
 
-      const { Teleport } = this.$.appContext.config.globalProperties.constructor
+      const { Teleport } = getVue3Constructor(this)
 
       return h(
         Teleport,

package/src/vendor/bootstrap-vue/src/utils/create-new-child-component.js

@@ -1,4 +1,4 @@
-import { isVue3 } from '../vue'
+import { isVue3, getVue3Constructor } from '../vue'
 
 // Regex to detect event handler props: onSomething or onSomethingOnce
 const EVENT_HANDLER_RE = /^on([A-Z][a-zA-Z]*)$/
@@ -61,10 +61,6 @@ const extractEventHandlers = config => {
   return { handlers, cleanConfig }
 }
 
-const getVue3Constructor = parent => {
-  return parent.$.appContext.config.globalProperties.constructor
-}
-
 const BUILTIN_DIRECTIVES = [
   'show',
   'model',

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

@@ -47,6 +47,16 @@ if (isGlobalVue3) {
 
 const isVue3 = instance => Boolean(instance.$)
 
+// Roots created with `new (Vue.extend(Comp))()` expose `Comp`, not `Vue`, as the
+// constructor. Walk up to the base so its options are never merged into helpers.
+const getVue3Constructor = instance => {
+  let Ctor = instance.$.appContext.config.globalProperties.constructor
+  while (Ctor.super) {
+    Ctor = Ctor.super
+  }
+  return Ctor
+}
+
 const extend = Vue.extend.bind(Vue)
 
 function mergeData(...data) {
@@ -54,4 +64,4 @@ function mergeData(...data) {
   return { ...result, ...(result.attrs ?? {}), ...(result.props ?? {}) }
 }
 
-export { COMPONENT_UID_KEY, mergeData, isGlobalVue3, isVue3, extend }
+export { COMPONENT_UID_KEY, mergeData, isGlobalVue3, isVue3, getVue3Constructor, extend }