@gitlab/ui 48.3.0 → 48.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [48.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.3.0...v48.3.1) (2022-10-24)
+
+
+### Bug Fixes
+
+* **OutsideDirective:** enable event capture ([c32381a](https://gitlab.com/gitlab-org/gitlab-ui/commit/c32381a3048895e747cc905df468319d8eff7a30))
+
 # [48.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.2.0...v48.3.0) (2022-10-24)
 
 

package/dist/directives/outside/outside.js

@@ -40,7 +40,9 @@ const startListening = () => {
     return;
   }
 
-  document.addEventListener('click', globalListener);
+  document.addEventListener('click', globalListener, {
+    capture: true
+  });
   listening = true;
 };
 

package/package.json

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

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -249,7 +249,6 @@ const makeGroupedExample = (changes) => {
         openListbox(this);
       }
     },
-    template: template(''),
     ...changes,
   });
 
@@ -259,7 +258,53 @@ const makeGroupedExample = (changes) => {
   return story;
 };
 
-export const Groups = makeGroupedExample();
+export const Groups = makeGroupedExample({
+  template: template('', {
+    bindingOverrides: {
+      ':toggle-text': 'customToggleText',
+      ':items': 'computedItems',
+    },
+  }),
+  data() {
+    return {
+      selected: ['v1.0'],
+    };
+  },
+  computed: {
+    customToggleText() {
+      return this.selected.length ? `${this.selected.length} refs selected` : 'Select refs';
+    },
+    computedItems() {
+      const isSelected = (option) => this.selected.includes(option.value);
+      const notSelected = (option) => !isSelected(option);
+
+      const selectedBranches = mockGroups[0].options.filter(isSelected);
+      const availableBranches = mockGroups[0].options.filter(notSelected);
+      const selectedTags = mockGroups[1].options.filter(isSelected);
+      const availableTags = mockGroups[1].options.filter(notSelected);
+
+      return [
+        {
+          text: 'Selected branches',
+          options: selectedBranches,
+        },
+        {
+          text: 'Selected tags',
+          options: selectedTags,
+        },
+        {
+          text: 'Branches',
+          options: availableBranches,
+        },
+        {
+          text: 'Tags',
+          options: availableTags,
+        },
+      ].filter((group) => group.options.length);
+    },
+  },
+});
+Groups.args = generateProps({ multiple: true });
 
 export const CustomGroupsAndItems = makeGroupedExample({
   template: template(`

package/src/directives/outside/outside.js

@@ -37,7 +37,7 @@ const startListening = () => {
     return;
   }
 
-  document.addEventListener('click', globalListener);
+  document.addEventListener('click', globalListener, { capture: true });
   listening = true;
 };
 

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

@@ -129,7 +129,9 @@ describe('outside directive', () => {
     it('attaches the global listener on first initialisation', async () => {
       await createComponent();
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('detaches the global listener when last binding is removed', async () => {
@@ -150,7 +152,9 @@ describe('outside directive', () => {
         `,
       });
 
-      expect(document.addEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      expect(document.addEventListener.mock.calls).toEqual([
+        ['click', expect.any(Function), { capture: true }],
+      ]);
     });
 
     it('only unbinds once there are no instances', async () => {