@gitlab/ui 132.0.2 → 132.1.0

package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-popper.js

@@ -3,12 +3,11 @@ import { extend } from '../../../vue';
 import { NAME_POPPER } from '../../../constants/components';
 import { EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../../constants/events';
 import { onInstanceDestroy } from '../../../utils/on-instance-destroy';
-import { PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING, PROP_TYPE_ARRAY_STRING } from '../../../constants/props';
+import { PROP_TYPE_NUMBER, PROP_TYPE_STRING, PROP_TYPE_ARRAY } from '../../../constants/props';
 import { HTMLElement, SVGElement } from '../../../constants/safe-types';
 import { useParentMixin } from '../../../mixins/use-parent';
 import { requestAF, select, getCS } from '../../../utils/dom';
 import { toFloat } from '../../../utils/number';
-import { makeProp } from '../../../utils/props';
 import { BVTransition } from '../../transition/bv-transition';
 
 // Base on-demand component for tooltip / popover templates
@@ -57,17 +56,45 @@ const OffsetMap = {
 const props = {
   // The minimum distance (in `px`) from the edge of the
   // tooltip/popover that the arrow can be positioned
-  arrowPadding: makeProp(PROP_TYPE_NUMBER_STRING, 6),
+  arrowPadding: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 6
+  },
   // 'scrollParent', 'viewport', 'window', or `Element`
-  boundary: makeProp([HTMLElement, PROP_TYPE_STRING], 'scrollParent'),
+  boundary: {
+    type: [HTMLElement, PROP_TYPE_STRING],
+    required: false,
+    default: 'scrollParent'
+  },
   // Tooltip/popover will try and stay away from
   // boundary edge by this many pixels
-  boundaryPadding: makeProp(PROP_TYPE_NUMBER_STRING, 5),
-  fallbackPlacement: makeProp(PROP_TYPE_ARRAY_STRING, 'flip'),
-  offset: makeProp(PROP_TYPE_NUMBER_STRING, 0),
-  placement: makeProp(PROP_TYPE_STRING, 'top'),
+  boundaryPadding: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 5
+  },
+  fallbackPlacement: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_STRING],
+    required: false,
+    default: 'flip'
+  },
+  offset: {
+    type: [PROP_TYPE_NUMBER, PROP_TYPE_STRING],
+    required: false,
+    default: 0
+  },
+  placement: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'top'
+  },
   // Element that the tooltip/popover is positioned relative to
-  target: makeProp([HTMLElement, SVGElement])
+  target: {
+    type: [HTMLElement, SVGElement],
+    required: false,
+    default: undefined
+  }
 };
 
 // --- Main component ---

package/dist/vendor/bootstrap-vue/src/components/tooltip/helpers/bv-tooltip-template.js

@@ -3,7 +3,6 @@ import { NAME_TOOLTIP_TEMPLATE } from '../../../constants/components';
 import { EVENT_NAME_MOUSEENTER, EVENT_NAME_MOUSELEAVE, EVENT_NAME_FOCUSIN, EVENT_NAME_FOCUSOUT } from '../../../constants/events';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../../constants/props';
 import { isFunction } from '../../../utils/inspect';
-import { makeProp } from '../../../utils/props';
 import { scopedStyleMixin } from '../../../mixins/scoped-style';
 import { BVPopper } from './bv-popper';
 
@@ -11,9 +10,17 @@ import { BVPopper } from './bv-popper';
 
 const props = {
   // Used only by the directive versions
-  html: makeProp(PROP_TYPE_BOOLEAN, false),
+  html: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Other non-reactive (while open) props are pulled in from BVPopper
-  id: makeProp(PROP_TYPE_STRING)
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 };
 
 // --- Main component ---

package/dist/vendor/bootstrap-vue/src/components/transition/bv-transition.js

@@ -2,7 +2,6 @@ import { extend, mergeData } from '../../vue';
 import { NAME_TRANSITION } from '../../constants/components';
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING, PROP_TYPE_OBJECT } from '../../constants/props';
 import { isPlainObject } from '../../utils/inspect';
-import { makeProp } from '../../utils/props';
 
 // Generic Bootstrap v4 fade (no-fade) transition component
 //
@@ -32,14 +31,30 @@ const FADE_PROPS = {
 
 const props = {
   // Has no effect if `trans-props` provided
-  appear: makeProp(PROP_TYPE_BOOLEAN, false),
+  appear: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // Can be overridden by user supplied `trans-props`
-  mode: makeProp(PROP_TYPE_STRING),
+  mode: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Only applicable to the built in transition
   // Has no effect if `trans-props` provided
-  noFade: makeProp(PROP_TYPE_BOOLEAN, false),
+  noFade: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // For user supplied transitions (if needed)
-  transProps: makeProp(PROP_TYPE_OBJECT)
+  transProps: {
+    type: PROP_TYPE_OBJECT,
+    required: false,
+    default: undefined
+  }
 };
 const hasAnimateSupport = typeof Element !== 'undefined' && Boolean(Element.prototype.animate);
 

package/dist/vendor/bootstrap-vue/src/components/transporter/transporter.js

@@ -1,14 +1,13 @@
 import { extend, isVue3 } from '../../vue';
-import { NAME_TRANSPORTER_TARGET, NAME_TRANSPORTER } from '../../constants/components';
+import { NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET } from '../../constants/components';
 import { IS_BROWSER } from '../../constants/env';
-import { PROP_TYPE_ARRAY_FUNCTION, PROP_TYPE_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props';
+import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY, PROP_TYPE_FUNCTION } from '../../constants/props';
 import { HTMLElement } from '../../constants/safe-types';
 import { concat } from '../../utils/array';
-import { removeNode, select } from '../../utils/dom';
+import { select, removeNode } from '../../utils/dom';
 import { identity } from '../../utils/identity';
-import { isFunction, isString } from '../../utils/inspect';
+import { isString, isFunction } from '../../utils/inspect';
 import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-import { makeProp } from '../../utils/props';
 import { createNewChildComponent } from '../../utils/create-new-child-component';
 
 // --- Helper components ---
@@ -36,7 +35,11 @@ const BVTransporterTarget = /*#__PURE__*/extend({
   props: {
     // Even though we only support a single root element,
     // VNodes are always passed as an array
-    nodes: makeProp(PROP_TYPE_ARRAY_FUNCTION)
+    nodes: {
+      type: [PROP_TYPE_ARRAY, PROP_TYPE_FUNCTION],
+      required: false,
+      default: undefined
+    }
   },
   data: vm => {
     return {
@@ -67,10 +70,22 @@ const props = {
   // String: CSS selector,
   // HTMLElement: Element reference
   // Mainly needed for tooltips/popovers inside modals
-  container: makeProp([HTMLElement, PROP_TYPE_STRING], 'body'),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
+  container: {
+    type: [HTMLElement, PROP_TYPE_STRING],
+    required: false,
+    default: 'body'
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
   // This should be set to match the root element type
-  tag: makeProp(PROP_TYPE_STRING, 'div')
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  }
 };
 
 // --- Main component ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "132.0.2",
+  "version": "132.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -71,7 +71,7 @@
   "dependencies": {
     "@floating-ui/dom": "1.7.6",
     "echarts": "^5.6.0",
-    "gridstack": "^12.4.2",
+    "gridstack": "^12.6.0",
     "iframe-resizer": "^4.4.5",
     "lodash-es": "^4.18.1",
     "popper.js": "^1.16.1",

package/src/components/base/link/link.vue

@@ -2,8 +2,8 @@
 import { isFunction, isString, isObject, toString, isBoolean, concat } from 'lodash-es';
 import { SafeLinkDirective, isExternalURL } from '../../../directives/safe_link/safe_link';
 import { stopEvent } from '../../../utils/utils';
+import { buildQueryString } from '../../../utils/url_utils';
 import { isVue3, safeVueInstance } from '../../../utils/vue_utils';
-import { stringifyQueryObj } from '../../../vendor/bootstrap-vue/src/utils/router';
 import {
   linkVariantOptions,
   linkVariantInline,
@@ -187,7 +187,7 @@ export default {
       // Fallback to `to.path' + `to.query` + `to.hash` prop (if `to` is an object)
       if (isObject(to) && (to.path || to.query || to.hash)) {
         const path = toString(to.path);
-        const query = stringifyQueryObj(to.query);
+        const query = buildQueryString(to.query);
         let hash = toString(to.hash);
         hash = !hash || hash.charAt(0) === '#' ? hash : `#${hash}`;
         return `${path}${query}${hash}` || fallback;

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.vue

@@ -1,4 +1,5 @@
 <script>
+import { markRaw } from 'vue';
 import { GridStack } from 'gridstack';
 import { pickBy } from 'lodash-es';
 import { breakpoints } from '../../../../utils/breakpoints';
@@ -65,7 +66,6 @@ export default {
   },
   data() {
     return {
-      grid: undefined,
       gridPanels: [],
     };
   },
@@ -164,24 +164,26 @@ export default {
     },
     initGridStack() {
       // See https://github.com/gridstack/gridstack.js/tree/master/doc#grid-options
-      this.grid = GridStack.init(
-        {
-          // Uniform gap between panels
-          margin: '8px',
-          // CSS Selector for finding the drag handle element
-          handle: '.grid-stack-item-handle',
-          // Setting 1 in minRow prevents the grid collapsing when all panels are removed
-          minRow: 1,
-          // Define the number of columns for anything below a set width, defaults to fill the available space
-          columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
-          cellHeight: this.cellHeight,
-          alwaysShowResizeHandle: true,
-          animate: true,
-          float: true,
-          // Toggles user-customization of grid layout
-          staticGrid: this.isStaticGrid,
-        },
-        this.$refs.grid,
+      this.grid = markRaw(
+        GridStack.init(
+          {
+            // Uniform gap between panels
+            margin: '8px',
+            // CSS Selector for finding the drag handle element
+            handle: '.grid-stack-item-handle',
+            // Setting 1 in minRow prevents the grid collapsing when all panels are removed
+            minRow: 1,
+            // Define the number of columns for anything below a set width, defaults to fill the available space
+            columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
+            cellHeight: this.cellHeight,
+            alwaysShowResizeHandle: true,
+            animate: true,
+            float: true,
+            // Toggles user-customization of grid layout
+            staticGrid: this.isStaticGrid,
+          },
+          this.$refs.grid,
+        ),
       ).load(this.gridConfig);
 
       // Sync Vue components array with gridstack items

package/src/utils/url_utils.js

@@ -0,0 +1,66 @@
+const RX_ENCODE_REVERSE = /[!'()*]/g;
+const RX_ENCODED_COMMA = /%2C/g;
+
+const encodeReserveReplacer = (c) => `%${c.charCodeAt(0).toString(16)}`;
+
+const encode = (str) =>
+  encodeURIComponent(String(str))
+    .replace(RX_ENCODE_REVERSE, encodeReserveReplacer)
+    .replace(RX_ENCODED_COMMA, ',');
+
+/**
+ * Converts a query parameter object into a URL query string prefixed with `?`.
+ *
+ * Uses RFC 3986-compliant encoding which additionally escapes `[!'()*]` and preserves commas,
+ * unlike `URLSearchParams` which cannot represent key-only params (`?foo`) or skip `undefined` values.
+ *
+ * - `undefined` values are omitted entirely.
+ * - `null` values produce key-only entries (e.g., `?foo`).
+ * - Array values repeat the key for each element (e.g., `?bar=a&bar=b`).
+ *
+ * @param {Object<string, string | number | null | undefined | Array<string | number | null | undefined>>} obj
+ *   An object whose keys are query parameter names and values are parameter values.
+ * @returns {string} A query string prefixed with `?`, or an empty string if the input
+ *   is not a plain object or produces no parameters.
+ *
+ * @example
+ * buildQueryString({ page: 1, search: 'hello world' })
+ * // => '?page=1&search=hello%20world'
+ *
+ * @example
+ * buildQueryString({ foo: null, bar: undefined })
+ * // => '?foo'
+ */
+export const buildQueryString = (obj) => {
+  if (obj === null || typeof obj !== 'object' || Array.isArray(obj)) {
+    return '';
+  }
+
+  const query = Object.keys(obj)
+    .map((key) => {
+      const value = obj[key];
+      if (value === undefined) {
+        return '';
+      }
+      if (value === null) {
+        return encode(key);
+      }
+      if (Array.isArray(value)) {
+        return value
+          .reduce((results, item) => {
+            if (item === null) {
+              results.push(encode(key));
+            } else if (item !== undefined) {
+              results.push(`${encode(key)}=${encode(item)}`);
+            }
+            return results;
+          }, [])
+          .join('&');
+      }
+      return `${encode(key)}=${encode(value)}`;
+    })
+    .filter((x) => x.length > 0)
+    .join('&');
+
+  return query ? `?${query}` : '';
+};

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

@@ -1,13 +1,16 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_DROPDOWN_DIVIDER } from '../../constants/components'
 import { PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 import { omit } from '../../utils/object'
 
 // --- Props ---
 
 export const props = {
-  tag: makeProp(PROP_TYPE_STRING, 'hr')
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'hr'
+  }
 }
 
 // --- Main component ---

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

@@ -1,16 +1,28 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_DROPDOWN_FORM } from '../../constants/components'
-import { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_BOOLEAN } from '../../constants/props'
+import {
+  PROP_TYPE_ARRAY,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_OBJECT,
+  PROP_TYPE_STRING
+} from '../../constants/props'
 import { omit, sortKeys } from '../../utils/object'
-import { makeProp } from '../../utils/props'
 import { BForm, props as formControlProps } from '../form/form'
 
 // --- Props ---
 
 export const props = sortKeys({
   ...formControlProps,
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  formClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING)
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  formClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  }
 })
 
 // --- Main component ---

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

@@ -1,22 +1,45 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_DROPDOWN_GROUP } 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 { SLOT_NAME_DEFAULT, SLOT_NAME_HEADER } from '../../constants/slots'
 import { isTag } from '../../utils/dom'
 import { identity } from '../../utils/identity'
 import { hasNormalizedSlot, normalizeSlot } from '../../utils/normalize-slot'
 import { omit } from '../../utils/object'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  ariaDescribedby: makeProp(PROP_TYPE_STRING),
-  header: makeProp(PROP_TYPE_STRING),
-  headerClasses: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  headerTag: makeProp(PROP_TYPE_STRING, 'header'),
-  headerVariant: makeProp(PROP_TYPE_STRING),
-  id: makeProp(PROP_TYPE_STRING)
+  ariaDescribedby: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  header: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  headerClasses: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  headerTag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'header'
+  },
+  headerVariant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---

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

@@ -3,14 +3,25 @@ import { NAME_DROPDOWN_HEADER } from '../../constants/components'
 import { PROP_TYPE_STRING } from '../../constants/props'
 import { isTag } from '../../utils/dom'
 import { omit } from '../../utils/object'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  id: makeProp(PROP_TYPE_STRING),
-  tag: makeProp(PROP_TYPE_STRING, 'header'),
-  variant: makeProp(PROP_TYPE_STRING)
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'header'
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  }
 }
 
 // --- Main component ---

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

@@ -2,23 +2,47 @@ import { extend } from '../../vue'
 import { NAME_DROPDOWN_ITEM_BUTTON } from '../../constants/components'
 import { EVENT_NAME_CLICK } from '../../constants/events'
 import {
-  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_ARRAY,
   PROP_TYPE_BOOLEAN,
+  PROP_TYPE_OBJECT,
   PROP_TYPE_STRING
 } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 import { attrsMixin } from '../../mixins/attrs'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 
 // --- Props ---
 
 export const props = {
-  active: makeProp(PROP_TYPE_BOOLEAN, false),
-  activeClass: makeProp(PROP_TYPE_STRING, 'active'),
-  buttonClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  variant: makeProp(PROP_TYPE_STRING),
-  role: makeProp(PROP_TYPE_STRING, 'menuitem')
+  active: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  activeClass: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'active'
+  },
+  buttonClass: {
+    type: [PROP_TYPE_ARRAY, PROP_TYPE_OBJECT, PROP_TYPE_STRING],
+    required: false,
+    default: undefined
+  },
+  disabled: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  variant: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  role: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'menuitem'
+  }
 }
 
 // --- Main component ---

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

@@ -1,19 +1,46 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_FORM_INVALID_FEEDBACK } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  ariaLive: makeProp(PROP_TYPE_STRING),
-  forceShow: makeProp(PROP_TYPE_BOOLEAN, false),
-  id: makeProp(PROP_TYPE_STRING),
-  role: makeProp(PROP_TYPE_STRING),
+  ariaLive: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  forceShow: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  role: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Tri-state prop: `true`, `false`, or `null`
-  state: makeProp(PROP_TYPE_BOOLEAN, null),
-  tag: makeProp(PROP_TYPE_STRING, 'div'),
-  tooltip: makeProp(PROP_TYPE_BOOLEAN, false)
+  state: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: null
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  },
+  tooltip: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 // --- Main component ---

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

@@ -1,19 +1,46 @@
 import { extend, mergeData } from '../../vue'
 import { NAME_FORM_VALID_FEEDBACK } from '../../constants/components'
 import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props'
-import { makeProp } from '../../utils/props'
 
 // --- Props ---
 
 export const props = {
-  ariaLive: makeProp(PROP_TYPE_STRING),
-  forceShow: makeProp(PROP_TYPE_BOOLEAN, false),
-  id: makeProp(PROP_TYPE_STRING),
-  role: makeProp(PROP_TYPE_STRING),
+  ariaLive: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  forceShow: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  },
+  id: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
+  role: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: undefined
+  },
   // Tri-state prop: `true`, `false`, or `null`
-  state: makeProp(PROP_TYPE_BOOLEAN, null),
-  tag: makeProp(PROP_TYPE_STRING, 'div'),
-  tooltip: makeProp(PROP_TYPE_BOOLEAN, false)
+  state: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: null
+  },
+  tag: {
+    type: PROP_TYPE_STRING,
+    required: false,
+    default: 'div'
+  },
+  tooltip: {
+    type: PROP_TYPE_BOOLEAN,
+    required: false,
+    default: false
+  }
 }
 
 // --- Main component ---