@gitlab/ui 126.3.3 → 126.4.0

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -24,111 +24,177 @@ export default {
     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,
@@ -150,13 +216,16 @@ export default {
       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/src/components/base/filtered_search/filtered_search.vue

@@ -408,7 +408,7 @@ export default {
     :search-button-attributes="searchButtonAttributes"
     :show-search-button="showSearchButton"
     :disabled="viewOnly"
-    data-testid="filtered-search-input"
+    :wrapper-attributes="{ 'data-testid': 'filtered-search-input' }"
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"

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

@@ -47,6 +47,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -68,7 +76,7 @@ export default {
 };
 </script>
 <template>
-  <div role="group" class="input-group">
+  <div role="group" class="input-group" v-bind="wrapperAttributes">
     <div v-if="activeOption || $scopedSlots.prepend" class="input-group-prepend">
       <!-- @slot Is rendered in front of the input field. -->
       <slot name="prepend"></slot>

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -146,7 +146,7 @@
     }
 
     &:hover {
-      .gl-new-dropdown-item-content {
+      .gl-new-dropdown-item-content:not(:disabled):not(.disabled) {
         color: var(--gl-action-danger-foreground-color-hover);
         background-color: var(--gl-action-danger-background-color-hover);
       }

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

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

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -125,6 +125,14 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -206,6 +214,7 @@ export default {
   <gl-form-input-group
     class="gl-search-box-by-click"
     :class="{ 'gl-search-box-by-click-with-search-button': showSearchButton }"
+    :wrapper-attributes="wrapperAttributes"
   >
     <template v-if="historyItems" #prepend>
       <gl-disclosure-dropdown

package/src/components/charts/shared/tooltip/tooltip.vue

@@ -9,6 +9,7 @@ import {
   getTooltipTitle,
   getTooltipContent,
   getTooltipAxisConfig,
+  getTooltipParams,
 } from '../../../../utils/charts/config';
 
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format.vue';
@@ -242,7 +243,7 @@ export default {
 
                 this.title = getTooltipTitle(params, titleAxisName, dimensionIndex);
                 this.content = getTooltipContent(params, valueAxisName, metricIndex);
-                this.params = params;
+                this.params = getTooltipParams(params, options);
               },
             },
           },

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

@@ -1,5 +1,6 @@
 <script>
 import merge from 'lodash/merge';
+import groupBy from 'lodash/groupBy';
 import {
   defaultChartOptions,
   grid,
@@ -310,12 +311,22 @@ export default {
     getTooltipContent({ params }) {
       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(({ seriesName = '', value, borderColor }) => [
+      // 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,
+        ({ stack, seriesIndex }) => stack ?? seriesIndex,
+      );
+
+      const sortedSeriesData = Object.values(seriesDataGroupedByStack).flatMap((seriesDataStack) =>
+        seriesDataStack.toSorted((a, b) => b.seriesIndex - a.seriesIndex),
+      );
+
+      const tooltipContentEntries = sortedSeriesData.map(
+        ({ seriesName = '', value, borderColor, color }) => [
           seriesName,
-          { value, color: borderColor },
-        ]);
+          { value, color: borderColor ?? color },
+        ],
+      );
 
       return Object.fromEntries(tooltipContentEntries);
     },

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -94,6 +94,14 @@ export default {
       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.
      */
@@ -197,8 +205,8 @@ export default {
     :class="containerClasses"
   >
     <div class="gl-flex gl-h-full gl-flex-col">
-      <div class="gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
-        <div class="gl-flex gl-items-center gl-overflow-hidden gl-pb-3">
+      <div class="gl-mb-3 gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
+        <div class="gl-flex gl-items-center gl-overflow-hidden">
           <gl-icon
             v-if="hasTitleIcon"
             class="gl-mr-2"
@@ -207,12 +215,22 @@ export default {
             data-testid="panel-title-icon"
           />
 
-          <gl-truncate
-            v-if="hasTitle"
-            class="gl-min-w-0 gl-font-bold gl-text-default"
-            :text="title"
-            with-tooltip
-          />
+          <div class="gl-min-w-0">
+            <gl-truncate
+              v-if="hasTitle"
+              class="gl-font-bold gl-text-default"
+              :text="title"
+              with-tooltip
+            />
+
+            <p
+              v-if="subtitle"
+              class="gl-mb-0 gl-mt-1 gl-text-sm gl-text-subtle"
+              data-testid="panel-subtitle"
+            >
+              {{ subtitle }}
+            </p>
+          </div>
 
           <template v-if="hasTitlePopover">
             <gl-icon
@@ -280,7 +298,7 @@ export default {
 
           <div
             v-if="$scopedSlots.filters"
-            class="gl-flex gl-items-center gl-justify-end gl-pb-2"
+            class="gl-flex gl-items-center gl-justify-end"
             data-testid="panel-filters-container"
           >
             <!-- @slot  The filter section to add additional UI elements for filtering, grouping, etc. -->

package/src/directives/resize_observer/resize_observer.js

@@ -2,6 +2,12 @@ import isFunction from 'lodash/isFunction';
 
 let observer = null;
 
+// Exported for testing purposes only
+export const resetObserver = () => {
+  observer?.disconnect();
+  observer = null;
+};
+
 const attachObserver = (el, resizeHandler) => {
   if (!isFunction(resizeHandler)) {
     throw TypeError('directive value must be a function');

package/src/utils/charts/config.js

@@ -486,6 +486,34 @@ export const getTooltipContent = (params = null, valueAxisName = null, metricInd
   }, {});
 };
 
+/**
+ * Enriches tooltip parameters with stack information for proper series ordering.
+ *
+ * In stacked column charts, series are grouped by their `stack` property to determine
+ * visual stacking and tooltip display order. ECharts doesn't provide stack data
+ * in tooltip params by default, so this function manually adds it by mapping
+ * series names to their configured stack values.
+ *
+ * @param {Object} params - Tooltip parameters from ECharts
+ * @param {Object} options - Chart configuration with series definitions
+ * @returns {Object} Enhanced tooltip parameters with stack data
+ */
+export const getTooltipParams = (params = null, options) => {
+  if (!params) return null;
+
+  const { series: optionsSeries = [] } = options ?? {};
+
+  const seriesStacks = Object.fromEntries(optionsSeries.map(({ name, stack }) => [name, stack]));
+
+  return {
+    ...params,
+    seriesData: params.seriesData.map((series) => ({
+      ...series,
+      stack: seriesStacks[series.seriesName],
+    })),
+  };
+};
+
 /**
  * The method works well if tooltip content should be against y-axis values.
  * However, for bar charts, the tooltip should be against x-axis values.

package/src/utils/charts/mock_data.js

@@ -106,6 +106,13 @@ export const mockDefaultStackedBarData = [
   { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46] },
 ];
 
+export const mockMultiStackBarData = [
+  { name: 'Fun 1', data: [58, 49, 38, 23, 27, 68, 38, 35, 7, 64, 65, 31], stack: 'stack-1' },
+  { name: 'Fun 2', data: [8, 6, 34, 19, 9, 7, 17, 25, 14, 7, 10, 32], stack: 'stack-1' },
+  { name: 'Fun 3', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28], stack: 'stack-2' },
+  { name: 'Fun 4', data: [8, 9, 5, 40, 13, 19, 58, 21, 47, 59, 23, 46], stack: 'stack-2' },
+];
+
 export const mockDefaultStackedLineData = [
   { name: 'Stacked median line', data: [67, 60, 66, 32, 61, 54, 13, 50, 16, 11, 47, 28] },
 ];

package/src/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -386,7 +386,7 @@ export const BModal = /*#__PURE__*/ extend({
       if (this.isClosing) {
         // If we are in the process of closing, wait until hidden before re-opening
         /* istanbul ignore next */
-        this.$once(EVENT_NAME_HIDDEN, this.show)
+        this.$_showOnHidden = true
         /* istanbul ignore next */
         return
       }
@@ -545,6 +545,11 @@ export const BModal = /*#__PURE__*/ extend({
         // TODO: Need to find a way to pass the `trigger` property
         //       to the `hidden` event, not just only the `hide` event
         this.emitEvent(this.buildEvent(EVENT_NAME_HIDDEN))
+        // Handle pending show request (show was called while closing)
+        if (this.$_showOnHidden) {
+          this.$_showOnHidden = false
+          this.show()
+        }
       })
     },
     emitEvent(bvEvent) {

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-filtering.js

@@ -142,6 +142,10 @@ export const filteringMixin = extend({
       }
       if (isFiltered) {
         this.$emit(EVENT_NAME_FILTERED, filteredItems, filteredItems.length)
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
       this.isFiltered = isFiltered
     },
@@ -151,6 +155,10 @@ export const filteringMixin = extend({
         // `false` so that users can update their pagination controls
         const { localItems } = this
         this.$emit(EVENT_NAME_FILTERED, localItems, localItems.length)
+        // Clear selection on filter change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
     }
   },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-items.js

@@ -127,6 +127,10 @@ export const itemsMixin = extend({
       // Emit context information for external paging/filtering/sorting handling
       if (!looseEqual(newValue, oldValue)) {
         this.$emit(EVENT_NAME_CONTEXT_CHANGED, newValue)
+        // Clear selection on context change if selectable (defined in mixin-selectable.js)
+        if (this.hasSelectableRowClick) {
+          this.clearSelected()
+        }
       }
     }
   },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-provider.js

@@ -101,15 +101,15 @@ export const providerMixin = extend({
   },
   methods: {
     refresh() {
-      const { items, refresh, computedBusy } = safeVueInstance(this)
+      const { items, computedBusy } = safeVueInstance(this)
 
       // Public Method: Force a refresh of the provider function
-      this.$off(EVENT_NAME_REFRESHED, refresh)
+      this.$_pendingRefresh = false
       if (computedBusy) {
         // Can't force an update when forced busy by user (busy prop === true)
         if (this.localBusy && this.hasProvider) {
           // But if provider running (localBusy), re-schedule refresh once `refreshed` emitted
-          this.$on(EVENT_NAME_REFRESHED, refresh)
+          this.$_pendingRefresh = true
         }
       } else {
         this.clearSelected()
@@ -130,6 +130,11 @@ export const providerMixin = extend({
       if (this.id) {
         this.emitOnRoot(ROOT_EVENT_NAME_REFRESHED, this.id)
       }
+      // Handle pending refresh request
+      if (this.$_pendingRefresh) {
+        this.$_pendingRefresh = false
+        this.refresh()
+      }
     },
     _providerUpdate() {
       // Refresh the provider function items.
@@ -180,7 +185,7 @@ export const providerMixin = extend({
           // and clear the busy state
           warn(`Provider function error [${e.name}] ${e.message}.`, NAME_TABLE)
           this.localBusy = false
-          this.$off(EVENT_NAME_REFRESHED, this.refresh)
+          this.$_pendingRefresh = false
         }
       })
     }

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-selectable.js

@@ -1,10 +1,5 @@
 import { extend } from '../../../vue'
-import {
-  EVENT_NAME_CONTEXT_CHANGED,
-  EVENT_NAME_FILTERED,
-  EVENT_NAME_ROW_CLICKED,
-  EVENT_NAME_ROW_SELECTED
-} from '../../../constants/events'
+import { EVENT_NAME_ROW_SELECTED } from '../../../constants/events'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props'
 import { arrayIncludes, createArray } from '../../../utils/array'
 import { identity } from '../../../utils/identity'
@@ -104,16 +99,14 @@ export const selectableMixin = extend({
         this.clearSelected()
       }
     },
-    selectable(newValue) {
+    selectable() {
       this.clearSelected()
-      this.setSelectionHandlers(newValue)
     },
     selectMode() {
       this.clearSelected()
     },
-    hasSelectableRowClick(newValue) {
+    hasSelectableRowClick() {
       this.clearSelected()
-      this.setSelectionHandlers(!newValue)
     },
     selectedRows(selectedRows, oldValue) {
       if (this.isSelectable && !looseEqual(selectedRows, oldValue)) {
@@ -128,12 +121,6 @@ export const selectableMixin = extend({
       }
     }
   },
-  beforeMount() {
-    // Set up handlers if needed
-    if (this.isSelectable) {
-      this.setSelectionHandlers(true)
-    }
-  },
   methods: {
     // Public methods
     selectRow(index) {
@@ -193,14 +180,6 @@ export const selectableMixin = extend({
         'aria-selected': !this.isSelectable ? null : this.isRowSelected(index) ? 'true' : 'false'
       }
     },
-    setSelectionHandlers(on) {
-      const method = on && !this.noSelectOnClick ? '$on' : '$off'
-      // Handle row-clicked event
-      this[method](EVENT_NAME_ROW_CLICKED, this.selectionHandler)
-      // Clear selection on filter, pagination, and sort changes
-      this[method](EVENT_NAME_FILTERED, this.clearSelected)
-      this[method](EVENT_NAME_CONTEXT_CHANGED, this.clearSelected)
-    },
     selectionHandler(item, index, event) {
       /* istanbul ignore if: should never happen */
       if (!this.isSelectable || this.noSelectOnClick) {

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-sorting.js

@@ -1,9 +1,5 @@
 import { extend } from '../../../vue'
-import {
-  EVENT_NAME_HEAD_CLICKED,
-  EVENT_NAME_SORT_CHANGED,
-  MODEL_EVENT_NAME_PREFIX
-} from '../../../constants/events'
+import { EVENT_NAME_SORT_CHANGED, MODEL_EVENT_NAME_PREFIX } from '../../../constants/events'
 import {
   PROP_TYPE_ARRAY_STRING,
   PROP_TYPE_BOOLEAN,
@@ -140,16 +136,6 @@ export const sortingMixin = extend({
     }
   },
   watch: {
-    /* istanbul ignore next: pain in the butt to test */
-    isSortable(newValue) {
-      if (newValue) {
-        if (this.isSortable) {
-          this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-        }
-      } else {
-        this.$off(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-      }
-    },
     [MODEL_PROP_NAME_SORT_DESC](newValue) {
       /* istanbul ignore next */
       if (newValue === this.localSortDesc) {
@@ -177,11 +163,6 @@ export const sortingMixin = extend({
       }
     }
   },
-  created() {
-    if (this.isSortable) {
-      this.$on(EVENT_NAME_HEAD_CLICKED, this.handleSort)
-    }
-  },
   methods: {
     // Handlers
     // Need to move from thead-mixin

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-tbody.js

@@ -71,12 +71,18 @@ export const tbodyMixin = extend({
     },
     // Emits a row event, with the item object, row index and original event
     emitTbodyRowEvent(type, event) {
-      if (type && this.hasListener(type) && event && event.target) {
+      if (type && event && event.target) {
         const rowIndex = this.getTbodyTrIndex(event.target)
         if (rowIndex > -1) {
           // The array of TRs correlate to the `computedItems` array
           const item = this.computedItems[rowIndex]
-          this.$emit(type, item, rowIndex, event)
+          if (this.hasListener(type)) {
+            this.$emit(type, item, rowIndex, event)
+          }
+          // Call selectionHandler directly if selectable (defined in mixin-selectable.js)
+          if (type === EVENT_NAME_ROW_CLICKED && this.hasSelectableRowClick) {
+            this.selectionHandler(item, rowIndex, event)
+          }
         }
       }
     },

package/src/vendor/bootstrap-vue/src/components/table/helpers/mixin-thead.js

@@ -59,6 +59,10 @@ export const theadMixin = extend({
       }
       stopEvent(event)
       this.$emit(EVENT_NAME_HEAD_CLICKED, field.key, field, event, isFoot)
+      // Call handleSort directly if sortable (defined in mixin-sorting.js)
+      if (this.isSortable) {
+        this.handleSort(field.key, field, event, isFoot)
+      }
     },
     renderThead(isFoot = false) {
       const {