@gitlab/duo-ui 0.1.0 → 0.3.0

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

@@ -1,940 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<script>
-import clamp from 'lodash/clamp';
-import uniqueId from 'lodash/uniqueId';
-import isNil from 'lodash/isNil';
-import { stopEvent } from '../../../../utils/utils';
-import {
-  GL_DROPDOWN_SHOWN,
-  GL_DROPDOWN_HIDDEN,
-  HOME,
-  END,
-  ARROW_DOWN,
-  ARROW_UP,
-  GL_DROPDOWN_CONTENTS_CLASS,
-  POSITION_ABSOLUTE,
-  POSITION_FIXED,
-} from '../constants';
-import {
-  buttonCategoryOptions,
-  buttonSizeOptions,
-  dropdownPlacements,
-  dropdownVariantOptions,
-} from '../../../../utils/constants';
-import GlButton from '../../button/button.vue';
-import GlLoadingIcon from '../../loading_icon/loading_icon.vue';
-import GlIntersectionObserver from '../../../utilities/intersection_observer/intersection_observer.vue';
-import GlSearchBoxByType from '../../search_box_by_type/search_box_by_type.vue';
-import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
-import { translatePlural } from '../../../../utils/i18n';
-import GlListboxItem from './listbox_item.vue';
-import GlListboxSearchInput from './listbox_search_input.vue';
-import GlListboxGroup from './listbox_group.vue';
-import { isOption, itemsValidator, flattenedOptions } from './utils';
-
-export const ITEM_SELECTOR = '[role="option"]';
-const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-dropdown', 'gl-pt-1', 'gl-mt-2'];
-export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
-
-export default {
-  name: 'GlCollapsibleListbox',
-  HEADER_ITEMS_BORDER_CLASSES,
-  events: {
-    GL_DROPDOWN_SHOWN,
-    GL_DROPDOWN_HIDDEN,
-  },
-  components: {
-    GlBaseDropdown,
-    GlListboxItem,
-    GlListboxGroup,
-    GlButton,
-    GlSearchBoxByType,
-    GlListboxSearchInput,
-    GlLoadingIcon,
-    GlIntersectionObserver,
-  },
-  model: {
-    prop: 'selected',
-    event: 'select',
-  },
-  props: {
-    /**
-     * Items to display in the dropdown
-     */
-    items: {
-      type: Array,
-      required: false,
-      default: () => [],
-      validator: itemsValidator,
-    },
-    /**
-     * Array of selected items values for multi-select and selected item value for single-select
-     */
-    selected: {
-      type: [Array, String, Number],
-      required: false,
-      default: () => [],
-    },
-    /**
-     * Allow multi-selection
-     */
-    multiple: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Toggle button text
-     */
-    toggleText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Toggle text to be read by screen readers only
-     */
-    textSrOnly: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /** The header text */
-    headerText: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Styling option - dropdown's toggle category
-     */
-    category: {
-      type: String,
-      required: false,
-      default: buttonCategoryOptions.primary,
-      validator: (value) => value in buttonCategoryOptions,
-    },
-    /**
-     * Styling option - dropdown's toggle variant
-     */
-    variant: {
-      type: String,
-      required: false,
-      default: dropdownVariantOptions.default,
-      validator: (value) => value in dropdownVariantOptions,
-    },
-    /**
-     * The size of the dropdown toggle
-     */
-    size: {
-      type: String,
-      required: false,
-      default: 'medium',
-      validator: (value) => value in buttonSizeOptions,
-    },
-    /**
-     * Icon name that will be rendered in the toggle button
-     */
-    icon: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Set to "true" to disable the dropdown
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * 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,
-      required: false,
-      default: false,
-    },
-    /**
-     * Additional CSS classes to customize toggle appearance
-     */
-    toggleClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: null,
-    },
-    /**
-     * Set to "true" to hide the caret
-     */
-    noCaret: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Align listbox menu with respect to the toggle button
-     */
-    placement: {
-      type: String,
-      required: false,
-      default: 'bottom-start',
-      validator: (value) => Object.keys(dropdownPlacements).includes(value),
-    },
-    /**
-     * Center selected item checkmark
-     */
-    isCheckCentered: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * The `aria-labelledby` attribute value for the toggle button
-     * Provide the string of ids seperated by space
-     */
-    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,
-    },
-    /**
-     * Enables infinite scroll.
-     * When set to `true`, the `@bottom-reached` event will be fired when
-     * the bottom of the listbox is scrolled to.
-     * Does not support groups.
-     */
-    infiniteScroll: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * This prop is used for infinite scroll.
-     * It represents the total number of items that exist,
-     * even if they have not yet been loaded.
-     * Do not set this prop if the total number of items is unknown.
-     */
-    totalItems: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    /**
-     * This prop is used for infinite scroll.
-     * Set to `true` when more items are being loaded.
-     */
-    infiniteScrollLoading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Message to be displayed when filtering produced no results
-     */
-    noResultsText: {
-      type: String,
-      required: false,
-      default: 'No results found',
-    },
-    /**
-     * Search input placeholder text and aria-label
-     */
-    searchPlaceholder: {
-      type: String,
-      required: false,
-      default: 'Search',
-    },
-    /**
-     * The reset button's label, to be rendered in the header. If this is omitted, the button is not
-     * rendered.
-     * The reset button requires a header to be set, so this prop should be used in conjunction with
-     * headerText.
-     */
-    resetButtonLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * The select all button's label, to be rendered in the header. If this is omitted, the button is not
-     * rendered.
-     * The select all button requires a header to be set, so this prop should be used in conjunction with
-     * headerText.
-     */
-    showSelectAllButtonLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    /**
-     * Render the toggle button as a block element
-     */
-    block: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Custom offset to be applied to Floating UI's offset middleware.
-     * https://floating-ui.com/docs/offset
-     */
-    dropdownOffset: {
-      type: [Number, Object],
-      required: false,
-      default: undefined,
-    },
-    /**
-     * Lets the dropdown extend to match its content's width, up to a maximum width
-     * defined by the `$gl-new-dropdown-max-width` variable.
-     */
-    fluidWidth: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Strategy to be applied by computePosition. If the dropdown's container is too short for it to
-     * fit in, setting this to fixed will let it position itself above its container.
-     * https://floating-ui.com/docs/computePosition#strategy
-     */
-    positioningStrategy: {
-      type: String,
-      required: false,
-      default: POSITION_ABSOLUTE,
-      validator: (strategy) => [POSITION_ABSOLUTE, POSITION_FIXED].includes(strategy),
-    },
-    /**
-     * Opens dropdown on render
-     */
-    startOpened: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    srOnlyResultsLabel: {
-      type: Function,
-      required: false,
-      default: translatePlural(
-        'GlCollapsibleListbox.srOnlyResultsLabel',
-        '%d result',
-        '%d results'
-      ),
-    },
-  },
-  data() {
-    return {
-      selectedValues: [],
-      toggleId: uniqueId('dropdown-toggle-btn-'),
-      listboxId: uniqueId('listbox-'),
-      nextFocusedItemIndex: null,
-      searchStr: '',
-      topBoundaryVisible: true,
-      bottomBoundaryVisible: true,
-    };
-  },
-  computed: {
-    listboxTag() {
-      if (!this.hasItems || isOption(this.items[0])) return 'ul';
-      return 'div';
-    },
-    listboxClasses() {
-      return {
-        'top-scrim-visible': !this.topBoundaryVisible,
-        'bottom-scrim-visible': !this.bottomBoundaryVisible,
-        [GL_DROPDOWN_CONTENTS_CLASS]: true,
-      };
-    },
-    itemTag() {
-      return this.listboxTag === 'ul' ? 'li' : 'div';
-    },
-    flattenedOptions() {
-      return flattenedOptions(this.items);
-    },
-    hasItems() {
-      return this.items.length > 0;
-    },
-    listboxToggleText() {
-      if (!this.toggleText) {
-        if (!this.multiple && this.selectedValues.length) {
-          return this.flattenedOptions.find(({ value }) => value === this.selectedValues[0])?.text;
-        }
-        return '';
-      }
-
-      return this.toggleText;
-    },
-    selectedIndices() {
-      return this.selectedValues
-        .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;
-    },
-    headerId() {
-      return this.headerText && uniqueId('listbox-header-');
-    },
-    showResetButton() {
-      if (!this.resetButtonLabel) {
-        return false;
-      }
-
-      /**
-       * if dropdown has no items
-       * reset all should be hidden
-       */
-      if (!this.hasItems) {
-        return false;
-      }
-
-      // hide if no selection
-      if (!this.selected || this.selected.length === 0) {
-        return false;
-      }
-
-      // only show reset button if show all button is not there
-      return !this.showSelectAllButton;
-    },
-    showSelectAllButton() {
-      if (!this.showSelectAllButtonLabel) {
-        return false;
-      }
-
-      if (!this.multiple) {
-        return false;
-      }
-
-      /**
-       * if dropdown has no items
-       * select all should be hidden
-       */
-      if (!this.hasItems) {
-        return false;
-      }
-
-      return this.selected.length !== this.flattenedOptions.length;
-    },
-    showIntersectionObserver() {
-      return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
-    },
-    hasCustomToggle() {
-      return Boolean(this.$scopedSlots.toggle);
-    },
-    hasSelection() {
-      return Boolean(this.selectedValues.length);
-    },
-    toggleButtonClasses() {
-      const toggleClasses = [this.toggleClass];
-
-      if (!this.hasSelection) {
-        toggleClasses.push('!gl-text-subtle');
-      }
-      return toggleClasses;
-    },
-    hasHeader() {
-      return this.headerText || this.searchable;
-    },
-    hasFooter() {
-      return Boolean(this.$scopedSlots.footer);
-    },
-  },
-  watch: {
-    selected: {
-      immediate: true,
-      handler(newSelected) {
-        if (Array.isArray(newSelected)) {
-          if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
-            throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
-          }
-          this.selectedValues = [...newSelected];
-        } else {
-          this.selectedValues = isNil(newSelected) ? [] : [newSelected];
-        }
-      },
-    },
-    items: {
-      handler() {
-        this.$nextTick(() => {
-          /* Every time the list of items changes (on search),
-           * the observed elements are recreated, thus we need to start obesrving them again */
-          this.observeScroll();
-        });
-      },
-    },
-    ...(process.env.NODE_ENV !== 'production'
-      ? {
-          resetButtonLabel: {
-            immediate: true,
-            handler(newResetButtonLabel) {
-              if (newResetButtonLabel && !this.headerText) {
-                throw new Error(
-                  'The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.'
-                );
-              }
-            },
-          },
-          showSelectAllButtonLabel: {
-            immediate: true,
-            handler(showSelectAllButtonLabel) {
-              if (showSelectAllButtonLabel && !this.headerText) {
-                throw new Error(
-                  'The select all button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the showSelectAllButtonLabel prop.'
-                );
-              }
-            },
-          },
-          infiniteScroll: {
-            immediate: true,
-            handler(newValue) {
-              if (newValue && this.items.some((item) => !isOption(item))) {
-                throw new Error(
-                  'Infinite scroll does not support groups. Please set the "infiniteScroll" prop to "false"'
-                );
-              }
-            },
-          },
-        }
-      : {}),
-  },
-  mounted() {
-    if (this.startOpened) {
-      this.open();
-    }
-    this.observeScroll();
-  },
-  beforeDestroy() {
-    this.scrollObserver?.disconnect();
-  },
-  methods: {
-    open() {
-      this.$refs.baseDropdown.open();
-    },
-    close() {
-      this.$refs.baseDropdown.close();
-    },
-    groupClasses(index) {
-      return index === 0 ? null : GROUP_TOP_BORDER_CLASSES;
-    },
-    onShow() {
-      if (this.searchable) {
-        this.focusSearchInput();
-      } else {
-        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
-      }
-      /**
-       * Emitted when dropdown is shown
-       *
-       * @event shown
-       */
-      this.$emit(GL_DROPDOWN_SHOWN);
-    },
-    onHide() {
-      /**
-       * Emitted when dropdown is hidden
-       *
-       * @event hidden
-       */
-      this.$emit(GL_DROPDOWN_HIDDEN);
-      this.nextFocusedItemIndex = null;
-    },
-    onKeydown(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) {
-        if (isSearchInput) {
-          return;
-        }
-        this.focusItem(0, elements);
-      } else if (code === END) {
-        if (isSearchInput) {
-          return;
-        }
-        this.focusItem(elements.length - 1, elements);
-      } else if (code === ARROW_UP) {
-        if (isSearchInput) {
-          return;
-        }
-        if (this.searchable && elements.indexOf(target) === 0) {
-          this.focusSearchInput();
-        } else {
-          this.focusNextItem(event, elements, -1);
-        }
-      } else if (code === ARROW_DOWN) {
-        if (isSearchInput) {
-          this.focusItem(0, elements);
-        } else {
-          this.focusNextItem(event, elements, 1);
-        }
-      } else {
-        stop = false;
-      }
-
-      if (stop) {
-        stopEvent(event);
-      }
-    },
-    getFocusableListItemElements() {
-      const items = this.$refs.list?.querySelectorAll(ITEM_SELECTOR);
-      return Array.from(items || []);
-    },
-    focusNextItem(event, elements, offset) {
-      const { target } = event;
-      const currentIndex = elements.indexOf(target);
-      const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
-
-      this.focusItem(nextIndex, elements);
-    },
-    focusItem(index, elements) {
-      this.nextFocusedItemIndex = index;
-
-      elements[index]?.focus();
-    },
-    focusSearchInput() {
-      this.$refs.searchBox.focusInput();
-    },
-    onSelect(item, isSelected) {
-      if (this.multiple) {
-        this.onMultiSelect(item.value, isSelected);
-      } else {
-        this.onSingleSelect(item.value, isSelected);
-      }
-    },
-    isSelected(item) {
-      return this.selectedValues.some((value) => value === item.value);
-    },
-    isFocused(item) {
-      return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
-    },
-    onSingleSelect(value, isSelected) {
-      if (isSelected) {
-        /**
-         * Emitted when selection is changed
-         *
-         * @event select
-         */
-        this.$emit('select', value);
-      }
-
-      this.closeAndFocus();
-    },
-    onMultiSelect(value, isSelected) {
-      if (isSelected) {
-        this.$emit('select', [...this.selectedValues, value]);
-      } else {
-        this.$emit(
-          'select',
-          this.selectedValues.filter((selectedValue) => selectedValue !== value)
-        );
-      }
-    },
-    search(searchTerm) {
-      /**
-       * Emitted when the search query string is changed
-       *
-       * @event search
-       * @type {string}
-       */
-      this.$emit('search', searchTerm);
-    },
-    onResetButtonClicked() {
-      /**
-       * Emitted when the reset button is clicked
-       *
-       * @event reset
-       */
-      this.$emit('reset');
-    },
-    onSelectAllButtonClicked() {
-      /**
-       * Emitted when the select all button is clicked
-       *
-       * @event select-all
-       */
-      this.$emit('select-all');
-    },
-    closeAndFocus() {
-      this.$refs.baseDropdown.closeAndFocus();
-    },
-    onIntersectionObserverAppear() {
-      /**
-       * Emitted when bottom of listbox has been scrolled to.
-       * Used for infinite scroll.
-       *
-       * @event bottom-reached
-       */
-      this.$emit('bottom-reached');
-    },
-    listboxItemMoreItemsAriaAttributes(index) {
-      if (this.totalItems === null) {
-        return {};
-      }
-
-      return {
-        'aria-setsize': this.totalItems,
-        'aria-posinset': index + 1,
-      };
-    },
-    observeScroll() {
-      const root = this.$refs.list;
-
-      const options = {
-        rootMargin: '8px',
-        root,
-        threshold: 1.0,
-      };
-
-      this.scrollObserver?.disconnect();
-
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          this[entry.target?.$__visibilityProp] = entry.isIntersecting;
-        });
-      }, options);
-
-      const topBoundary = this.$refs['top-boundary'];
-      const bottomBoundary = this.$refs['bottom-boundary'];
-      if (topBoundary) {
-        topBoundary.$__visibilityProp = 'topBoundaryVisible';
-        observer.observe(topBoundary);
-      }
-      if (bottomBoundary) {
-        bottomBoundary.$__visibilityProp = 'bottomBoundaryVisible';
-        observer.observe(bottomBoundary);
-      }
-      this.scrollObserver = observer;
-    },
-    isOption,
-  },
-};
-</script>
-
-<template>
-  <gl-base-dropdown
-    ref="baseDropdown"
-    aria-haspopup="listbox"
-    :aria-labelledby="toggleAriaLabelledBy"
-    :block="block"
-    :toggle-id="toggleId"
-    :toggle-text="listboxToggleText"
-    :toggle-class="toggleButtonClasses"
-    :text-sr-only="textSrOnly"
-    :category="category"
-    :variant="variant"
-    :size="size"
-    :icon="icon"
-    :disabled="disabled"
-    :loading="loading"
-    :no-caret="noCaret"
-    :placement="placement"
-    :offset="dropdownOffset"
-    :fluid-width="fluidWidth"
-    :positioning-strategy="positioningStrategy"
-    @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
-    @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
-  >
-    <template v-if="hasCustomToggle" #toggle>
-      <!-- @slot Custom toggle content -->
-      <slot name="toggle"></slot>
-    </template>
-
-    <div
-      v-if="headerText"
-      class="gl-flex gl-min-h-8 gl-items-center !gl-p-4"
-      :class="$options.HEADER_ITEMS_BORDER_CLASSES"
-    >
-      <div
-        :id="headerId"
-        class="gl-grow gl-pr-2 gl-text-sm gl-font-bold gl-text-strong"
-        data-testid="listbox-header-text"
-      >
-        {{ headerText }}
-      </div>
-      <gl-button
-        v-if="showResetButton"
-        category="tertiary"
-        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
-        size="small"
-        data-testid="listbox-reset-button"
-        @click="onResetButtonClicked"
-      >
-        {{ resetButtonLabel }}
-      </gl-button>
-      <gl-button
-        v-if="showSelectAllButton"
-        category="tertiary"
-        class="!gl-m-0 !gl-w-auto gl-max-w-1/2 gl-flex-shrink-0 gl-text-ellipsis !gl-px-2 !gl-text-sm focus:!gl-shadow-inner-2-blue-400"
-        size="small"
-        data-testid="listbox-select-all-button"
-        @click="onSelectAllButtonClicked"
-      >
-        {{ showSelectAllButtonLabel }}
-      </gl-button>
-    </div>
-
-    <div v-if="searchable" :class="$options.HEADER_ITEMS_BORDER_CLASSES">
-      <gl-listbox-search-input
-        ref="searchBox"
-        v-model="searchStr"
-        data-testid="listbox-search-input"
-        :placeholder="searchPlaceholder"
-        :class="{ 'gl-listbox-topmost': !headerText }"
-        @input="search"
-        @keydown.enter.prevent
-        @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="listboxId"
-      ref="list"
-      :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
-      role="listbox"
-      class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"
-      :class="listboxClasses"
-      tabindex="0"
-      @keydown="onKeydown"
-    >
-      <component :is="itemTag" class="top-scrim-wrapper" aria-hidden="true" data-testid="top-scrim">
-        <div
-          class="top-scrim"
-          :class="{ 'top-scrim-light': !hasHeader, 'top-scrim-dark': hasHeader }"
-        ></div>
-      </component>
-      <component :is="itemTag" ref="top-boundary" aria-hidden="true" />
-      <template v-for="(item, index) in items">
-        <template v-if="isOption(item)">
-          <gl-listbox-item
-            :key="item.value"
-            :data-testid="`listbox-item-${item.value}`"
-            :is-selected="isSelected(item)"
-            :is-focused="isFocused(item)"
-            :is-check-centered="isCheckCentered"
-            v-bind="listboxItemMoreItemsAriaAttributes(index)"
-            @select="onSelect(item, $event)"
-          >
-            <!-- @slot Custom template of the listbox item -->
-            <slot name="list-item" :item="item">
-              {{ item.text }}
-            </slot>
-          </gl-listbox-item>
-        </template>
-
-        <template v-else>
-          <gl-listbox-group
-            :key="item.text"
-            :name="item.text"
-            :text-sr-only="item.textSrOnly"
-            :class="groupClasses(index)"
-          >
-            <template v-if="$scopedSlots['group-label']" #group-label>
-              <!-- @slot Custom template for group names -->
-              <slot name="group-label" :group="item"></slot>
-            </template>
-
-            <gl-listbox-item
-              v-for="option in item.options"
-              :key="option.value"
-              :data-testid="`listbox-item-${option.value}`"
-              :is-selected="isSelected(option)"
-              :is-focused="isFocused(option)"
-              :is-check-centered="isCheckCentered"
-              @select="onSelect(option, $event)"
-            >
-              <!-- @slot Custom template of the listbox item -->
-              <slot name="list-item" :item="option">
-                {{ option.text }}
-              </slot>
-            </gl-listbox-item>
-          </gl-listbox-group>
-        </template>
-      </template>
-      <component :is="itemTag" v-if="infiniteScrollLoading">
-        <gl-loading-icon data-testid="listbox-infinite-scroll-loader" size="md" class="gl-my-3" />
-      </component>
-      <gl-intersection-observer
-        v-if="showIntersectionObserver"
-        @appear="onIntersectionObserverAppear"
-      />
-      <component :is="itemTag" ref="bottom-boundary" aria-hidden="true" />
-      <component
-        :is="itemTag"
-        class="bottom-scrim-wrapper"
-        aria-hidden="true"
-        data-testid="bottom-scrim"
-      >
-        <div class="bottom-scrim" :class="{ '!gl-rounded-none': hasFooter }"></div>
-      </component>
-    </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">
-        {{ srOnlyResultsLabel(flattenedOptions.length) }}
-      </slot>
-    </span>
-
-    <div
-      v-else-if="showNoResultsText"
-      aria-live="assertive"
-      class="gl-py-3 gl-pl-7 gl-pr-5 gl-text-base gl-text-subtle"
-      data-testid="listbox-no-results-text"
-    >
-      {{ noResultsText }}
-    </div>
-    <!-- @slot Content to display in dropdown footer -->
-    <slot name="footer"></slot>
-  </gl-base-dropdown>
-</template>