@gitlab/ui 66.31.1 → 66.32.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.32.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.31.1...v66.32.0) (2023-10-16)
+
+
+### Features
+
+* **GlDisclosureDropdown:** add a beforeClose event ([cb4fdb1](https://gitlab.com/gitlab-org/gitlab-ui/commit/cb4fdb10f3669e80c688ea8e442f6dd9cb7ce973))
+
 ## [66.31.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.31.0...v66.31.1) (2023-10-13)
 
 

package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, size, autoUpdate, computePosition } from '@floating-ui/dom';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements, dropdownAllowedAutoPlacements } from '../../../../utils/constants';
-import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
 import { isElementFocusable, isElementTabbable, logWarning } from '../../../../utils/utils';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -187,7 +187,7 @@ var script = {
           ...this.ariaAttributes,
           listeners: {
             keydown: event => this.onKeydown(event),
-            click: () => this.toggle()
+            click: event => this.toggle(event)
           }
         };
       }
@@ -196,7 +196,7 @@ var script = {
         class: 'gl-new-dropdown-custom-toggle',
         listeners: {
           keydown: event => this.onKeydown(event),
-          click: () => this.toggle()
+          click: event => this.toggle(event)
         }
       };
     },
@@ -314,7 +314,17 @@ var script = {
       (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
       (_this$stopAutoUpdate = this.stopAutoUpdate) === null || _this$stopAutoUpdate === void 0 ? void 0 : _this$stopAutoUpdate.call(this);
     },
-    async toggle() {
+    async toggle(event) {
+      if (event && this.visible) {
+        let prevented = false;
+        this.$emit(GL_DROPDOWN_BEFORE_CLOSE, {
+          originalEvent: event,
+          preventDefault() {
+            prevented = true;
+          }
+        });
+        if (prevented) return false;
+      }
       this.visible = !this.visible;
       if (this.visible) {
         // The dropdown needs to be actually visible before we compute its position with Floating UI.
@@ -331,6 +341,9 @@ var script = {
         this.stopFloating();
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
+
+      // this is to check whether `toggle` was prevented or not
+      return true;
     },
     open() {
       if (this.visible) {
@@ -338,18 +351,20 @@ var script = {
       }
       this.toggle();
     },
-    close() {
+    close(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
+      this.toggle(event);
     },
-    closeAndFocus() {
+    async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
-      this.focusToggle();
+      const hasToggled = await this.toggle(event);
+      if (hasToggled) {
+        this.focusToggle();
+      }
     },
     focusToggle() {
       this.toggleElement.focus();
@@ -370,7 +385,7 @@ var script = {
         toggleOnEnter = false;
       }
       if (code === ENTER && toggleOnEnter || code === SPACE && toggleOnSpace) {
-        this.toggle();
+        this.toggle(event);
       }
       if (code === ARROW_DOWN) {
         this.$emit(GL_DROPDOWN_FOCUS_CONTENT, event);

package/dist/components/base/new_dropdowns/constants.js

@@ -1,6 +1,7 @@
 // base dropdown events
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
+const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
 // KEY Codes
@@ -17,4 +18,4 @@ const POSITION_ABSOLUTE = 'absolute';
 const POSITION_FIXED = 'fixed';
 const GL_DROPDOWN_CONTENTS_CLASS = 'gl-new-dropdown-contents';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -1,7 +1,7 @@
 import clamp from 'lodash/clamp';
 import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
-import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
+import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, HOME, END, ARROW_UP, ARROW_DOWN, ENTER, SPACE, GL_DROPDOWN_CONTENTS_CLASS } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
@@ -16,6 +16,7 @@ var script = {
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_BEFORE_CLOSE,
     GL_DROPDOWN_FOCUS_CONTENT
   },
   components: {
@@ -232,6 +233,14 @@ var script = {
        */
       this.$emit(GL_DROPDOWN_SHOWN);
     },
+    onBeforeClose(event) {
+      /**
+       * Emitted when dropdown is about to be closed
+       *
+       * @event beforeClose
+       */
+      this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
+    },
     onHide() {
       /**
        * Emitted when dropdown is hidden
@@ -311,7 +320,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Mon, 16 Oct 2023 11:22:12 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Mon, 16 Oct 2023 11:22:12 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Mon, 16 Oct 2023 11:22:12 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 20:03:52 GMT
+ * Generated on Mon, 16 Oct 2023 11:22:12 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 13 Oct 2023 20:03:52 GMT
+// Generated on Mon, 16 Oct 2023 11:22:12 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 13 Oct 2023 20:03:52 GMT
+// Generated on Mon, 16 Oct 2023 11:22:12 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.31.1",
+  "version": "66.32.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,8 +88,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -6,6 +6,7 @@ import {
   GL_DROPDOWN_FOCUS_CONTENT,
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_SHOWN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import { waitForAnimationFrame } from '../../../../utils/test_utils';
@@ -28,7 +29,7 @@ const DEFAULT_BTN_TOGGLE_CLASSES = [
 describe('base dropdown', () => {
   let wrapper;
 
-  const buildWrapper = (propsData, slots = {}) => {
+  const buildWrapper = (propsData, slots = {}, listeners = {}) => {
     wrapper = mount(GlBaseDropdown, {
       propsData: {
         toggleId: 'dropdown-toggle-btn-1',
@@ -39,6 +40,7 @@ describe('base dropdown', () => {
         ...slots,
       },
       attachTo: document.body,
+      listeners,
     });
   };
 
@@ -332,6 +334,60 @@ describe('base dropdown', () => {
     });
   });
 
+  describe('beforeClose event', () => {
+    let event;
+
+    beforeEach(() => {
+      event = undefined;
+      buildWrapper(undefined, undefined, {
+        [GL_DROPDOWN_BEFORE_CLOSE]({ originalEvent, preventDefault }) {
+          event = originalEvent;
+          preventDefault();
+        },
+      });
+    });
+
+    it('should prevent closing', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+
+      await toggle.trigger('click');
+
+      menu.element.focus();
+      await menu.trigger('keydown.esc');
+      expect(menu.classes('gl-display-block!')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBeDefined();
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toBeUndefined();
+      expect(toggle.element).not.toHaveFocus();
+    });
+
+    it('should contain original keyboard event', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+      await toggle.trigger('click');
+      await menu.trigger('keydown.esc');
+      expect(event.type).toBe('keydown');
+    });
+
+    it('should contain original toggle click event', async () => {
+      const toggle = findDefaultDropdownToggle();
+      await toggle.trigger('click');
+      await toggle.trigger('click');
+      expect(event.type).toBe('click');
+    });
+
+    it('should contain original outside click event', async () => {
+      const outsideElement = document.createElement('div');
+      document.body.appendChild(outsideElement);
+
+      const toggle = findDefaultDropdownToggle();
+      await toggle.trigger('click');
+      const click = new MouseEvent('click', { bubbles: true });
+      outsideElement.dispatchEvent(click);
+      expect(event).toBe(click);
+    });
+  });
+
   describe('Custom toggle', () => {
     const customToggleTestId = 'custom-toggle';
     const toggleContent = `<button data-testid="${customToggleTestId}">Custom toggle</button>`;

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -11,6 +11,7 @@ import {
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ENTER,
   SPACE,
@@ -202,7 +203,7 @@ export default {
           ...this.ariaAttributes,
           listeners: {
             keydown: (event) => this.onKeydown(event),
-            click: () => this.toggle(),
+            click: (event) => this.toggle(event),
           },
         };
       }
@@ -212,7 +213,7 @@ export default {
         class: 'gl-new-dropdown-custom-toggle',
         listeners: {
           keydown: (event) => this.onKeydown(event),
-          click: () => this.toggle(),
+          click: (event) => this.toggle(event),
         },
       };
     },
@@ -333,7 +334,17 @@ export default {
       this.observer?.disconnect();
       this.stopAutoUpdate?.();
     },
-    async toggle() {
+    async toggle(event) {
+      if (event && this.visible) {
+        let prevented = false;
+        this.$emit(GL_DROPDOWN_BEFORE_CLOSE, {
+          originalEvent: event,
+          preventDefault() {
+            prevented = true;
+          },
+        });
+        if (prevented) return false;
+      }
       this.visible = !this.visible;
 
       if (this.visible) {
@@ -352,6 +363,9 @@ export default {
         this.stopFloating();
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
+
+      // this is to check whether `toggle` was prevented or not
+      return true;
     },
     open() {
       if (this.visible) {
@@ -359,18 +373,20 @@ export default {
       }
       this.toggle();
     },
-    close() {
+    close(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
+      this.toggle(event);
     },
-    closeAndFocus() {
+    async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
-      this.toggle();
-      this.focusToggle();
+      const hasToggled = await this.toggle(event);
+      if (hasToggled) {
+        this.focusToggle();
+      }
     },
     focusToggle() {
       this.toggleElement.focus();
@@ -392,7 +408,7 @@ export default {
       }
 
       if ((code === ENTER && toggleOnEnter) || (code === SPACE && toggleOnSpace)) {
-        this.toggle();
+        this.toggle(event);
       }
 
       if (code === ARROW_DOWN) {

package/src/components/base/new_dropdowns/constants.js

@@ -1,6 +1,7 @@
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
+export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
 // KEY Codes

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -38,6 +38,27 @@ The disclosure dropdown is closed by any of the following:
 - clicking anywhere outside the component
 - clicking the action or link inside the dropdown
 
+Before closing, `GlDisclosureDropdown` emits a `beforeClose` event with these properties:
+
+1. `originalEvent` – the event that triggered closing of the dropdown
+2. `preventDefault` – a method which will prevent closing of the dropdown
+
+An example of using this event to prevent the dropdown from closing:
+
+```html
+<gl-disclosure-dropdown @beforeClose="$event.preventDefault()" />
+```
+
+Note that this method will also prevent the dropdown from closing even if the trigger button is clicked.
+
+You can use the `preventDefault` to filter out events that are causing undesired dropdown closing:
+
+```html
+<gl-disclosure-dropdown
+  @beforeClose="(e) => { ignoreElement.contains(e.originalEvent.target) && e.preventDefault() }"
+/>
+```
+
 After closing, `GlDisclosureDropdown` emits a `hidden` event.
 
 ### Setting disclosure dropdown items

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -5,6 +5,7 @@ import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ARROW_DOWN,
   ARROW_UP,
@@ -100,6 +101,20 @@ describe('GlDisclosureDropdown', () => {
     });
   });
 
+  describe('onClose', () => {
+    let data;
+
+    beforeEach(() => {
+      buildWrapper();
+      data = { event: {}, preventDefault() {} };
+      findBaseDropdown().vm.$emit(GL_DROPDOWN_BEFORE_CLOSE, data);
+    });
+
+    it('should re-emit the event', () => {
+      expect(wrapper.emitted(GL_DROPDOWN_BEFORE_CLOSE)).toStrictEqual([[data]]);
+    });
+  });
+
   describe('onHide', () => {
     beforeEach(() => {
       buildWrapper();

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -6,6 +6,7 @@ import { stopEvent, filterVisible } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
   GL_DROPDOWN_HIDDEN,
+  GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
   ENTER,
   SPACE,
@@ -35,6 +36,7 @@ export default {
   events: {
     GL_DROPDOWN_SHOWN,
     GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_BEFORE_CLOSE,
     GL_DROPDOWN_FOCUS_CONTENT,
   },
   components: {
@@ -250,6 +252,14 @@ export default {
        */
       this.$emit(GL_DROPDOWN_SHOWN);
     },
+    onBeforeClose(event) {
+      /**
+       * Emitted when dropdown is about to be closed
+       *
+       * @event beforeClose
+       */
+      this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
+    },
     onHide() {
       /**
        * Emitted when dropdown is hidden
@@ -349,6 +359,7 @@ export default {
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
+    @[$options.events.GL_DROPDOWN_BEFORE_CLOSE]="onBeforeClose"
     @[$options.events.GL_DROPDOWN_FOCUS_CONTENT]="onKeydown"
   >
     <template v-if="hasCustomToggle" #toggle>