@gitlab/ui 44.1.0 → 46.0.0

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

@@ -15,6 +15,8 @@ import {
   buttonSizeOptions,
   dropdownVariantOptions,
 } from '../../../../utils/constants';
+import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
+import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
@@ -22,6 +24,7 @@ import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-3', 'gl-mt-3'];
+export const SEARCH_INPUT_SELECTOR = '.gl-search-box-by-type-input';
 
 export default {
   events: {
@@ -32,6 +35,8 @@ export default {
     GlBaseDropdown,
     GlListboxItem,
     GlListboxGroup,
+    GlSearchBoxByType,
+    GlLoadingIcon,
   },
   model: {
     prop: 'selected',
@@ -124,6 +129,7 @@ export default {
     },
     /**
      * Set to "true" when dropdown content (items) is loading
+     * It will render a small loader in the dropdown toggle and make it disabled
      */
     loading: {
       type: Boolean,
@@ -164,18 +170,55 @@ export default {
     },
     /**
      * The `aria-labelledby` attribute value for the toggle button
+     * Provide the string of ids seperated by space
      */
-    ariaLabelledby: {
+    toggleAriaLabelledBy: {
       type: String,
       required: false,
       default: null,
     },
+    /**
+     * The `aria-labelledby` attribute value for the list of options
+     * Provide the string of ids seperated by space
+     */
+    listAriaLabelledBy: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Enable search
+     */
+    searchable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Set to "true" when items search is in progress.
+     * It will display loading icon below the search input
+     */
+    searching: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Message to be displayed when filtering produced no results
+     */
+    noResultsText: {
+      type: String,
+      required: false,
+      default: 'No results found',
+    },
   },
   data() {
     return {
       selectedValues: [],
       toggleId: uniqueId('dropdown-toggle-btn-'),
+      listboxId: uniqueId('listbox-'),
       nextFocusedItemIndex: null,
+      searchStr: '',
     };
   },
   computed: {
@@ -201,6 +244,17 @@ export default {
         .map((selected) => this.flattenedOptions.findIndex(({ value }) => value === selected))
         .sort();
     },
+    showList() {
+      return this.flattenedOptions.length && !this.searching;
+    },
+    showNoResultsText() {
+      return !this.flattenedOptions.length && !this.searching;
+    },
+    announceSRSearchResults() {
+      return (
+        this.searchable && !this.showNoResultsText && this.$scopedSlots['search-summary-sr-only']
+      );
+    },
   },
   watch: {
     selected: {
@@ -218,12 +272,22 @@ export default {
     },
   },
   methods: {
+    open() {
+      this.$refs.baseDropdown.open();
+    },
+    close() {
+      this.$refs.baseDropdown.close();
+    },
     groupClasses(index) {
       return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
     },
     onShow() {
       this.$nextTick(() => {
-        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+        if (this.searchable) {
+          this.focusSearchInput();
+        } else {
+          this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+        }
         /**
          * Emitted when dropdown is shown
          *
@@ -242,21 +306,33 @@ export default {
       this.nextFocusedItemIndex = null;
     },
     onKeydown(event) {
-      const { code } = event;
+      const { code, target } = event;
       const elements = this.getFocusableListItemElements();
 
       if (elements.length < 1) return;
 
       let stop = true;
+      const isSearchInput = target.matches(SEARCH_INPUT_SELECTOR);
 
       if (code === HOME) {
         this.focusItem(0, elements);
       } else if (code === END) {
         this.focusItem(elements.length - 1, elements);
       } else if (code === ARROW_UP) {
-        this.focusNextItem(event, elements, -1);
+        if (isSearchInput) {
+          return;
+        }
+        if (this.searchable && elements.indexOf(target) === 0) {
+          this.focusSearchInput();
+        } else {
+          this.focusNextItem(event, elements, -1);
+        }
       } else if (code === ARROW_DOWN) {
-        this.focusNextItem(event, elements, 1);
+        if (isSearchInput) {
+          this.focusItem(0, elements);
+        } else {
+          this.focusNextItem(event, elements, 1);
+        }
       } else {
         stop = false;
       }
@@ -266,8 +342,8 @@ export default {
       }
     },
     getFocusableListItemElements() {
-      const items = this.$refs.list.querySelectorAll(ITEM_SELECTOR);
-      return Array.from(items);
+      const items = this.$refs.list?.querySelectorAll(ITEM_SELECTOR);
+      return Array.from(items || []);
     },
     focusNextItem(event, elements, offset) {
       const { target } = event;
@@ -283,11 +359,14 @@ export default {
         elements[index]?.focus();
       });
     },
-    onSelect({ value }, isSelected) {
+    focusSearchInput() {
+      this.$refs.searchBox.focusInput();
+    },
+    onSelect(item, isSelected) {
       if (this.multiple) {
-        this.onMultiSelect(value, isSelected);
+        this.onMultiSelect(item.value, isSelected);
       } else {
-        this.onSingleSelect(value, isSelected);
+        this.onSingleSelect(item.value, isSelected);
       }
     },
     isSelected(item) {
@@ -318,6 +397,15 @@ export default {
         );
       }
     },
+    search(searchTerm) {
+      /**
+       * Emitted when the search query string is changed
+       *
+       * @event search
+       * @type {string}
+       */
+      this.$emit('search', searchTerm);
+    },
     isOption,
   },
 };
@@ -327,7 +415,7 @@ export default {
   <gl-base-dropdown
     ref="baseDropdown"
     aria-haspopup="listbox"
-    :aria-labelledby="ariaLabelledby"
+    :aria-labelledby="toggleAriaLabelledBy"
     :toggle-id="toggleId"
     :toggle-text="listboxToggleText"
     :toggle-class="toggleClass"
@@ -346,10 +434,29 @@ export default {
     <!-- @slot Content to display in dropdown header -->
     <slot name="header"></slot>
 
+    <div v-if="searchable" class="gl-border-b-1 gl-border-b-solid gl-border-b-gray-200">
+      <gl-search-box-by-type
+        ref="searchBox"
+        v-model="searchStr"
+        :aria-owns="listboxId"
+        data-testid="listbox-search-input"
+        @input="search"
+        @keydown="onKeydown"
+      />
+      <gl-loading-icon
+        v-if="searching"
+        data-testid="listbox-search-loader"
+        size="md"
+        class="gl-my-3"
+      />
+    </div>
+
     <component
       :is="listboxTag"
+      v-if="showList"
+      id="listbox"
       ref="list"
-      :aria-labelledby="toggleId"
+      :aria-labelledby="listAriaLabelledBy || toggleId"
       role="listbox"
       class="gl-new-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0"
       tabindex="-1"
@@ -395,6 +502,25 @@ export default {
         </template>
       </template>
     </component>
+
+    <span
+      v-if="announceSRSearchResults"
+      data-testid="listbox-number-of-results"
+      class="gl-sr-only"
+      aria-live="assertive"
+    >
+      <!-- @slot Text read by screen reader announcing a number of search results -->
+      <slot name="search-summary-sr-only"></slot>
+    </span>
+
+    <div
+      v-else-if="showNoResultsText"
+      aria-live="assertive"
+      class="gl-pl-7 gl-pr-5 gl-pt-3 gl-font-base gl-text-gray-600"
+      data-testid="listbox-no-results-text"
+    >
+      {{ noResultsText }}
+    </div>
     <!-- @slot Content to display in dropdown footer -->
     <slot name="footer"></slot>
   </gl-base-dropdown>

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

@@ -161,7 +161,7 @@ describe('Paginated List', () => {
       it('has search enabled by default', () => {
         createComponent();
 
-        expect(wrapper.findComponent(GlSearchBoxByType).exists()).toBeTruthy();
+        expect(wrapper.findComponent(GlSearchBoxByType).exists()).toBe(true);
       });
 
       it('has search disabled when filterable prop set to false', () => {

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

@@ -63,7 +63,7 @@ describe('pagination component', () => {
     });
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.html()).toBeFalsy();
+    expect(wrapper.html()).toBe('');
   });
 
   it('supports slots customization', () => {
@@ -114,7 +114,7 @@ describe('pagination component', () => {
     const nextButton = buttons.at(buttons.length - 1);
     nextButton.trigger('click');
 
-    expect(wrapper.emitted('input')).toBeTruthy();
+    expect(wrapper.emitted('input')).toHaveLength(1);
     expect(wrapper.emitted('input')[0]).toEqual([2]);
   });
 

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

@@ -33,7 +33,7 @@ describe('search box by click component', () => {
     wrapper.findComponent({ ref: 'input' }).vm.$emit('input', 'new value');
 
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().input).toEqual([['new value']]);
+    expect(wrapper.emitted('input')).toEqual([['new value']]);
   });
 
   it('does not emit an input event when input is updated to the same value', async () => {
@@ -41,7 +41,7 @@ describe('search box by click component', () => {
 
     await wrapper.setProps({ value: 'another value' });
 
-    expect(wrapper.emitted().input).toBe(undefined);
+    expect(wrapper.emitted('input')).toBe(undefined);
   });
 
   it('does not displays history dropdown by default', () => {
@@ -70,7 +70,7 @@ describe('search box by click component', () => {
       findClearIcon().vm.$emit('click');
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.emitted().input).toEqual([['']]);
+      expect(wrapper.emitted('input')).toEqual([['']]);
     });
 
     it('emits clear event when clicked', async () => {
@@ -78,7 +78,7 @@ describe('search box by click component', () => {
       findClearIcon().vm.$emit('click');
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.emitted().clear).toHaveLength(1);
+      expect(wrapper.emitted('clear')).toHaveLength(1);
     });
   });
 
@@ -109,7 +109,7 @@ describe('search box by click component', () => {
       wrapper.findComponent(GlDropdownItem).vm.$emit('click');
 
       await wrapper.vm.$nextTick();
-      expect(wrapper.emitted().input[0]).toEqual(['one']);
+      expect(wrapper.emitted('input')[0]).toEqual(['one']);
       expect(wrapper.emitted()['history-item-selected'][0]).toEqual(['one']);
     });
   });
@@ -149,7 +149,7 @@ describe('search box by click component', () => {
     wrapper.findComponent(GlFormInput).vm.$emit('keydown', { type: 'key', keyCode: 13 });
 
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().submit[0]).toEqual(['some-input']);
+    expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
   });
 
   it('emits submit event when search button is pressed', async () => {
@@ -157,7 +157,7 @@ describe('search box by click component', () => {
     findSearchButton().vm.$emit('click');
 
     await wrapper.vm.$nextTick();
-    expect(wrapper.emitted().submit[0]).toEqual(['some-input']);
+    expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
   });
 
   it('adds `searchButtonAttributes` prop to search button', () => {

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

@@ -40,7 +40,7 @@ describe('search box by type component', () => {
     it('emits empty value when clicked', () => {
       findClearIcon().vm.$emit('click', { stopPropagation: jest.fn() });
 
-      expect(wrapper.emitted().input).toEqual([['']]);
+      expect(wrapper.emitted('input')).toEqual([['']]);
     });
   });
 
@@ -59,7 +59,7 @@ describe('search box by type component', () => {
     it(`emits ${modelEvent} event when input value changes`, () => {
       findInput().setValue(newValue);
 
-      expect(wrapper.emitted().input).toEqual([[newValue]]);
+      expect(wrapper.emitted('input')).toEqual([[newValue]]);
     });
   });
 

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

@@ -85,7 +85,7 @@ describe('sorting component', () => {
 
     selectDirectionButton().trigger('click');
 
-    expect(wrapper.emitted().sortDirectionChange[0]).toEqual([true]);
+    expect(wrapper.emitted('sortDirectionChange')[0]).toEqual([true]);
   });
 
   it('should allow custom sort tooltip to be applied', () => {

package/src/components/base/sorting/sorting_item.spec.js

@@ -36,7 +36,7 @@ describe('sorting item component', () => {
   it('does not show the check icon when the active prop is not provided', () => {
     createComponent();
 
-    expect(findActiveIcon().exists()).toBeTruthy();
+    expect(findActiveIcon().exists()).toBe(true);
     expect(findActiveIcon().classes()).toContain('inactive');
   });
 
@@ -45,7 +45,7 @@ describe('sorting item component', () => {
       active: true,
     });
 
-    expect(findActiveIcon().exists()).toBeTruthy();
+    expect(findActiveIcon().exists()).toBe(true);
     expect(findActiveIcon().classes()).not.toContain('inactive');
   });
 

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -88,7 +88,7 @@ describe('GlScrollableTabs', () => {
     });
 
     it('passes props through', () => {
-      expect(NAV_CLASS).toBeTruthy();
+      expect(NAV_CLASS).toBe('gl-scrollable-tabs-nav');
       expect(wrapper.findComponent(GlTabs).props()).toMatchObject({
         ...TEST_DEFAULT_PROPS,
         navClass: [NAV_CLASS, TEST_DEFAULT_PROPS.navClass],

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

@@ -234,9 +234,9 @@ describe('tabs component', () => {
 
             // `input` event should only be fired if the active tab changes.
             if (expectedActiveTabIndex > 0) {
-              expect(wrapper.emitted().input[1]).toEqual([expectedActiveTabIndex]);
+              expect(wrapper.emitted('input')[1]).toEqual([expectedActiveTabIndex]);
             } else {
-              expect(wrapper.emitted().input[1]).toBeUndefined();
+              expect(wrapper.emitted('input')[1]).toBeUndefined();
             }
           });
         }
@@ -339,8 +339,8 @@ describe('tabs component', () => {
 
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([1]);
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted('input')[0]).toEqual([1]);
+          expect(wrapper.emitted('input')[1]).toEqual([1]);
         });
       });
     });
@@ -352,7 +352,7 @@ describe('tabs component', () => {
 
           await nextTick();
 
-          expect(wrapper.emitted().input[0]).toEqual([0]);
+          expect(wrapper.emitted('input')[0]).toEqual([0]);
         });
       });
 
@@ -363,7 +363,7 @@ describe('tabs component', () => {
           await nextTick();
           await findTabByText('Second').trigger('click');
 
-          expect(wrapper.emitted().input[1]).toEqual([1]);
+          expect(wrapper.emitted('input')[1]).toEqual([1]);
         });
       });
 

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

@@ -17,7 +17,7 @@ describe('Token component', () => {
   it('emits close when "x" is clicked', () => {
     wrapper = createComponent();
     findIcon(wrapper).vm.$emit('click');
-    expect(wrapper.emitted().close).toBeTruthy();
+    expect(wrapper.emitted('close')).toHaveLength(1);
   });
 
   it('hides the icon when view-only', () => {

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

@@ -205,7 +205,7 @@ describe('GlTokenContainer', () => {
     describe('when escape key is pressed', () => {
       it('fires `cancel-focus` event', async () => {
         await setup(0, keyboard.escape);
-        expect(wrapper.emitted('cancel-focus')).toBeTruthy();
+        expect(wrapper.emitted('cancel-focus')).toHaveLength(1);
       });
     });
 

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

@@ -398,7 +398,7 @@ describe('GlTokenSelector', () => {
       });
 
       it('fires `focus` event', () => {
-        expect(wrapper.emitted('focus')).toBeTruthy();
+        expect(wrapper.emitted('focus')).toHaveLength(1);
       });
     });
 
@@ -414,7 +414,7 @@ describe('GlTokenSelector', () => {
       });
 
       it('fires `blur` event', () => {
-        expect(wrapper.emitted('blur')).toBeTruthy();
+        expect(wrapper.emitted('blur')).toHaveLength(1);
       });
 
       it('removes focus class from main container', () => {
@@ -566,7 +566,7 @@ describe('GlTokenSelector', () => {
 
         textInput.trigger('keydown');
 
-        expect(wrapper.emitted('keydown')).toBeTruthy();
+        expect(wrapper.emitted('keydown')).toHaveLength(1);
       });
     });
   });
@@ -624,7 +624,7 @@ describe('GlTokenSelector', () => {
 
       container.trigger('click');
 
-      expect(wrapper.emitted('focus')).toBeTruthy();
+      expect(wrapper.emitted('focus')).toHaveLength(1);
     });
   });
 

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

@@ -314,7 +314,7 @@ describe('GlTokenSelectorDropdown', () => {
 
         dropdownEventHandlers.handleDownArrow();
 
-        expect(wrapper.emitted('show')).toBeTruthy();
+        expect(wrapper.emitted('show')).toHaveLength(1);
       });
     });
 

package/src/components/charts/column/column_chart.spec.js

@@ -55,7 +55,7 @@ describe('column chart component', () => {
   it('emits "created" when onCreated is called', () => {
     wrapper.vm.onCreated(wrapper.vm.chart);
 
-    expect(wrapper.emitted('created')).toBeTruthy();
+    expect(wrapper.emitted('created')).toHaveLength(1);
   });
 
   it('calls event listener when "chartItemClicked" is emitted on the Chart component', () => {

package/src/components/charts/sparkline/sparkline.spec.js

@@ -119,7 +119,7 @@ describe('sparkline chart component', () => {
   });
 
   it('shows the tooltip when mousing over an axis point in the component', async () => {
-    expect(getTooltip().attributes('show')).toBeFalsy();
+    expect(getTooltip().attributes('show')).toBe(undefined);
 
     const mockData = { seriesData: [{ data: [5, 8] }] };
     getXAxisLabelFormatter()(mockData);
@@ -137,7 +137,7 @@ describe('sparkline chart component', () => {
     wrapper.trigger('mouseleave');
     await wrapper.vm.$nextTick();
 
-    expect(getTooltip().attributes('show')).toBeFalsy();
+    expect(getTooltip().attributes('show')).toBe(undefined);
   });
 
   it('adds the right content to the tooltip', async () => {

package/src/directives/resize_observer/resize_observer.spec.js

@@ -76,15 +76,15 @@ describe('resize observer directive', () => {
     });
 
     expect(observersCount()).toBe(1);
-    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+    expect(wrapper.element.glResizeHandler).not.toBe(undefined);
 
     await wrapper.setData({ isEnabled: false });
 
-    expect(wrapper.element.glResizeHandler).toBeFalsy();
+    expect(wrapper.element.glResizeHandler).toBe(undefined);
 
     await wrapper.setData({ isEnabled: true });
 
-    expect(wrapper.element.glResizeHandler).not.toBeFalsy();
+    expect(wrapper.element.glResizeHandler).not.toBe(undefined);
   });
 
   it('does a clean up when the component is destroyed', () => {
@@ -92,11 +92,11 @@ describe('resize observer directive', () => {
 
     const { element } = wrapper;
 
-    expect(element.glResizeHandler).not.toBeFalsy();
+    expect(element.glResizeHandler).not.toBe(undefined);
 
     wrapper.destroy();
 
-    expect(element.glResizeHandler).toBeFalsy();
+    expect(element.glResizeHandler).toBe(undefined);
   });
 
   describe('check directive value', () => {