@gitlab/ui 115.0.0 → 115.0.1

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

@@ -1,8 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import { offset, autoPlacement, shift, arrow, 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_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
-import { logWarning, isElementFocusable, isElementTabbable } from '../../../../utils/utils';
+import { POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, GL_DROPDOWN_BEFORE_CLOSE, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, KEY_CODE_ESCAPE, ENTER, SPACE, ARROW_DOWN, GL_DROPDOWN_FOCUS_CONTENT } from '../constants';
+import { logWarning, isElementFocusable, isElementTabbable, stopEvent } from '../../../../utils/utils';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button';
 import GlIcon from '../../icon/icon';
@@ -461,11 +461,23 @@ var script = {
     },
     onKeydown(event) {
       const {
+        keyCode,
         code,
         target: {
           tagName
         }
       } = event;
+
+      // Use keyCode because @vue/test-utils doesn't correctly set the
+      // `code` and `key` KeyboardEvent properties. This is only needed in this case because:
+      //  - We are not using the @keydown.esc template syntax, which under Vue 2 checks against `keyCode` anyway.
+      //  - The `.trigger('keydown.esc')` shorthand @vue/test-utils provides is useful.
+      // See https://github.com/vuejs/vue-test-utils/issues/2096
+      if (keyCode === KEY_CODE_ESCAPE && this.visible) {
+        stopEvent(event);
+        this.close();
+        return;
+      }
       let toggleOnEnter = true;
       let toggleOnSpace = true;
       if (tagName === 'BUTTON') {
@@ -496,7 +508,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"},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.close.apply(null, arguments)}}},'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',{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_staticRenderFns__ = [];
 
   /* style */

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

@@ -4,7 +4,7 @@ const GL_DROPDOWN_HIDDEN = 'hidden';
 const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
-// KEY Codes
+// KeyboardEvent.code values
 const ARROW_DOWN = 'ArrowDown';
 const ARROW_UP = 'ArrowUp';
 const END = 'End';
@@ -12,10 +12,13 @@ const ENTER = 'Enter';
 const HOME = 'Home';
 const SPACE = 'Space';
 
+// KeyboardEvent.keyCode values
+const KEY_CODE_ESCAPE = 27;
+
 // Positioning strategies
 // https://floating-ui.com/docs/computePosition#strategy
 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_BEFORE_CLOSE, 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, KEY_CODE_ESCAPE, POSITION_ABSOLUTE, POSITION_FIXED, SPACE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.0.0",
+  "version": "115.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -100,7 +100,7 @@
     "chokidar": "^3.6.0",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.3",
+    "postcss": "8.5.6",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "1.4.2",
     "eslint-plugin-import": "2.32.0"
@@ -121,7 +121,7 @@
     "@jest/test-sequencer": "^30.0.2",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-replace": "^3.1.0",
     "@storybook/addon-a11y": "^7.6.20",
     "@storybook/addon-docs": "^7.6.20",
     "@storybook/addon-essentials": "^7.6.20",
@@ -181,7 +181,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.53.1",
     "playwright-core": "^1.53.1",
-    "postcss": "8.5.3",
+    "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
     "prettier": "3.5.3",

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

@@ -21,6 +21,7 @@ import {
   GL_DROPDOWN_HIDDEN,
   GL_DROPDOWN_BEFORE_CLOSE,
   GL_DROPDOWN_FOCUS_CONTENT,
+  KEY_CODE_ESCAPE,
   ENTER,
   SPACE,
   ARROW_DOWN,
@@ -28,7 +29,12 @@ import {
   POSITION_ABSOLUTE,
   POSITION_FIXED,
 } from '../constants';
-import { logWarning, isElementTabbable, isElementFocusable } from '../../../../utils/utils';
+import {
+  logWarning,
+  isElementTabbable,
+  isElementFocusable,
+  stopEvent,
+} from '../../../../utils/utils';
 import { OutsideDirective } from '../../../../directives/outside/outside';
 import GlButton from '../../button/button.vue';
 import GlIcon from '../../icon/icon.vue';
@@ -500,10 +506,22 @@ export default {
     },
     onKeydown(event) {
       const {
+        keyCode,
         code,
         target: { tagName },
       } = event;
 
+      // Use keyCode because @vue/test-utils doesn't correctly set the
+      // `code` and `key` KeyboardEvent properties. This is only needed in this case because:
+      //  - We are not using the @keydown.esc template syntax, which under Vue 2 checks against `keyCode` anyway.
+      //  - The `.trigger('keydown.esc')` shorthand @vue/test-utils provides is useful.
+      // See https://github.com/vuejs/vue-test-utils/issues/2096
+      if (keyCode === KEY_CODE_ESCAPE && this.visible) {
+        stopEvent(event);
+        this.close();
+        return;
+      }
+
       let toggleOnEnter = true;
       let toggleOnSpace = true;
 
@@ -547,7 +565,6 @@ export default {
       ref="toggle"
       data-testid="base-dropdown-toggle"
       v-on="toggleListeners"
-      @keydown.esc.stop.prevent="close"
     >
       <!-- @slot Custom toggle button content -->
       <slot name="toggle">

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

@@ -4,7 +4,7 @@ export const GL_DROPDOWN_HIDDEN = 'hidden';
 export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
 export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
 
-// KEY Codes
+// KeyboardEvent.code values
 export const ARROW_DOWN = 'ArrowDown';
 export const ARROW_UP = 'ArrowUp';
 export const END = 'End';
@@ -12,6 +12,9 @@ export const ENTER = 'Enter';
 export const HOME = 'Home';
 export const SPACE = 'Space';
 
+// KeyboardEvent.keyCode values
+export const KEY_CODE_ESCAPE = 27;
+
 // Positioning strategies
 // https://floating-ui.com/docs/computePosition#strategy
 export const POSITION_ABSOLUTE = 'absolute';