@gitlab/ui 127.1.0 → 127.1.1

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/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) {