@gitlab/ui 136.3.0 → 136.3.2

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

@@ -71,10 +71,9 @@ var script = {
       }
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.emitState();
-    });
+  async mounted() {
+    await this.$nextTick();
+    this.emitState();
   },
   beforeDestroy() {
     // Trigger state emit if needed

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

@@ -427,11 +427,10 @@ var script = {
         this.activeTokenIdx = null;
       }
     },
-    onClear() {
-      this.$nextTick(() => {
-        this.activeTokenIdx = this.lastTokenIdx;
-        this.$emit('clear');
-      });
+    async onClear() {
+      await this.$nextTick();
+      this.activeTokenIdx = this.lastTokenIdx;
+      this.$emit('clear');
     },
     submit() {
       /**

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

@@ -245,20 +245,19 @@ var script = {
         this.$emit('replace', createTerm(this.config.title));
       }
     },
-    replaceToken(newType) {
+    async replaceToken(newType) {
       const newTokenConfig = this.availableTokens.find(_ref => {
         let type = _ref.type;
         return type === newType;
       });
       if (newTokenConfig === this.config) {
-        this.$nextTick(() => {
-          /**
-           * Emitted when this term token will lose its focus.
-           *
-           * @event deactivate
-           */
-          this.$emit('deactivate');
-        });
+        await this.$nextTick();
+        /**
+         * Emitted when this term token will lose its focus.
+         *
+         * @event deactivate
+         */
+        this.$emit('deactivate');
         return;
       }
       if (newTokenConfig) {

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

@@ -312,22 +312,21 @@ var script = {
         loose = _ref2.loose;
       return (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.find(option => loose ? match(option[this.optionTextField], inputValue) : option[this.optionTextField] === inputValue);
     },
-    activate() {
+    async activate() {
       this.fallbackValue = this.value;
-      this.$nextTick(() => {
-        const input = this.$refs.input;
-        if (input) {
-          input.focus();
-          input.scrollIntoView({
-            block: 'nearest',
-            inline: 'end'
-          });
-          this.alignSuggestions(input);
-          if (this.cursorPosition === 'start') {
-            input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
-          }
+      await this.$nextTick();
+      const input = this.$refs.input;
+      if (input) {
+        input.focus();
+        input.scrollIntoView({
+          block: 'nearest',
+          inline: 'end'
+        });
+        this.alignSuggestions(input);
+        if (this.cursorPosition === 'start') {
+          input === null || input === void 0 ? void 0 : input.setSelectionRange(0, 0);
         }
-      });
+      }
     },
     deactivate() {
       var _this$matchingOption;

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

@@ -221,7 +221,7 @@ var script = {
         }
       }
     },
-    handleChange(_ref) {
+    async handleChange(_ref) {
       let _ref$target = _ref.target,
         checked = _ref$target.checked,
         indeterminate = _ref$target.indeterminate;
@@ -245,25 +245,24 @@ var script = {
       this.computedLocalChecked = localChecked;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when selected value(s) is changed due to user interaction.
+       *
+       * @event change
+       */
+      this.$emit('change', localChecked);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when selected value(s) is changed due to user interaction.
          *
          * @event change
          */
-        this.$emit('change', localChecked);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when selected value(s) is changed due to user interaction.
-           *
-           * @event change
-           */
-          this.group.$emit('change', localChecked);
-        }
-        this.$emit('indeterminate', indeterminate);
-      });
+        this.group.$emit('change', localChecked);
+      }
+      this.$emit('indeterminate', indeterminate);
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

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

@@ -429,14 +429,13 @@ var script = {
     // Create private non-reactive props
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.setWheelStopper(this.noWheel);
     this.handleAutofocus();
-    this.$nextTick(() => {
-      // Update DOM with auto-generated ID after mount
-      // to prevent SSR hydration errors
-      this.localId = uniqueId('gl-form-input-');
-    });
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-input-');
   },
   deactivated() {
     // Turn off listeners when keep-alive component deactivated
@@ -600,11 +599,10 @@ var script = {
       });
       this.blur();
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) this.focus();
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) this.focus();
       });
     },
     select() {

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

@@ -173,33 +173,32 @@ var script = {
         this.$emit('input', newValue);
       }
     },
-    handleChange() {
+    async handleChange() {
       const value = this.value;
 
       // Update `computedLocalChecked`
       this.computedLocalChecked = value;
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
-      this.$nextTick(() => {
+      await this.$nextTick();
+      /**
+       * Emitted when the selected value is changed due to user interaction
+       *
+       * @event change
+       * @type {boolean} current selected value of radio group
+       */
+      this.$emit('change', value);
+
+      // If this is a child of a group, we emit a change event on it as well
+      if (this.isGroup) {
         /**
          * Emitted when the selected value is changed due to user interaction
          *
          * @event change
          * @type {boolean} current selected value of radio group
          */
-        this.$emit('change', value);
-
-        // If this is a child of a group, we emit a change event on it as well
-        if (this.isGroup) {
-          /**
-           * Emitted when the selected value is changed due to user interaction
-           *
-           * @event change
-           * @type {boolean} current selected value of radio group
-           */
-          this.group.$emit('change', value);
-        }
-      });
+        this.group.$emit('change', value);
+      }
     },
     focus() {
       if (!this.disabled) {

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

@@ -309,11 +309,10 @@ var script = {
   created() {
     this.$_inputDebounceTimer = null;
   },
-  mounted() {
+  async mounted() {
     this.handleAutofocus();
-    this.$nextTick(() => {
-      this.localId = uniqueId('gl-form-textarea-');
-    });
+    await this.$nextTick();
+    this.localId = uniqueId('gl-form-textarea-');
   },
   beforeDestroy() {
     this.clearDebounce();
@@ -423,13 +422,12 @@ var script = {
        */
       this.$emit('blur', event);
     },
-    handleAutofocus() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          if (this.autofocus && isVisible(this.$refs.input)) {
-            this.focus();
-          }
-        });
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.input)) {
+          this.focus();
+        }
       });
     },
     handleKeyPress(e) {
@@ -442,11 +440,10 @@ var script = {
         this.$emit('submit');
       }
     },
-    setHeight() {
-      this.$nextTick(() => {
-        window.requestAnimationFrame(() => {
-          this.heightInPx = this.computeHeight();
-        });
+    async setHeight() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        this.heightInPx = this.computeHeight();
       });
     },
     computeHeight() {

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -49,7 +49,7 @@ var script = {
     }
   },
   watch: {
-    fetchedItems(newVal, oldVal) {
+    async fetchedItems(newVal, oldVal) {
       // Re-adjust scroll to the current item if more items are added
       if (newVal > oldVal) {
         const _this$$refs$infiniteC = this.$refs.infiniteContainer,
@@ -58,32 +58,30 @@ var script = {
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
           // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
+          await this.$nextTick();
+          const newScrollHeight = this.$refs.infiniteContainer.scrollHeight;
 
-            // New scrollTop is the new height, minus the old height
-            // minus a small space to allow the user to trigger a scroll once more
-            let top = newScrollHeight - scrollHeight - adjustScrollGap;
+          // New scrollTop is the new height, minus the old height
+          // minus a small space to allow the user to trigger a scroll once more
+          let top = newScrollHeight - scrollHeight - adjustScrollGap;
 
-            // Never adjust to 0, or a new event may be be triggered
-            if (top < 1) {
-              top = 1;
-            }
-            this.scrollTo({
-              top
-            });
+          // Never adjust to 0, or a new event may be be triggered
+          if (top < 1) {
+            top = 1;
+          }
+          this.scrollTo({
+            top
           });
         }
       }
     }
   },
-  mounted() {
+  async mounted() {
     // Scroll to bottom for reverse effect
-    this.$nextTick(() => {
-      if (this.$listeners.topReached && !this.$listeners.bottomReached) {
-        this.scrollDown();
-      }
-    });
+    await this.$nextTick();
+    if (this.$listeners.topReached && !this.$listeners.bottomReached) {
+      this.scrollDown();
+    }
   },
   methods: {
     /**

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

@@ -569,22 +569,21 @@ var script = {
       }
     },
     items: {
-      handler() {
-        this.$nextTick(() => {
-          /* Every time the list of items changes (on search),
-           * the observed elements are recreated, thus we need to start obesrving them again */
-          this.observeScroll();
+      async handler() {
+        await this.$nextTick();
+        /* Every time the list of items changes (on search),
+         * the observed elements are recreated, thus we need to start obesrving them again */
+        this.observeScroll();
 
-          /**
-           * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first enabled item
-           */
-          if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
-          } else {
-            this.nextFocusedItemIndex = null;
-          }
-        });
+        /**
+         * Every time the list of items changes, and there is a search string,
+         * we want to visually highlight the first enabled item
+         */
+        if (this.searchHasOptions) {
+          this.nextFocusedItemIndex = this.getFirstEnabledIndex();
+        } else {
+          this.nextFocusedItemIndex = null;
+        }
       }
     },
     ...(process.env.NODE_ENV !== 'production' ? {
@@ -774,7 +773,7 @@ var script = {
       const nextIndex = clamp(currentIndex + offset, 0, elements.length - 1);
       this.focusItem(nextIndex, elements);
     },
-    focusItem(index, elements) {
+    async focusItem(index, elements) {
       let keepSearchFocused = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       this.nextFocusedItemIndex = index;
 
@@ -791,9 +790,8 @@ var script = {
         var _elements$index;
         (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.focus();
       }
-      this.$nextTick(() => {
-        this.scrollActiveItemIntoView();
-      });
+      await this.$nextTick();
+      this.scrollActiveItemIntoView();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/dist/components/base/sorting/sorting.js

@@ -96,7 +96,7 @@ var script = {
     block: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     }
   },
   data() {
@@ -166,7 +166,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-button-group',{staticClass:"gl-sorting"},[_c('gl-collapsible-listbox',{class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-button-group',{staticClass:"gl-sorting gl-flex"},[_c('gl-collapsible-listbox',{staticClass:"gl-w-full",class:_vm.dropdownClass,attrs:{"toggle-text":_vm.text,"items":_vm.sortOptions,"selected":_vm.sortBy,"toggle-class":_vm.dropdownToggleClass,"placement":"bottom-end","block":_vm.block,"toggle-aria-labelled-by":_vm.sortingListboxId},on:{"select":_vm.onSortByChanged}}),_vm._v(" "),_c('span',{staticClass:"gl-sr-only",attrs:{"id":_vm.sortingListboxId}},[_vm._v(_vm._s(_vm.sortingListboxLabel))]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],class:['sorting-direction-button', _vm.sortDirectionToggleClass],attrs:{"title":_vm.sortDirectionText,"icon":_vm.localSortDirection,"aria-label":_vm.sortDirectionText,"disabled":_vm.isDirectionToggleDisabled,"accessible-disabled":_vm.isDirectionToggleDisabled},on:{"click":_vm.toggleSortDirection}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -68,23 +68,21 @@ var script = {
       }), {});
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+  async mounted() {
     this.handleNavScroll = debounce(e => {
       this.scrollLeft = e.target.scrollLeft;
     }, 100);
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   beforeDestroy() {
     this.getNavContainer().removeEventListener('scroll', this.handleNavScroll);
   },
-  updated() {
+  async updated() {
     // Whenever tabs are added or removed we need to recalculate the reactive scrollWidth
-    this.$nextTick(() => {
-      this.navScrollWidth = this.getScrollWidth();
-    });
+    await this.$nextTick();
+    this.navScrollWidth = this.getScrollWidth();
   },
   methods: {
     handleResize(_ref) {

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

@@ -146,6 +146,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   },attrs:{"data-testid":"toggle-wrapper"}},[_c('span',{staticClass:"gl-toggle-label gl-shrink-0",class:_vm.toggleClasses,attrs:{"id":_vm.labelId,"data-testid":"toggle-label"}},[_vm._t("label",function(){return [_vm._v(_vm._s(_vm.label))]})],2),_vm._v(" "),(_vm.shouldRenderDescription)?_c('span',{staticClass:"gl-description-label gl-mb-3",attrs:{"data-testid":"toggle-description"}},[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),_vm._v(" "),(_vm.name)?_c('input',{attrs:{"name":_vm.name,"type":"hidden"},domProps:{"value":_vm.value}}):_vm._e(),_vm._v(" "),_c('button',{staticClass:"gl-toggle gl-shrink-0",class:{
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled || _vm.isLoading,
+      'is-loading': _vm.isLoading,
     },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"dark"}}):_c('span',{staticClass:"toggle-icon"},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":12}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 

package/dist/components/base/token_selector/token_selector.js

@@ -216,7 +216,7 @@ var script = {
     }
   },
   watch: {
-    inputText(newValue, oldValue) {
+    async inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
         /**
          * Fired when user types in the token selector
@@ -234,13 +234,12 @@ var script = {
         // Wait a tick so `text-input` event can be used to validate
         // the value and change the `allowUserDefinedTokens` and/or
         // `hideDropdownWithNoItems` props
-        this.$nextTick(() => {
-          if (this.hideDropdown) {
-            this.closeDropdown();
-          } else if (newValue !== '') {
-            this.openDropdown();
-          }
-        });
+        await this.$nextTick();
+        if (this.hideDropdown) {
+          this.closeDropdown();
+        } else if (newValue !== '') {
+          this.openDropdown();
+        }
       }
     }
   },
@@ -272,7 +271,8 @@ var script = {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-    handleBlur(event) {
+    async handleBlur(event) {
+      var _event$relatedTarget, _event$relatedTarget$;
       /**
        * Fired when the token selector is blurred
        *
@@ -285,12 +285,10 @@ var script = {
       // Workaround is to:
       // 1. Explicitly focus the dropdown menu item button on `mousedown` event. (see './token_selector_dropdown.vue')
       // 2. Use `nextTick` so `blur` event is fired after the `mousedown` event
-      this.$nextTick(() => {
-        var _event$relatedTarget, _event$relatedTarget$;
-        if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
-          this.closeDropdown();
-        }
-      });
+      await this.$nextTick();
+      if (!((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.closest) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.call(_event$relatedTarget, '.dropdown-item'))) {
+        this.closeDropdown();
+      }
     },
     handleEnter() {
       if (this.focusedDropdownItem && this.dropdownIsOpen) {