@gitlab/ui 72.8.0 → 72.8.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [72.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.8.0...v72.8.1) (2024-01-18)
+
+
+### Bug Fixes
+
+* **dropdowns:** do not steal focus back from the consumer ([69295fa](https://gitlab.com/gitlab-org/gitlab-ui/commit/69295faa28dfe48b90e75ab86c9d3ba615760c96))
+
 # [72.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.7.0...v72.8.0) (2024-01-16)
 
 

package/dist/components/base/form/form_checkbox_tree/checkbox_tree_node.js

@@ -44,7 +44,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',{class:_vm.rootClass,attrs:{"data-qa-selector":("" + (_vm.$options.qaPrefix) + (_vm.option.value))}},[_c('gl-form-checkbox',{class:_vm.checkboxClass,attrs:{"checked":_vm.node.isChecked,"indeterminate":_vm.node.isIndeterminate},on:{"change":function($event){return _vm.tree.toggleOption(_vm.option, $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")]),_vm._v(" "),_vm._l((_vm.option.children),function(child){return _c('gl-form-checkbox-tree-node',{key:child.value,attrs:{"option":child,"is-nested":""}})})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.rootClass,attrs:{"data-testid":("" + (_vm.$options.qaPrefix) + (_vm.option.value))}},[_c('gl-form-checkbox',{class:_vm.checkboxClass,attrs:{"checked":_vm.node.isChecked,"indeterminate":_vm.node.isIndeterminate},on:{"change":function($event){return _vm.tree.toggleOption(_vm.option, $event)}}},[_vm._v("\n    "+_vm._s(_vm.label)+"\n  ")]),_vm._v(" "),_vm._l((_vm.option.children),function(child){return _c('gl-form-checkbox-tree-node',{key:child.value,attrs:{"option":child,"is-nested":""}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -359,11 +359,20 @@ var script = {
       }
       this.toggle(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.
+     *
+     * @param {KeyboardEvent?} event The keyboard event that caused the dropdown to close.
+     */
     async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
       const hasToggled = await this.toggle(event);
+      if (!this.$el.contains(document.activeElement)) {
+        return;
+      }
       if (hasToggled) {
         this.focusToggle();
       }

package/dist/components/base/token_selector/token_selector.js

@@ -91,7 +91,7 @@ var script = {
       default: null
     },
     /**
-     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
      */
     textInputAttrs: {
       type: Object,

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Jan 2024 23:51:36 GMT
+ * Generated on Thu, 18 Jan 2024 06:11:39 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Jan 2024 23:51:36 GMT
+ * Generated on Thu, 18 Jan 2024 06:11:39 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Jan 2024 23:51:36 GMT
+ * Generated on Thu, 18 Jan 2024 06:11:39 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Jan 2024 23:51:36 GMT
+ * Generated on Thu, 18 Jan 2024 06:11:39 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 Mon, 15 Jan 2024 23:51:36 GMT
+// Generated on Thu, 18 Jan 2024 06:11:39 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 15 Jan 2024 23:51:36 GMT
+// Generated on Thu, 18 Jan 2024 06:11:39 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

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

package/src/components/base/filtered_search/filtered_search.spec.js

@@ -476,7 +476,7 @@ describe('Filtered search', () => {
   });
 
   it('passes `searchButtonAttributes` prop to `GlSearchBoxByClick`', () => {
-    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({ searchButtonAttributes });
 
@@ -484,7 +484,7 @@ describe('Filtered search', () => {
   });
 
   it('passes `searchInputAttributes` prop to search term', async () => {
-    const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchInputAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({
       value: ['one'],

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -15,7 +15,7 @@ const pointerClass = 'gl-cursor-pointer';
 describe('Filtered search term', () => {
   let wrapper;
 
-  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+  const searchInputAttributes = { 'data-testid': 'foo-bar', 'data-prop': 'foo-property' };
 
   const defaultProps = {
     availableTokens: [],
@@ -182,9 +182,7 @@ describe('Filtered search term', () => {
       searchInputAttributes,
     });
 
-    expect(findSearchInput().attributes('data-qa-selector')).toBe(
-      searchInputAttributes['data-qa-selector']
-    );
+    expect(findSearchInput().attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
   });
 
   it('activates and deactivates when the input is focused/blurred', async () => {

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -10,7 +10,7 @@ const OPTIONS = [
 describe('Filtered search token segment', () => {
   let wrapper;
 
-  const searchInputAttributes = { 'data-qa-selector': 'foo-bar' };
+  const searchInputAttributes = { 'data-prop': 'foo-bar' };
 
   beforeAll(() => {
     if (!HTMLElement.prototype.scrollIntoView) {
@@ -336,7 +336,7 @@ describe('Filtered search token segment', () => {
       });
 
       it('does not add `searchInputAttributes` prop to search token segment', () => {
-        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+        expect(wrapper.attributes('data-prop')).toBe(undefined);
       });
     }
   );
@@ -353,9 +353,7 @@ describe('Filtered search token segment', () => {
     });
 
     it('adds `searchInputAttributes` prop to search token segment', () => {
-      expect(wrapper.attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
-      );
+      expect(wrapper.attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
     });
   });
 
@@ -363,8 +361,8 @@ describe('Filtered search token segment', () => {
     it('adds `searchInputAttributes` prop to search token segment input', () => {
       createComponent({ active: true, value: 'something', searchInputAttributes });
 
-      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
+      expect(wrapper.find('input').attributes('data-prop')).toBe(
+        searchInputAttributes['data-prop']
       );
     });
 

package/src/components/base/form/form_checkbox_tree/checkbox_tree_node.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <div :class="rootClass" :data-qa-selector="`${$options.qaPrefix}${option.value}`">
+  <div :class="rootClass" :data-testid="`${$options.qaPrefix}${option.value}`">
     <gl-form-checkbox
       :checked="node.isChecked"
       :indeterminate="node.isIndeterminate"

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.spec.js

@@ -87,7 +87,7 @@ describe('GlFormCheckboxTree', () => {
   const findCheckboxes = (el = wrapper) => el.findAllComponents(GlFormCheckbox);
   const countIndeterminate = () => wrapper.findAll('.js-is-indeterminate').length || 0;
   const countChecked = () => wrapper.findAll('.js-is-checked').length || 0;
-  const findCheckboxByValue = (value) => wrapper.find(`[data-qa-selector="${QA_PREFIX}${value}"]`);
+  const findCheckboxByValue = (value) => wrapper.find(`[data-testid="${QA_PREFIX}${value}"]`);
   const getCheckboxesCount = (el) => findCheckboxes(el).length;
   const findCheckboxInput = (checkbox) => checkbox.find('input[type="checkbox"]');
   const expectCheckboxUnchecked = (checkbox) => {
@@ -152,7 +152,7 @@ describe('GlFormCheckboxTree', () => {
 
     beforeEach(async () => {
       createWrapper({ options: getOptions(shape) });
-      checkbox = wrapper.find(`[data-qa-selector="${QA_PREFIX}${boxToCheck}"]`);
+      checkbox = wrapper.find(`[data-testid="${QA_PREFIX}${boxToCheck}"]`);
       await checkbox.find('input').setChecked();
     });
 

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

@@ -36,7 +36,7 @@ describe('base dropdown', () => {
         ...propsData,
       },
       slots: {
-        default: `<div class="${GL_DROPDOWN_CONTENTS_CLASS}" />`,
+        default: `<div class="${GL_DROPDOWN_CONTENTS_CLASS}"><button /></div>`,
         ...slots,
       },
       attachTo: document.body,
@@ -57,6 +57,8 @@ describe('base dropdown', () => {
   const findDropdownToggleText = () => findDefaultDropdownToggle().find('.gl-button-text');
   const findDropdownMenu = () => wrapper.find('.gl-new-dropdown-panel');
 
+  const moveFocusWithinDropdown = () => findDropdownMenu().find('button').element.focus();
+
   describe('Floating UI instance', () => {
     it("starts Floating UI's when opening the dropdown", async () => {
       buildWrapper();
@@ -324,14 +326,47 @@ describe('base dropdown', () => {
       expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBe('true');
 
-      // close menu clicking toggle btn
-      menu.element.focus();
+      moveFocusWithinDropdown();
+
+      // close menu by pressing ESC key
       await menu.trigger('keydown.esc');
+
       expect(menu.classes('gl-display-block!')).toBe(false);
       expect(toggle.attributes('aria-expanded')).toBeUndefined();
       expect(wrapper.emitted(GL_DROPDOWN_HIDDEN)).toHaveLength(1);
       expect(toggle.element).toHaveFocus();
     });
+
+    describe('when the consumer takes over the focus', () => {
+      let consumerButton;
+
+      beforeEach(() => {
+        consumerButton = document.createElement('button');
+        document.body.appendChild(consumerButton);
+      });
+
+      afterEach(() => {
+        consumerButton.remove();
+      });
+
+      it('does not steal the focus back from the consumer when closing the dropdown', async () => {
+        const toggle = findDefaultDropdownToggle();
+        const menu = findDropdownMenu();
+
+        // open menu clicking toggle btn
+        await toggle.trigger('click');
+
+        moveFocusWithinDropdown();
+
+        // consumer focuses some element
+        consumerButton.focus();
+
+        // close menu by pressing ESC key
+        await menu.trigger('keydown.esc');
+
+        expect(consumerButton).toHaveFocus();
+      });
+    });
   });
 
   describe('beforeClose event', () => {
@@ -353,7 +388,7 @@ describe('base dropdown', () => {
 
       await toggle.trigger('click');
 
-      menu.element.focus();
+      moveFocusWithinDropdown();
       await menu.trigger('keydown.esc');
       expect(menu.classes('gl-display-block!')).toBe(true);
       expect(toggle.attributes('aria-expanded')).toBeDefined();
@@ -365,6 +400,7 @@ describe('base dropdown', () => {
       const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
       await toggle.trigger('click');
+      moveFocusWithinDropdown();
       await menu.trigger('keydown.esc');
       expect(event.type).toBe('keydown');
     });
@@ -444,6 +480,7 @@ describe('base dropdown', () => {
         expect(menu.classes('gl-display-block!')).toBe(true);
 
         // close menu pressing ESC on it
+        moveFocusWithinDropdown();
         await menu.trigger('keydown.esc');
         expect(menu.classes('gl-display-block!')).toBe(false);
         expect(firstToggleChild.attributes('aria-expanded')).toBe('false');

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

@@ -382,11 +382,23 @@ export default {
       }
       this.toggle(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.
+     *
+     * @param {KeyboardEvent?} event The keyboard event that caused the dropdown to close.
+     */
     async closeAndFocus(event) {
       if (!this.visible) {
         return;
       }
+
       const hasToggled = await this.toggle(event);
+
+      if (!this.$el.contains(document.activeElement)) {
+        return;
+      }
+
       if (hasToggled) {
         this.focusToggle();
       }

package/src/components/base/search_box_by_click/search_box_by_click.spec.js

@@ -162,12 +162,10 @@ describe('search box by click component', () => {
   });
 
   it('adds `searchButtonAttributes` prop to search button', () => {
-    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+    const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 
     createComponent({ searchButtonAttributes });
 
-    expect(findSearchButton().attributes('data-qa-selector')).toBe(
-      searchButtonAttributes['data-qa-selector']
-    );
+    expect(findSearchButton().attributes('data-prop')).toBe(searchButtonAttributes['data-prop']);
   });
 });

package/src/components/base/token_selector/token_selector.spec.js

@@ -254,12 +254,12 @@ describe('GlTokenSelector', () => {
         createComponent({
           propsData: {
             textInputAttrs: {
-              'data-qa-selector': 'foo_bar',
+              'data-prop': 'foo_bar',
             },
           },
         });
 
-        expect(findTextInput().attributes('data-qa-selector')).toBe('foo_bar');
+        expect(findTextInput().attributes('data-prop')).toBe('foo_bar');
       });
     });
 

package/src/components/base/token_selector/token_selector.vue

@@ -91,7 +91,7 @@ export default {
       default: null,
     },
     /**
-     * HTML attributes to add to the text input. Helpful for adding `data-testid` and `data-qa-selector` attributes
+     * HTML attributes to add to the text input. Helpful for adding `data-testid` attributes
      */
     textInputAttrs: {
       type: Object,