@gitlab/ui 67.1.0 → 67.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [67.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.1.0...v67.2.0) (2023-10-30)
+
+
+### Features
+
+* **GlOutsideDirective:** respect mousedown events before click ([e2d72d5](https://gitlab.com/gitlab-org/gitlab-ui/commit/e2d72d5cc4d90c57fea3eb54f43d68338cab5ab4))
+
 # [67.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.0.0...v67.1.0) (2023-10-27)
 
 

package/dist/directives/outside/outside.js

@@ -9,15 +9,17 @@ const callbacks = new Map();
  * Is a global listener already set up?
  */
 let listening = false;
+let lastMousedown = null;
 const globalListener = event => {
   callbacks.forEach((_ref, element) => {
     let {
       bindTimeStamp,
       callback
     } = _ref;
+    const originalEvent = lastMousedown || event;
     if (
     // Ignore events that aren't targeted outside the element
-    element.contains(event.target) ||
+    element.contains(originalEvent.target) ||
     // Only consider events triggered after the directive was bound
     event.timeStamp <= bindTimeStamp) {
       return;
@@ -31,20 +33,31 @@ const globalListener = event => {
       }
     }
   });
+  lastMousedown = null;
+};
+
+// 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.
+const onMousedown = event => {
+  lastMousedown = event;
 };
 const startListening = () => {
   if (listening) {
     return;
   }
+  document.addEventListener('mousedown', onMousedown);
   document.addEventListener('click', globalListener, {
     capture: true
   });
   listening = true;
+  lastMousedown = null;
 };
 const stopListening = () => {
   if (!listening) {
     return;
   }
+  document.removeEventListener('mousedown', onMousedown);
   document.removeEventListener('click', globalListener);
   listening = false;
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Mon, 30 Oct 2023 10:30:21 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Mon, 30 Oct 2023 10:30:21 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Mon, 30 Oct 2023 10:30:21 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Mon, 30 Oct 2023 10:30:21 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 Oct 2023 13:55:39 GMT
+// Generated on Mon, 30 Oct 2023 10:30:21 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 Oct 2023 13:55:39 GMT
+// Generated on Mon, 30 Oct 2023 10:30:21 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "67.1.0",
+  "version": "67.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,7 +94,7 @@
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.66.0",
+    "@gitlab/svgs": "3.68.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.3.2",
+    "cypress": "13.3.3",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",

package/src/directives/outside/outside.js

@@ -9,12 +9,14 @@ const callbacks = new Map();
  * Is a global listener already set up?
  */
 let listening = false;
+let lastMousedown = null;
 
 const globalListener = (event) => {
   callbacks.forEach(({ bindTimeStamp, callback }, element) => {
+    const originalEvent = lastMousedown || event;
     if (
       // Ignore events that aren't targeted outside the element
-      element.contains(event.target) ||
+      element.contains(originalEvent.target) ||
       // Only consider events triggered after the directive was bound
       event.timeStamp <= bindTimeStamp
     ) {
@@ -30,6 +32,14 @@ const globalListener = (event) => {
       }
     }
   });
+  lastMousedown = null;
+};
+
+// 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.
+const onMousedown = (event) => {
+  lastMousedown = event;
 };
 
 const startListening = () => {
@@ -37,8 +47,10 @@ const startListening = () => {
     return;
   }
 
+  document.addEventListener('mousedown', onMousedown);
   document.addEventListener('click', globalListener, { capture: true });
   listening = true;
+  lastMousedown = null;
 };
 
 const stopListening = () => {
@@ -46,6 +58,7 @@ const stopListening = () => {
     return;
   }
 
+  document.removeEventListener('mousedown', onMousedown);
   document.removeEventListener('click', globalListener);
   listening = false;
 };

package/src/directives/outside/outside.spec.js

@@ -126,35 +126,14 @@ describe('outside directive', () => {
       expect(document.addEventListener).not.toHaveBeenCalled();
     });
 
-    it('attaches the global listener on first initialisation', async () => {
-      await createComponent();
-
-      expect(document.addEventListener.mock.calls).toEqual([
-        ['click', expect.any(Function), { capture: true }],
-      ]);
-    });
-
     it('detaches the global listener when last binding is removed', async () => {
       await createComponent();
 
       wrapper.destroy();
 
-      expect(document.removeEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
-    });
-
-    it('only binds once, even with multiple instances', async () => {
-      await createComponent({
-        template: `
-          <div>
-            <div v-outside="onClick"></div>
-            <div v-outside="onClick"></div>
-          </div>
-        `,
-      });
+      document.body.dispatchEvent(new MouseEvent('click'));
 
-      expect(document.addEventListener.mock.calls).toEqual([
-        ['click', expect.any(Function), { capture: true }],
-      ]);
+      expect(onClick).not.toHaveBeenCalled();
     });
 
     it('only unbinds once there are no instances', async () => {
@@ -173,12 +152,16 @@ describe('outside directive', () => {
       wrapper.setData({ instances: 1 });
       await wrapper.vm.$nextTick();
 
-      expect(document.removeEventListener).not.toHaveBeenCalled();
+      document.body.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
 
       wrapper.setData({ instances: 0 });
       await wrapper.vm.$nextTick();
 
-      expect(document.removeEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      document.body.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -341,4 +324,15 @@ describe('outside directive', () => {
       expect(global.console.error.mock.calls).toEqual([[thrownError]]);
     });
   });
+
+  describe('mousedown before click', () => {
+    it('respects mousedown event before click', async () => {
+      await createComponent();
+
+      find('inside').trigger('mousedown');
+      find('outside').trigger('click');
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
 });