@gitlab/ui 82.0.0 → 82.1.0

package/dist/tailwind.css

@@ -1,2 +1,2 @@
-.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
+.gl-fixed{position:fixed}.\!gl-absolute{position:absolute!important}.gl-absolute{position:absolute}.gl-relative{position:relative}.gl-bottom-0{bottom:0}.gl-bottom-2{bottom:.25rem}.gl-left-0{left:0}.gl-right-2{right:.25rem}.gl-float-right{float:right}.gl-fill-current{fill:currentColor}.gl-fill-gray-100{fill:var(--gray-100,#dcdcde)}.gl-fill-icon-danger{fill:var(--gl-icon-color-danger,var(--gl-color-red-600,#c91c00))}.gl-fill-icon-default{fill:var(--gl-icon-color-default,var(--gl-color-neutral-700,#535158))}.gl-fill-icon-disabled{fill:var(--gl-icon-color-disabled,var(--gl-color-neutral-300,#a4a3a8))}.gl-fill-icon-info{fill:var(--gl-icon-color-info,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-link{fill:var(--gl-icon-color-link,var(--gl-color-blue-600,#1068bf))}.gl-fill-icon-strong{fill:var(--gl-icon-color-strong,var(--gl-color-neutral-900,#333238))}.gl-fill-icon-subtle{fill:var(--gl-icon-color-subtle,var(--gl-color-neutral-500,#737278))}.gl-fill-icon-success{fill:var(--gl-icon-color-success,var(--gl-color-green-600,#217645))}.gl-fill-icon-warning{fill:var(--gl-icon-color-warning,var(--gl-color-orange-600,#9e5400))}.gl-text-blue-100{color:var(--blue-100,#cbe2f9)}.gl-text-blue-500{color:var(--blue-500,#1f75cb)}.gl-text-blue-900{color:var(--blue-900,#033464)}.gl-text-danger{color:var(--gl-text-color-danger,var(--gl-color-red-600,#c91c00))}.gl-text-gray-400{color:var(--gray-400,#89888d)}.gl-text-gray-500{color:var(--gray-500,#737278)}.gl-text-gray-600{color:var(--gray-600,#626168)}.gl-text-gray-700{color:var(--gray-700,#535158)}.gl-text-gray-900{color:var(--gray-900,#333238)}.gl-text-gray-950{color:var(--gray-950,#1f1e24)}.gl-text-green-500{color:var(--green-500,#108548)}.gl-text-green-600{color:var(--green-600,#217645)}.gl-text-orange-500{color:var(--orange-500,#ab6100)}.gl-text-red-300{color:var(--red-300,#f57f6c)}.gl-text-red-500{color:var(--red-500,#dd2b0e)}.gl-text-red-600{color:var(--red-600,#c91c00)}.gl-text-secondary{color:var(--gl-text-secondary,#737278)}.gl-text-strong{color:var(--gl-text-color-strong,var(--gl-color-neutral-950,#1f1e24))}.gl-text-subtle{color:var(--gl-text-color-subtle,var(--gl-color-neutral-600,#626168))}.gl-text-white{color:var(--white,#fff)}
 /*# sourceMappingURL=tailwind.css.map */

package/dist/tailwind.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}
+{"version":3,"sources":["tailwind.css"],"names":[],"mappings":"AAAA,UAAA,cAAmB,CAAnB,eAAA,2BAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,iBAAmB,CAAnB,aAAA,QAAmB,CAAnB,aAAA,aAAmB,CAAnB,WAAA,MAAmB,CAAnB,YAAA,YAAmB,CAAnB,gBAAA,WAAmB,CAAnB,iBAAA,iBAAmB,CAAnB,kBAAA,4BAAmB,CAAnB,qBAAA,gEAAmB,CAAnB,sBAAA,qEAAmB,CAAnB,uBAAA,sEAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,mBAAA,+DAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,qBAAA,oEAAmB,CAAnB,sBAAA,mEAAmB,CAAnB,sBAAA,oEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,gBAAA,iEAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,kBAAA,6BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,mBAAA,8BAAmB,CAAnB,oBAAA,+BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,iBAAA,4BAAmB,CAAnB,mBAAA,sCAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,gBAAA,qEAAmB,CAAnB,eAAA,uBAAmB","file":"tailwind.css","sourcesContent":["@tailwind utilities;\n"]}

package/package.json

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

package/src/components/base/popover/popover.scss

@@ -67,12 +67,19 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-bg-white;
     @include gl-border-bottom-0;
     @include gl-pb-0;
+  }
+
+  &.has-title .popover-header {
     @include gl-overflow-anywhere;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
   }
 
+  &.has-close-button:not(.has-title) .popover-header {
+    padding-top: $gl-spacing-scale-2;
+  }
+
   .popover-body {
     @include gl-py-3;
     @include gl-px-4;

package/src/components/base/popover/popover.vue

@@ -53,11 +53,21 @@ export default {
     },
   },
   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: {
@@ -89,7 +99,11 @@ export default {
         {{ title }}
       </slot>
       <div v-if="showCloseButton" class="gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0">
-        <close-button data-testid="close-button" @click="close" />
+        <close-button
+          :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
+          data-testid="close-button"
+          @click="close"
+        />
       </div>
     </template>
     <slot></slot>

package/src/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();
 
@@ -12,13 +10,11 @@ let listening = false;
 let lastMousedown = null;
 
 const globalListener = (event) => {
-  callbacks.forEach(({ bindTimeStamp, callback }, element) => {
+  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;
     }
@@ -48,6 +44,9 @@ const startListening = () => {
   }
 
   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 });
   listening = true;
   lastMousedown = null;
@@ -91,10 +90,7 @@ const bind = (el, { value, arg = 'click' }) => {
     startListening();
   }
 
-  callbacks.set(el, {
-    bindTimeStamp: getEventLikeTimeStamp(),
-    callback: value,
-  });
+  callbacks.set(el, value);
 };
 
 const unbind = (el) => {

package/src/scss/gitlab_ui.scss

@@ -2,6 +2,9 @@
 
 @import 'bootstrap_vue';
 
+// Design Tokens
+@import 'tokens';
+
 // Settings
 @import 'functions';
 @import 'variables';

package/dist/directives/outside/get_event_like_time_stamp.js

@@ -1,33 +0,0 @@
-/**
- * This file is based on Vue's scheduler code:
- * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
- *
- * See the LICENSE file in this directory.
- */
-
-const {
-  performance
-} = window;
-
-/**
- * Get a current timestamp that can be meaningfully compared to an event's
- * `timeStamp` property.
- *
- * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
- * a DOMTimeStamp (used by jsdom and older browsers).
- *
- * This function will return a current timestamp of the same type used by the
- * underlying environment when it creates DOM events.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
- * more details.
- *
- * @returns {number}
- */
-const getEventLikeTimeStamp =
-// If the event timestamp, although evaluated AFTER the Date.now(), is
-// smaller, it means the event is using a hi-res timestamp, and we need to
-// use the hi-res version for event listener timestamps as well.
-typeof (performance === null || performance === void 0 ? void 0 : performance.now) === 'function' && Date.now() > document.createEvent('Event').timeStamp ? () => performance.now() : () => Date.now();
-
-export { getEventLikeTimeStamp };

package/src/directives/outside/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2013-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/src/directives/outside/get_event_like_time_stamp.js

@@ -1,31 +0,0 @@
-/**
- * This file is based on Vue's scheduler code:
- * https://github.com/vuejs/vue/blob/v2.6.12/src/core/observer/scheduler.js#L44-L66
- *
- * See the LICENSE file in this directory.
- */
-
-const { performance } = window;
-
-/**
- * Get a current timestamp that can be meaningfully compared to an event's
- * `timeStamp` property.
- *
- * Event timestamps can be a DOMHighResTimeStamp (if supported), otherwise
- * a DOMTimeStamp (used by jsdom and older browsers).
- *
- * This function will return a current timestamp of the same type used by the
- * underlying environment when it creates DOM events.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Event/timeStamp for
- * more details.
- *
- * @returns {number}
- */
-export const getEventLikeTimeStamp =
-  // If the event timestamp, although evaluated AFTER the Date.now(), is
-  // smaller, it means the event is using a hi-res timestamp, and we need to
-  // use the hi-res version for event listener timestamps as well.
-  typeof performance?.now === 'function' && Date.now() > document.createEvent('Event').timeStamp
-    ? () => performance.now()
-    : () => Date.now();