@gitlab/ui 127.0.0 → 127.1.1

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

@@ -5,8 +5,6 @@ import GlButton from '../button/button';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlAlert',
   components: {

package/dist/components/base/avatar/avatar.js

@@ -4,8 +4,6 @@ import { getAvatarChar } from '../../../utils/string_utils';
 import { avatarSizeValidator } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const IDENTICON_BG_COUNT = 7;
 var script = {
   name: 'GlAvatar',

package/dist/components/base/badge/badge.js

@@ -4,8 +4,6 @@ import GlIcon from '../icon/icon';
 import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const variantClass = {
   [badgeVariantOptions.neutral]: 'badge-neutral',
   [badgeVariantOptions.info]: 'badge-info',

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

@@ -8,8 +8,6 @@ import ClipboardButton from '../../shared_components/clipboard_button/clipboard_
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlBreadcrumb',
   components: {

package/dist/components/base/button/button.js

@@ -10,8 +10,6 @@ import { SPACE, ENTER } from '../new_dropdowns/constants';
 import { glButtonConfig } from '../../../config';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlButton',
   components: {

package/dist/components/base/card/card.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlCard',
   props: {

package/dist/components/base/collapse/collapse.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlCollapse',
   model: {

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

@@ -9,8 +9,6 @@ import GlIcon from '../icon/icon';
 import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const pad = function (val) {
   let len = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return `0${val}`.slice(-len);

package/dist/components/base/drawer/drawer.js

@@ -3,8 +3,6 @@ import { maxZIndex, drawerVariants } from '../../../utils/constants';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlDrawer',
   components: {

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

@@ -6,13 +6,17 @@ import { logWarning } from '../../../utils/utils';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
-import { termTokenDefinition, isEmptyTerm, createTerm, needDenormalization, denormalizeTokens, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
+import { termTokenDefinition, isEmptyTerm, createTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens, needDenormalization, denormalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 let portalUuid = 0;
 function initialState() {
   return [createTerm()];
 }
+function computeTokens(value, termsAsTokens) {
+  const resolved = value !== null && value !== void 0 && value.length ? cloneDeep(value) : initialState();
+  return needDenormalization(resolved) ? denormalizeTokens(resolved, termsAsTokens) : resolved;
+}
 var script = {
   name: 'GlFilteredSearch',
   components: {
@@ -167,7 +171,7 @@ var script = {
   },
   data() {
     return {
-      tokens: initialState(),
+      tokens: computeTokens(this.value, this.termsAsTokens),
       activeTokenIdx: null,
       suggestionsStyle: {},
       intendedCursorPosition: 'end'
@@ -229,17 +233,15 @@ var script = {
     value: {
       handler(newValue, oldValue) {
         if (!isEqual(newValue, oldValue)) {
-          const value = newValue.length ? newValue : initialState();
-          this.applyNewValue(cloneDeep(value));
+          this.applyNewValue(newValue);
         }
       },
-      deep: true,
-      immediate: true
+      deep: true
     }
   },
   methods: {
     applyNewValue(newValue) {
-      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue, this.termsAsTokens) : newValue;
+      this.tokens = computeTokens(newValue, this.termsAsTokens);
     },
     isActiveToken(idx) {
       return this.activeTokenIdx === idx;

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

@@ -1,4 +1,4 @@
-import { stepIndexAndWrap } from './filtered_search_utils';
+import { FILTERED_SEARCH_SUGGESTIONS_CLASS, stepIndexAndWrap } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const DEFER_TO_INITIAL_VALUE = -1;
@@ -40,7 +40,7 @@ var script = {
       return this.registeredItems[this.activeIdx];
     },
     listClasses() {
-      return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
+      return [this.suggestionsListClass(), `dropdown-menu ${FILTERED_SEARCH_SUGGESTIONS_CLASS}`];
     }
   },
   watch: {

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

@@ -3,7 +3,7 @@ import { Portal } from 'portal-vue';
 import { LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
-import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
+import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes, FILTERED_SEARCH_SUGGESTIONS_CLASS } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 // We need some helpers to ensure @vue/compat compatibility
@@ -381,7 +381,15 @@ var script = {
         applySuggestion: v => this.applySuggestion(v)
       });
     },
-    handleBlur() {
+    handleBlur(e) {
+      var _e$relatedTarget;
+      // Keep focus on input when blur event is on same element
+      // (e.g. scrollbar in filtered search suggestions list)
+      if ((_e$relatedTarget = e.relatedTarget) !== null && _e$relatedTarget !== void 0 && _e$relatedTarget.classList.contains(FILTERED_SEARCH_SUGGESTIONS_CLASS)) {
+        var _this$$refs$input;
+        (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
+        return;
+      }
       if (this.multiSelect) {
         this.$emit('complete');
       } else if (this.active) {

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

@@ -6,6 +6,7 @@ import { modulo } from '../../../utils/number_utils';
 const TERM_TOKEN_TYPE = 'filtered-search-term';
 const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
 const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
+const FILTERED_SEARCH_SUGGESTIONS_CLASS = 'gl-filtered-search-suggestion-list';
 function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }
@@ -239,4 +240,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, TOKEN_CLOSE_SELECTOR, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, termTokenDefinition, tokenToOption, wrapTokenInQuotes };
+export { FILTERED_SEARCH_SUGGESTIONS_CLASS, INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, TOKEN_CLOSE_SELECTOR, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, termTokenDefinition, tokenToOption, wrapTokenInQuotes };

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

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlForm'
 };

package/dist/components/base/icon/icon.js

@@ -4,8 +4,6 @@ import { logWarning } from '../../../utils/utils';
 import { iconSizeOptions, iconVariantOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const knownIcons = new Set(iconsInfo.icons);
 
 /** This is a re-usable vue component for rendering a svg sprite icon

package/dist/components/base/illustration/illustration.js

@@ -3,8 +3,6 @@ import illustrationsInfo from '@gitlab/svgs/dist/illustrations.json';
 import { logWarning } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const knownIllustrations = illustrationsInfo.icons;
 
 /** This is a re-usable vue component for rendering a svg sprite icon

package/dist/components/base/label/label.js

@@ -6,8 +6,6 @@ import GlLink from '../link/link';
 import GlTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlLabel',
   components: {

package/dist/components/base/link/link.js

@@ -13,8 +13,6 @@ import { attemptFocus, attemptBlur } from '../../../vendor/bootstrap-vue/src/uti
 import { linkVariantOptions, isVue3, linkVariantUnstyled, linkVariantInline, linkVariantMeta } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ANCHOR_TAG = 'a';
 const NUXT_LINK_TAG = 'nuxt-link';
 const VUE_ROUTER_LINK_TAG = 'router-link';

package/dist/components/base/markdown/markdown.js

@@ -1,7 +1,5 @@
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlMarkdown',
   props: {

package/dist/components/base/modal/modal.js

@@ -6,8 +6,6 @@ import CloseButton from '../../shared_components/close_button/close_button';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 function validatorHelper(obj) {
   return Object.keys(obj).every(val => val === 'text' || val === 'attributes');
 }

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -9,8 +9,6 @@ import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
 import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
 var script = {
   name: 'GlDisclosureDropdown',

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -15,8 +15,6 @@ import GlListboxGroup from './listbox_group';
 import { itemsValidator, isOption, flattenedOptions } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const ITEM_SELECTOR = '[role="option"]';
 const ITEM_NULL_KEY = Symbol('null-key');
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-dropdown-divider'];

package/dist/components/base/pagination/pagination.js

@@ -8,11 +8,9 @@ import GlIcon from '../icon/icon';
 import GlLink from '../link/link';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const pageRange = (from, to) => range(from, to + 1, 1);
 var script = {
-  name: 'Pagination',
+  name: 'GlPagination',
   components: {
     GlLink,
     GlIcon

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

@@ -5,8 +5,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
 const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';

package/dist/components/base/popover/popover.js

@@ -4,8 +4,6 @@ import CloseButton from '../../shared_components/close_button/close_button';
 import { popoverPlacements } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const popoverRefName = 'bPopover';
 var script = {
   name: 'GlPopover',

package/dist/components/base/table/table.js

@@ -3,8 +3,6 @@ import { isDev, logWarning } from '../../../utils/utils';
 import { glTableLiteWarning, tableFullProps, tableFullSlots } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const shouldUseFullTable = _ref => {
   let {
     $attrs,

package/dist/components/base/tabs/tab/tab.js

@@ -5,8 +5,6 @@ import { logWarning } from '../../../../utils/utils';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlTab',
   components: {

package/dist/components/base/tabs/tabs/tabs.js

@@ -3,8 +3,6 @@ import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlButton from '../../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const validatorHelper = obj => Object.keys(obj).every(val => val === 'text' || val === 'attributes');
 var script = {
   name: 'GlTabs',

package/dist/components/base/toast/toast.js

@@ -7,7 +7,8 @@ const DEFAULT_OPTIONS = {
   autoHideDelay: 5000,
   toastClass: 'gl-toast',
   isStatus: true,
-  toaster: 'b-toaster-bottom-left'
+  toaster: 'b-toaster-bottom-left',
+  appendToast: true
 };
 let toastsCount = 0;
 function renderTitle(h, toast, options) {

package/dist/components/base/toggle/toggle.js

@@ -4,8 +4,6 @@ import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 let uuid = 0;
 var script = {
   name: 'GlToggle',

package/dist/components/base/token/token.js

@@ -3,8 +3,6 @@ import { translate } from '../../../utils/i18n';
 import CloseButton from '../../shared_components/close_button/close_button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlToken',
   components: {

package/dist/components/base/tooltip/tooltip.js

@@ -4,8 +4,6 @@ import tooltipMixin from '../../mixins/tooltip_mixin';
 import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const tooltipRefName = 'bvTooltip';
 var script = {
   name: 'GlTooltip',

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

@@ -8,7 +8,21 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
+/**
+ * Area charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint.
+ *
+ * Similar to how custom tooltips are displayed when area chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
 
 var script = {
   name: 'GlAreaChart',

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

@@ -10,9 +10,6 @@ import ChartTooltip from '../shared/tooltip/tooltip';
 import { stackedPresentationOptions } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 /**
  * `nameGap` in charts/config is set to 50 but it is not
  * used for bar charts as the axes are flipped. That is why

package/dist/components/charts/chart/chart.js

@@ -6,9 +6,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { debounceByAnimationFrame } from '../../../utils/utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 /**
  * Allowed values by eCharts
  * https://echarts.apache.org/en/api.html#echartsInstance.resize

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

@@ -6,8 +6,6 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const yAxisDefaults = {
   ...yAxis,
   nameLocation: 'center',

package/dist/components/charts/gauge/gauge.js

@@ -5,8 +5,6 @@ import { gaugeSafeHues, gaugeWarningHue, gaugeNeutralHues } from '../../../utils
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const AXIS_LABEL_FONT_SIZE_PX = 14;
 const ARC_RADIUS = '80%';
 const DETAIL_FONT_SIZE_PX = 30;

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

@@ -10,8 +10,6 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const defaultOptions = {
   visualMap: {
     show: false,

package/dist/components/charts/legend/legend.js

@@ -6,8 +6,6 @@ import GlTruncate from '../../utilities/truncate/truncate';
 import GlChartSeriesLabel from '../series_label/series_label';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlChartLegend',
   components: {

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

@@ -8,7 +8,23 @@ import ChartLegend from '../legend/legend';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
+/**
+ * Line charts as of %12.10 support annotations.
+ * Annotations is composed of a dotted line and an arrow
+ * at the bottom. The dotted line is constructed
+ * with markLine and arrows with markPoint. Most of this
+ * logic is in GitLab and should be eventually moved to
+ * GitLab UI https://gitlab.com/gitlab-org/gitlab/-/issues/213390.
+ *
+ * Similar to how custom tooltips are displayed when line chart
+ * is hovered, a tooltip should be displayed when the annotation
+ * arrow is hovered. This component adds event listeners
+ * to figure out if mouse is hovered on charts to show tooltips.
+ * While that works for data points inside the grid, for arrows
+ * that live right under the chart, we use eCharts inbuilt
+ * event listeners to detect hover. Given this limitation,
+ * we use a separate tooltip for data point and arrow.
+ */
 
 var script = {
   name: 'GlLineChart',

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

@@ -7,8 +7,6 @@ import { getTooltipAxisConfig, getTooltipTitle, getTooltipContent, getTooltipPar
 import TooltipDefaultFormat from './tooltip_default_format/tooltip_default_format';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlChartTooltip',
   components: {

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

@@ -8,9 +8,6 @@ import Chart from '../chart/chart';
 import ChartTooltip from '../shared/tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
-
 // the padding is needed so the mark points don't overflow when visible
 const gridPadding = symbolSize / 2;
 const generateGradient = colors => {

package/dist/components/utilities/intersperse/intersperse.js

@@ -6,8 +6,6 @@ import { insert, intersperse } from '../../../utils/data_utils';
 import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
 const {
   Fragment

package/dist/components/utilities/sprintf/sprintf.js

@@ -2,8 +2,7 @@ import has from 'lodash/has';
 import isString from 'lodash/isString';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
+/* eslint-disable no-continue */
 const PREFIX = '%{';
 const SUFFIX = '}';
 const START_SUFFIX = 'Start';

package/dist/components/utilities/truncate/truncate.js

@@ -3,8 +3,6 @@ import { GlResizeObserverDirective } from '../../../directives/resize_observer/r
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-//
-
 var script = {
   name: 'GlTruncate',
   POSITION,