@gitlab/ui 109.2.0 → 110.0.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [110.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v109.2.1...v110.0.0) (2025-03-07)
+
+
+### Features
+
+* **charts:** Removes GlChartTooltip component from published package ([99517f4](https://gitlab.com/gitlab-org/gitlab-ui/commit/99517f418f6b9116a724eba247dc004403557a77))
+
+
+### BREAKING CHANGES
+
+* **charts:** GlChartTooltip cannot be imported
+from '@gitlab/ui/dist/charts'
+
+## [109.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v109.2.0...v109.2.1) (2025-03-07)
+
+
+### Bug Fixes
+
+* **combobox:** Combobox ARIA labeling ([2d46733](https://gitlab.com/gitlab-org/gitlab-ui/commit/2d4673351a44c8413188dbe708a06ea973694a32))
+
 # [109.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v109.1.0...v109.2.0) (2025-03-05)
 
 

package/dist/charts.js

@@ -5,7 +5,6 @@ export { default as GlGaugeChart } from './components/charts/gauge/gauge';
 export { default as GlLineChart } from './components/charts/line/line';
 export { default as GlChartLegend } from './components/charts/legend/legend';
 export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
-export { default as GlChartTooltip } from './components/charts/tooltip/tooltip';
 export { default as GlHeatmap } from './components/charts/heatmap';
 export { default as GlColumnChart } from './components/charts/column/column';
 export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';

package/dist/components/base/dropdown/dropdown_item.js

@@ -59,6 +59,11 @@ var script = {
       type: String,
       required: false,
       default: ''
+    },
+    role: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -70,6 +75,13 @@ var script = {
       // Support 'href' and Vue Router's 'to'
       return href || to ? BDropdownItem : BDropdownItemButton;
     },
+    bootstrapComponentProps() {
+      const props = {
+        ...this.$attrs
+      };
+      if (this.role) props.role = this.role;
+      return props;
+    },
     iconColorCss() {
       return variantCssColorMap[this.iconColor] || 'gl-fill-icon-default';
     },
@@ -94,7 +106,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(_vm.bootstrapComponent,_vm._g(_vm._b({tag:"component",staticClass:"gl-dropdown-item"},'component',_vm.$attrs,false),_vm.$listeners),[(_vm.shouldShowCheckIcon)?_c('gl-icon',{class:['gl-dropdown-item-check-icon', { 'gl-invisible': !_vm.isChecked }, _vm.checkedClasses],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}):_vm._e(),_vm._v(" "),(_vm.iconName)?_c('gl-icon',{class:['gl-dropdown-item-icon', _vm.iconColorCss],attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),(_vm.avatarUrl)?_c('gl-avatar',{attrs:{"size":32,"src":_vm.avatarUrl}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2),_vm._v(" "),(_vm.secondaryText)?_c('p',{staticClass:"gl-dropdown-item-text-secondary"},[_vm._v(_vm._s(_vm.secondaryText))]):_vm._e()]),_vm._v(" "),(_vm.iconRightName)?_c('gl-button',{attrs:{"size":"small","icon":_vm.iconRightName,"aria-label":_vm.iconRightAriaLabel || _vm.iconRightName},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleClickIconRight.apply(null, arguments)}}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.bootstrapComponent,_vm._g(_vm._b({tag:"component",staticClass:"gl-dropdown-item"},'component',_vm.bootstrapComponentProps,false),_vm.$listeners),[(_vm.shouldShowCheckIcon)?_c('gl-icon',{class:['gl-dropdown-item-check-icon', { 'gl-invisible': !_vm.isChecked }, _vm.checkedClasses],attrs:{"name":"mobile-issue-close","data-testid":"dropdown-item-checkbox"}}):_vm._e(),_vm._v(" "),(_vm.iconName)?_c('gl-icon',{class:['gl-dropdown-item-icon', _vm.iconColorCss],attrs:{"name":_vm.iconName}}):_vm._e(),_vm._v(" "),(_vm.avatarUrl)?_c('gl-avatar',{attrs:{"size":32,"src":_vm.avatarUrl}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-dropdown-item-text-wrapper"},[_c('p',{staticClass:"gl-dropdown-item-text-primary"},[_vm._t("default")],2),_vm._v(" "),(_vm.secondaryText)?_c('p',{staticClass:"gl-dropdown-item-text-secondary"},[_vm._v(_vm._s(_vm.secondaryText))]):_vm._e()]),_vm._v(" "),(_vm.iconRightName)?_c('gl-button',{attrs:{"size":"small","icon":_vm.iconRightName,"aria-label":_vm.iconRightAriaLabel || _vm.iconRightName},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.handleClickIconRight.apply(null, arguments)}}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_combobox/form_combobox.js

@@ -68,12 +68,13 @@ var script = {
       arrowCounter: -1,
       userDismissedResults: false,
       suggestionsId: uniqueId('token-suggestions-'),
-      inputId: uniqueId('token-input-')
+      inputId: uniqueId('token-input-'),
+      dropdownItemComponent: GlDropdownItem
     };
   },
   computed: {
-    ariaExpanded() {
-      return this.showSuggestions.toString();
+    isExpanded() {
+      return this.showSuggestions && !this.userDismissedResults;
     },
     showAutocomplete() {
       return this.showSuggestions ? 'off' : 'on';
@@ -140,6 +141,14 @@ var script = {
       this.arrowCounter = newCount;
       this.focusItem(newCount);
     },
+    onArrowLeft() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
+    onArrowRight() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
     onEsc() {
       if (!this.showSuggestions) {
         this.$emit('input', '');
@@ -195,7 +204,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-form-combobox dropdown",attrs:{"role":"combobox","aria-owns":_vm.suggestionsId,"aria-expanded":_vm.ariaExpanded}},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"searchbox","autocomplete":_vm.showAutocomplete,"aria-autocomplete":"list","aria-controls":_vm.suggestionsId,"aria-haspopup":"listbox","autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions.apply(null, arguments)}]}})],1),_vm._v(" "),_c('ul',{directives:[{name:"show",rawName:"v-show",value:(_vm.showSuggestions && !_vm.userDismissedResults),expression:"showSuggestions && !userDismissedResults"}],ref:"suggestionsMenu",staticClass:"dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)}]}},[_c('li',{staticClass:"show-dropdown gl-overflow-y-auto"},[_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"role":"option","aria-selected":i === _vm.arrowCounter,"tabindex":"-1"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",function(){return [_vm._v(_vm._s(result))]},{"item":result})],2)}),1)]),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider'):_vm._e(),_vm._v(" "),_c('li',[_c('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"role":"option","aria-selected":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",function(){return [_vm._v(_vm._s(action.label))]},{"item":action})],2)}),1)])],1)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-form-combobox dropdown"},[_c('gl-form-group',{attrs:{"label":_vm.labelText,"label-for":_vm.inputId,"label-sr-only":_vm.labelSrOnly}},[_c('gl-form-input',{ref:"input",attrs:{"id":_vm.inputId,"value":_vm.displayedValue,"type":"text","role":"combobox","aria-expanded":String(_vm.isExpanded),"aria-controls":_vm.suggestionsId,"aria-owns":_vm.isExpanded ? _vm.suggestionsId : null,"aria-autocomplete":"list","aria-haspopup":"listbox","aria-activedescendant":_vm.arrowCounter >= 0 ? (_vm.suggestionsId + "-option-" + _vm.arrowCounter) : undefined,"autofocus":_vm.autofocus,"placeholder":_vm.placeholder},on:{"input":_vm.onEntry,"focus":_vm.resetCounter,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},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.onArrowLeft.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.onArrowRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.closeSuggestions.apply(null, arguments)}]}})],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isExpanded),expression:"isExpanded"}],ref:"suggestionsMenu",staticClass:"dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0",attrs:{"id":_vm.suggestionsId,"data-testid":"combobox-dropdown","role":"listbox"},on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.onArrowDown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.onArrowUp.apply(null, arguments)},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.onArrowLeft.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.onArrowRight.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onEsc.apply(null, arguments)}]}},[_c('div',{staticClass:"gl-overflow-y-auto"},_vm._l((_vm.results),function(result,i){return _c('gl-dropdown-item',{key:i,ref:"results",refInFor:true,attrs:{"id":(_vm.suggestionsId + "-option-" + i),"active":i === _vm.arrowCounter,"tabindex":"-1","role":"option","data-testid":"combobox-result"},on:{"click":function($event){return _vm.selectToken(result)}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectToken(result)}}},[_vm._t("result",function(){return [_vm._v(_vm._s(result))]},{"item":result})],2)}),1),_vm._v(" "),(_vm.resultsLength > 0 && _vm.actionList.length > 0)?_c('gl-dropdown-divider',{attrs:{"aria-hidden":"true"}}):_vm._e(),_vm._v(" "),_c('div',_vm._l((_vm.actionList),function(action,i){return _c('gl-dropdown-item',{key:i + _vm.resultsLength,attrs:{"id":(_vm.suggestionsId + "-option-" + (i + _vm.resultsLength)),"active":i + _vm.resultsLength === _vm.arrowCounter,"tabindex":"-1","role":"option","data-testid":"combobox-action"},on:{"click":function($event){return _vm.selectAction(action)},"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.onArrowLeft.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.onArrowRight.apply(null, arguments)}]},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.selectAction(action)}}},[_vm._t("action",function(){return [_vm._v(_vm._s(action.label))]},{"item":action})],2)}),1)],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/area/area.js

@@ -5,7 +5,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/bar/bar.js

@@ -5,9 +5,9 @@ import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/column/column.js

@@ -4,7 +4,7 @@ import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import Chart from '../chart/chart';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -3,9 +3,9 @@ import { GRAY_200 } from '../../../tokens/build/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/charts/heatmap/heatmap.js

@@ -4,10 +4,10 @@ import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/line/line.js

@@ -6,7 +6,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/{tooltip → shared/tooltip}/tooltip.js

@@ -1,10 +1,10 @@
 import * as echarts from 'echarts';
-import { uid, debounceByAnimationFrame } from '../../../utils/utils';
-import GlPopover from '../../base/popover/popover';
-import { popoverPlacements } from '../../../utils/constants';
-import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
+import GlPopover from '../../../base/popover/popover';
+import { popoverPlacements } from '../../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
+import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/{shared_components/charts → charts/shared/tooltip/tooltip_default_format}/tooltip_default_format.js

@@ -1,4 +1,4 @@
-import SeriesLabel from '../../charts/series_label/series_label';
+import SeriesLabel from '../../../series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/charts/sparkline/sparkline.js

@@ -5,7 +5,7 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
 import Chart from '../chart/chart';
-import ChartTooltip from '../tooltip/tooltip';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //

package/dist/components/charts/stacked_column/stacked_column.js

@@ -3,10 +3,10 @@ import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, grid
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
-import ChartTooltip from '../tooltip/tooltip';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
+import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const yAxisDefaults = {

package/dist/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.js

@@ -13,7 +13,8 @@ const props = makePropsConfigurable({
   activeClass: makeProp(PROP_TYPE_STRING, 'active'),
   buttonClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  variant: makeProp(PROP_TYPE_STRING)
+  variant: makeProp(PROP_TYPE_STRING),
+  role: makeProp(PROP_TYPE_STRING, 'menuitem')
 }, NAME_DROPDOWN_ITEM_BUTTON);
 
 // --- Main component ---
@@ -36,9 +37,10 @@ const BDropdownItemButton = /*#__PURE__*/extend({
     computedAttrs() {
       return {
         ...this.bvAttrs,
-        role: 'menuitem',
+        role: this.role,
         type: 'button',
-        disabled: this.disabled
+        disabled: this.disabled,
+        'aria-selected': this.active ? 'true' : null
       };
     }
   },

package/package.json

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

package/src/charts.js

@@ -5,7 +5,6 @@ export { default as GlGaugeChart } from './components/charts/gauge/gauge.vue';
 export { default as GlLineChart } from './components/charts/line/line.vue';
 export { default as GlChartLegend } from './components/charts/legend/legend.vue';
 export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label.vue';
-export { default as GlChartTooltip } from './components/charts/tooltip/tooltip.vue';
 export { default as GlHeatmap } from './components/charts/heatmap';
 export { default as GlColumnChart } from './components/charts/column/column.vue';
 export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column.vue';

package/src/components/base/dropdown/dropdown_item.vue

@@ -60,6 +60,11 @@ export default {
       required: false,
       default: '',
     },
+    role: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     bootstrapComponent() {
@@ -67,6 +72,11 @@ export default {
       // Support 'href' and Vue Router's 'to'
       return href || to ? BDropdownItem : BDropdownItemButton;
     },
+    bootstrapComponentProps() {
+      const props = { ...this.$attrs };
+      if (this.role) props.role = this.role;
+      return props;
+    },
     iconColorCss() {
       return variantCssColorMap[this.iconColor] || 'gl-fill-icon-default';
     },
@@ -90,7 +100,12 @@ export default {
 </script>
 
 <template>
-  <component :is="bootstrapComponent" class="gl-dropdown-item" v-bind="$attrs" v-on="$listeners">
+  <component
+    :is="bootstrapComponent"
+    class="gl-dropdown-item"
+    v-bind="bootstrapComponentProps"
+    v-on="$listeners"
+  >
     <gl-icon
       v-if="shouldShowCheckIcon"
       name="mobile-issue-close"

package/src/components/base/form/form_combobox/form_combobox.vue

@@ -70,11 +70,12 @@ export default {
       userDismissedResults: false,
       suggestionsId: uniqueId('token-suggestions-'),
       inputId: uniqueId('token-input-'),
+      dropdownItemComponent: GlDropdownItem,
     };
   },
   computed: {
-    ariaExpanded() {
-      return this.showSuggestions.toString();
+    isExpanded() {
+      return this.showSuggestions && !this.userDismissedResults;
     },
     showAutocomplete() {
       return this.showSuggestions ? 'off' : 'on';
@@ -149,6 +150,14 @@ export default {
       this.arrowCounter = newCount;
       this.focusItem(newCount);
     },
+    onArrowLeft() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
+    onArrowRight() {
+      // don't prevent default, we want the cursor to move
+      this.$refs.input.focus();
+    },
     onEsc() {
       if (!this.showSuggestions) {
         this.$emit('input', '');
@@ -202,79 +211,88 @@ export default {
   },
 };
 </script>
+
 <template>
-  <div
-    class="gl-form-combobox dropdown"
-    role="combobox"
-    :aria-owns="suggestionsId"
-    :aria-expanded="ariaExpanded"
-  >
+  <div class="gl-form-combobox dropdown">
     <gl-form-group :label="labelText" :label-for="inputId" :label-sr-only="labelSrOnly">
       <gl-form-input
         :id="inputId"
+        ref="input"
         :value="displayedValue"
         type="text"
-        role="searchbox"
-        :autocomplete="showAutocomplete"
-        aria-autocomplete="list"
+        role="combobox"
+        :aria-expanded="String(isExpanded)"
         :aria-controls="suggestionsId"
+        :aria-owns="isExpanded ? suggestionsId : null"
+        aria-autocomplete="list"
         aria-haspopup="listbox"
+        :aria-activedescendant="
+          arrowCounter >= 0 ? `${suggestionsId}-option-${arrowCounter}` : undefined
+        "
         :autofocus="autofocus"
         :placeholder="placeholder"
         @input="onEntry"
         @focus="resetCounter"
         @keydown.down="onArrowDown"
         @keydown.up="onArrowUp"
+        @keydown.left="onArrowLeft"
+        @keydown.right="onArrowRight"
         @keydown.esc.stop="onEsc"
         @keydown.tab="closeSuggestions"
       />
     </gl-form-group>
 
-    <ul
-      v-show="showSuggestions && !userDismissedResults"
+    <div
+      v-show="isExpanded"
       :id="suggestionsId"
       ref="suggestionsMenu"
       data-testid="combobox-dropdown"
+      role="listbox"
       class="dropdown-menu gl-form-combobox-inner gl-mb-0 gl-flex gl-w-full gl-list-none gl-flex-col gl-border-dropdown gl-bg-dropdown gl-pl-0"
       @keydown.down="onArrowDown"
       @keydown.up="onArrowUp"
+      @keydown.left="onArrowLeft"
+      @keydown.right="onArrowRight"
       @keydown.esc.stop="onEsc"
     >
-      <li class="show-dropdown gl-overflow-y-auto">
-        <ul class="gl-mb-0 gl-list-none gl-pl-0">
-          <gl-dropdown-item
-            v-for="(result, i) in results"
-            ref="results"
-            :key="i"
-            role="option"
-            :aria-selected="i === arrowCounter"
-            tabindex="-1"
-            @click="selectToken(result)"
-            @keydown.enter.native="selectToken(result)"
-          >
-            <!-- @slot The suggestion result item to display. -->
-            <slot name="result" :item="result">{{ result }}</slot>
-          </gl-dropdown-item>
-        </ul>
-      </li>
-      <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" />
-      <li>
-        <ul class="gl-mb-0 gl-list-none gl-pl-0">
-          <gl-dropdown-item
-            v-for="(action, i) in actionList"
-            :key="i + resultsLength"
-            role="option"
-            :aria-selected="i + resultsLength === arrowCounter"
-            tabindex="-1"
-            data-testid="combobox-action"
-            @click="selectAction(action)"
-            @keydown.enter.native="selectAction(action)"
-          >
-            <!-- @slot The action item to display. -->
-            <slot name="action" :item="action">{{ action.label }}</slot>
-          </gl-dropdown-item>
-        </ul>
-      </li>
-    </ul>
+      <div class="gl-overflow-y-auto">
+        <gl-dropdown-item
+          v-for="(result, i) in results"
+          :id="`${suggestionsId}-option-${i}`"
+          ref="results"
+          :key="i"
+          :active="i === arrowCounter"
+          tabindex="-1"
+          role="option"
+          data-testid="combobox-result"
+          @click="selectToken(result)"
+          @keydown.enter.native="selectToken(result)"
+        >
+          <!-- @slot The suggestion result item to display. -->
+          <slot name="result" :item="result">{{ result }}</slot>
+        </gl-dropdown-item>
+      </div>
+
+      <gl-dropdown-divider v-if="resultsLength > 0 && actionList.length > 0" aria-hidden="true" />
+
+      <div>
+        <gl-dropdown-item
+          v-for="(action, i) in actionList"
+          :id="`${suggestionsId}-option-${i + resultsLength}`"
+          :key="i + resultsLength"
+          :active="i + resultsLength === arrowCounter"
+          tabindex="-1"
+          role="option"
+          data-testid="combobox-action"
+          @click="selectAction(action)"
+          @keydown.enter.native="selectAction(action)"
+          @keydown.left="onArrowLeft"
+          @keydown.right="onArrowRight"
+        >
+          <!-- @slot The action item to display. -->
+          <slot name="action" :item="action">{{ action.label }}</slot>
+        </gl-dropdown-item>
+      </div>
+    </div>
   </div>
 </template>

package/src/components/charts/area/area.vue

@@ -41,7 +41,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlAreaChart',

package/src/components/charts/bar/bar.vue

@@ -7,9 +7,9 @@ import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 /**
  * `nameGap` in charts/config is set to 50 but it is not

package/src/components/charts/column/column.vue

@@ -15,7 +15,7 @@ import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/cons
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const yAxisDefaults = {
   ...yAxis,

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -8,9 +8,9 @@ import {
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlDiscreteScatterChart',

package/src/components/charts/heatmap/heatmap.vue

@@ -6,10 +6,10 @@ import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const defaultOptions = {
   visualMap: {

package/src/components/charts/line/line.vue

@@ -44,7 +44,7 @@ import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 export default {
   name: 'GlLineChart',

package/src/components/charts/{tooltip → shared/tooltip}/tooltip.vue

@@ -1,12 +1,13 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
-import { uid, debounceByAnimationFrame } from '../../../utils/utils';
-import GlPopover from '../../base/popover/popover.vue';
-import { popoverPlacements } from '../../../utils/constants';
-import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
-import { getTooltipTitle, getTooltipContent } from '../../../utils/charts/config';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import { uid, debounceByAnimationFrame } from '../../../../utils/utils';
+import GlPopover from '../../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../../utils/constants';
+import { TOOLTIP_LEFT_OFFSET, TOOLTIP_TOP_OFFSET } from '../../../../utils/charts/constants';
+import { getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+
+import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
 
 export default {
   name: 'GlChartTooltip',

package/src/components/{shared_components/charts → charts/shared/tooltip/tooltip_default_format}/tooltip_default_format.vue

@@ -1,5 +1,5 @@
 <script>
-import SeriesLabel from '../../charts/series_label/series_label.vue';
+import SeriesLabel from '../../../series_label/series_label.vue';
 
 export default {
   name: 'TooltipDefaultFormat',

package/src/components/charts/sparkline/sparkline.vue

@@ -11,7 +11,7 @@ import {
 } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES } from '../../../utils/charts/constants';
 import Chart from '../chart/chart.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;

package/src/components/charts/stacked_column/stacked_column.vue

@@ -22,10 +22,10 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
+import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import ChartTooltip from '../tooltip/tooltip.vue';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
+import ChartTooltip from '../shared/tooltip/tooltip.vue';
 
 const yAxisDefaults = {
   ...yAxis,

package/src/scss/components.scss

@@ -69,8 +69,8 @@
 @import '../components/charts/legend/legend';
 @import '../components/charts/series_label/series_label';
 @import '../components/charts/single_stat/single_stat';
-@import '../components/charts/tooltip/tooltip';
-@import '../components/shared_components/charts/tooltip_default_format';
+@import '../components/charts/shared/tooltip/tooltip';
+@import '../components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
 @import '../components/utilities/truncate_text/truncate_text';
 @import '../components/base/new_dropdowns/dropdown';

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item-button.js

@@ -18,7 +18,8 @@ export const props = makePropsConfigurable(
     activeClass: makeProp(PROP_TYPE_STRING, 'active'),
     buttonClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-    variant: makeProp(PROP_TYPE_STRING)
+    variant: makeProp(PROP_TYPE_STRING),
+    role: makeProp(PROP_TYPE_STRING, 'menuitem')
   },
   NAME_DROPDOWN_ITEM_BUTTON
 )
@@ -42,9 +43,10 @@ export const BDropdownItemButton = /*#__PURE__*/ extend({
     computedAttrs() {
       return {
         ...this.bvAttrs,
-        role: 'menuitem',
+        role: this.role,
         type: 'button',
-        disabled: this.disabled
+        disabled: this.disabled,
+        'aria-selected': this.active ? 'true' : null
       }
     }
   },