@gitlab/ui 129.1.2 → 129.2.0

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

@@ -1,4 +1,4 @@
-import { uniqueId, clamp } from 'lodash-es';
+import { uniqueId, isEqual, clamp } from 'lodash-es';
 import { logWarning, stopEvent } from '../../../../utils/utils';
 import { GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN, GL_DROPDOWN_FOCUS_CONTENT, POSITION_ABSOLUTE, POSITION_FIXED, GL_DROPDOWN_CONTENTS_CLASS, ENTER, ARROW_DOWN, ARROW_UP, END, HOME } from '../constants';
 import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropdownPlacements } from '../../../../utils/constants';
@@ -548,7 +548,7 @@ var script = {
   watch: {
     selected: {
       immediate: true,
-      handler(newSelected) {
+      handler(newSelected, oldSelected) {
         if (Array.isArray(newSelected)) {
           if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
@@ -557,6 +557,16 @@ var script = {
         } else {
           this.selectedValues = [newSelected];
         }
+        if (
+        // Do not emit change event immediately on watcher creation.
+        oldSelected !== undefined && !isEqual(newSelected, oldSelected)) {
+          /**
+           * Emitted when the selected prop value changes
+           *
+           * @event change
+           */
+          this.$emit('change');
+        }
       }
     },
     items: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "129.1.2",
+  "version": "129.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -139,10 +139,10 @@
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.2.0",
-    "jest-circus": "30.2.0",
-    "jest-environment-jsdom": "30.2.0",
-    "jest-image-snapshot": "^6.5.1",
+    "jest": "30.3.0",
+    "jest-circus": "30.3.0",
+    "jest-environment-jsdom": "30.3.0",
+    "jest-image-snapshot": "^6.5.2",
     "merge-cobertura": "^1.0.7",
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
@@ -160,7 +160,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.97.3",
+    "sass": "^1.98.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

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

@@ -1,5 +1,5 @@
 <script>
-import { clamp, uniqueId } from 'lodash-es';
+import { clamp, uniqueId, isEqual } from 'lodash-es';
 import { stopEvent, logWarning } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,
@@ -582,7 +582,7 @@ export default {
   watch: {
     selected: {
       immediate: true,
-      handler(newSelected) {
+      handler(newSelected, oldSelected) {
         if (Array.isArray(newSelected)) {
           if (process.env.NODE_ENV !== 'production' && !this.multiple && newSelected.length) {
             throw new Error('To allow multi-selection, please, set "multiple" property to "true"');
@@ -591,6 +591,19 @@ export default {
         } else {
           this.selectedValues = [newSelected];
         }
+
+        if (
+          // Do not emit change event immediately on watcher creation.
+          oldSelected !== undefined &&
+          !isEqual(newSelected, oldSelected)
+        ) {
+          /**
+           * Emitted when the selected prop value changes
+           *
+           * @event change
+           */
+          this.$emit('change');
+        }
       },
     },
     items: {