@gitlab/ui 61.2.0 → 62.0.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [62.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.3.0...v62.0.0) (2023-04-19)
+
+
+### Code Refactoring
+
+* remove gl-*flex-wrap-wrap classes ([fc405cc](https://gitlab.com/gitlab-org/gitlab-ui/commit/fc405cc59dc743209c0ea00a583b31cb77fc1218))
+
+
+### BREAKING CHANGES
+
+* remove deprecated `gl-[breakpoint?]-flex-wrap-wrap`,
+`gl-[breakpoint?]-flex-wrap-nowrap`, and
+`gl-[breakpoint?]-flex-wrap-wrap-reverse` classes.
+
+Instead, use these classes: `gl-[breakpoint?]-flex-wrap`,
+`gl-[breakpoint?]-flex-nowrap`, and
+`gl-[breakpoint?]-flex-wrap-reverse`.
+
+# [61.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.2.0...v61.3.0) (2023-04-19)
+
+
+### Features
+
+* **GlFilteredSearch:** Terms as tokens ([7149a54](https://gitlab.com/gitlab-org/gitlab-ui/commit/7149a541f4dc29d7f364ee1ab02a1c88be3824ed))
+
 # [61.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.1.3...v61.2.0) (2023-04-18)
 
 

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -4,7 +4,7 @@ import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const CONTAINER_CLASSES = ['gl-display-flex', 'gl-align-items-baseline', 'gl-flex-wrap', 'gl-sm-flex-wrap-nowrap', 'gl-sm-gap-3'];
+const CONTAINER_CLASSES = ['gl-display-flex', 'gl-align-items-baseline', 'gl-flex-wrap', 'gl-sm-flex-nowrap', 'gl-sm-gap-3'];
 var script = {
   name: 'GlDaterangePicker',
   components: {

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

@@ -7,7 +7,8 @@ const noop = () => {};
 const provide = () => ({
   portalName: 'portal',
   alignSuggestions: noop,
-  suggestionsListClass: noop
+  suggestionsListClass: noop,
+  termsAsTokens: () => false
 });
 
 export { provide };

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

@@ -6,7 +6,7 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
-import { createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
+import { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 Vue.use(PortalVue);
@@ -32,7 +32,8 @@ var script = {
       // Return a function reference instead of a prop to work around vue-apollo@3 bug.
       // TODO: This can be reverted once https://github.com/vuejs/vue-apollo/pull/1153
       // has been merged and we consume it, or we upgrade to vue-apollo@4.
-      suggestionsListClass: () => this.suggestionsListClass
+      suggestionsListClass: () => this.suggestionsListClass,
+      termsAsTokens: () => this.termsAsTokens
     };
   },
   inheritAttrs: false,
@@ -128,6 +129,28 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Render search terms as GlTokens. Ideally, this prop will be as
+     * short-lived as possible, and this behavior will become the default and
+     * only behavior.
+     *
+     * This prop is *not* reactive.
+     *
+     * See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2159.
+     */
+    termsAsTokens: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title
     }
   },
   data() {
@@ -200,7 +223,7 @@ var script = {
   },
   methods: {
     applyNewValue(newValue) {
-      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
+      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue, this.termsAsTokens) : newValue;
     },
     isActiveToken(idx) {
       return this.activeTokenIdx === idx;
@@ -300,6 +323,7 @@ var script = {
       }));
       this.activeTokenIdx = idx;
     },
+    // This method can be deleted once termsAsTokens behavior is the default.
     createTokens(idx) {
       let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
       if (!this.isLastTokenActive && newStrings.length === 1 && newStrings[0] === '') {
@@ -331,7 +355,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx),"search-text-option-label":_vm.searchTextOptionLabel},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -5,7 +5,7 @@ const DEFER_TO_INITIAL_VALUE = -1;
 const NO_ACTIVE_ITEM = -2;
 var script = {
   name: 'GlFilteredSearchSuggestionList',
-  inject: ['suggestionsListClass'],
+  inject: ['suggestionsListClass', 'termsAsTokens'],
   provide() {
     return {
       filteredSearchSuggestionListInstance: this
@@ -35,7 +35,7 @@ var script = {
       return this.registeredItems[this.initialActiveIdx];
     },
     activeItem() {
-      if (this.activeIdx === NO_ACTIVE_ITEM) return null;
+      if (!this.termsAsTokens() && this.activeIdx === NO_ACTIVE_ITEM) return null;
       if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
       return this.registeredItems[this.activeIdx];
     },
@@ -66,13 +66,21 @@ var script = {
       }
     },
     nextItem() {
-      this.stepItem(1, this.registeredItems.length - 1);
+      if (this.termsAsTokens()) {
+        this.stepItem(1);
+      } else {
+        this.stepItem(1, this.registeredItems.length - 1);
+      }
     },
     prevItem() {
-      this.stepItem(-1, 0);
+      if (this.termsAsTokens()) {
+        this.stepItem(-1);
+      } else {
+        this.stepItem(-1, 0);
+      }
     },
     stepItem(direction, endIdx) {
-      if (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx) {
+      if (!this.termsAsTokens() && (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)) {
         // The user wants to move past the end of the list, so ensure nothing is selected.
         this.activeIdx = NO_ACTIVE_ITEM;
       } else {

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

@@ -1,12 +1,16 @@
+import GlToken from '../token/token';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { match, tokenToOption, INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { termTokenDefinition, match, tokenToOption, INTENT_ACTIVATE_PREVIOUS, TOKEN_CLOSE_SELECTOR, TERM_TOKEN_TYPE } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFilteredSearchTerm',
   components: {
-    GlFilteredSearchTokenSegment
+    GlFilteredSearchTokenSegment,
+    GlToken
   },
+  inject: ['termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -69,6 +73,14 @@ var script = {
       default: 'end',
       validator: value => ['start', 'end'].includes(value)
     },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title
+    },
     viewOnly: {
       type: Boolean,
       required: false,
@@ -76,8 +88,21 @@ var script = {
     }
   },
   computed: {
+    showInput() {
+      return this.termsAsTokens() || Boolean(this.placeholder);
+    },
+    showToken() {
+      return this.termsAsTokens() && Boolean(this.value.data);
+    },
     suggestedTokens() {
-      return this.availableTokens.filter(token => match(token.title, this.value.data)).map(tokenToOption);
+      const tokens = this.availableTokens.filter(token => match(token.title, this.value.data));
+      if (this.termsAsTokens() && this.value.data) {
+        tokens.push({
+          ...termTokenDefinition,
+          title: this.searchTextOptionLabel
+        });
+      }
+      return tokens.map(tokenToOption);
     },
     internalValue: {
       get() {
@@ -94,6 +119,11 @@ var script = {
           data
         });
       }
+    },
+    eventListeners() {
+      return this.viewOnly ? {} : {
+        mousedown: this.destroyByClose
+      };
     }
   },
   methods: {
@@ -108,6 +138,23 @@ var script = {
       this.$emit('destroy', {
         intent: INTENT_ACTIVATE_PREVIOUS
       });
+    },
+    destroyByClose(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        stopEvent(event);
+        this.$emit('destroy');
+      }
+    },
+    onComplete(type) {
+      if (type === TERM_TOKEN_TYPE) {
+        // We've completed this term token
+        this.$emit('complete');
+      } else {
+        // We're changing the current token type
+        this.$emit('replace', {
+          type
+        });
+      }
     }
   }
 };
@@ -116,7 +163,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.onComplete,"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [(_vm.showToken)?_c('gl-token',_vm._g({class:{ 'gl-cursor-pointer': !_vm.viewOnly },attrs:{"view-only":_vm.viewOnly}},_vm.eventListeners),[_vm._v(_vm._s(_vm.value.data))]):(_vm.showInput)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -2,13 +2,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { tokenToOption, createTerm } from './filtered_search_utils';
+import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const SEGMENT_TITLE = 'TYPE';
 const SEGMENT_OPERATOR = 'OPERATOR';
 const SEGMENT_DATA = 'DATA';
-const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 const DEFAULT_OPERATORS = [{
   value: '=',
   description: 'is',

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

@@ -3,7 +3,7 @@ import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
-import { splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
+import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 // We need some helpers to ensure @vue/compat compatibility
@@ -49,7 +49,7 @@ var script = {
     GlFilteredSearchSuggestionList,
     GlFilteredSearchSuggestion
   },
-  inject: ['portalName', 'alignSuggestions'],
+  inject: ['portalName', 'alignSuggestions', 'termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -136,6 +136,16 @@ var script = {
     };
   },
   computed: {
+    hasTermSuggestion() {
+      if (!this.termsAsTokens()) return false;
+      if (!this.options) return false;
+      return this.options.some(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === TERM_TOKEN_TYPE;
+      });
+    },
     matchingOption() {
       var _this$options;
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
@@ -173,7 +183,9 @@ var script = {
         const option = this.getMatchingOptionForInputValue(this.inputValue) || this.getMatchingOptionForInputValue(this.inputValue, {
           loose: true
         });
-        return option === null || option === void 0 ? void 0 : option.value;
+        if (option) return option.value;
+        if (this.hasTermSuggestion) return TERM_TOKEN_TYPE;
+        return null;
       }
       const defaultOption = this.options.find(op => op.default);
       if (defaultOption) {
@@ -197,6 +209,7 @@ var script = {
       }
     },
     inputValue(newValue) {
+      if (this.termsAsTokens()) return;
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;
@@ -260,7 +273,7 @@ var script = {
       }
     },
     applySuggestion(suggestedValue) {
-      const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      const formattedSuggestedValue = this.termsAsTokens() ? suggestedValue : wrapTokenInQuotes(suggestedValue);
 
       /**
        * Emitted when autocomplete entry is selected.
@@ -269,7 +282,7 @@ var script = {
        */
       this.$emit('select', formattedSuggestedValue);
       if (!this.multiSelect) {
-        this.$emit('input', formattedSuggestedValue);
+        this.$emit('input', formattedSuggestedValue === TERM_TOKEN_TYPE ? this.inputValue : formattedSuggestedValue);
         this.$emit('complete', formattedSuggestedValue);
       }
     },

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

@@ -5,6 +5,7 @@ import { modulo } from '../../../utils/number_utils';
 
 const TERM_TOKEN_TYPE = 'filtered-search-term';
 const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
+const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }
@@ -137,18 +138,23 @@ function createTerm() {
   };
 }
 function denormalizeTokens(inputTokens) {
+  let termsAsTokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   assertValidTokens(inputTokens);
   const tokens = Array.isArray(inputTokens) ? inputTokens : [inputTokens];
-  const result = [];
-  tokens.forEach(t => {
+  return tokens.reduce((result, t) => {
     if (typeof t === 'string') {
-      const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach(strToken => result.push(createTerm(strToken)));
+      if (termsAsTokens) {
+        const trimmedText = t.trim();
+        if (trimmedText) result.push(createTerm(trimmedText));
+      } else {
+        const stringTokens = t.split(' ').filter(Boolean);
+        stringTokens.forEach(strToken => result.push(createTerm(strToken)));
+      }
     } else {
       result.push(ensureTokenId(t));
     }
-  });
-  return result;
+    return result;
+  }, []);
 }
 
 /**
@@ -163,6 +169,11 @@ function denormalizeTokens(inputTokens) {
 function match(text, query) {
   return text.toLowerCase().includes(query.toLowerCase());
 }
+const termTokenDefinition = {
+  type: TERM_TOKEN_TYPE,
+  icon: 'title',
+  title: 'Search for this text'
+};
 function splitOnQuotes(str) {
   if (first(str) === "'" && last(str) === "'") {
     return [str];
@@ -228,4 +239,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, tokenToOption, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, TOKEN_CLOSE_SELECTOR, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, termTokenDefinition, tokenToOption, wrapTokenInQuotes };

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

@@ -130,7 +130,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-display-flex gl-flex-wrap-nowrap gl-align-items-flex-start gl-w-full"},[_c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.handleLeftArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd.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.handleDelete.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,"tab",9,$event.key,"Tab")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();return _vm.handleTab.apply(null, arguments)}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",function(){return [_c('span',[_vm._v("\n            "+_vm._s(token.name)+"\n          ")])]},{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2),_vm._v(" "),(_vm.showClearAllButton)?_c('div',{staticClass:"gl-ml-3 gl-p-1"},[_c('gl-button',{attrs:{"size":"small","aria-label":"Clear all","icon":"clear","category":"tertiary","data-testid":"clear-all-button"},on:{"click":function($event){$event.stopPropagation();return _vm.$emit('clear-all')}}})],1):_vm._e()])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-display-flex gl-flex-nowrap gl-align-items-flex-start gl-w-full"},[_c('div',{ref:"tokenContainer",staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full",attrs:{"role":"listbox","aria-multiselectable":"false","aria-orientation":"horizontal","aria-invalid":_vm.state === false && 'true'},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.handleLeftArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.handleRightArrow.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }return _vm.handleHome.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }return _vm.handleEnd.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.handleDelete.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,"tab",9,$event.key,"Tab")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();return _vm.handleTab.apply(null, arguments)}]}},[_vm._l((_vm.tokens),function(token,index){return _c('div',{key:token.id,ref:"tokens",refInFor:true,staticClass:"gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none",attrs:{"data-token-id":token.id,"role":"option","tabindex":"-1"},on:{"focus":function($event){_vm.bindFocusEvent ? _vm.handleTokenFocus(index) : null;}}},[_c('gl-token',{staticClass:"gl-cursor-default",class:token.class,style:(token.style),attrs:{"view-only":_vm.viewOnly},on:{"close":function($event){return _vm.handleClose(token)}}},[_vm._t("token-content",function(){return [_c('span',[_vm._v("\n            "+_vm._s(token.name)+"\n          ")])]},{"token":token})],2)],1)}),_vm._v(" "),_vm._t("text-input")],2),_vm._v(" "),(_vm.showClearAllButton)?_c('div',{staticClass:"gl-ml-3 gl-p-1"},[_c('gl-button',{attrs:{"size":"small","aria-label":"Clear all","icon":"clear","category":"tertiary","data-testid":"clear-all-button"},on:{"click":function($event){$event.stopPropagation();return _vm.$emit('clear-all')}}})],1):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */