@gitlab/ui 82.0.0 → 82.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [82.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v82.0.1...v82.1.0) (2024-06-20)
+
+
+### Features
+
+* **CSS:** include design token CSS custom properties in gitlab_ui.scss ([1a8db73](https://gitlab.com/gitlab-org/gitlab-ui/commit/1a8db73bde228ef91ee86660515c180984bdeebf))
+
+## [82.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v82.0.0...v82.0.1) (2024-06-19)
+
+
+### Bug Fixes
+
+* **GlPopover:** properly align the close button without title ([e4f314f](https://gitlab.com/gitlab-org/gitlab-ui/commit/e4f314f1113058b12f3af65921bc4145b0a47155))
+
 # [82.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v81.1.0...v82.0.0) (2024-06-18)
 
 

package/dist/components/base/popover/popover.js

@@ -52,11 +52,14 @@ var script = {
     }
   },
   computed: {
+    hasTitle() {
+      return this.$scopedSlots.title || this.title;
+    },
     customClass() {
-      return ['gl-popover', ...this.cssClasses].join(' ');
+      return ['gl-popover', this.hasTitle && 'has-title', this.showCloseButton && 'has-close-button', ...this.cssClasses].filter(Boolean).join(' ');
     },
     shouldShowTitle() {
-      return this.$scopedSlots.title || this.title || this.showCloseButton;
+      return this.hasTitle || this.showCloseButton;
     }
   },
   methods: {
@@ -75,7 +78,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('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0"},[_c('close-button',{attrs:{"data-testid":"close-button"},on:{"click":_vm.close}})],1):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('div',{staticClass:"gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0"},[_c('close-button',{class:{ 'gl-float-right gl-mt-2': !_vm.hasTitle },attrs:{"data-testid":"close-button"},on:{"click":_vm.close}})],1):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/outside/outside.js

@@ -1,7 +1,5 @@
-import { getEventLikeTimeStamp } from './get_event_like_time_stamp';
-
 /**
- * Map<HTMLElement, { bindTimeStamp: number, callback: Function }>
+ * Map<HTMLElement, Function>
  */
 const callbacks = new Map();
 
@@ -11,17 +9,11 @@ const callbacks = new Map();
 let listening = false;
 let lastMousedown = null;
 const globalListener = event => {
-  callbacks.forEach((_ref, element) => {
-    let {
-      bindTimeStamp,
-      callback
-    } = _ref;
+  callbacks.forEach((callback, element) => {
     const originalEvent = lastMousedown || event;
     if (
     // Ignore events that aren't targeted outside the element
-    element.contains(originalEvent.target) ||
-    // Only consider events triggered after the directive was bound
-    event.timeStamp <= bindTimeStamp) {
+    element.contains(originalEvent.target)) {
       return;
     }
     try {
@@ -47,6 +39,9 @@ const startListening = () => {
     return;
   }
   document.addEventListener('mousedown', onMousedown);
+  // Added { capture: true } 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
   document.addEventListener('click', globalListener, {
     capture: true
   });
@@ -61,11 +56,11 @@ const stopListening = () => {
   document.removeEventListener('click', globalListener);
   listening = false;
 };
-const bind = (el, _ref2) => {
+const bind = (el, _ref) => {
   let {
     value,
     arg = 'click'
-  } = _ref2;
+  } = _ref;
   if (typeof value !== 'function') {
     throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
   }
@@ -87,10 +82,7 @@ const bind = (el, _ref2) => {
   if (!listening) {
     startListening();
   }
-  callbacks.set(el, {
-    bindTimeStamp: getEventLikeTimeStamp(),
-    callback: value
-  });
+  callbacks.set(el, value);
 };
 const unbind = el => {
   callbacks.delete(el);