@gitlab/ui 64.18.3 → 64.19.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [64.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.18.3...v64.19.0) (2023-07-11)
+
+
+### Features
+
+* **GlFilteredSearchToken:** Expose applySuggestion via scoped slot ([91333fd](https://gitlab.com/gitlab-org/gitlab-ui/commit/91333fd72a99fa2ccbe9be79df008c4c90dc4f4b))
+
 ## [64.18.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.18.2...v64.18.3) (2023-07-06)
 
 

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

@@ -327,7 +327,7 @@ 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("\n        "+_vm._s(inputValue)+"\n      ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"option-text-field":"value","custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},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')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},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("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
   var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : 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),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"search-input-attributes":_vm.dataSegmentInputAttributes},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)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},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(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : 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),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"search-input-attributes":_vm.dataSegmentInputAttributes},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)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"before-input",fn:function(scope){return [_vm._t("before-data-segment-input",null,null,scope)]}},{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;
 return [_vm._t("view-token",function(){return [_c('gl-token',_vm._g({staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value","view-only":_vm.viewOnly}},_vm.eventListeners),[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",function(){return [_vm._v(_vm._s(inputValue))]},null,{ inputValue: inputValue })],2)])]},null,{
           inputValue: inputValue,

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

@@ -381,7 +381,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-filtered-search-token-segment",class:{
     'gl-filtered-search-token-segment-active': _vm.active,
     'gl-cursor-text!': _vm.viewOnly,
-  },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n                "+_vm._s(option[_vm.optionTextField])+"\n              ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ inputValue: _vm.inputValue })],2)};
+  },attrs:{"data-testid":"filtered-search-token-segment"}},'div',_vm.containerAttributes,false),_vm.viewOnly ? {} : { mousedown: _vm.emitIfInactive }),[(_vm.active)?[_vm._t("before-input",null,null,{ submitValue: _vm.applySuggestion }),_vm._v(" "),(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"data-testid":"filtered-search-token-segment-input","aria-label":_vm.label,"readonly":_vm.viewOnly,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",function(){return [(option.component)?[_c(option.component,{tag:"component",attrs:{"option":option}})]:[_vm._v("\n                "+_vm._s(option[_vm.optionTextField])+"\n              ")]]},null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",function(){return [_vm._v(_vm._s(_vm.inputValue))]},null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jul 2023 11:38:55 GMT
+ * Generated on Tue, 11 Jul 2023 14:54:39 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jul 2023 11:38:55 GMT
+ * Generated on Tue, 11 Jul 2023 14:54:39 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jul 2023 11:38:55 GMT
+ * Generated on Tue, 11 Jul 2023 14:54:39 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jul 2023 11:38:55 GMT
+ * Generated on Tue, 11 Jul 2023 14:54:39 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 06 Jul 2023 11:38:55 GMT
+// Generated on Tue, 11 Jul 2023 14:54:39 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 06 Jul 2023 11:38:55 GMT
+// Generated on Tue, 11 Jul 2023 14:54:39 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.18.3",
+  "version": "64.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -85,28 +85,28 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
     "@babel/preset-react": "^7.22.5",
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.53.0",
+    "@gitlab/svgs": "3.54.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.24",
-    "@storybook/addon-docs": "7.0.24",
-    "@storybook/addon-essentials": "7.0.24",
-    "@storybook/addon-storyshots": "7.0.24",
-    "@storybook/addon-storyshots-puppeteer": "7.0.24",
-    "@storybook/addon-viewport": "7.0.24",
-    "@storybook/builder-webpack5": "7.0.24",
-    "@storybook/theming": "7.0.24",
-    "@storybook/vue": "7.0.24",
-    "@storybook/vue-webpack5": "7.0.24",
-    "@storybook/vue3": "7.0.24",
-    "@storybook/vue3-webpack5": "7.0.24",
+    "@storybook/addon-a11y": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-essentials": "7.0.26",
+    "@storybook/addon-storyshots": "7.0.26",
+    "@storybook/addon-storyshots-puppeteer": "7.0.26",
+    "@storybook/addon-viewport": "7.0.26",
+    "@storybook/builder-webpack5": "7.0.26",
+    "@storybook/theming": "7.0.26",
+    "@storybook/vue": "7.0.26",
+    "@storybook/vue-webpack5": "7.0.26",
+    "@storybook/vue3": "7.0.26",
+    "@storybook/vue3-webpack5": "7.0.26",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -118,7 +118,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "12.16.0",
+    "cypress": "12.17.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.44.0",
     "eslint-import-resolver-jest": "3.0.2",
@@ -127,9 +127,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.5.0",
-    "jest-circus": "29.5.0",
-    "jest-environment-jsdom": "29.5.0",
+    "jest": "^29.6.1",
+    "jest-circus": "29.6.1",
+    "jest-environment-jsdom": "29.6.1",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",
@@ -154,7 +154,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.0.24",
+    "storybook": "7.0.26",
     "storybook-dark-mode": "3.0.0",
     "style-dictionary": "^3.8.0",
     "stylelint": "14.9.1",

package/src/components/base/filtered_search/filtered_search.stories.js

@@ -2,6 +2,7 @@ import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlIcon from '../icon/icon.vue';
 import GlToken from '../token/token.vue';
 import GlAvatar from '../avatar/avatar.vue';
+import GlDatepicker from '../datepicker/datepicker.vue';
 import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import { makeContainer } from '../../../utils/story_decorators/container';
@@ -284,6 +285,58 @@ const LabelToken = {
   `,
 };
 
+const DateToken = {
+  name: 'DateToken',
+  __v_skip: true /* temporary workaround for @vue/compat */,
+  components: {
+    GlIcon,
+    GlDatepicker,
+    GlFilteredSearchToken,
+  },
+  props: ['value', 'active', 'viewOnly'],
+  inheritAttrs: false,
+  data() {
+    return {
+      dataSegmentInputAttributes: {
+        id: 'this-id',
+        placeholder: 'YYYY-MM-DD',
+        style: 'padding-left: 23px;',
+      },
+    };
+  },
+  methods: {
+    selectValue(value, submitValue) {
+      const date = new Date(value);
+      const offset = date.getTimezoneOffset();
+      const offsetDdate = new Date(date.getTime() - offset * 60 * 1000);
+      const dateString = offsetDdate.toISOString().split('T')[0];
+      submitValue(dateString);
+    },
+  },
+  template: `
+    <div>
+      <gl-filtered-search-token
+        :data-segment-input-attributes="dataSegmentInputAttributes"
+        v-bind="{ ...this.$props, ...this.$attrs }"
+        v-on="$listeners"
+      >
+        <template #before-data-segment-input="{ submitValue }">
+          <gl-icon
+            class="gl-text-gray-500"
+            name="calendar"
+            style="margin-right: -20px; z-index: 1; pointer-events: none;"
+          />
+          <gl-datepicker
+            class="gl-display-none!"
+            target='#this-id'
+            :container="null"
+            @input="selectValue($event, submitValue)" />
+        </template>
+      </gl-filtered-search-token>
+    </div>
+  `,
+};
+
 const tokens = [
   {
     type: 'author',
@@ -308,6 +361,16 @@ const tokens = [
       { icon: 'eye', value: 'false', title: 'No' },
     ],
   },
+  {
+    type: 'date',
+    icon: 'history',
+    title: 'Created',
+    token: DateToken,
+    operators: [
+      { value: '<', description: 'before' },
+      { value: '>', description: 'after' },
+    ],
+  },
 ];
 
 const components = {

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -1,8 +1,12 @@
+import * as Vue from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
-import { observable, nextTick } from 'vue';
+import { observable, nextTick, h } from 'vue';
 import GlFilteredSearchToken from './filtered_search_token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 
+const TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON = 'before-data-input-button';
+const TEST_APPLY_VALUE = 'Lorem-ipsum-apply';
+
 describe('Filtered search token', () => {
   let wrapper;
 
@@ -39,6 +43,23 @@ describe('Filtered search token', () => {
     });
   };
 
+  const createSlot = (testId, onClick) => {
+    // why: Vue3 has a different format for creating VNodes
+    return Vue.version.startsWith('3')
+      ? h('button', {
+          'data-testid': testId,
+          onClick,
+        })
+      : h('button', {
+          attrs: {
+            'data-testid': testId,
+          },
+          on: {
+            click: onClick,
+          },
+        });
+  };
+
   const mountComponent = (props) => {
     wrapper = mount(GlFilteredSearchToken, {
       provide: {
@@ -58,6 +79,10 @@ describe('Filtered search token', () => {
         },
       },
       propsData: { ...defaultProps, ...props },
+      scopedSlots: {
+        'before-data-segment-input': ({ submitValue }) =>
+          createSlot(TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON, () => submitValue(TEST_APPLY_VALUE)),
+      },
     });
   };
 
@@ -282,6 +307,25 @@ describe('Filtered search token', () => {
 
       expect(value).toEqual(originalValue());
     });
+
+    it('renders before-data-segment-input scoped slot which can submitValue', async () => {
+      mountComponent({ active: true, value: observable({ operator: '=', data: '' }) });
+
+      // what: Activate data segment
+      await wrapper.find('input').trigger('keydown', { key: ' ' });
+
+      expect(wrapper.emitted()).toEqual({});
+
+      const beforeDataInputButton = wrapper.find(
+        `[data-testid="${TEST_ID_BEFORE_DATA_SEGMENT_INPUT_BUTTON}"]`
+      );
+      beforeDataInputButton.trigger('click');
+
+      expect(wrapper.emitted()).toEqual({
+        complete: [[]],
+        select: [[TEST_APPLY_VALUE]],
+      });
+    });
   });
 
   describe('when multi select', () => {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -421,6 +421,9 @@ export default {
       @previous="activatePreviousOperatorSegment"
       @next="$emit('next')"
     >
+      <template #before-input="scope">
+        <slot name="before-data-segment-input" v-bind="scope"></slot>
+      </template>
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -416,6 +416,7 @@ export default {
     v-on="viewOnly ? {} : { mousedown: emitIfInactive }"
   >
     <template v-if="active">
+      <slot name="before-input" v-bind="{ submitValue: applySuggestion }"></slot>
       <input
         ref="input"
         v-bind="searchInputAttributes"
@@ -427,7 +428,6 @@ export default {
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />
-
       <portal :key="`operator-${_uid}`" :to="portalName">
         <gl-filtered-search-suggestion-list
           v-if="hasOptionsOrSuggestions"