@gitlab/ui 126.3.3 → 126.4.0

package/dist/components/base/alert/alert.js

@@ -15,6 +15,9 @@ var script = {
     GlButton
   },
   props: {
+    /**
+     * The title text to display in the alert header.
+     */
     title: {
       type: String,
       required: false,
@@ -36,6 +39,9 @@ var script = {
       required: false,
       default: () => translate('GlAlert.closeButtonTitle', 'Dismiss')
     },
+    /**
+     * The variant of the alert.
+     */
     variant: {
       type: String,
       required: false,
@@ -74,6 +80,9 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * When true, the alert stays fixed at the top of its container.
+     */
     sticky: {
       type: Boolean,
       required: false,

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -40,6 +40,9 @@ var script = {
         });
       }
     },
+    /**
+     * Accessible label for the breadcrumb navigation.
+     */
     ariaLabel: {
       type: String,
       required: false,

package/dist/components/base/breadcrumb/breadcrumb_item.js

@@ -9,21 +9,33 @@ var script = {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * The text content to display in the breadcrumb item.
+     */
     text: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Vue Router location object or path string for navigation.
+     */
     to: {
       type: [String, Object],
       required: false,
       default: null
     },
+    /**
+     * URL for the breadcrumb link when not using Vue Router.
+     */
     href: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Indicates the current page within the breadcrumb trail for accessibility.
+     */
     ariaCurrent: {
       type: [String, Boolean],
       required: false,
@@ -32,6 +44,9 @@ var script = {
         return [false, 'page'].indexOf(value) !== -1;
       }
     },
+    /**
+     * The size variant of the breadcrumb item.
+     */
     size: {
       type: String,
       required: false,

package/dist/components/base/datepicker/datepicker.js

@@ -85,26 +85,41 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * The currently selected date.
+     */
     value: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * The earliest selectable date.
+     */
     minDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * The latest selectable date.
+     */
     maxDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * Start date for range selection highlighting.
+     */
     startRange: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * End date for range selection highlighting.
+     */
     endRange: {
       type: Date,
       required: false,
@@ -118,16 +133,25 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * First day of the week (0 = Sunday, 1 = Monday, etc.).
+     */
     firstDay: {
       type: Number,
       required: false,
       default: () => defaultConfig.firstDayOfWeek || 0 // Defaults to 0 (Sunday)
     },
+    /**
+     * Accessible label for the datepicker.
+     */
     ariaLabel: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Placeholder text for the input field.
+     */
     placeholder: {
       type: String,
       required: false,
@@ -141,16 +165,25 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * Whether the datepicker is disabled.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Whether to display the default input field.
+     */
     displayField: {
       type: Boolean,
       required: false,
       default: true
     },
+    /**
+     * Whether the datepicker should be open on mount.
+     */
     startOpened: {
       type: Boolean,
       required: false,
@@ -164,31 +197,49 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Internationalization object for Pikaday labels and month/day names.
+     */
     i18n: {
       type: Object,
       required: false,
       default: null
     },
+    /**
+     * Additional CSS class for the Pikaday calendar theme.
+     */
     theme: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Whether to show a clear button when a date is selected.
+     */
     showClearButton: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * The id attribute for the input element.
+     */
     inputId: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Accessible label for the input element.
+     */
     inputLabel: {
       type: String,
       required: false,
       default: 'Enter date'
     },
+    /**
+     * The name attribute for the input element.
+     */
     inputName: {
       type: String,
       required: false,
@@ -203,6 +254,9 @@ var script = {
       default: null,
       validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
     },
+    /**
+     * Validation state of the input. `true` for valid, `false` for invalid, `null` for no validation styling.
+     */
     state: {
       type: Boolean,
       required: false,

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

@@ -17,111 +17,177 @@ var script = {
     GlTooltip: GlTooltipDirective
   },
   props: {
+    /**
+     * Label text for the start date picker.
+     */
     fromLabel: {
       type: String,
       required: false,
       default: 'From'
     },
+    /**
+     * Label text for the end date picker.
+     */
     toLabel: {
       type: String,
       required: false,
       default: 'To'
     },
+    /**
+     * Accessible label for the start date input.
+     */
     fromAriaLabel: {
       type: String,
       required: false,
       default: 'From date'
     },
+    /**
+     * Accessible label for the end date input.
+     */
     toAriaLabel: {
       type: String,
       required: false,
       default: 'To date'
     },
+    /**
+     * The selected date range object containing `startDate` and `endDate` properties.
+     */
     value: {
       type: Object,
       required: false,
       default: null
     },
+    /**
+     * Internationalization object for Pikaday labels and month/day names.
+     */
     i18n: {
       type: Object,
       required: false,
       default: null
     },
+    /**
+     * The earliest selectable date for the start date picker.
+     */
     defaultMinDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * The latest selectable date for the end date picker.
+     */
     defaultMaxDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * Initial value for the start date.
+     */
     defaultStartDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * Initial value for the end date.
+     */
     defaultEndDate: {
       type: Date,
       required: false,
       default: null
     },
+    /**
+     * Maximum number of days allowed between start and end date. Set to 0 for no limit.
+     */
     maxDateRange: {
       type: Number,
       required: false,
       default: 0
     },
+    /**
+     * Additional CSS class(es) for the start date picker container.
+     */
     startPickerClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Selector of element that triggers the start date picker.
+     */
     startPickerTarget: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * DOM node selector to render the start date calendar into.
+     */
     startPickerContainer: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Validation state for the start date picker input.
+     */
     startPickerState: {
       type: Boolean,
       required: false,
       default: null
     },
+    /**
+     * Additional CSS class(es) for the end date picker container.
+     */
     endPickerClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Selector of element that triggers the end date picker.
+     */
     endPickerTarget: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * DOM node selector to render the end date calendar into.
+     */
     endPickerContainer: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Validation state for the end date picker input.
+     */
     endPickerState: {
       type: Boolean,
       required: false,
       default: null
     },
+    /**
+     * Additional CSS class(es) for the label elements.
+     */
     labelClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Additional CSS class for the Pikaday calendar theme.
+     */
     theme: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Whether to allow selecting the same date for start and end.
+     */
     sameDaySelection: {
       type: Boolean,
       required: false,
@@ -143,13 +209,16 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * Whether the start date picker should be open on mount.
+     */
     startOpened: {
       type: Boolean,
       required: false,
       default: false
     },
     /**
-     * Maximum width of the Datepicker
+     * Maximum width of the Datepicker.
      */
     width: {
       type: String,

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

@@ -378,7 +378,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,"show-search-button":_vm.showSearchButton,"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-container",class:{
+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,"show-search-button":_vm.showSearchButton,"disabled":_vm.viewOnly,"wrapper-attributes":{ '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-container",class:{
         'gl-filtered-search-scrollable-container-with-search-button': _vm.showSearchButton,
         'gl-filtered-search-view-only': _vm.viewOnly,
       }},[_c('div',{staticClass:"gl-filtered-search-scrollable"},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx),"search-text-option-label":_vm.searchTextOptionLabel,"applied-tokens":_vm.appliedTokens},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))};

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

@@ -49,6 +49,14 @@ var script = {
       type: [String, Array, Object],
       required: false,
       default: ''
+    },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data() {
@@ -77,7 +85,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:"input-group",attrs:{"role":"group"}},[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('div',{staticClass:"input-group-prepend"},[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n        "+_vm._s(option.name)+"\n      ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",function(){return [_c('gl-form-input',_vm._g(_vm._b({ref:"input",class:_vm.inputClass,attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'gl-form-input',_vm.$attrs,false),_vm.$listeners))]}),_vm._v(" "),(_vm.$scopedSlots.append)?_c('div',{staticClass:"input-group-append"},[_vm._t("append")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"input-group",attrs:{"role":"group"}},'div',_vm.wrapperAttributes,false),[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('div',{staticClass:"input-group-prepend"},[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n        "+_vm._s(option.name)+"\n      ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",function(){return [_c('gl-form-input',_vm._g(_vm._b({ref:"input",class:_vm.inputClass,attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'gl-form-input',_vm.$attrs,false),_vm.$listeners))]}),_vm._v(" "),(_vm.$scopedSlots.append)?_c('div',{staticClass:"input-group-append"},[_vm._t("append")],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/path/data.js

@@ -1,4 +1,4 @@
-const mockPathItems = [{
+const mockPathItems = () => [{
   title: 'First',
   metric: '1d'
 }, {

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -123,6 +123,14 @@ var script = {
       type: Boolean,
       required: false,
       default: true
+    },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
     }
   },
   data() {
@@ -202,7 +210,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-form-input-group',{staticClass:"gl-search-box-by-click",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-disclosure-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"icon":"history","category":"tertiary","toggle-text":"Toggle search history","text-sr-only":"","fluid-width":"","disabled":_vm.disabled,"aria-label":"Recent searches history"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown-divider !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"},[_vm._v("\n          "+_vm._s(_vm.recentSearchesHeader)+"\n        ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown-divider gl-p-2 gl-border-t-solid"},[_c('gl-button',{ref:"clearHistory",staticClass:"!gl-justify-start",attrs:{"category":"tertiary"},on:{"click":_vm.emitClearHistory}},[_vm._v("\n            "+_vm._s(_vm.clearRecentSearchesText)+"\n          ")])],1)]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.historyItems.length)?_vm._l((_vm.historyItems),function(item,idx){return _c('gl-disclosure-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",attrs:{"aria-label":("Select recent search: " + (item || 'empty search'))},on:{"action":function($event){return _vm.selectHistoryItem(item)}},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})]},proxy:true}],null,true)})}):_c('gl-disclosure-dropdown-item',{staticClass:"gl-px-4 gl-py-2 gl-text-sm gl-text-subtle",attrs:{"aria-label":("Select recent search: " + _vm.noRecentSearchesText)}},[_vm._v("\n        "+_vm._s(_vm.noRecentSearchesText)+"\n      ")])],2)]},proxy:true}:null,(_vm.showSearchButton)?{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"category":"tertiary","icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("input",function(){return [_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",class:{ '!gl-rounded-control': !_vm.showSearchButton },attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]}),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-form-input-group',{staticClass:"gl-search-box-by-click",class:{ 'gl-search-box-by-click-with-search-button': _vm.showSearchButton },attrs:{"wrapper-attributes":_vm.wrapperAttributes},scopedSlots:_vm._u([(_vm.historyItems)?{key:"prepend",fn:function(){return [_c('gl-disclosure-dropdown',{ref:"historyDropdown",staticClass:"gl-search-box-by-click-history",attrs:{"icon":"history","category":"tertiary","toggle-text":"Toggle search history","text-sr-only":"","fluid-width":"","disabled":_vm.disabled,"aria-label":"Recent searches history"},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"gl-search-box-by-click-history-header gl-flex gl-min-h-8 gl-grow gl-items-center gl-border-b-1 gl-border-b-dropdown-divider !gl-p-4 gl-text-sm gl-font-bold gl-border-b-solid"},[_vm._v("\n          "+_vm._s(_vm.recentSearchesHeader)+"\n        ")])]},proxy:true},(_vm.historyItems.length)?{key:"footer",fn:function(){return [_c('div',{staticClass:"gl-flex gl-flex-col gl-border-t-1 gl-border-t-dropdown-divider gl-p-2 gl-border-t-solid"},[_c('gl-button',{ref:"clearHistory",staticClass:"!gl-justify-start",attrs:{"category":"tertiary"},on:{"click":_vm.emitClearHistory}},[_vm._v("\n            "+_vm._s(_vm.clearRecentSearchesText)+"\n          ")])],1)]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.historyItems.length)?_vm._l((_vm.historyItems),function(item,idx){return _c('gl-disclosure-dropdown-item',{key:idx,staticClass:"gl-search-box-by-click-history-item",attrs:{"aria-label":("Select recent search: " + (item || 'empty search'))},on:{"action":function($event){return _vm.selectHistoryItem(item)}},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("history-item",function(){return [_vm._v(_vm._s(item))]},{"historyItem":item})]},proxy:true}],null,true)})}):_c('gl-disclosure-dropdown-item',{staticClass:"gl-px-4 gl-py-2 gl-text-sm gl-text-subtle",attrs:{"aria-label":("Select recent search: " + _vm.noRecentSearchesText)}},[_vm._v("\n        "+_vm._s(_vm.noRecentSearchesText)+"\n      ")])],2)]},proxy:true}:null,(_vm.showSearchButton)?{key:"append",fn:function(){return [_c('gl-button',_vm._b({ref:"searchButton",staticClass:"gl-search-box-by-click-search-button",attrs:{"category":"tertiary","icon":"search","disabled":_vm.disabled,"aria-label":"Search","data-testid":"search-button"},on:{"click":function($event){return _vm.search(_vm.currentValue)}}},'gl-button',_vm.searchButtonAttributes,false))]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("input",function(){return [_c('gl-form-input',_vm._b({ref:"input",staticClass:"gl-search-box-by-click-input",class:{ '!gl-rounded-control': !_vm.showSearchButton },attrs:{"disabled":_vm.disabled},on:{"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;}},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.search(_vm.currentValue)}},model:{value:(_vm.currentValue),callback:function ($$v) {_vm.currentValue=$$v;},expression:"currentValue"}},'gl-form-input',_vm.inputAttributes,false))]}),_vm._v(" "),(_vm.clearable && _vm.hasValue && !_vm.disabled)?_c('gl-clear-icon-button',{staticClass:"gl-search-box-by-click-icon-button gl-search-box-by-click-clear-button gl-clear-icon-button",attrs:{"title":_vm.clearButtonTitle,"tooltip-container":_vm.tooltipContainer,"data-testid":"filtered-search-clear-button"},on:{"click":_vm.clearInput}}):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/shared/tooltip/tooltip.js

@@ -3,7 +3,7 @@ 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 { getTooltipAxisConfig, getTooltipTitle, getTooltipContent } from '../../../../utils/charts/config';
+import { getTooltipAxisConfig, getTooltipTitle, getTooltipContent, getTooltipParams } from '../../../../utils/charts/config';
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -239,7 +239,7 @@ var script = {
                 const valueAxisName = (_options$valueAxis = options[valueAxis]) === null || _options$valueAxis === void 0 ? void 0 : (_options$valueAxis$ = _options$valueAxis[0]) === null || _options$valueAxis$ === void 0 ? void 0 : _options$valueAxis$.name;
                 this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
                 this.content = getTooltipContent(params, valueAxisName, metricIndex);
-                this.params = params;
+                this.params = getTooltipParams(params, options);
               }
             }
           }

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

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge';
+import groupBy from 'lodash/groupBy';
 import { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_DEFAULT_SERIES_STACK, CHART_DEFAULT_SERIES_SECONDARY_STACK, CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
@@ -303,16 +304,26 @@ var script = {
         params
       } = _ref5;
       if (!params) return {};
-      const tooltipContentEntries = params.seriesData.toSorted((a, b) => b.seriesIndex - a.seriesIndex) // Invert stacking order so it matches chart (see https://github.com/apache/echarts/issues/14700)
-      .map(_ref6 => {
+
+      // Group by stack and invert order within so it matches `stacked` presentation (see https://github.com/apache/echarts/issues/14700).
+      const seriesDataGroupedByStack = groupBy(params.seriesData, _ref6 => {
+        let {
+          stack,
+          seriesIndex
+        } = _ref6;
+        return stack !== null && stack !== void 0 ? stack : seriesIndex;
+      });
+      const sortedSeriesData = Object.values(seriesDataGroupedByStack).flatMap(seriesDataStack => seriesDataStack.toSorted((a, b) => b.seriesIndex - a.seriesIndex));
+      const tooltipContentEntries = sortedSeriesData.map(_ref7 => {
         let {
           seriesName = '',
           value,
-          borderColor
-        } = _ref6;
+          borderColor,
+          color
+        } = _ref7;
         return [seriesName, {
           value,
-          color: borderColor
+          color: borderColor !== null && borderColor !== void 0 ? borderColor : color
         }];
       });
       return Object.fromEntries(tooltipContentEntries);

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -94,6 +94,14 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * The string to render as the panel subtitle.
+     */
+    subtitle: {
+      type: String,
+      required: false,
+      default: ''
+    },
     /**
      * Set to `true` to show the loading state.
      */
@@ -190,11 +198,11 @@ 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-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden gl-pb-3"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-min-w-0 gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2 gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-border gl-h-full !gl-overflow-visible gl-rounded-lg gl-bg-default gl-p-5",class:_vm.containerClasses,attrs:{"id":_vm.panelId}},[_c('div',{staticClass:"gl-flex gl-h-full gl-flex-col"},[_c('div',{staticClass:"gl-mb-3 gl-flex gl-items-start gl-justify-between",attrs:{"data-testid":"panel-title"}},[_c('div',{staticClass:"gl-flex gl-items-center gl-overflow-hidden"},[(_vm.hasTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",class:_vm.titleIconClass,attrs:{"name":_vm.titleIcon,"data-testid":"panel-title-icon"}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-min-w-0"},[(_vm.hasTitle)?_c('gl-truncate',{staticClass:"gl-font-bold gl-text-default",attrs:{"text":_vm.title,"with-tooltip":""}}):_vm._e(),_vm._v(" "),(_vm.subtitle)?_c('p',{staticClass:"gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle",attrs:{"data-testid":"panel-subtitle"}},[_vm._v("\n            "+_vm._s(_vm.subtitle)+"\n          ")]):_vm._e()],1),_vm._v(" "),(_vm.hasTitlePopover)?[_c('gl-icon',{staticClass:"gl-ml-2 gl-min-w-5",attrs:{"id":_vm.titlePopoverId,"data-testid":"panel-title-popover-icon","name":"information-o","variant":"info"}}),_vm._v(" "),_c('gl-popover',{attrs:{"data-testid":"panel-title-popover","boundary":"viewport","target":_vm.titlePopoverId,"css-classes":_vm.titlePopoverClasses},scopedSlots:_vm._u([(_vm.hasInfoPopoverTitleSlot)?{key:"title",fn:function(){return [_vm._t("info-popover-title")]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.hasInfoPopoverContentSlot)?[_vm._t("info-popover-content")]:_vm._e(),_vm._v(" "),(!_vm.hasInfoPopoverContentSlot)?[(_vm.hasTitlePopoverLink)?_c('gl-sprintf',{attrs:{"message":_vm.titlePopover.description},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
 return [_c('gl-link',{staticClass:"gl-text-sm",attrs:{"href":_vm.titlePopover.descriptionLink}},[_vm._v(_vm._s(content))])]}}],null,false,3051540671)}):[_vm._v(" "+_vm._s(_vm.titlePopover.description)+" ")]]:_vm._e()],2)]:_vm._e()],2),_vm._v(" "),(_vm.shouldShowActions || _vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-flex-col gl-items-end gl-gap-2",attrs:{"data-testid":"panel-actions-filters-container"}},[(_vm.shouldShowActions)?_c('gl-disclosure-dropdown',{attrs:{"items":_vm.actions,"icon":"ellipsis_v","toggle-text":_vm.actionsToggleText,"text-sr-only":"","no-caret":"","placement":"bottom-end","fluid-width":"","toggle-class":"gl-ml-1","category":"tertiary","positioning-strategy":"fixed","size":"small"},on:{"shown":function($event){return _vm.$emit('dropdownOpen')},"hidden":function($event){return _vm.$emit('dropdownClosed')}},scopedSlots:_vm._u([{key:"list-item",fn:function(ref){
 var item = ref.item;
-return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end gl-pb-2",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
+return [_c('span',[_vm._v(_vm._s(item.text))])]}}],null,false,3418607560)}):_vm._e(),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('div',{staticClass:"gl-flex gl-items-center gl-justify-end",attrs:{"data-testid":"panel-filters-container"}},[_vm._t("filters")],2):_vm._e()],1):_vm._e()]),_vm._v(" "),_c('div',{class:_vm.bodyClasses},[(_vm.loading)?[_c('gl-loading-icon',{staticClass:"gl-min-h-8 gl-w-full",attrs:{"size":"lg"}}),_vm._v(" "),(_vm.isLoadingDelayed)?_c('div',{staticClass:"gl-w-full gl-text-subtle",attrs:{"data-testId":"panel-loading-delayed-indicator"}},[_vm._v("\n          "+_vm._s(_vm.loadingDelayedText)+"\n        ")]):_vm._e()]:_vm._t("body")],2),_vm._v(" "),_vm._t("alert-message",null,{"panelId":_vm.panelId})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/resize_observer/resize_observer.js

@@ -1,6 +1,13 @@
 import isFunction from 'lodash/isFunction';
 
 let observer = null;
+
+// Exported for testing purposes only
+const resetObserver = () => {
+  var _observer;
+  (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.disconnect();
+  observer = null;
+};
 const attachObserver = (el, resizeHandler) => {
   if (!isFunction(resizeHandler)) {
     throw TypeError('directive value must be a function');
@@ -19,9 +26,9 @@ const attachObserver = (el, resizeHandler) => {
 };
 const detachObserver = el => {
   if (el.glResizeHandler) {
-    var _observer;
+    var _observer2;
     delete el.glResizeHandler;
-    (_observer = observer) === null || _observer === void 0 ? void 0 : _observer.unobserve(el);
+    (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.unobserve(el);
   }
 };
 const GlResizeObserverDirective = {
@@ -48,4 +55,4 @@ const GlResizeObserverDirective = {
   unbind: detachObserver
 };
 
-export { GlResizeObserverDirective };
+export { GlResizeObserverDirective, resetObserver };