@gitlab/ui 131.3.0 → 131.3.1

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

@@ -1,454 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import { logWarning } from '../../../utils/utils';
-import { tokensValidator } from './helpers';
-import GlTokenContainer from './token_container';
-import GlTokenSelectorDropdown from './token_selector_dropdown';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlTokenSelector',
-  components: {
-    GlTokenContainer,
-    GlTokenSelectorDropdown
-  },
-  model: {
-    prop: 'selectedTokens',
-    event: 'input'
-  },
-  props: {
-    /**
-     * Items to display in dropdown
-     */
-    dropdownItems: {
-      type: Array,
-      // All items need to have an `id` key
-      validator: tokensValidator,
-      required: false,
-      default: () => []
-    },
-    /**
-     * Should users be allowed to add tokens that are not in `dropdown-items`
-     */
-    allowUserDefinedTokens: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Shows "Add new token option" in dropdown even if results are present. Requires `allowUserDefinedTokens` to be `true`.
-     */
-    showAddNewAlways: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Dropdown items are loading, can be used when requesting new dropdown items
-     */
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Hide the dropdown if `dropdown-items` is empty. Will show `no-results-content` slot if this is `false`
-     */
-    hideDropdownWithNoItems: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * CSS classes to add to the main token selector container (`.gl-token-selector`)
-     */
-    containerClass: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * CSS classes to add to dropdown menu `ul` element
-     */
-    menuClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: ''
-    },
-    /**
-     * The HTML5 autocomplete attribute value for the underlying `input` element.
-     */
-    autocomplete: {
-      type: String,
-      required: false,
-      default: 'off'
-    },
-    /**
-     * The `aria-label` attribute value for the underlying `input` element.
-     * Input must have an `aria-label` or `aria-labelledby` prop or it will be inaccessible.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label
-     */
-    ariaLabel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The `aria-labelledby` attribute value for the underlying `input` element.
-     * String must match the unique ID on a text element to create an accessible label.
-     *
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby
-     */
-    ariaLabelledby: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * The `placeholder` attribute value for the underlying `input` element
-     */
-    placeholder: {
-      type: String,
-      required: false,
-      default: null
-    },
-    /**
-     * HTML attributes to add to the text input. Helpful for adding `data-testid` and similar attributes.
-     * Do not pass `aria-label` or `aria-labelledby` into this object. Use `ariaLabel` or `ariaLabelledby` prop instead.
-     */
-    textInputAttrs: {
-      type: Object,
-      required: false,
-      default: null
-    },
-    /**
-     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
-     */
-    state: {
-      type: Boolean,
-      required: false,
-      default: null
-    },
-    /**
-     * Tokens that are selected. This prop will automatically be added when using `v-model`
-     */
-    selectedTokens: {
-      type: Array,
-      // All tokens need to have an `id` key
-      validator: tokensValidator,
-      required: true
-    },
-    /**
-     * Controls the `view-only` mode for the tokens
-     */
-    viewOnly: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /**
-     * Allows user to bulk delete tokens when enabled
-     */
-    allowClearAll: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  data() {
-    return {
-      inputText: '',
-      inputFocused: false,
-      dropdownIsOpen: false,
-      focusedDropdownItem: null,
-      triggerTokenFocusNextBackspace: true,
-      rootElClasses: '',
-      dropdownEventHandlers: {
-        handleUpArrow: () => {},
-        handleDownArrow: () => {},
-        handleHomeKey: () => {},
-        handleEndKey: () => {}
-      },
-      resetFocusedDropdownItem: () => {},
-      focusOnToken: () => {}
-    };
-  },
-  computed: {
-    filteredDropdownItems() {
-      return this.dropdownItems.filter(dropdownItem => this.selectedTokens.findIndex(token => token.id === dropdownItem.id) === -1);
-    },
-    dropdownHasNoItems() {
-      return !this.filteredDropdownItems.length;
-    },
-    userDefinedTokenCanBeAdded() {
-      if (!this.allowUserDefinedTokens || !this.inputText) {
-        return false;
-      }
-      return this.showAddNewAlways || this.dropdownHasNoItems;
-    },
-    hideDropdown() {
-      if (this.userDefinedTokenCanBeAdded) {
-        return false;
-      }
-      if (this.hideDropdownWithNoItems && this.dropdownHasNoItems) {
-        return true;
-      }
-      return false;
-    },
-    stateClass() {
-      switch (this.state) {
-        case true:
-          return 'is-valid';
-        case false:
-          return 'is-invalid';
-        default:
-          return '';
-      }
-    },
-    hasSelectedTokens() {
-      return this.selectedTokens.length > 0;
-    },
-    showEmptyPlaceholder() {
-      return !this.hasSelectedTokens && !this.inputFocused;
-    },
-    showClearAllButton() {
-      return this.hasSelectedTokens && this.allowClearAll;
-    }
-  },
-  watch: {
-    inputText(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        /**
-         * Fired when user types in the token selector
-         *
-         * @property {string} inputText
-         */
-        this.$emit('text-input', newValue);
-        this.resetFocusedDropdownItem();
-        if (newValue !== '') {
-          this.triggerTokenFocusNextBackspace = false;
-        } else {
-          this.triggerTokenFocusNextBackspace = true;
-        }
-
-        // Wait a tick so `text-input` event can be used to validate
-        // the value and change the `allowUserDefinedTokens` and/or
-        // `hideDropdownWithNoItems` props
-        this.$nextTick(() => {
-          if (this.hideDropdown) {
-            this.closeDropdown();
-          } else if (newValue !== '') {
-            this.openDropdown();
-          }
-        });
-      }
-    }
-  },
-  created() {
-    // Each instance must have a unique ID for proper ARIA relationships
-    this.uniqueId = uniqueId('token-selector-');
-  },
-  mounted() {
-    var _this$textInputAttrs;
-    const hasLabel = this.ariaLabel || ((_this$textInputAttrs = this.textInputAttrs) === null || _this$textInputAttrs === void 0 ? void 0 : _this$textInputAttrs['aria-label']) || this.ariaLabelledby;
-    if (!hasLabel) {
-      logWarning('The text input needs an accessible label. ' + 'Provide an `id` and a sibling `<label>` with a `for` attribute. Or add an `aria-labelledby` or `aria-label` prop to ensure the component is accessible. ' + 'See https://design.gitlab.com/components/token/#accessibility', {
-        name: 'GlTokenSelector'
-      });
-    }
-  },
-  methods: {
-    handleFocus(event) {
-      /**
-       * Fired when the token selector is focused
-       *
-       * @property {FocusEvent} event
-       */
-      this.$emit('focus', event);
-      this.openDropdown();
-      this.inputFocused = true;
-      this.focusOnToken();
-      if (this.inputText === '') {
-        this.triggerTokenFocusNextBackspace = true;
-      }
-    },
-    handleBlur(event) {
-      /**
-       * Fired when the token selector is blurred
-       *
-       * @property {FocusEvent} event
-       */
-      this.$emit('blur', event);
-      this.inputFocused = false;
-
-      // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
-      // Workaround is to:
-      // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
-      // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-      this.$nextTick(() => {
-        var _event$relatedTarget, _event$relatedTarget$;
-        if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
-          this.closeDropdown();
-        }
-      });
-    },
-    handleEnter() {
-      if (this.focusedDropdownItem && this.dropdownIsOpen) {
-        this.addToken(this.focusedDropdownItem);
-      }
-    },
-    handleEscape() {
-      this.inputText = '';
-      this.closeDropdown();
-    },
-    handleBackspace(event) {
-      if (this.inputText !== '' || !this.selectedTokens.length) {
-        return;
-      }
-
-      // Prevent triggering the browser back button
-      event.preventDefault();
-      if (this.triggerTokenFocusNextBackspace) {
-        this.$refs.textInput.blur();
-        this.focusOnToken(this.selectedTokens.length - 1);
-      } else {
-        this.triggerTokenFocusNextBackspace = true;
-      }
-    },
-    handleInputClick() {
-      // Open the dropdown if the user clicks an already focused input
-      if (this.inputFocused && this.inputText === '' && !this.dropdownIsOpen) {
-        this.openDropdown();
-      }
-    },
-    handleContainerClick(event) {
-      // Bail if token is clicked
-      const {
-        target
-      } = event;
-      if ((target === null || target === void 0 ? void 0 : target.closest('.gl-token')) !== null || this.inputFocused) {
-        return;
-      }
-      this.focusTextInput();
-    },
-    addToken(dropdownItem) {
-      /**
-       * Fired when a token is added or removed
-       *
-       * @property {array} selectedTokens
-       */
-      this.$emit('input', [...this.selectedTokens, dropdownItem]);
-      this.inputText = '';
-      this.closeDropdown();
-
-      /**
-       * Fired when a token is added
-       *
-       * @property {object} token
-       */
-      this.$emit('token-add', dropdownItem);
-      this.focusTextInput();
-    },
-    removeToken(token) {
-      /**
-       * Fired when a token is added or removed
-       *
-       * @property {array} selectedTokens
-       */
-      this.$emit('input', this.selectedTokens.filter(selectedToken => selectedToken.id !== token.id));
-      /**
-       * Fired when a token is removed
-       *
-       * @property {object} token
-       */
-      this.$emit('token-remove', token);
-    },
-    cancelTokenFocus() {
-      this.focusTextInput();
-    },
-    closeDropdown() {
-      this.dropdownIsOpen = false;
-      this.resetFocusedDropdownItem();
-    },
-    openDropdown() {
-      if (this.hideDropdown) {
-        return;
-      }
-      this.dropdownIsOpen = true;
-    },
-    focusTextInput() {
-      this.$refs.textInput.focus();
-    },
-    // Register methods passed as props from child components
-    registerDropdownEventHandlers(dropdownEventHandlers) {
-      this.dropdownEventHandlers = dropdownEventHandlers;
-    },
-    registerResetFocusedDropdownItem(resetFocusedDropdownItem) {
-      this.resetFocusedDropdownItem = resetFocusedDropdownItem;
-    },
-    registerFocusOnToken(focusOnToken) {
-      this.focusOnToken = focusOnToken;
-    },
-    clearAll() {
-      this.$emit('input', []);
-      this.focusTextInput();
-    },
-    handleAriaInvalid() {
-      const {
-        state
-      } = this;
-      return state === false ? 'true' : null;
-    },
-    handleAriaActiveDescendent(value) {
-      return value ? `${this.uniqueId}-dropdown-item-${value.id}` : null;
-    }
-  }
-};
-
-/* 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',[_c('div',{ref:"container",staticClass:"gl-token-selector gl-form-input gl-form-input-not-readonly form-control gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2",class:[
-      {
-        'gl-token-selector-focus-glow': _vm.inputFocused,
-        'gl-token-selector-view-only': _vm.viewOnly,
-      },
-      _vm.containerClass,
-      _vm.stateClass ],on:{"click":_vm.handleContainerClick}},[(_vm.showEmptyPlaceholder)?_vm._t("empty-placeholder"):_vm._e(),_vm._v(" "),_c('gl-token-container',{attrs:{"tokens":_vm.selectedTokens,"state":_vm.state,"register-focus-on-token":_vm.registerFocusOnToken,"view-only":_vm.viewOnly,"show-clear-all-button":_vm.showClearAllButton},on:{"token-remove":_vm.removeToken,"cancel-focus":_vm.cancelTokenFocus,"clear-all":_vm.clearAll},scopedSlots:_vm._u([{key:"token-content",fn:function(ref){
-    var token = ref.token;
-return [_vm._t("token-content",null,{"token":token})]}},{key:"text-input",fn:function(){return [_c('input',_vm._b({ref:"textInput",staticClass:"gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none",attrs:{"type":"text","aria-activedescendant":_vm.handleAriaActiveDescendent(_vm.focusedDropdownItem),"autocomplete":_vm.autocomplete,"aria-controls":_vm.uniqueId,"aria-expanded":_vm.dropdownIsOpen.toString(),"aria-invalid":_vm.handleAriaInvalid(),"aria-label":_vm.ariaLabelledby ? null : _vm.ariaLabel,"aria-labelledby":_vm.ariaLabelledby,"placeholder":_vm.placeholder,"disabled":_vm.viewOnly,"aria-autocomplete":"list","role":"combobox"},domProps:{"value":_vm.inputText},on:{"input":function($event){_vm.inputText = $event.target.value;},"focus":_vm.handleFocus,"blur":_vm.handleBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.handleEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.handleEscape.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.handleBackspace.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleUpArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.dropdownEventHandlers.handleDownArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleHomeKey.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.dropdownEventHandlers.handleEndKey.apply(null, arguments)},function($event){$event.stopPropagation();return _vm.$emit('keydown', $event)}],"click":_vm.handleInputClick}},'input',_vm.textInputAttrs,false))]},proxy:true}],null,true)})],2),_vm._v(" "),_c('gl-token-selector-dropdown',{attrs:{"menu-class":_vm.menuClass,"show":_vm.dropdownIsOpen,"loading":_vm.loading,"dropdown-items":_vm.filteredDropdownItems,"input-text":_vm.inputText,"user-defined-token-can-be-added":_vm.userDefinedTokenCanBeAdded,"component-id":_vm.uniqueId,"register-dropdown-event-handlers":_vm.registerDropdownEventHandlers,"register-reset-focused-dropdown-item":_vm.registerResetFocusedDropdownItem},on:{"dropdown-item-click":_vm.addToken,"input":function($event){_vm.focusedDropdownItem = $event;},"aria-active-descendant":_vm.handleAriaActiveDescendent,"show":_vm.openDropdown},scopedSlots:_vm._u([{key:"loading-content",fn:function(){return [_vm._t("loading-content")]},proxy:true},{key:"user-defined-token-content",fn:function(){return [_vm._t("user-defined-token-content",null,{"inputText":_vm.inputText})]},proxy:true},{key:"no-results-content",fn:function(){return [_vm._t("no-results-content")]},proxy:true},{key:"dropdown-item-content",fn:function(ref){
-    var dropdownItem = ref.dropdownItem;
-return [_vm._t("dropdown-item-content",null,{"dropdownItem":dropdownItem})]}},{key:"dropdown-footer",fn:function(){return [_vm._t("dropdown-footer")]},proxy:true}],null,true)})],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };

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

@@ -1,223 +0,0 @@
-import { uniqueId } from 'lodash-es';
-import GlDropdownItem from '../dropdown/dropdown_item';
-import { tokensValidator } from './helpers';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlTokenSelectorDropdown',
-  components: {
-    GlDropdownItem
-  },
-  props: {
-    show: {
-      type: Boolean,
-      required: true
-    },
-    menuClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: ''
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    dropdownItems: {
-      type: Array,
-      // All items need to have an `id` key
-      validator: tokensValidator,
-      required: true
-    },
-    inputText: {
-      type: String,
-      required: true
-    },
-    userDefinedTokenCanBeAdded: {
-      type: Boolean,
-      required: true
-    },
-    componentId: {
-      type: String,
-      required: true
-    },
-    registerDropdownEventHandlers: {
-      type: Function,
-      required: true
-    },
-    registerResetFocusedDropdownItem: {
-      type: Function,
-      required: true
-    }
-  },
-  data() {
-    return {
-      focusedDropdownItemIndex: 0
-    };
-  },
-  computed: {
-    userDefinedToken() {
-      return {
-        id: uniqueId('user-defined-token'),
-        name: this.inputText
-      };
-    },
-    dropdownLength() {
-      // Adds an additional dropdown item for the 'Add ... dropdown' item
-      return this.userDefinedTokenCanBeAdded ? this.dropdownItems.length : this.dropdownItems.length - 1;
-    },
-    focusedLastDropdownItem() {
-      return this.focusedDropdownItemIndex === this.dropdownLength;
-    },
-    focusedUserDefinedToken() {
-      // User defined tokens are always the last in the list
-      return this.userDefinedTokenCanBeAdded && this.focusedLastDropdownItem;
-    },
-    focusedDropdownItem() {
-      if (this.focusedUserDefinedToken) {
-        return this.userDefinedToken;
-      }
-      return this.dropdownItems[this.focusedDropdownItemIndex];
-    }
-  },
-  watch: {
-    focusedDropdownItem(newValue, oldValue) {
-      if ((newValue === null || newValue === void 0 ? void 0 : newValue.id) !== (oldValue === null || oldValue === void 0 ? void 0 : oldValue.id)) {
-        this.$emit('input', newValue);
-        if (!newValue) {
-          return;
-        }
-        const dropdownItemRef = this.getDropdownItemRef(newValue);
-        if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
-          dropdownItemRef.$el.scrollIntoView({
-            block: 'nearest',
-            inline: 'end'
-          });
-        }
-      }
-    }
-  },
-  created() {
-    this.registerDropdownEventHandlers({
-      handleUpArrow: this.handleUpArrow,
-      handleDownArrow: this.handleDownArrow,
-      handleHomeKey: this.handleHomeKey,
-      handleEndKey: this.handleEndKey
-    });
-    this.registerResetFocusedDropdownItem(this.resetFocusedDropdownItem);
-    this.$emit('input', this.focusedDropdownItem);
-  },
-  methods: {
-    handleDropdownItemClick(dropdownItem) {
-      this.$emit('dropdown-item-click', dropdownItem);
-    },
-    handleMousedown(dropdownItem) {
-      // `event.relatedTarget` returns `null` on Safari because buttons are not focused on click (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus)
-      // Because of this we need to manually focus on the button. We do this in `mousedown` because it is fired before the `blur` event
-      const dropdownItemRef = this.getDropdownItemRef(dropdownItem);
-      if (dropdownItemRef !== null && dropdownItemRef !== void 0 && dropdownItemRef.$el) {
-        dropdownItemRef.$el.querySelector('button').focus();
-      }
-    },
-    handleUpArrow() {
-      if (!this.show) {
-        return;
-      }
-
-      // First dropdown item has been reached
-      if (this.focusedDropdownItemIndex === 0) {
-        return;
-      }
-      this.focusPrevDropdownItem();
-    },
-    handleDownArrow() {
-      if (!this.show) {
-        this.$emit('show');
-        return;
-      }
-
-      // Last dropdown item has been reached
-      if (this.focusedLastDropdownItem) {
-        return;
-      }
-      this.focusNextDropdownItem();
-    },
-    handleHomeKey(event) {
-      event.preventDefault();
-      this.focusFirstDropdownItem();
-    },
-    handleEndKey(event) {
-      event.preventDefault();
-      this.focusLastDropdownItem();
-    },
-    focusLastDropdownItem() {
-      this.focusedDropdownItemIndex = this.dropdownLength;
-    },
-    focusFirstDropdownItem() {
-      this.focusedDropdownItemIndex = 0;
-    },
-    focusNextDropdownItem() {
-      this.focusedDropdownItemIndex += 1;
-    },
-    focusPrevDropdownItem() {
-      this.focusedDropdownItemIndex -= 1;
-    },
-    resetFocusedDropdownItem() {
-      this.focusedDropdownItemIndex = 0;
-    },
-    dropdownItemIsFocused(dropdownItem) {
-      if (!this.focusedDropdownItem) {
-        return false;
-      }
-      return dropdownItem.id === this.focusedDropdownItem.id;
-    },
-    getDropdownItemRef(dropdownItem) {
-      var _this$$refs$dropdownI;
-      if (this.focusedUserDefinedToken) {
-        return this.$refs[this.userDefinedToken.id];
-      }
-      return (_this$$refs$dropdownI = this.$refs.dropdownItems) === null || _this$$refs$dropdownI === void 0 ? void 0 : _this$$refs$dropdownI.find(ref => ref.$attrs['data-dropdown-item-id'] === dropdownItem.id);
-    },
-    dropdownItemIdAttribute(dropdownItem) {
-      return dropdownItem ? `${this.componentId}-dropdown-item-${dropdownItem.id}` : null;
-    }
-  }
-};
-
-/* 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',{staticClass:"dropdown b-dropdown gl-dropdown gl-relative",class:{ show: _vm.show }},[_c('ul',{ref:"dropdownMenu",staticClass:"dropdown-menu gl-absolute",class:[{ show: _vm.show }, _vm.menuClass],attrs:{"id":_vm.componentId,"role":"listbox"}},[(_vm.loading)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("loading-content",function(){return [_vm._v("Searching...")]})],2):_vm._e(),_vm._v(" "),_vm._l((_vm.dropdownItems),function(dropdownItem){return _c('gl-dropdown-item',{key:dropdownItem.id,ref:"dropdownItems",refInFor:true,attrs:{"id":_vm.dropdownItemIdAttribute(dropdownItem),"data-dropdown-item-id":dropdownItem.id,"active":_vm.dropdownItemIsFocused(dropdownItem),"aria-selected":_vm.dropdownItemIsFocused(dropdownItem).toString(),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(dropdownItem)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(dropdownItem)}}},[_vm._t("dropdown-item-content",function(){return [_vm._v("\n          "+_vm._s(dropdownItem.name)+"\n        ")]},{"dropdownItem":dropdownItem})],2)])}),_vm._v(" "),(_vm.userDefinedTokenCanBeAdded)?_c('gl-dropdown-item',{ref:_vm.userDefinedToken.id,attrs:{"id":_vm.dropdownItemIdAttribute(_vm.userDefinedToken),"data-dropdown-item-id":_vm.userDefinedToken.id,"active":_vm.dropdownItemIsFocused(_vm.userDefinedToken),"active-class":"is-focused","role":"option","tabindex":"-1"},on:{"click":function($event){return _vm.handleDropdownItemClick(_vm.userDefinedToken)}}},[_c('div',{staticClass:"-gl-mx-4 -gl-my-3 gl-px-4 gl-py-3",on:{"mousedown":function($event){return _vm.handleMousedown(_vm.userDefinedToken)}}},[_vm._t("user-defined-token-content",function(){return [_vm._v("\n          Add \""+_vm._s(_vm.inputText)+"\"\n        ")]},{"inputText":_vm.inputText})],2)]):(!_vm.dropdownItems.length)?_c('gl-dropdown-item',{attrs:{"role":"option","disabled":""}},[_vm._t("no-results-content",function(){return [_vm._v("No matches found")]})],2):_vm._e(),_vm._v(" "),_vm._t("dropdown-footer")],2)])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };