@gitlab/ui 122.12.0 → 122.12.1

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

@@ -6,14 +6,19 @@ import { logWarning, isElementFocusable, isElementTabbable, stopEvent } from '..
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
+import DropdownContainer from './dropdown_container';
 import { DEFAULT_OFFSET, FIXED_WIDTH_CLASS, ARROW_X_MINIMUM } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const BASE_DROPDOWN_CLASS = 'gl-new-dropdown';
+const DROPDOWN_CONTAINER_CLASS = 'gl-new-dropdown-container';
 var script = {
   name: 'BaseDropdown',
+  expose: ['open', 'close', 'closeAndFocus', 'containsElement'],
   BASE_DROPDOWN_CLASS,
+  DROPDOWN_CONTAINER_CLASS,
   components: {
+    DropdownContainer,
     GlButton,
     GlIcon
   },
@@ -437,6 +442,17 @@ var script = {
       }
       this.toggle(event);
     },
+    clickedToggle(event) {
+      var _this$$refs$toggle$co, _this$$refs$toggle2, _this$$refs$toggle$$e, _this$$refs$toggle$$e2;
+      return ((_this$$refs$toggle$co = (_this$$refs$toggle2 = this.$refs.toggle).contains) === null || _this$$refs$toggle$co === void 0 ? void 0 : _this$$refs$toggle$co.call(_this$$refs$toggle2, event.target)) || ((_this$$refs$toggle$$e = this.$refs.toggle.$el) === null || _this$$refs$toggle$$e === void 0 ? void 0 : (_this$$refs$toggle$$e2 = _this$$refs$toggle$$e.contains) === null || _this$$refs$toggle$$e2 === void 0 ? void 0 : _this$$refs$toggle$$e2.call(_this$$refs$toggle$$e, event.target));
+    },
+    handleClickOutside(event) {
+      // Ignore "click outside" events if the toggle was clicked
+      if (this.clickedToggle(event)) {
+        return;
+      }
+      this.close(event);
+    },
     /**
      * Closes the dropdown and returns the focus to the toggle unless it has has moved outside
      * of the dropdown, meaning that the consumer needed to put some other element in focus.
@@ -500,6 +516,16 @@ var script = {
       const floatingElementBoundingBox = this.$refs.content.getBoundingClientRect();
       const scrollableAreaBoundingBox = scrollableArea.getBoundingClientRect();
       this.nonScrollableContentHeight = floatingElementBoundingBox.height - scrollableAreaBoundingBox.height;
+    },
+    /**
+     * Public method which returns `true` if the given element is in the DOM tree of this component,
+     * and `false` otherwise.
+     *
+     * Useful for checking whether an event was dispatched against something in this dropdown,
+     * e.g., pressing <kbd>Esc</kbd>.
+     */
+    containsElement(element) {
+      return element.closest(`.${BASE_DROPDOWN_CLASS}`) === this.$el || element.closest(`.${DROPDOWN_CONTAINER_CLASS}`) === this.$refs.dropdownContainer;
     }
   }
 };
@@ -508,7 +534,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('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.close),expression:"close",modifiers:{"click":true,"focusin":true}}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[_vm.$options.BASE_DROPDOWN_CLASS, { '!gl-block': _vm.block }]},[_c(_vm.toggleComponent,_vm._g(_vm._b({ref:"toggle",tag:"component",attrs:{"id":_vm.toggleId,"data-testid":"base-dropdown-toggle"}},'component',_vm.toggleAttributes,false),_vm.toggleListeners),[_vm._t("toggle",function(){return [_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._v("\n        "+_vm._s(_vm.toggleText)+"\n      ")]),_vm._v(" "),(!_vm.noCaret)?_c('gl-icon',{staticClass:"gl-button-icon gl-new-dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()]})],2),_vm._v(" "),_c('dropdown-container',{attrs:{"positioning-strategy":_vm.positioningStrategy}},[_c('div',{directives:[{name:"outside",rawName:"v-outside.click.focusin",value:(_vm.handleClickOutside),expression:"handleClickOutside",modifiers:{"click":true,"focusin":true}}],ref:"dropdownContainer",class:_vm.$options.DROPDOWN_CONTAINER_CLASS},[_c('div',{ref:"content",staticClass:"gl-new-dropdown-panel",class:_vm.panelClasses,attrs:{"id":_vm.baseDropdownId,"data-testid":"base-dropdown-menu"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.closeAndFocus.apply(null, arguments)}}},[_c('div',{ref:"dropdownArrow",staticClass:"gl-new-dropdown-arrow"}),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default",null,{"visible":_vm.visible})],2)])])])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -540,4 +566,4 @@ var __vue_staticRenderFns__ = [];
     undefined
   );
 
-export { BASE_DROPDOWN_CLASS, __vue_component__ as default };
+export { __vue_component__ as default };

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

@@ -0,0 +1,32 @@
+import { MountingPortal } from 'portal-vue';
+import { POSITION_ABSOLUTE, POSITION_FIXED } from '../constants';
+
+/* eslint-disable import/no-default-export */
+var dropdown_container = {
+  props: {
+    /**
+     * Strategy to be applied by computePosition. If this is set to fixed, the dropdown's position
+     * needs to be set to fixed in CSS as well.
+     * https://floating-ui.com/docs/computePosition#strategy
+     */
+    positioningStrategy: {
+      type: String,
+      required: false,
+      default: POSITION_ABSOLUTE,
+      validator: strategy => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy)
+    }
+  },
+  render(createElement) {
+    if (this.positioningStrategy === POSITION_FIXED) {
+      return createElement(MountingPortal, {
+        props: {
+          mountTo: 'body',
+          append: true
+        }
+      }, [this.$scopedSlots.default()]);
+    }
+    return this.$scopedSlots.default();
+  }
+};
+
+export { dropdown_container as default };

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

@@ -3,7 +3,7 @@ import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 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, { BASE_DROPDOWN_CLASS } from '../base_dropdown/base_dropdown';
+import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
@@ -11,7 +11,6 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 
-const DROPDOWN_SELECTOR = `.${BASE_DROPDOWN_CLASS}`;
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',
@@ -325,7 +324,7 @@ var script = {
       });
     },
     handleAutoClose(e) {
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && e.target.closest(DROPDOWN_SELECTOR) === this.$refs.baseDropdown.$el) {
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && this.$refs.baseDropdown.containsElement(e.target)) {
         this.closeAndFocus();
       }
     },
@@ -373,4 +372,4 @@ var __vue_staticRenderFns__ = [];
     undefined
   );
 
-export { DROPDOWN_SELECTOR, ITEM_SELECTOR, __vue_component__ as default };
+export { ITEM_SELECTOR, __vue_component__ as default };