@gitlab/ui 131.2.0 → 131.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "131.2.0",
+  "version": "131.3.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -72,7 +72,7 @@
     "echarts": "^5.6.0",
     "gridstack": "^12.4.2",
     "iframe-resizer": "^4.4.5",
-    "lodash-es": "^4.17.23",
+    "lodash-es": "^4.18.1",
     "popper.js": "^1.16.1",
     "portal-vue": "2.1.7",
     "vue-functional-data-merge": "^3.1.0",
@@ -90,7 +90,7 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.8",
+    "postcss": "8.5.9",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
@@ -122,9 +122,9 @@
     "@storybook/vue3": "^7.6.24",
     "@storybook/vue3-webpack5": "^7.6.24",
     "@types/jest-image-snapshot": "^6.4.1",
-    "@vue/compat": "3.5.30",
-    "@vue/compiler-sfc": "3.5.30",
-    "@vue/server-renderer": "3.5.30",
+    "@vue/compat": "3.5.32",
+    "@vue/compiler-sfc": "3.5.32",
+    "@vue/server-renderer": "3.5.32",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -135,7 +135,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.13.0",
+    "cypress": "15.13.1",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -150,9 +150,9 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",
-    "playwright": "^1.58.2",
-    "playwright-core": "^1.58.2",
-    "postcss": "8.5.8",
+    "playwright": "^1.59.1",
+    "playwright-core": "^1.59.1",
+    "postcss": "8.5.9",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",
@@ -163,7 +163,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.98.0",
+    "sass": "^1.99.0",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.5",

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

@@ -1,7 +1,6 @@
 <script>
 import { uniqueId, isBoolean } from 'lodash-es';
-import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
-import { looseIndexOf } from '../../../../vendor/bootstrap-vue/src/utils/loose-index-of';
+import { looseEqual, looseIndexOf } from '../../../../utils/equality_utils';
 
 export default {
   name: 'GlFormCheckbox',

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

@@ -1,6 +1,6 @@
 <script>
 import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
-import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
+import { looseEqual } from '../../../../utils/equality_utils';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox.vue';

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

@@ -1,6 +1,6 @@
 <script>
 import { isBoolean, uniqueId } from 'lodash-es';
-import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
+import { looseEqual } from '../../../../utils/equality_utils';
 
 export default {
   name: 'GlFormRadio',

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

@@ -1,6 +1,6 @@
 <script>
 import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
-import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
+import { looseEqual } from '../../../../utils/equality_utils';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio.vue';

package/src/components/base/table/table.scss

@@ -23,6 +23,14 @@ table.gl-table {
     }
   }
 
+  &.table-borderless {
+    tr {
+      td {
+        @apply gl-border-b-0;
+      }
+    }
+  }
+
   thead tr th {
     @apply gl-font-bold gl-text-heading;
 

package/src/components/utilities/truncate/truncate.scss

@@ -6,8 +6,10 @@
 .gl-truncate-start,
 .gl-truncate-end {
   flex: 0 1 auto;
+  min-width: 0;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-x: clip;
+  overflow-y: visible;
 }
 
 .gl-truncate-start {

package/src/scss/mixins.scss

@@ -2,7 +2,9 @@
 
 @mixin str-truncated($max-width: 82%) {
   display: inline-block;
-  overflow: hidden;
+  min-width: 0;
+  overflow-x: clip;
+  overflow-y: visible;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;

package/src/utils/equality_utils.js

@@ -0,0 +1,82 @@
+/**
+ * Performs a deep, type-coercing equality check between two values.
+ *
+ * Unlike strict equality (`===`) or lodash's `isEqual`, this function:
+ * - Compares objects and arrays by structure, not reference
+ * - Coerces types before comparing primitives (e.g. `123` equals `'123'`)
+ * - Compares Date objects by timestamp
+ * - Compares File objects by inherited properties (name, size, type, lastModified)
+ *
+ * Used in form components (radio, checkbox) to detect meaningful value changes
+ * in watchers, avoiding redundant event emissions when values are loosely equivalent.
+ *
+ * @param {*} a - First value to compare
+ * @param {*} b - Second value to compare
+ * @returns {boolean} Whether the two values are loosely equal
+ */
+export function looseEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  let aValidType = a instanceof Date;
+  let bValidType = b instanceof Date;
+  if (aValidType || bValidType) {
+    return aValidType && bValidType ? a.getTime() === b.getTime() : false;
+  }
+  aValidType = Array.isArray(a);
+  bValidType = Array.isArray(b);
+  if (aValidType || bValidType) {
+    if (!aValidType || !bValidType || a.length !== b.length) {
+      return false;
+    }
+    // Compare arrays element by element
+    // Uses a for loop to handle sparse arrays (array.every doesn't handle sparse)
+    let equal = true;
+    for (let i = 0; equal && i < a.length; i += 1) {
+      equal = looseEqual(a[i], b[i]);
+    }
+    return equal;
+  }
+  aValidType = a !== null && typeof a === 'object';
+  bValidType = b !== null && typeof b === 'object';
+  if (aValidType || bValidType) {
+    if (!aValidType || !bValidType) {
+      return false;
+    }
+    const aKeysCount = Object.keys(a).length;
+    const bKeysCount = Object.keys(b).length;
+    if (aKeysCount !== bKeysCount) {
+      return false;
+    }
+    // Intentionally iterates inherited properties to compare complex types
+    // like File objects where properties are on the prototype
+    // eslint-disable-next-line guard-for-in
+    for (const key in a) {
+      const aHasKey = Object.prototype.hasOwnProperty.call(a, key);
+      const bHasKey = Object.prototype.hasOwnProperty.call(b, key);
+      if ((aHasKey && !bHasKey) || (!aHasKey && bHasKey) || !looseEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+  }
+  return String(a) === String(b);
+}
+
+/**
+ * Finds the first index in an array where the element is loosely equal to the given value.
+ *
+ * Works like `Array.prototype.indexOf`, but uses {@link looseEqual} for comparison
+ * instead of strict equality.
+ *
+ * @param {Array} array - The array to search
+ * @param {*} value - The value to find
+ * @returns {number} The index of the first loosely matching element, or -1 if not found
+ */
+export function looseIndexOf(array, value) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (looseEqual(array[i], value)) {
+      return i;
+    }
+  }
+  return -1;
+}

package/src/vendor/bootstrap-vue/src/components/button/button-close.js

@@ -4,16 +4,31 @@ import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
 import { SLOT_NAME_DEFAULT } from '../../constants/slots'
 import { stopEvent } from '../../utils/events'
 import { isEvent } from '../../utils/inspect'
-import { makeProp } from '../../utils/props'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 
 // --- Props ---
 
 export const props = {
-  ariaLabel: makeProp(PROP_TYPE_STRING, 'Close'),
-  content: makeProp(PROP_TYPE_STRING, '×'),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  textVariant: makeProp(PROP_TYPE_STRING)
+  ariaLabel: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Close'
+  },
+  content: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: '×'
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  textVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/button/button.js

@@ -7,7 +7,7 @@ import { addClass, isTag, removeClass } from '../../utils/dom'
 import { stopEvent } from '../../utils/events'
 import { isBoolean, isEvent, isFunction } from '../../utils/inspect'
 import { omit, sortKeys } from '../../utils/object'
-import { makeProp, pluckProps } from '../../utils/props'
+import { pluckProps } from '../../utils/props'
 import { isLink as isLinkStrict } from '../../utils/router'
 import { BLink, props as BLinkProps } from '../link/link'
 
@@ -19,15 +19,43 @@ delete linkProps.to.default
 
 export const props = sortKeys({
   ...linkProps,
-  block: makeProp(PROP_TYPE_BOOLEAN, false),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  block: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Tri-state: `true`, `false` or `null`
   // => On, off, not a toggle
-  pressed: makeProp(PROP_TYPE_BOOLEAN, null),
-  size: makeProp(PROP_TYPE_STRING),
-  tag: makeProp(PROP_TYPE_STRING, 'button'),
-  type: makeProp(PROP_TYPE_STRING, 'button'),
-  variant: makeProp(PROP_TYPE_STRING, 'secondary')
+  pressed: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: null
+  },
+  size: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'button'
+  },
+  type: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'button'
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'secondary'
+  }
 })
 
 // --- Helper methods ---

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-item.js

@@ -1,10 +1,10 @@
 import { extend } from '../../vue'
 import { NAME_DROPDOWN_ITEM } from '../../constants/components'
 import { EVENT_NAME_CLICK } from '../../constants/events'
-import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props'
 import { requestAF } from '../../utils/dom'
 import { omit, sortKeys } from '../../utils/object'
-import { makeProp, pluckProps } from '../../utils/props'
+import { pluckProps } from '../../utils/props'
 import { attrsMixin } from '../../mixins/attrs'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BLink, props as BLinkProps } from '../link/link'
@@ -15,8 +15,16 @@ const linkProps = omit(BLinkProps, ['event', 'routerTag'])
 
 export const props = sortKeys({
   ...linkProps,
-  linkClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  variant: makeProp(PROP_TYPE_STRING)
+  linkClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 })
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown-text.js

@@ -1,15 +1,26 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_DROPDOWN_TEXT } from '../../constants/components'
-import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_STRING } from '../../constants/props'
+import { PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props'
 import { omit } from '../../utils/object'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  tag: makeProp(PROP_TYPE_STRING, 'p'),
-  textClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  variant: makeProp(PROP_TYPE_STRING)
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'p'
+  },
+  textClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/dropdown/dropdown.js

@@ -1,16 +1,14 @@
 import { extend } from '../../vue'
 import { NAME_DROPDOWN } from '../../constants/components'
 import {
-  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_ARRAY,
   PROP_TYPE_BOOLEAN,
   PROP_TYPE_OBJECT,
-  PROP_TYPE_OBJECT_STRING,
   PROP_TYPE_STRING
 } from '../../constants/props'
 import { SLOT_NAME_BUTTON_CONTENT, SLOT_NAME_DEFAULT } from '../../constants/slots'
 import { arrayIncludes } from '../../utils/array'
 import { htmlOrText } from '../../utils/html'
-import { makeProp } from '../../utils/props'
 import { toString } from '../../utils/string'
 import { dropdownMixin, props as dropdownProps } from '../../mixins/dropdown'
 import { idMixin, props as idProps } from '../../mixins/id'
@@ -23,29 +21,106 @@ import { sortKeys } from '../../utils/object'
 export const props = sortKeys({
   ...idProps,
   ...dropdownProps,
-  block: makeProp(PROP_TYPE_BOOLEAN, false),
-  html: makeProp(PROP_TYPE_STRING),
+  block: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  html: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // If `true`, only render menu contents when open
-  lazy: makeProp(PROP_TYPE_BOOLEAN, false),
-  menuClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  noCaret: makeProp(PROP_TYPE_BOOLEAN, false),
-  role: makeProp(PROP_TYPE_STRING, 'menu'),
-  size: makeProp(PROP_TYPE_STRING),
-  split: makeProp(PROP_TYPE_BOOLEAN, false),
-  splitButtonType: makeProp(PROP_TYPE_STRING, 'button', value => {
-    return arrayIncludes(['button', 'submit', 'reset'], value)
-  }),
-  splitClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  splitHref: makeProp(PROP_TYPE_STRING),
-  splitTo: makeProp(PROP_TYPE_OBJECT_STRING),
-  splitVariant: makeProp(PROP_TYPE_STRING),
-  text: makeProp(PROP_TYPE_STRING),
-  toggleAttrs: makeProp(PROP_TYPE_OBJECT, {}),
-  toggleClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  toggleTag: makeProp(PROP_TYPE_STRING, 'button'),
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  menuClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  noCaret: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  role: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'menu'
+  },
+  size: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  split: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  splitButtonType: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'button',
+    validator: value => {
+      return arrayIncludes(['button', 'submit', 'reset'], value)
+    }
+  },
+  splitClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  splitHref: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  splitTo: {
+    type: [PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  splitVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  text: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  toggleAttrs: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: () => ({})
+  },
+  toggleClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  toggleTag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'button'
+  },
   // TODO: This really should be `toggleLabel`
-  toggleText: makeProp(PROP_TYPE_STRING, 'Toggle dropdown'),
-  variant: makeProp(PROP_TYPE_STRING, 'secondary')
+  toggleText: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'Toggle dropdown'
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'secondary'
+  }
 })
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/form/form-text.js

@@ -1,15 +1,30 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_FORM_TEXT } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  id: makeProp(PROP_TYPE_STRING),
-  inline: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'small'),
-  textVariant: makeProp(PROP_TYPE_STRING, 'muted')
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  inline: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'small'
+  },
+  textVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'muted'
+  }
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/form/form.js

@@ -1,15 +1,30 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_FORM } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  id: makeProp(PROP_TYPE_STRING),
-  inline: makeProp(PROP_TYPE_BOOLEAN, false),
-  novalidate: makeProp(PROP_TYPE_BOOLEAN, false),
-  validated: makeProp(PROP_TYPE_BOOLEAN, false)
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  inline: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  novalidate: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  validated: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/layout/form-row.js

@@ -1,12 +1,15 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_FORM_ROW } from '../../constants/components'
 import { PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  tag: makeProp(PROP_TYPE_STRING, 'div')
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  }
 }
 
 // --- Main component ---

package/src/vendor/bootstrap-vue/src/components/table/tbody.js

@@ -1,7 +1,6 @@
 import { extend } from '../../vue'
 import { NAME_TBODY } from '../../constants/components'
 import { PROP_TYPE_OBJECT } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 import { attrsMixin } from '../../mixins/attrs'
 import { listenersMixin } from '../../mixins/listeners'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
@@ -9,8 +8,16 @@ import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 // --- Props ---
 
 export const props = {
-  tbodyTransitionHandlers: makeProp(PROP_TYPE_OBJECT),
-  tbodyTransitionProps: makeProp(PROP_TYPE_OBJECT)
+  tbodyTransitionHandlers: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: undefined
+  },
+  tbodyTransitionProps: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---