@gitlab/ui 137.2.3 → 137.2.4

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

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "137.2.3",
+  "version": "137.2.4",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/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);
   }
 };