@gitlab/ui 137.2.5 → 137.2.6

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.2.5",
+  "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,7 +131,7 @@
     "@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",
@@ -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/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);
   }
 };