@gitlab/ui 137.2.2 → 137.2.4

package/README.md

@@ -132,7 +132,7 @@ To publish new versions of GitLab UI, see [publishing packages](../../doc/publis
 
 ## Contributing guide
 
-Please review the [design system contribution process](https://design.gitlab.com/get-started/contributing)
+Please review the [design system contribution process](https://design.gitlab.com/contribute/contributing)
 for an overview of how to contribute to Pajamas.
 
 For GitLab UI–specific details, refer to [Contributing to GitLab UI](CONTRIBUTING.md) for

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/datepicker/datepicker.js

@@ -304,21 +304,25 @@ var script = {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.calendar.getDate())) {
+      if (this.calendar && !areDatesEqual(val, this.calendar.getDate())) {
         this.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.calendar.setMinDate(minDate);
+      var _this$calendar;
+      (_this$calendar = this.calendar) === null || _this$calendar === void 0 ? void 0 : _this$calendar.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.calendar.setMaxDate(maxDate);
+      var _this$calendar2;
+      (_this$calendar2 = this.calendar) === null || _this$calendar2 === void 0 ? void 0 : _this$calendar2.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.calendar.setStartRange(startRange);
+      var _this$calendar3;
+      (_this$calendar3 = this.calendar) === null || _this$calendar3 === void 0 ? void 0 : _this$calendar3.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.calendar.setEndRange(endRange);
+      var _this$calendar4;
+      (_this$calendar4 = this.calendar) === null || _this$calendar4 === void 0 ? void 0 : _this$calendar4.setEndRange(endRange);
     }
   },
   mounted() {
@@ -380,7 +384,9 @@ var script = {
     }
   },
   beforeDestroy() {
-    this.calendar.destroy();
+    var _this$calendar5;
+    // Vue 3 can unmount a component before `mounted` ran, so `calendar` may not exist yet.
+    (_this$calendar5 = this.calendar) === null || _this$calendar5 === void 0 ? void 0 : _this$calendar5.destroy();
   },
   methods: {
     // is used to open datepicker programmatically

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.2",
+  "version": "137.2.4",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -126,7 +126,7 @@
     "@storybook/vue-webpack5": "^7.6.24",
     "@storybook/vue3": "^7.6.24",
     "@storybook/vue3-webpack5": "^7.6.24",
-    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/jest-image-snapshot": "^6.4.2",
     "@vue/compat": "3.5.32",
     "@vue/compiler-sfc": "3.5.32",
     "@vue/server-renderer": "3.5.32",
@@ -137,11 +137,11 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.18.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.5.5",
+    "autoprefixer": "10.6.0",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "15.21.1",
-    "cypress-real-events": "^1.15.0",
+    "cypress-real-events": "^1.15.1",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
     "gitlab-api-async-iterator": "^1.3.1",
@@ -169,7 +169,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.104.0",
+    "sass": "^1.104.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

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/datepicker/datepicker.vue

@@ -313,21 +313,21 @@ export default {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.calendar.getDate())) {
+      if (this.calendar && !areDatesEqual(val, this.calendar.getDate())) {
         this.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.calendar.setMinDate(minDate);
+      this.calendar?.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.calendar.setMaxDate(maxDate);
+      this.calendar?.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.calendar.setStartRange(startRange);
+      this.calendar?.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.calendar.setEndRange(endRange);
+      this.calendar?.setEndRange(endRange);
     },
   },
   mounted() {
@@ -396,7 +396,8 @@ export default {
     }
   },
   beforeDestroy() {
-    this.calendar.destroy();
+    // Vue 3 can unmount a component before `mounted` ran, so `calendar` may not exist yet.
+    this.calendar?.destroy();
   },
   methods: {
     // is used to open datepicker programmatically

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