@gitlab/ui 67.0.0 → 67.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "67.0.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();
+    });
+  });
 });

package/src/scss/utilities.scss

@@ -2448,6 +2448,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $black-normal !important;
 }
 
+.gl-text-gray-100 {
+  color: $gray-100;
+}
+
+.gl-text-gray-100\! {
+  color: $gray-100 !important;
+}
+
 .gl-text-gray-200 {
   color: $gray-200;
 }

package/src/scss/utility-mixins/color.scss

@@ -41,6 +41,10 @@
   color: $black-normal;
 }
 
+@mixin gl-text-gray-100 {
+  color: $gray-100;
+}
+
 @mixin gl-text-gray-200 {
   color: $gray-200;
 }