@gitlab/ui 131.1.0 → 131.3.0

package/dist/vendor/bootstrap-vue/src/components/tabs/tab.js

@@ -1,10 +1,9 @@
 import { extend } from '../../vue';
 import { NAME_TAB } from '../../constants/components';
 import { MODEL_EVENT_NAME_PREFIX } from '../../constants/events';
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_OBJECT } from '../../constants/props';
+import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_ARRAY, PROP_TYPE_OBJECT } from '../../constants/props';
 import { SLOT_NAME_TITLE } from '../../constants/slots';
 import { sortKeys } from '../../utils/object';
-import { makeProp } from '../../utils/props';
 import { props as props$1, idMixin } from '../../mixins/id';
 import { normalizeSlotMixin } from '../../mixins/normalize-slot';
 import { BVTransition } from '../transition/bv-transition';
@@ -18,18 +17,58 @@ const MODEL_EVENT_NAME_ACTIVE = MODEL_EVENT_NAME_PREFIX + MODEL_PROP_NAME_ACTIVE
 
 const props = sortKeys({
   ...props$1,
-  [MODEL_PROP_NAME_ACTIVE]: makeProp(PROP_TYPE_BOOLEAN, false),
-  buttonId: makeProp(PROP_TYPE_STRING),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  lazy: makeProp(PROP_TYPE_BOOLEAN, false),
-  noBody: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'div'),
-  title: makeProp(PROP_TYPE_STRING),
+  [MODEL_PROP_NAME_ACTIVE]: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  buttonId: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  lazy: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  noBody: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  },
+  title: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Sniffed by `<b-tabs>` and added to nav `li.nav-item`
-  titleItemClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  titleLinkAttributes: makeProp(PROP_TYPE_OBJECT),
+  titleItemClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  titleLinkAttributes: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: undefined
+  },
   // Sniffed by `<b-tabs>` and added to nav `a.nav-link`
-  titleLinkClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+  titleLinkClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  }
 });
 
 // --- Main component ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "131.1.0",
+  "version": "131.3.0",
   "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",
@@ -101,7 +101,7 @@
     "@babel/preset-env": "^7.29.2",
     "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
-    "@figma/code-connect": "^1.4.2",
+    "@figma/code-connect": "^1.4.3",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.3.0",
@@ -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",
@@ -150,8 +150,8 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.3.4",
     "pikaday": "^1.8.0",
-    "playwright": "^1.58.2",
-    "playwright-core": "^1.58.2",
+    "playwright": "^1.59.1",
+    "playwright-core": "^1.59.1",
     "postcss": "8.5.8",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
@@ -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/filtered_search/filtered_search.vue

@@ -349,10 +349,15 @@ export default {
         // Preserve the active token's active status (it shifted down one index)
         this.activeTokenIdx -= 1;
       } else if (idx === this.activeTokenIdx) {
-        // User destroyed the active token; don't activate another one.
-        this.activeTokenIdx = null;
+        // User destroyed the active token; activate the last token so focus
+        // moves to the search input rather than being lost.
+        this.activeTokenIdx = this.lastTokenIdx;
+      } else if (this.activeTokenIdx === null) {
+        // No token was active (e.g. clicking the X button on an inactive token);
+        // activate the last token so focus moves to the search input.
+        this.activeTokenIdx = this.lastTokenIdx;
       }
-      // Do nothing if there was no active token, or if idx > this.activeTokenIdx,
+      // Do nothing if idx > this.activeTokenIdx,
       // to preserve the active state of the remaining tokens.
     },
 
@@ -388,6 +393,13 @@ export default {
       }
     },
 
+    onClear() {
+      this.$nextTick(() => {
+        this.activeTokenIdx = this.lastTokenIdx;
+        this.$emit('clear');
+      });
+    },
+
     submit() {
       /**
        * Emitted when search is submitted
@@ -412,7 +424,7 @@ export default {
     @submit="submit"
     @input="applyNewValue"
     @history-item-selected="$emit('history-item-selected', $event)"
-    @clear="$emit('clear')"
+    @clear="onClear"
     @clear-history="$emit('clear-history')"
   >
     <template #history-item="slotScope">

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

@@ -94,7 +94,7 @@ export default {
   },
   computed: {
     showInput() {
-      return this.termsAsTokens() || Boolean(this.placeholder);
+      return this.termsAsTokens() || Boolean(this.placeholder) || this.isLastToken;
     },
     showToken() {
       return this.termsAsTokens() && Boolean(this.value.data);

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

@@ -470,7 +470,8 @@ export default {
           :key="`operator-${_uid}`"
           ref="suggestions"
           role="list"
-          tabindex="0"
+          tabindex="-1"
+          data-testid="filtered-search-suggestion-list"
           :initial-value="defaultSuggestedValue"
           @suggestion="applySuggestion"
         >

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