@gitlab/ui 78.2.2 → 78.2.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [78.2.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.2.2...v78.2.3) (2024-03-21)
+
+
+### Bug Fixes
+
+* **GlBaseDropdown:** Check focused element before closing the dropdown ([54948dd](https://gitlab.com/gitlab-org/gitlab-ui/commit/54948dd3d8848f5ac0fc8d3cb225745401fbe7ea))
+* **GlBaseDropdown:** Close menu with escape key on toggle ([990f65d](https://gitlab.com/gitlab-org/gitlab-ui/commit/990f65d07b831a784ddb8ec1c494e4e055d54c5c))
+
 ## [78.2.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.2.1...v78.2.2) (2024-03-20)
 
 

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

@@ -376,8 +376,9 @@ var script = {
       if (!this.visible) {
         return;
       }
+      const hadFocusWithin = this.$el.contains(document.activeElement);
       const hasToggled = await this.toggle(event);
-      if (!this.$el.contains(document.activeElement)) {
+      if (!hadFocusWithin) {
         return;
       }
       if (hasToggled) {
@@ -424,7 +425,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",value:(_vm.close),expression:"close"}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { 'gl-display-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',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],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",value:(_vm.close),expression:"close"}],class:[_vm.$options.BASE_DROPDOWN_CLASS, { 'gl-display-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',{staticClass:"gl-new-dropdown-inner"},[_vm._t("default")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 16:19:47 GMT
+ * Generated on Thu, 21 Mar 2024 17:32:26 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 16:19:47 GMT
+ * Generated on Thu, 21 Mar 2024 17:32:27 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 16:19:47 GMT
+ * Generated on Thu, 21 Mar 2024 17:32:27 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Mar 2024 16:19:47 GMT
+ * Generated on Thu, 21 Mar 2024 17:32:26 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Mar 2024 16:19:47 GMT
+// Generated on Thu, 21 Mar 2024 17:32:27 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 19 Mar 2024 16:19:47 GMT
+// Generated on Thu, 21 Mar 2024 17:32:27 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

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

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

@@ -337,6 +337,20 @@ describe('base dropdown', () => {
       expect(toggle.element).toHaveFocus();
     });
 
+    it('should close menu on Escape when focus is on toggle', async () => {
+      const toggle = findDefaultDropdownToggle();
+      const menu = findDropdownMenu();
+
+      await toggle.trigger('click');
+      expect(menu.classes('gl-display-block!')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBe('true');
+
+      await toggle.trigger('keydown.esc');
+      expect(menu.classes('gl-display-block!')).toBe(false);
+      expect(toggle.attributes('aria-expanded')).toBe('false');
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
+    });
+
     describe('when the consumer takes over the focus', () => {
       let consumerButton;
 
@@ -487,6 +501,18 @@ describe('base dropdown', () => {
         expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
         expect(toggle.find(`[data-testid="${customToggleTestId}"]`).element).toHaveFocus();
       });
+
+      it('should close menu on Escape when focus is on toggle', async () => {
+        const toggle = findCustomDropdownToggle();
+        const menu = findDropdownMenu();
+
+        await toggle.trigger('click');
+        expect(menu.classes('gl-display-block!')).toBe(true);
+
+        await toggle.trigger('keydown.esc');
+        expect(menu.classes('gl-display-block!')).toBe(false);
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
+      });
     });
 
     it('should emit `GL_DROPDOWN_FOCUS_CONTENT` event on `ARROW_DOWN`', () => {

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

@@ -400,9 +400,10 @@ export default {
         return;
       }
 
+      const hadFocusWithin = this.$el.contains(document.activeElement);
       const hasToggled = await this.toggle(event);
 
-      if (!this.$el.contains(document.activeElement)) {
+      if (!hadFocusWithin) {
         return;
       }
 
@@ -459,6 +460,7 @@ 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/listbox/listbox.spec.js

@@ -59,6 +59,7 @@ describe('GlCollapsibleListbox', () => {
   const findSelectAllButton = () => wrapper.find("[data-testid='listbox-select-all-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
   const findDropdownMenu = () => wrapper.find("[data-testid='base-dropdown-menu']");
+  const findDropdownToggle = () => wrapper.find("[data-testid='base-dropdown-toggle'");
 
   it('passes custom offset to the base dropdown', () => {
     const dropdownOffset = { mainAxis: 10, crossAxis: 40 };
@@ -927,4 +928,17 @@ describe('GlCollapsibleListbox', () => {
       expect(findDropdownMenu().classes()).not.toContain('gl-display-block!');
     });
   });
+
+  it('focuses the toggle when closed by ESC key while item had focus', async () => {
+    buildWrapper({
+      selected: mockOptions[1].value,
+      items: mockOptions,
+      startOpened: true,
+    });
+
+    await nextTick();
+    findListItem(1).trigger('keydown.esc');
+    await nextTick();
+    expect(findDropdownToggle().element).toHaveFocus();
+  });
 });

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -39,16 +39,11 @@ const generatePartialSlashCommands = () => {
 describe('GlDuoChat', () => {
   let wrapper;
 
-  const createComponent = ({ propsData = {}, data = {}, slots = {} } = {}) => {
+  const createComponent = ({ propsData = {}, slots = {} } = {}) => {
     jest.spyOn(DuoChatLoader.methods, 'computeTransitionWidth').mockImplementation();
 
     wrapper = shallowMount(GlDuoChat, {
       propsData,
-      data() {
-        return {
-          ...data,
-        };
-      },
       slots,
       stubs: {
         DuoChatLoader,
@@ -76,6 +71,8 @@ describe('GlDuoChat', () => {
   const findSlashCommands = () => wrapper.findAllComponents(GlDropdownItem);
   const findSelectedSlashCommand = () => wrapper.find('.active-command');
 
+  const setPromptInput = (val) => findChatInput().vm.$emit('input', val);
+
   beforeEach(() => {
     createComponent();
   });
@@ -321,8 +318,8 @@ describe('GlDuoChat', () => {
       `('$event should $action the prompt form', ({ trigger, expectEmitted } = {}) => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         trigger();
         expect(wrapper.emitted('send-chat-prompt')).toEqual(expectEmitted);
       });
@@ -335,8 +332,8 @@ describe('GlDuoChat', () => {
       `('prevents submission when loading $desc', ({ msgs } = {}) => {
         createComponent({
           propsData: { isChatAvailable: true, isLoading: true, messages: msgs },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         clickSubmit();
         expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
@@ -352,18 +349,21 @@ describe('GlDuoChat', () => {
       ])('prevents submission when streaming (messages = "%o")', (msgs = []) => {
         createComponent({
           propsData: { isChatAvailable: true, messages: msgs },
-          data: { prompt: promptStr },
         });
+        setPromptInput(promptStr);
         clickSubmit();
         expect(wrapper.emitted('send-chat-prompt')).toBe(undefined);
       });
 
       it('resets the prompt after form submission', async () => {
         const prompt = 'foo';
-        createComponent({ data: { prompt } });
+        createComponent();
+        await setPromptInput(prompt);
         expect(findChatInput().props('value')).toBe(prompt);
+
         clickSubmit();
         await nextTick();
+
         expect(findChatInput().props('value')).toBe('');
       });
 
@@ -372,7 +372,8 @@ describe('GlDuoChat', () => {
         jest.spyOn(HTMLElement.prototype, 'focus').mockImplementation(function focusMockImpl() {
           focusSpy(this);
         });
-        createComponent({ data: { prompt: 'TEST!' } });
+        createComponent();
+        await setPromptInput('TEST!');
 
         clickSubmit();
         await nextTick();
@@ -385,8 +386,8 @@ describe('GlDuoChat', () => {
       it('emits the event with the reset prompt', () => {
         createComponent({
           propsData: { messages, isChatAvailable: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toEqual([[CHAT_RESET_MESSAGE]]);
@@ -396,8 +397,8 @@ describe('GlDuoChat', () => {
       it('reset does nothing when chat is loading', () => {
         createComponent({
           propsData: { messages, isChatAvailable: true, isLoading: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -407,8 +408,8 @@ describe('GlDuoChat', () => {
       it('reset does nothing when there are no messages', () => {
         createComponent({
           propsData: { messages: [], isChatAvailable: true },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -429,8 +430,8 @@ describe('GlDuoChat', () => {
             messages: existingMessages,
             isChatAvailable: true,
           },
-          data: { prompt: CHAT_RESET_MESSAGE },
         });
+        setPromptInput(CHAT_RESET_MESSAGE);
         clickSubmit();
 
         expect(wrapper.emitted('send-chat-prompt')).toBeUndefined();
@@ -442,16 +443,17 @@ describe('GlDuoChat', () => {
     });
   });
 
-  describe('interaction', () => {
-    it('is hidden after the header button is clicked', async () => {
+  describe('when closed', () => {
+    beforeEach(async () => {
       findCloseButton().vm.$emit('click');
       await nextTick();
-      expect(findChatComponent().exists()).toBe(false);
     });
 
-    it('resets the hidden status of the component on loading', async () => {
-      createComponent({ data: { isHidden: true } });
+    it('is hidden', () => {
       expect(findChatComponent().exists()).toBe(false);
+    });
+
+    it('when starts loading, resets hidden status', async () => {
       // setProps is justified here because we are testing the component's
       // reactive behavior which consistutes an exception
       // See https://docs.gitlab.com/ee/development/fe_guide/style/vue.html#setting-component-state
@@ -461,7 +463,9 @@ describe('GlDuoChat', () => {
       await nextTick();
       expect(findChatComponent().exists()).toBe(true);
     });
+  });
 
+  describe('interaction', () => {
     it('renders custom loader when isLoading', () => {
       createComponent({ propsData: { isLoading: true } });
       expect(findCustomLoader().exists()).toBe(true);
@@ -554,11 +558,8 @@ describe('GlDuoChat', () => {
         });
 
         it('does not render slash commands when prompt is "/"', async () => {
-          createComponent({
-            data: {
-              prompt: '/',
-            },
-          });
+          createComponent();
+          setPromptInput('/');
 
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(false);
@@ -582,10 +583,8 @@ describe('GlDuoChat', () => {
             propsData: {
               slashCommands,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
 
           await nextTick();
           expect(findSlashCommandsCard().exists()).toBe(true);
@@ -615,10 +614,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(false);
@@ -634,10 +631,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(true);
@@ -653,10 +648,8 @@ describe('GlDuoChat', () => {
                 propsData: {
                   slashCommands,
                 },
-                data: {
-                  prompt,
-                },
               });
+              setPromptInput(prompt);
 
               await nextTick();
               expect(findSlashCommandsCard().exists()).toBe(false);
@@ -688,10 +681,8 @@ describe('GlDuoChat', () => {
               propsData: {
                 slashCommands,
               },
-              data: {
-                prompt,
-              },
             });
+            setPromptInput(prompt);
 
             await nextTick();
             expect(findSlashCommands()).toHaveLength(expectedCommands.length);
@@ -709,10 +700,8 @@ describe('GlDuoChat', () => {
               slashCommands,
               messages,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
         });
 
         it('toggles through commands on ArrowDown', async () => {
@@ -777,10 +766,8 @@ describe('GlDuoChat', () => {
               slashCommands,
               messages,
             },
-            data: {
-              prompt: '/',
-            },
           });
+          setPromptInput('/');
         });
 
         it('updates the selected command when hovering over it', async () => {