@gitlab/ui 60.2.0 → 61.1.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [61.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.0.0...v61.1.0) (2023-04-13)
+
+
+### Features
+
+* **Banner:** Use CloseButton ([f4ddd66](https://gitlab.com/gitlab-org/gitlab-ui/commit/f4ddd66771f46607ff657f2bf4bc268f666c51ec))
+* **Banner:** Use CloseButton ([d173aed](https://gitlab.com/gitlab-org/gitlab-ui/commit/d173aed03b4400196aa9711e118b57047e707a14))
+
+# [61.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v60.2.0...v61.0.0) (2023-04-12)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Don't prevent tabbing past component ([27cdbf3](https://gitlab.com/gitlab-org/gitlab-ui/commit/27cdbf3d67cebebc9b6a2177d3ed664ac44ddee7))
+
+
+### Features
+
+* **GlFilteredSearch:** Improve option interactions ([d2ada9d](https://gitlab.com/gitlab-org/gitlab-ui/commit/d2ada9d7c179d255e4845e7b237740d1471166b4))
+
+
+### BREAKING CHANGES
+
+* **GlFilteredSearch:** `GlFilteredSearch`/`GlFilteredSearchTerm`'s `title`
+slot and `GlFilteredSearchToken`'s `title-option` slot have been
+removed. Similar functionality is available by setting the
+`optionComponent` property on the given token object passed to
+`GlFilteredSearch`'s `available-tokens` prop. The component will be
+given an `option` prop, which will be the option object representing the
+token.
+
 # [60.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v60.1.0...v60.2.0) (2023-04-12)
 
 

package/dist/components/base/banner/banner.js

@@ -1,4 +1,5 @@
 import { bannerVariants } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import GlCard from '../card/card';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -6,6 +7,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlBanner',
   components: {
+    CloseButton,
     GlButton,
     GlCard
   },
@@ -51,6 +53,14 @@ var script = {
         return bannerVariants.includes(value);
       }
     },
+    /**
+     * Dismiss button's aria-label.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss'
+    },
     /**
      * Removes the border for banners embedded in content.
      */
@@ -91,7 +101,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-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('gl-button',{staticClass:"gl-banner-close",attrs:{"variant":_vm.isIntroducing ? 'confirm' : 'default',"category":"tertiary","size":"small","icon":"close","aria-label":"Close banner"},on:{"click":_vm.handleClose}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',{attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -323,9 +323,6 @@ var script = {
        * @property {array} tokens
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
-    },
-    hasTitleSlot() {
-      return Boolean(this.$scopedSlots.title);
     }
   }
 };
@@ -334,7 +331,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},scopedSlots:_vm._u([(_vm.hasTitleSlot() && _vm.getTokenComponent(token.type).name === 'GlFilteredSearchTerm')?{key:"title",fn:function(title){return [_vm._t("title",null,null,title)]}}:null],null,true),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)},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.js

@@ -54,7 +54,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-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","tabindex":"-1","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue.apply(null, arguments)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,5 +1,8 @@
+import { stepIndexAndWrap } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const DEFER_TO_INITIAL_VALUE = -1;
+const NO_ACTIVE_ITEM = -2;
 var script = {
   name: 'GlFilteredSearchSuggestionList',
   inject: ['suggestionsListClass'],
@@ -20,21 +23,29 @@ var script = {
   },
   data() {
     return {
-      activeIdx: -1,
+      activeIdx: DEFER_TO_INITIAL_VALUE,
       registeredItems: []
     };
   },
   computed: {
+    initialActiveIdx() {
+      return this.registeredItems.findIndex(item => this.valuesMatch(item.value, this.initialValue));
+    },
+    initialActiveItem() {
+      return this.registeredItems[this.initialActiveIdx];
+    },
     activeItem() {
-      return this.activeIdx > -1 && this.activeIdx < this.registeredItems.length ? this.registeredItems[this.activeIdx] : null;
+      if (this.activeIdx === NO_ACTIVE_ITEM) return null;
+      if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
+      return this.registeredItems[this.activeIdx];
     },
     listClasses() {
       return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
     }
   },
   watch: {
-    initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex(item => this.valuesMatch(item.value, newValue));
+    initialValue() {
+      this.activeIdx = DEFER_TO_INITIAL_VALUE;
     }
   },
   methods: {
@@ -44,31 +55,34 @@ var script = {
     },
     register(item) {
       this.registeredItems.push(item);
-      if (this.valuesMatch(item.value, this.initialValue)) {
-        this.activeIdx = this.registeredItems.length - 1;
-      }
     },
     unregister(item) {
       const idx = this.registeredItems.indexOf(item);
       if (idx !== -1) {
         this.registeredItems.splice(idx, 1);
         if (idx === this.activeIdx) {
-          this.activeIdx = -1;
+          this.activeIdx = DEFER_TO_INITIAL_VALUE;
         }
       }
     },
     nextItem() {
-      if (this.activeIdx < this.registeredItems.length) {
-        this.activeIdx += 1;
-      } else {
-        this.activeIdx = 0;
-      }
+      this.stepItem(1, this.registeredItems.length - 1);
     },
     prevItem() {
-      if (this.activeIdx >= 0) {
-        this.activeIdx -= 1;
+      this.stepItem(-1, 0);
+    },
+    stepItem(direction, endIdx) {
+      if (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 {
-        this.activeIdx = this.registeredItems.length - 1;
+        const index = this.activeIdx === DEFER_TO_INITIAL_VALUE ?
+        // Currently active item is set by initialValue (i.e., text input matching),
+        // so step relative to that.
+        this.initialActiveIdx :
+        // Otherwise, step relative to the explicitly (via up/down arrows) activated item.
+        this.activeIdx;
+        this.activeIdx = stepIndexAndWrap(index, direction, this.registeredItems.length);
       }
     },
     getValue() {

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

@@ -1,13 +1,11 @@
-import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { match, tokenToOption, 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
+    GlFilteredSearchTokenSegment
   },
   inheritAttrs: false,
   props: {
@@ -79,7 +77,7 @@ var script = {
   },
   computed: {
     suggestedTokens() {
-      return this.availableTokens.filter(item => item.title.toLowerCase().includes(this.value.data.toLowerCase()));
+      return this.availableTokens.filter(token => match(token.title, this.value.data)).map(tokenToOption);
     },
     internalValue: {
       get() {
@@ -118,7 +116,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:{"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},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:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._t("title",function(){return [_vm._v(" "+_vm._s(item.title)+" ")]},null,{ value: item.title })],2)})},proxy:true},{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}],null,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":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_staticRenderFns__ = [];
 
   /* style */

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

@@ -2,7 +2,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { createTerm } from './filtered_search_utils';
+import { tokenToOption, createTerm } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const SEGMENT_TITLE = 'TYPE';
@@ -12,7 +12,7 @@ const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 const DEFAULT_OPERATORS = [{
   value: '=',
   description: 'is',
-  default: 'true'
+  default: true
 }, {
   value: '!=',
   description: 'is not'
@@ -99,10 +99,7 @@ var script = {
       return this.tokenValue.data !== '' || this.isSegmentActive(SEGMENT_DATA);
     },
     availableTokensWithSelf() {
-      return [this.config, ...this.availableTokens.filter(t => t !== this.config)].map(t => ({
-        ...t,
-        value: t.title
-      }));
+      return [this.config, ...this.availableTokens.filter(token => token !== this.config)].map(tokenToOption);
     },
     operatorDescription() {
       const operator = this.operators.find(op => op.value === this.tokenValue.operator);
@@ -210,8 +207,13 @@ var script = {
         this.$emit('replace', createTerm(this.config.title));
       }
     },
-    replaceToken(newTitle) {
-      const newTokenConfig = this.availableTokens.find(t => t.title === newTitle);
+    replaceToken(newType) {
+      const newTokenConfig = this.availableTokens.find(_ref => {
+        let {
+          type
+        } = _ref;
+        return type === newType;
+      });
       if (newTokenConfig === this.config) {
         this.$nextTick(() => {
           /**
@@ -233,12 +235,12 @@ var script = {
         });
       }
     },
-    handleOperatorKeydown(evt, _ref) {
+    handleOperatorKeydown(evt, _ref2) {
       let {
         inputValue,
         suggestedValue,
         applySuggestion
-      } = _ref;
+      } = _ref2;
       const {
         key
       } = evt;
@@ -247,10 +249,10 @@ var script = {
         return;
       }
       const potentialValue = `${inputValue}${key}`;
-      if (key.length === 1 && !this.operators.find(_ref2 => {
+      if (key.length === 1 && !this.operators.find(_ref3 => {
         let {
           value
-        } = _ref2;
+        } = _ref3;
         return value.startsWith(potentialValue);
       })) {
         if (this.tokenValue.data === '') {
@@ -305,9 +307,6 @@ var script = {
         event.stopPropagation();
         this.$emit('destroy');
       }
-    },
-    hasTitleOptionSlot() {
-      return Boolean(this.$scopedSlots['title-option']);
     }
   }
 };
@@ -322,9 +321,9 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     'gl-cursor-default': _vm.viewOnly,
   },attrs:{"data-testid":"filtered-search-token"}},[_c('gl-filtered-search-token-segment',{key:"title-segment",attrs:{"value":_vm.config.title,"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_TITLE),"cursor-position":_vm.intendedCursorPosition,"options":_vm.availableTokensWithSelf,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_TITLE)},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.replaceToken,"backspace":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"previous":function($event){return _vm.$emit('previous')},"next":_vm.activateNextOperatorSegment},scopedSlots:_vm._u([{key:"view",fn:function(ref){
   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.hasTitleOptionSlot())?{key:"option",fn:function(){return [_vm._t("title-option")]},proxy:true}:null],null,true)}),_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,"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){
+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,"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)},"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},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){
   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

@@ -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, wrapTokenInQuotes } from './filtered_search_utils';
+import { 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
@@ -60,6 +60,11 @@ var script = {
       required: false,
       default: false
     },
+    isTerm: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     label: {
       type: String,
       required: false,
@@ -78,7 +83,7 @@ var script = {
     optionTextField: {
       type: String,
       required: false,
-      default: 'value'
+      default: 'title'
     },
     customInputKeydownHandler: {
       type: Function,
@@ -140,16 +145,18 @@ var script = {
     },
     inputValue: {
       get() {
+        if (this.isTerm) {
+          return this.nonMultipleValue;
+        }
         return this.matchingOption ? this.matchingOption[this.optionTextField] : this.nonMultipleValue;
       },
-      set(v) {
-        var _this$getMatchingOpti, _this$getMatchingOpti2;
+      set(inputValue) {
         /**
          * 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);
+        this.$emit('input', inputValue);
       }
     },
     hasOptionsOrSuggestions() {
@@ -158,7 +165,7 @@ var script = {
       return ((_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.length) || isSlotNotEmpty(this.$slots.suggestions);
     },
     defaultSuggestedValue() {
-      var _ref;
+      var _this$options$;
       if (!this.options) {
         return this.nonMultipleValue;
       }
@@ -168,8 +175,11 @@ var script = {
         });
         return option === null || option === void 0 ? void 0 : option.value;
       }
-      const defaultSuggestion = this.options.find(op => op.default);
-      return (_ref = defaultSuggestion !== null && defaultSuggestion !== void 0 ? defaultSuggestion : this.options[0]) === null || _ref === void 0 ? void 0 : _ref.value;
+      const defaultOption = this.options.find(op => op.default);
+      if (defaultOption) {
+        return defaultOption.value;
+      }
+      return this.isTerm ? undefined : (_this$options$ = this.options[0]) === null || _this$options$ === void 0 ? void 0 : _this$options$.value;
     },
     containerAttributes() {
       return this.isLastToken && !this.active && this.currentValue.length > 1 && this.searchInputAttributes;
@@ -187,13 +197,12 @@ var script = {
       }
     },
     inputValue(newValue) {
-      var _this$getMatchingOpti3, _this$getMatchingOpti4;
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;
       }
       const [firstWord, ...otherWords] = splitOnQuotes(newValue).filter((w, idx, arr) => Boolean(w) || idx === arr.length - 1);
-      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);
+      this.$emit('input', firstWord);
       if (otherWords.length) {
         /**
          * Emitted when Space appears in token segment value
@@ -213,14 +222,14 @@ var script = {
         e.preventDefault();
       }
     },
-    getMatchingOptionForInputValue(v) {
+    getMatchingOptionForInputValue(inputValue) {
       var _this$options3;
       let {
         loose
       } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
         loose: false
       };
-      return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(o => loose ? o[this.optionTextField].startsWith(v) : [this.optionTextField] === v);
+      return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(option => loose ? match(option[this.optionTextField], inputValue) : option[this.optionTextField] === inputValue);
     },
     activate() {
       this.fallbackValue = this.value;
@@ -243,7 +252,7 @@ var script = {
     },
     deactivate() {
       var _this$matchingOption;
-      if (!this.options) {
+      if (!this.options || this.isTerm) {
         return;
       }
       if (((_this$matchingOption = this.matchingOption) === null || _this$matchingOption === void 0 ? void 0 : _this$matchingOption.value) !== this.value) {
@@ -359,7 +368,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 [_vm._v(" "+_vm._s(option[_vm.optionTextField])+" ")]},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.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/components/base/filtered_search/filtered_search_utils.js

@@ -1,6 +1,7 @@
 import first from 'lodash/first';
 import last from 'lodash/last';
 import isString from 'lodash/isString';
+import { modulo } from '../../../utils/number_utils';
 
 const TERM_TOKEN_TYPE = 'filtered-search-term';
 const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
@@ -37,6 +38,69 @@ function needDenormalization(tokens) {
   assertValidTokens(tokens);
   return tokens.some(t => typeof t === 'string' || !t.id);
 }
+
+/**
+ * Given an initial index, step size and array length, returns an index that is
+ * within the array bounds (unless step is 0; see † below).
+ *
+ * The step can be any positive or negative integer, including zero.
+ *
+ * An out-of-bounds index is considered 'uninitialised', and is handled
+ * specially. For instance, the 'next' index of 'uninitialised' is the first
+ * index:
+ *
+ *     stepIndexAndWrap(-1, 1, 5) === 0
+ *
+ * The 'previous' index of 'uninitialised' is the last index:
+ *
+ *     stepIndexAndWrap(-1, -1, 5) === 4
+ *
+ * †: If step is 0, the index is returned as-is, which may be out-of-bounds.
+ *
+ * @param {number} index The initial index.
+ * @param {number} step The amount to step by (positive or negative).
+ * @param {number} length The length of the array.
+ * @returns {number}
+ */
+function stepIndexAndWrap(index, step, length) {
+  if (step === 0) return index;
+  let start;
+  const indexInRange = index >= 0 && index < length;
+  if (indexInRange) {
+    // Step from the valid index.
+    start = index;
+  } else if (step > 0) {
+    // Step forwards from the beginning of the array.
+    start = -1;
+  } else {
+    // Step backwards from the end of the array.
+    start = length;
+  }
+  return modulo(start + step, length);
+}
+
+/**
+ * Transforms a given token definition to an option definition.
+ *
+ * @param {Object} token A token definition (see GlFilteredSearch's
+ *     availableTokens prop).
+ * @returns {Object} A option definition (see GlFilteredSearchTokenSegment's
+ *     options prop).
+ */
+function tokenToOption(_ref) {
+  let {
+    icon,
+    title,
+    type,
+    optionComponent
+  } = _ref;
+  return {
+    icon,
+    title,
+    value: type,
+    component: optionComponent
+  };
+}
 let tokenIdCounter = 0;
 const getTokenId = () => {
   const tokenId = `token-${tokenIdCounter}`;
@@ -86,6 +150,19 @@ function denormalizeTokens(inputTokens) {
   });
   return result;
 }
+
+/**
+ * Returns `true` if `text` contains `query` (case insensitive).
+ *
+ * This is used in `filter` and `find` array methods for token segment options.
+ *
+ * @param {string} text The string to look within.
+ * @param {string} query The string to find inside the text.
+ * @returns {boolean}
+ */
+function match(text, query) {
+  return text.toLowerCase().includes(query.toLowerCase());
+}
 function splitOnQuotes(str) {
   if (first(str) === "'" && last(str) === "'") {
     return [str];
@@ -151,4 +228,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, tokenToOption, wrapTokenInQuotes };

package/dist/utils/number_utils.js

@@ -24,6 +24,27 @@ const average = function () {
   return sum(...arguments) / arguments.length;
 };
 
+/**
+ * Returns the modulo of n for a divisor.
+ *
+ * Maps the integer n into the range [0, divisor) when the divisor is positive,
+ * and (divisor, 0] when the divisor is negative.
+ *
+ * This is useful when indexing into an array, to ensure you always stay within
+ * the array bounds.
+ *
+ * See https://2ality.com/2019/08/remainder-vs-modulo.html.
+ *
+ * @param {number} n The number to mod.
+ * @param {number} divisor The divisor (e.g., the length of an array).
+ * @returns {number}
+ */
+function modulo(n, divisor) {
+  const result = (n % divisor + divisor) % divisor;
+  // Never return -0.
+  return result === 0 ? 0 : result;
+}
+
 /**
  * Convert number to engineering format, using SI suffix
  * @param {Number|String} value - Number or Number-convertible String
@@ -75,4 +96,4 @@ const engineeringNotation = function (value) {
   return `${scaledMantissa}${allYourBase[scaledPower]}`;
 };
 
-export { addition, average, engineeringNotation, sum };
+export { addition, average, engineeringNotation, modulo, sum };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "60.2.0",
+  "version": "61.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",