@gitlab/ui 38.0.1 → 38.2.1

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -4,21 +4,33 @@ import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
     GlFilteredSearchSuggestion
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Tokens available for this filtered search instance.
+     */
     availableTokens: {
       type: Array,
       required: true
     },
+
+    /**
+     * Determines if the term is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * Current term value.
+     */
     value: {
       type: Object,
       required: false,
@@ -31,16 +43,28 @@ var script = {
       required: false,
       default: ''
     },
+
+    /**
+     * HTML attributes to add to the search input.
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * If this is the last token.
+     */
     isLastToken: {
       type: Boolean,
       required: false,
       default: false
     },
+
+    /**
+     * The current `value` (tokens) of the ancestor GlFilteredSearch component.
+     */
     currentValue: {
       type: Array,
       required: false,
@@ -58,6 +82,12 @@ var script = {
       },
 
       set(data) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         this.$emit('input', {
           data
         });
@@ -67,6 +97,13 @@ var script = {
   },
   methods: {
     onBackspace() {
+      /**
+       * Emitted when token value is empty and backspace is pressed.
+       * Includes user intent to activate previous token.
+       *
+       * @event destroy
+       * @type {object} details The user intent
+       */
       this.$emit('destroy', {
         intent: INTENT_ACTIVATE_PREVIOUS
       });

package/dist/components/base/filtered_search/filtered_search_token.documentation.js

@@ -1,4 +1,4 @@
-var filtered_search_token = "# Filtered Search Binary Token\n\nFiltered search token is a helper component, intended to\nsimplify the creation of filters tokens which consist of a title, operators\nand an editable value with autocomplete. This component abstracts token management\nlogic and allows you to focus on implementing autocomplete or view logic.\n\nThis component is not intended to be used outside of the `GlFilteredSearch` component.\n\n## Usage\n\nMake sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:\n\n```js\n<gl-filtered-search-token\n  title=\"Confidential\"\n  :active=\"active\"\n  :value=\"value\"\n  v-on=\"$listeners\"\n>\n  <template #suggestions>\n    <gl-filtered-search-suggestion value=\"Yes\"><gl-icon name=\"eye-slash\" :size=\"16\"/> Yes</gl-filtered-search-suggestion>\n    <gl-filtered-search-suggestion value=\"No\"><gl-icon name=\"eye\" :size=\"16\"/> No</gl-filtered-search-suggestion>\n  </template>\n</gl-filtered-search-token>\n```\n";
+var filtered_search_token = "Filtered search token is a helper component, intended to\nsimplify the creation of filters tokens which consist of a title, operators\nand an editable value with autocomplete. This component abstracts token management\nlogic and allows you to focus on implementing autocomplete or view logic.\n\nThis component is not intended to be used outside of the `GlFilteredSearch` component.\n\n## Usage\n\nMake sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:\n\n```html\n<gl-filtered-search-token\n  title=\"Confidential\"\n  :active=\"active\"\n  :value=\"value\"\n  v-on=\"$listeners\"\n>\n  <template #suggestions>\n    <gl-filtered-search-suggestion value=\"Yes\"><gl-icon name=\"eye-slash\" :size=\"16\"/> Yes</gl-filtered-search-suggestion>\n    <gl-filtered-search-suggestion value=\"No\"><gl-icon name=\"eye\" :size=\"16\"/> No</gl-filtered-search-suggestion>\n  </template>\n</gl-filtered-search-token>\n```\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6,36 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var filtered_search_token_documentation = {
-  description,
-  bootstrapComponent: null,
-  propsInfo: {
-    title: {
-      additionalInfo: 'Token title'
-    },
-    config: {
-      additionalInfo: 'Token configuration with available operators and options'
-    },
-    active: {
-      additionalInfo: 'If this token is currently active'
-    },
-    value: {
-      additionalInfo: 'Current value'
-    },
-    replace: {
-      args: [{
-        arg: 'token',
-        description: '(Object) Replacement token configuration'
-      }],
-      description: 'Emitted when this token is converted to another type'
-    }
-  },
-  slots: [{
-    name: 'view',
-    description: 'Template for token value in inactive state'
-  }, {
-    name: 'suggestions',
-    description: 'Slot for rendering autocomplete suggestions when no options are provided.'
-  }]
+  description
 };
 
 export default filtered_search_token_documentation;

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -1,7 +1,8 @@
+import _cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { createTerm } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const SEGMENT_TITLE = 'TYPE';
@@ -17,6 +18,7 @@ const DEFAULT_OPERATORS = [{
   description: 'is not'
 }];
 var script = {
+  name: 'GlFilteredSearchToken',
   components: {
     GlToken,
     GlFilteredSearchTokenSegment
@@ -28,11 +30,19 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Token configuration with available operators and options.
+     */
     config: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * Determines if the token is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -43,6 +53,10 @@ var script = {
       required: false,
       default: () => []
     },
+
+    /**
+     * Current token value.
+     */
     value: {
       type: Object,
       required: false,
@@ -51,6 +65,10 @@ var script = {
         data: ''
       })
     },
+
+    /**
+     * Display operators' descriptions instead of their values (e.g., "is" instead of "=").
+     */
     showFriendlyText: {
       type: Boolean,
       required: false,
@@ -60,7 +78,8 @@ var script = {
 
   data() {
     return {
-      activeSegment: null
+      activeSegment: null,
+      tokenValue: _cloneDeep(this.value)
     };
   },
 
@@ -70,7 +89,7 @@ var script = {
     },
 
     hasDataOrDataSegmentIsCurrentlyActive() {
-      return this.value.data !== '' || this.isSegmentActive(SEGMENT_DATA);
+      return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
 
     availableTokensWithSelf() {
@@ -80,7 +99,7 @@ var script = {
     },
 
     operatorDescription() {
-      const operator = this.operators.find(op => op.value === this.value.operator);
+      const operator = this.operators.find(op => op.value === this.tokenValue.operator);
       return this.showFriendlyText ? operator === null || operator === void 0 ? void 0 : operator.description : operator === null || operator === void 0 ? void 0 : operator.value;
     }
 
@@ -91,13 +110,29 @@ var script = {
     SEGMENT_OPERATOR
   },
   watch: {
-    value: {
+    tokenValue: {
       deep: true,
 
       handler(newValue) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         this.$emit('input', newValue);
       }
 
+    },
+    value: {
+      handler(newValue, oldValue) {
+        if ((newValue === null || newValue === void 0 ? void 0 : newValue.data) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.data) && (newValue === null || newValue === void 0 ? void 0 : newValue.operator) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.operator)) {
+          return;
+        }
+
+        this.tokenValue = _cloneDeep(newValue);
+      }
+
     },
     active: {
       immediate: true,
@@ -105,10 +140,16 @@ var script = {
       handler(newValue) {
         if (newValue) {
           if (!this.activeSegment) {
-            this.activateSegment(this.value.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
+            this.activateSegment(this.tokenValue.data !== '' ? SEGMENT_DATA : SEGMENT_OPERATOR);
           }
-        } else if (this.value.data === '') {
+        } else if (this.tokenValue.data === '') {
           this.activeSegment = null;
+          /**
+           * Emitted when token is about to be destroyed.
+           *
+           * @event destroy
+           */
+
           this.$emit('destroy');
         }
       }
@@ -117,15 +158,15 @@ var script = {
   },
 
   created() {
-    if (!('operator' in this.value)) {
+    if (!('operator' in this.tokenValue)) {
       if (this.operators.length === 1) {
         const operator = this.operators[0].value;
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           operator
         });
         this.activeSegment = SEGMENT_DATA;
       } else {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           operator: ''
         });
       }
@@ -137,6 +178,11 @@ var script = {
       this.activeSegment = segment;
 
       if (!this.active) {
+        /**
+         * Emitted when this term token is clicked.
+         *
+         * @event activate
+         */
         this.$emit('activate');
       }
     },
@@ -152,13 +198,12 @@ var script = {
     },
 
     replaceWithTermIfEmpty() {
-      if (this.value.operator === '' && this.value.data === '') {
-        this.$emit('replace', {
-          type: TERM_TOKEN_TYPE,
-          value: {
-            data: this.config.title
-          }
-        });
+      if (this.tokenValue.operator === '' && this.tokenValue.data === '') {
+        /**
+         * Emitted when this token is converted to another type
+         * @property {object} token Replacement token configuration
+         */
+        this.$emit('replace', createTerm(this.config.title));
       }
     },
 
@@ -167,6 +212,11 @@ var script = {
 
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
+          /**
+           * Emitted when this term token will lose its focus.
+           *
+           * @event deactivate
+           */
           this.$emit('deactivate');
         });
         return;
@@ -176,7 +226,7 @@ var script = {
         const isCompatible = this.config.dataType && this.config.dataType === newTokenConfig.dataType;
         this.$emit('replace', {
           type: newTokenConfig.type,
-          value: isCompatible ? this.value : {
+          value: isCompatible ? this.tokenValue : {
             data: ''
           }
         });
@@ -206,7 +256,7 @@ var script = {
         } = _ref2;
         return value.startsWith(potentialValue);
       })) {
-        if (this.value.data === '') {
+        if (this.tokenValue.data === '') {
           applySuggestion(suggestedValue);
         } else {
           evt.preventDefault();
@@ -216,7 +266,7 @@ var script = {
 
     activateDataSegment() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: ''
         });
       }
@@ -226,10 +276,16 @@ var script = {
 
     handleComplete() {
       if (this.config.multiSelect) {
-        this.$emit('input', { ...this.value,
+        this.$emit('input', { ...this.tokenValue,
           data: this.multiSelectValues.join(COMMA)
         });
       }
+      /**
+       * Emitted when the token entry has been completed.
+       *
+       * @event complete
+       */
+
 
       this.$emit('complete');
     },
@@ -237,6 +293,7 @@ var script = {
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
+        event.stopPropagation();
         this.$emit('destroy');
       }
     }
@@ -252,14 +309,14 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
 var inputValue = ref.inputValue;
 return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v(_vm._s(inputValue))])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":""},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v(_vm._s(_vm.operatorDescription))])]},proxy:true},{key:"option",fn:function(ref){
 var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.value.operator),callback:function ($$v) {_vm.$set(_vm.value, "operator", $$v);},expression:"value.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
 var inputValue = ref.inputValue;
 return [_vm._t("view-token",[_c('gl-token',{staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value"},on:{"mousedown":_vm.destroyByClose}},[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",[_vm._v(_vm._s(inputValue))],null,{ inputValue: inputValue })],2)])],null,{
           inputValue: inputValue,
           listeners: { mousedown: _vm.destroyByClose },
           cssClasses: Object.assign({}, {'gl-filtered-search-token-data': true},
             _vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA)),
-        })]}}],null,true),model:{value:(_vm.value.data),callback:function ($$v) {_vm.$set(_vm.value, "data", $$v);},expression:"value.data"}}):_vm._e()],1)};
+        })]}}],null,true),model:{value:(_vm.tokenValue.data),callback:function ($$v) {_vm.$set(_vm.tokenValue, "data", $$v);},expression:"tokenValue.data"}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_token_segment.documentation.js

@@ -1,4 +1,4 @@
-var filtered_search_token_segment = "# Filtered Search Token Segment\n\nThe filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
+var filtered_search_token_segment = "The filtered search token segment is a component for managing token input either via free typing\nor by selecting item through dropdown list\n\n## Usage\n\nThis component is internal and is not intended to be used by `@gitlab/ui` users.\n\n## Internet Explorer 11\n\nThis component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith)\nand [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith)\nunder the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.\n\n> NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)\n";
 
 var description = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6,51 +6,7 @@ var description = /*#__PURE__*/Object.freeze({
 });
 
 var filtered_search_token_segment_documentation = {
-  description,
-  bootstrapComponent: null,
-  propsInfo: {
-    active: {
-      additionalInfo: 'If this term token is currently active'
-    },
-    options: {
-      additionalInfo: ''
-    },
-    optionTextField: {
-      additionalInfo: ''
-    },
-    customInputKeydownHandler: {
-      additionalInfo: ''
-    },
-    value: {
-      additionalInfo: 'Current term value'
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input'
-    },
-    isLastToken: {
-      additionalInfo: 'If this is the last token'
-    }
-  },
-  events: [{
-    event: 'activate',
-    description: 'Emitted on mousedown event on the main component'
-  }, {
-    event: 'backspace',
-    description: 'Emitted when Backspace is pressed and the value is empty'
-  }, {
-    event: 'complete',
-    description: 'Emitted when suggestion is selected from the suggestion list'
-  }, {
-    event: 'submit',
-    description: 'Emitted when Enter is pressed and no suggestion is selected'
-  }, {
-    event: 'split',
-    args: [{
-      arg: 'newStrings',
-      description: '(Array of strings) New strings to be converted into term tokens'
-    }],
-    description: 'Emitted when Space appears in token segment value'
-  }]
+  description
 };
 
 export default filtered_search_token_segment_documentation;

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -7,6 +7,7 @@ import { splitOnQuotes, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
+  name: 'GlFilteredSearchTokenSegment',
   components: {
     Portal,
     GlFilteredSearchSuggestionList,
@@ -15,6 +16,9 @@ var script = {
   inject: ['portalName', 'alignSuggestions'],
   inheritAttrs: false,
   props: {
+    /**
+     * If this token segment is currently being edited.
+     */
     active: {
       type: Boolean,
       required: false,
@@ -45,15 +49,27 @@ var script = {
       required: false,
       default: () => () => false
     },
+
+    /**
+     * Current term value
+     */
     value: {
       required: true,
       validator: () => true
     },
+
+    /**
+     * HTML attributes to add to the search input
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({})
     },
+
+    /**
+     * If this is the last token
+     */
     isLastToken: {
       type: Boolean,
       required: false,
@@ -91,6 +107,11 @@ var script = {
       set(v) {
         var _this$getMatchingOpti, _this$getMatchingOpti2;
 
+        /**
+         * Emitted when this token segment's value changes.
+         *
+         * @type {object} option The current option.
+         */
         this.$emit('input', (_this$getMatchingOpti = (_this$getMatchingOpti2 = this.getMatchingOptionForInputValue(v)) === null || _this$getMatchingOpti2 === void 0 ? void 0 : _this$getMatchingOpti2.value) !== null && _this$getMatchingOpti !== void 0 ? _this$getMatchingOpti : v);
       }
 
@@ -152,6 +173,10 @@ var script = {
       this.$emit('input', (_this$getMatchingOpti3 = (_this$getMatchingOpti4 = this.getMatchingOptionForInputValue(firstWord)) === null || _this$getMatchingOpti4 === void 0 ? void 0 : _this$getMatchingOpti4.value) !== null && _this$getMatchingOpti3 !== void 0 ? _this$getMatchingOpti3 : firstWord);
 
       if (otherWords.length) {
+        /**
+         * Emitted when Space appears in token segment value
+         * @property {array|string} newStrings New strings to be converted into term tokens
+         */
         this.$emit('split', otherWords);
       }
     }
@@ -160,6 +185,9 @@ var script = {
   methods: {
     emitIfInactive(e) {
       if (!this.active) {
+        /**
+         * Emitted on mousedown event on the main component.
+         */
         this.$emit('activate');
         e.preventDefault();
       }
@@ -208,6 +236,12 @@ var script = {
 
     applySuggestion(suggestedValue) {
       const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      /**
+       * Emitted when autocomplete entry is selected.
+       *
+       * @type {string} value The selected value.
+       */
+
       this.$emit('select', formattedSuggestedValue);
 
       if (!this.multiSelect) {
@@ -228,6 +262,10 @@ var script = {
       if (key === 'Backspace') {
         if (this.inputValue === '') {
           e.preventDefault();
+          /**
+           * Emitted when Backspace is pressed and the value is empty
+           */
+
           this.$emit('backspace');
         }
 
@@ -241,6 +279,9 @@ var script = {
           if (suggestedValue != null) {
             this.applySuggestion(suggestedValue);
           } else {
+            /**
+             * Emitted when Enter is pressed and no suggestion is selected
+             */
             this.$emit('submit');
           }
         },
@@ -252,6 +293,10 @@ var script = {
         },
         Escape: () => {
           e.preventDefault();
+          /**
+           * Emitted when suggestion is selected from the suggestion list
+           */
+
           this.$emit('complete');
         }
       };
@@ -282,6 +327,9 @@ var script = {
       if (this.multiSelect) {
         this.$emit('complete');
       } else if (this.active) {
+        /**
+         * Emitted when this term token will lose its focus.
+         */
         this.$emit('deactivate');
       }
     }

package/dist/components/base/filtered_search/filtered_search_utils.js

@@ -38,7 +38,45 @@ function needDenormalization(tokens) {
   }
 
   assertValidTokens(tokens);
-  return tokens.some(t => typeof t === 'string');
+  return tokens.some(t => typeof t === 'string' || !t.id);
+}
+let tokenIdCounter = 0;
+
+const getTokenId = () => {
+  const tokenId = `token-${tokenIdCounter}`;
+  tokenIdCounter += 1;
+  return tokenId;
+};
+/**
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
+ * on as a unique key for the token.
+ *
+ * If the given token does not have an `id`, it returns a shallow copy of the
+ * token with an `id`. Otherwise, it returns the given token.
+ *
+ * @param {object} token The token to check.
+ * @returns {object} A token with an `id`.
+ */
+
+
+function ensureTokenId(token) {
+  if (!token.id) {
+    return { ...token,
+      id: getTokenId()
+    };
+  }
+
+  return token;
+}
+function createTerm() {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    id: getTokenId(),
+    type: TERM_TOKEN_TYPE,
+    value: {
+      data
+    }
+  };
 }
 function denormalizeTokens(inputTokens) {
   assertValidTokens(inputTokens);
@@ -47,14 +85,9 @@ function denormalizeTokens(inputTokens) {
   tokens.forEach(t => {
     if (typeof t === 'string') {
       const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach(strToken => result.push({
-        type: TERM_TOKEN_TYPE,
-        value: {
-          data: strToken
-        }
-      }));
+      stringTokens.forEach(strToken => result.push(createTerm(strToken)));
     } else {
-      result.push(t);
+      result.push(ensureTokenId(t));
     }
   });
   return result;
@@ -135,4 +168,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, denormalizeTokens, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };