@gitlab/ui 137.2.4 → 137.2.6

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/components/base/token_selector/token_selector_dropdown.js

@@ -215,7 +215,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('div',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"id":_vm.componentId,"role":"listbox"}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):_vm._e(),_vm._v(" "),_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"aria-selected":_vm.dropdownItemIsFocused(dropdownItem).toString(),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n          "+_vm._s(dropdownItem.name)+"\n        ")]},{"dropdownItem":dropdownItem})],2)])}),_vm._v(" "),(_vm.userDefinedTokenCanBeAdded)?_c('gl-dropdown-item',{ref:_vm.userDefinedToken.id,attrs:{"id":_vm.dropdownItemIdAttribute(_vm.userDefinedToken),"data-dropdown-item-id":_vm.userDefinedToken.id,"active":_vm.dropdownItemIsFocused(_vm.userDefinedToken),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(_vm.userDefinedToken)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(_vm.userDefinedToken)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n          Add \""+_vm._s(_vm.inputText)+"\"\n        ")]},{"inputText":_vm.inputText})],2)]):(!_vm.dropdownItems.length)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2):_vm._e(),_vm._v(" "),_vm._t("dropdown-footer")],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"id":_vm.componentId,"role":"listbox"}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):_vm._e(),_vm._v(" "),_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"aria-selected":_vm.dropdownItemIsFocused(dropdownItem).toString(),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n          "+_vm._s(dropdownItem.name)+"\n        ")]},{"dropdownItem":dropdownItem})],2)])}),_vm._v(" "),(_vm.userDefinedTokenCanBeAdded)?_c('gl-dropdown-item',{ref:_vm.userDefinedToken.id,attrs:{"id":_vm.dropdownItemIdAttribute(_vm.userDefinedToken),"data-dropdown-item-id":_vm.userDefinedToken.id,"active":_vm.dropdownItemIsFocused(_vm.userDefinedToken),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(_vm.userDefinedToken)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(_vm.userDefinedToken)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n          Add \""+_vm._s(_vm.inputText)+"\"\n        ")]},{"inputText":_vm.inputText})],2)]):(!_vm.dropdownItems.length && !_vm.loading)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2):_vm._e(),_vm._v(" "),_vm._t("dropdown-footer")],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/outside/outside.js

@@ -65,19 +65,16 @@ const onMouseup = () => {
 const mousedown = 'mousedown';
 const mouseup = 'mouseup';
 const startListening = eventTypes => {
+  // Listening to mouse events ensures that a text selection doesn't trigger the
+  // GlOutsideDirective 'click' callback if the selection started within the target element,
+  // and that a Safari focus-loss 'focusin' doesn't trigger the callback either. Nothing is
+  // listening yet when the set is empty, so this is bound exactly once.
+  if (activeEventTypes.size === 0) {
+    document.addEventListener(mousedown, onMousedown);
+    document.addEventListener(mouseup, onMouseup);
+  }
   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,
-      // 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
       // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
       // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
@@ -97,17 +94,18 @@ const stopListening = eventTypesToUnbind => {
         let eventTypes = _ref2.eventTypes;
         return !eventTypes.includes(eventType);
       })) {
-        document.removeEventListener(eventType, globalListener);
+        document.removeEventListener(eventType, globalListener, {
+          capture: true
+        });
         activeEventTypes.delete(eventType);
       }
     }
   });
 
-  // Only unbind mousedown once neither 'click' nor 'focusin' need it anymore.
-  if (activeEventTypes.has(mousedown) && !activeEventTypes.has(click) && !activeEventTypes.has(focusin)) {
+  // Nothing is listening anymore, so the mouse gesture tracking isn't needed either.
+  if (activeEventTypes.size === 0) {
     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.4",
+  "version": "137.2.6",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -109,7 +109,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.34",
     "@gitlab/svgs": "*",
-    "@jest/test-sequencer": "30.5.1",
+    "@jest/test-sequencer": "30.5.2",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -131,13 +131,13 @@
     "@vue/compiler-sfc": "3.5.32",
     "@vue/server-renderer": "3.5.32",
     "@vue/test-utils": "1.3.6",
-    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.5.0",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.5.1",
     "@vue/vue2-jest": "29.2.6",
     "@vue/vue3-jest": "^29.2.6",
     "@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",
@@ -147,10 +147,10 @@
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.5.1",
-    "jest-circus": "30.5.1",
-    "jest-environment-jsdom": "30.5.1",
-    "jest-environment-node": "30.5.1",
+    "jest": "30.5.2",
+    "jest-circus": "30.5.2",
+    "jest-environment-jsdom": "30.5.2",
+    "jest-environment-node": "30.5.2",
     "jest-image-snapshot": "^6.5.2",
     "merge-cobertura": "^1.0.9",
     "mockdate": "^3.0.5",
@@ -175,7 +175,7 @@
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.5.3",
+    "style-dictionary": "^5.5.4",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

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/components/base/token_selector/token_selector_dropdown.vue

@@ -276,7 +276,7 @@ export default {
         </div>
       </gl-dropdown-item>
 
-      <gl-dropdown-item v-else-if="!dropdownItems.length" role="option" disabled>
+      <gl-dropdown-item v-else-if="!dropdownItems.length && !loading" role="option" disabled>
         <slot name="no-results-content">No matches found</slot>
       </gl-dropdown-item>
 

package/src/directives/outside/outside.js

@@ -68,19 +68,17 @@ const mousedown = 'mousedown';
 const mouseup = 'mouseup';
 
 const startListening = (eventTypes) => {
+  // Listening to mouse events ensures that a text selection doesn't trigger the
+  // GlOutsideDirective 'click' callback if the selection started within the target element,
+  // and that a Safari focus-loss 'focusin' doesn't trigger the callback either. Nothing is
+  // listening yet when the set is empty, so this is bound exactly once.
+  if (activeEventTypes.size === 0) {
+    document.addEventListener(mousedown, onMousedown);
+    document.addEventListener(mouseup, onMouseup);
+  }
+
   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,
-      // 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
       // Ensures the event listener handles the event in the capturing phase, avoiding issues encountered previously.
       // Cannot be tested with Jest or Cypress, but can be tested with Playwright in the future: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/4272#note_1947425384
@@ -97,21 +95,16 @@ const stopListening = (eventTypesToUnbind) => {
   eventTypesToUnbind.forEach((eventType) => {
     if (activeEventTypes.has(eventType)) {
       if ([...callbacks.values()].every(({ eventTypes }) => !eventTypes.includes(eventType))) {
-        document.removeEventListener(eventType, globalListener);
+        document.removeEventListener(eventType, globalListener, { capture: true });
         activeEventTypes.delete(eventType);
       }
     }
   });
 
-  // Only unbind mousedown once neither 'click' nor 'focusin' need it anymore.
-  if (
-    activeEventTypes.has(mousedown) &&
-    !activeEventTypes.has(click) &&
-    !activeEventTypes.has(focusin)
-  ) {
+  // Nothing is listening anymore, so the mouse gesture tracking isn't needed either.
+  if (activeEventTypes.size === 0) {
     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 }