@gitlab/ui 82.0.1 → 82.1.0

package/package.json

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

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