@gitlab/ui 58.1.0 → 58.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [58.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v58.2.0...v58.2.1) (2023-03-21)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** Keep focus on toggle on open ([8dd3172](https://gitlab.com/gitlab-org/gitlab-ui/commit/8dd3172aaf304bad3b7a606dc6732af6a7390acf))
+
+# [58.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v58.1.0...v58.2.0) (2023-03-17)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Update btn group style ([503f65c](https://gitlab.com/gitlab-org/gitlab-ui/commit/503f65c21692d3a770f766505d2c567afabc8744))
+
 # [58.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v58.0.0...v58.1.0) (2023-03-16)
 
 

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

@@ -1,7 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
 import { createPopper } from '@popperjs/core';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
-import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE } from '../constants';
+import { POPPER_CONFIG, 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';
@@ -156,6 +156,7 @@ var script = {
           class: this.toggleButtonClasses,
           ...this.ariaAttributes,
           listeners: {
+            keydown: event => this.onKeydown(event),
             click: () => this.toggle()
           }
         };
@@ -253,11 +254,25 @@ var script = {
     },
     onKeydown(event) {
       const {
-        code
+        code,
+        target: {
+          tagName
+        }
       } = event;
-      if (code === ENTER || code === SPACE) {
+      let toggleOnEnter = true;
+      let toggleOnSpace = true;
+      if (tagName === 'BUTTON') {
+        toggleOnEnter = false;
+        toggleOnSpace = false;
+      } else if (tagName === 'A') {
+        toggleOnEnter = false;
+      }
+      if (code === ENTER && toggleOnEnter || code === SPACE && toggleOnSpace) {
         this.toggle();
       }
+      if (code === ARROW_DOWN) {
+        this.$emit(GL_DROPDOWN_FOCUS_CONTENT, event);
+      }
     }
   }
 };

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

@@ -10,6 +10,7 @@ const POPPER_CONFIG = {
 // base dropdown events
 const GL_DROPDOWN_SHOWN = 'shown';
 const GL_DROPDOWN_HIDDEN = 'hidden';
+const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
 // KEY Codes
 const ARROW_DOWN = 'ArrowDown';
@@ -19,4 +20,4 @@ const ENTER = 'Enter';
 const HOME = 'Home';
 const SPACE = 'Space';
 
-export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POPPER_CONFIG, SPACE };
+export { ARROW_DOWN, ARROW_UP, END, ENTER, GL_DROPDOWN_FOCUS_CONTENT, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, HOME, POPPER_CONFIG, 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, HOME, END, ARROW_UP, ARROW_DOWN } from '../constants';
+import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, HOME, END, ARROW_UP, ARROW_DOWN } 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';
@@ -13,7 +13,8 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   events: {
     GL_DROPDOWN_SHOWN,
-    GL_DROPDOWN_HIDDEN
+    GL_DROPDOWN_HIDDEN,
+    GL_DROPDOWN_FOCUS_CONTENT
   },
   components: {
     GlBaseDropdown,
@@ -177,11 +178,6 @@ var script = {
       this.$refs.baseDropdown.close();
     },
     onShow() {
-      const items = this.getFocusableListItemElements();
-      if (items.length) {
-        this.focusItem(0, items);
-      }
-
       /**
        * Emitted when dropdown is shown
        *
@@ -257,7 +253,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},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide]),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",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:item.text,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:groupItem.text,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},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",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:item.text,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:groupItem.text,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 */