@gitlab/ui 136.3.1 → 137.0.0

package/dist/vendor/bootstrap-vue/src/directives/tooltip/tooltip.js

@@ -217,7 +217,8 @@ const applyTooltip = (el, bindings, vnode) => {
     id: config.id,
     interactive: config.interactive,
     disabled: config.disabled,
-    html: config.html
+    html: config.html,
+    isDirective: true
   };
   const oldData = el[BV_TOOLTIP].__bv_prev_data__;
   el[BV_TOOLTIP].__bv_prev_data__ = data;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "136.3.1",
+  "version": "137.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -140,7 +140,7 @@
     "autoprefixer": "10.5.4",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.20.1",
+    "cypress": "15.21.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -169,13 +169,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.102.0",
+    "sass": "^1.103.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",
     "storybook": "^7.6.24",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.5.1",
+    "style-dictionary": "^5.5.2",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/alert/alert.vue

@@ -203,19 +203,19 @@ export default {
       /**
        * Emitted when the primary action button is clicked.
        *
-       * @event primaryAction
+       * @event primary-action
        * @type {object}
        */
-      this.$emit('primaryAction', event);
+      this.$emit('primary-action', event);
     },
     secondaryButtonClicked(event) {
       /**
        * Emitted when the secondary action button is clicked.
        *
-       * @event secondaryAction
+       * @event secondary-action
        * @type {object}
        */
-      this.$emit('secondaryAction', event);
+      this.$emit('secondary-action', event);
     },
     onDismiss() {
       /**

package/src/components/base/collapse/collapse.vue

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

package/src/components/base/datepicker/datepicker.vue

@@ -434,7 +434,7 @@ export default {
       /**
        * Emitted when the datepicker draws a new month.
        */
-      this.$emit('monthChange');
+      this.$emit('month-change');
     },
     onKeydown() {
       if (this.textInput === '') {

package/src/components/base/filtered_search/filtered_search.vue

@@ -402,11 +402,10 @@ export default {
       }
     },
 
-    onClear() {
-      this.$nextTick(() => {
-        this.activeTokenIdx = this.lastTokenIdx;
-        this.$emit('clear');
-      });
+    async onClear() {
+      await this.$nextTick();
+      this.activeTokenIdx = this.lastTokenIdx;
+      this.$emit('clear');
     },
 
     submit() {

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -247,18 +247,17 @@ export default {
       }
     },
 
-    replaceToken(newType) {
+    async replaceToken(newType) {
       const newTokenConfig = this.availableTokens.find(({ type }) => 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;
       }
 

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -316,20 +316,19 @@ export default {
       );
     },
 
-    activate() {
+    async activate() {
       this.fallbackValue = this.value;
 
-      this.$nextTick(() => {
-        const { input } = this.$refs;
-        if (input) {
-          input.focus();
-          input.scrollIntoView({ block: 'nearest', inline: 'end' });
-          this.alignSuggestions(input);
-          if (this.cursorPosition === 'start') {
-            input?.setSelectionRange(0, 0);
-          }
+      await this.$nextTick();
+      const { input } = this.$refs;
+      if (input) {
+        input.focus();
+        input.scrollIntoView({ block: 'nearest', inline: 'end' });
+        this.alignSuggestions(input);
+        if (this.cursorPosition === 'start') {
+          input?.setSelectionRange(0, 0);
         }
-      });
+      }
     },
 
     deactivate() {

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

@@ -221,7 +221,7 @@ export default {
         }
       }
     },
-    handleChange({ target: { checked, indeterminate } }) {
+    async handleChange({ target: { checked, indeterminate } }) {
       const { value, uncheckedValue } = this;
 
       // Update `computedLocalChecked`
@@ -241,26 +241,25 @@ export default {
       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.group.$emit('change', localChecked);
+      }
 
-        this.$emit('indeterminate', indeterminate);
-      });
+      this.$emit('indeterminate', indeterminate);
     },
     setIndeterminate(state) {
       // Indeterminate only supported in single checkbox mode

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

@@ -373,14 +373,13 @@ export default {
     // 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
@@ -534,11 +533,10 @@ export default {
       stopEvent(event, { propagation: false });
       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(...args) {

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

@@ -171,33 +171,32 @@ export default {
         this.$emit('input', newValue);
       }
     },
-    handleChange() {
+    async handleChange() {
       const { value } = this;
 
       // 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/src/components/base/form/form_textarea/form_textarea.vue

@@ -315,11 +315,10 @@ export default {
   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();
@@ -424,13 +423,12 @@ export default {
        */
       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) {
@@ -443,11 +441,10 @@ export default {
         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/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -51,39 +51,41 @@ export default {
     },
   },
   watch: {
-    fetchedItems(newVal, oldVal) {
+    async fetchedItems(newVal, oldVal) {
       // Re-adjust scroll to the current item if more items are added
       if (newVal > oldVal) {
         const { scrollHeight, scrollTop } = this.$refs.infiniteContainer;
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
           // Wait until the DOM is fully updated to adjust scroll
-          this.$nextTick(() => {
-            const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
+          await this.$nextTick();
+          const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
 
-            // 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;
-            }
+          // Never adjust to 0, or a new event may be be triggered
+          if (top < 1) {
+            top = 1;
+          }
 
-            this.scrollTo({ top });
-          });
+          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();
+
+    // Check both kebab-case (Vue 2) and camelCase (@vue/compat) $listeners.
+    const listening = (...names) => names.some((name) => this.$listeners[name]);
+
+    if (listening('top-reached', 'topReached') && !listening('bottom-reached', 'bottomReached')) {
+      this.scrollDown();
+    }
   },
 
   methods: {
@@ -119,13 +121,13 @@ export default {
       /**
        * Emitted when item container is scrolled to the top
        */
-      this.$emit('topReached');
+      this.$emit('top-reached');
     }, throttleDuration),
     bottomReached: throttle(function bottomReachedThrottled() {
       /**
        * Emitted when item container is scrolled to the bottom
        */
-      this.$emit('bottomReached');
+      this.$emit('bottom-reached');
     }, throttleDuration),
     itemsListHeight() {
       return this.$refs.infiniteContainer.scrollHeight;

package/src/components/base/new_dropdowns/constants.js

@@ -1,8 +1,8 @@
 // base dropdown events
 export const GL_DROPDOWN_SHOWN = 'shown';
 export const GL_DROPDOWN_HIDDEN = 'hidden';
-export const GL_DROPDOWN_BEFORE_CLOSE = 'beforeClose';
-export const GL_DROPDOWN_FOCUS_CONTENT = 'focusContent';
+export const GL_DROPDOWN_BEFORE_CLOSE = 'before-close';
+export const GL_DROPDOWN_FOCUS_CONTENT = 'focus-content';
 
 // KeyboardEvent.code values
 export const ARROW_DOWN = 'ArrowDown';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -296,7 +296,7 @@ export default {
       /**
        * Emitted when dropdown is about to be closed
        *
-       * @event beforeClose
+       * @event before-close
        */
       this.$emit(GL_DROPDOWN_BEFORE_CLOSE, event);
     },

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -610,22 +610,21 @@ export default {
       },
     },
     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'
@@ -831,7 +830,7 @@ export default {
 
       this.focusItem(nextIndex, elements);
     },
-    focusItem(index, elements, keepSearchFocused = false) {
+    async focusItem(index, elements, keepSearchFocused = false) {
       this.nextFocusedItemIndex = index;
 
       // Always update the activeItemId when focus changes
@@ -847,9 +846,8 @@ export default {
         elements[index]?.focus();
       }
 
-      this.$nextTick(() => {
-        this.scrollActiveItemIntoView();
-      });
+      await this.$nextTick();
+      this.scrollActiveItemIntoView();
     },
     focusSearchInput() {
       this.$refs.searchBox.focusInput();

package/src/components/base/sorting/sorting.vue

@@ -152,7 +152,7 @@ export default {
        *
        * @property {boolean} isAscending
        */
-      this.$emit('sortDirectionChange', newDirection);
+      this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
       /**
@@ -164,7 +164,7 @@ export default {
        *
        * @property {string|number} value
        */
-      this.$emit('sortByChange', event);
+      this.$emit('sort-by-change', event);
     },
   },
 };

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -72,25 +72,23 @@ export default {
         .reduce((acc, key) => Object.assign(acc, { [key]: this.$attrs[key] }), {});
     },
   },
-  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({ contentRect: { width } }) {

package/src/components/base/token_selector/token_selector.vue

@@ -222,7 +222,7 @@ export default {
     },
   },
   watch: {
-    inputText(newValue, oldValue) {
+    async inputText(newValue, oldValue) {
       if (newValue !== oldValue) {
         /**
          * Fired when user types in the token selector
@@ -242,13 +242,12 @@ export default {
         // 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();
+        }
       }
     },
   },
@@ -286,7 +285,7 @@ export default {
         this.triggerTokenFocusNextBackspace = true;
       }
     },
-    handleBlur(event) {
+    async handleBlur(event) {
       /**
        * Fired when the token selector is blurred
        *
@@ -300,11 +299,10 @@ export default {
       // 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(() => {
-        if (!event.relatedTarget?.closest?.('.dropdown-item')) {
-          this.closeDropdown();
-        }
-      });
+      await this.$nextTick();
+      if (!event.relatedTarget?.closest?.('.dropdown-item')) {
+        this.closeDropdown();
+      }
     },
     handleEnter() {
       if (this.focusedDropdownItem && this.dropdownIsOpen) {

package/src/components/charts/chart/chart.vue

@@ -171,7 +171,7 @@ export default {
        * @property {object} chart The chart instance
        * @property {object} params A params object, see also https://echarts.apache.org/en/api.html#events.Mouse%20events
        */
-      this.$emit('chartItemClicked', { chart: this.chart, params });
+      this.$emit('chart-item-clicked', { chart: this.chart, params });
     },
     handleResize() {
       this.chart.resize();

package/src/components/charts/sparkline/sparkline.vue

@@ -210,10 +210,10 @@ export default {
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
-       * @event chartCreated
+       * @event chart-created
        * @type {object}
        */
-      this.$emit('chartCreated', chartInstance);
+      this.$emit('chart-created', chartInstance);
     },
     handleResize() {
       this.chartInstance.resize();

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

@@ -290,8 +290,8 @@ export default {
             category="tertiary"
             positioning-strategy="fixed"
             size="small"
-            @shown="$emit('dropdownOpen')"
-            @hidden="$emit('dropdownClosed')"
+            @shown="$emit('dropdown-open')"
+            @hidden="$emit('dropdown-closed')"
           >
             <template #list-item="{ item }">
               <span>{{ item.text }}</span>