@gitlab/ui 112.2.1 → 112.2.3

package/dist/tokens/tokens_story.js

@@ -86,4 +86,4 @@ var __vue_staticRenderFns__ = [];
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };

package/dist/tokens/tokens_table.js

@@ -262,4 +262,4 @@ var __vue_staticRenderFns__ = [];
     undefined
   );
 
-export default __vue_component__;
+export { __vue_component__ as default };

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

@@ -2,7 +2,6 @@
 const NAME_BUTTON = 'BButton';
 const NAME_BUTTON_CLOSE = 'BButtonClose';
 const NAME_COL = 'BCol';
-const NAME_COLLAPSE = 'BCollapse';
 const NAME_DROPDOWN = 'BDropdown';
 const NAME_DROPDOWN_DIVIDER = 'BDropdownDivider';
 const NAME_DROPDOWN_FORM = 'BDropdownForm';
@@ -46,7 +45,6 @@ const NAME_TOOLTIP = 'BTooltip';
 const NAME_TR = 'BTr';
 
 // Helper component names
-const NAME_COLLAPSE_HELPER = 'BVCollapse';
 const NAME_FORM_BUTTON_LABEL_CONTROL = 'BVFormBtnLabelControl';
 const NAME_FORM_RATING_STAR = 'BVFormRatingStar';
 const NAME_POPOVER_HELPER = 'BVPopover';
@@ -60,4 +58,4 @@ const NAME_TRANSITION = 'BVTransition';
 const NAME_TRANSPORTER = 'BVTransporter';
 const NAME_TRANSPORTER_TARGET = 'BVTransporterTarget';
 
-export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_COLLAPSE, NAME_COLLAPSE_HELPER, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };
+export { NAME_BUTTON, NAME_BUTTON_CLOSE, NAME_COL, NAME_DROPDOWN, NAME_DROPDOWN_DIVIDER, NAME_DROPDOWN_FORM, NAME_DROPDOWN_GROUP, NAME_DROPDOWN_HEADER, NAME_DROPDOWN_ITEM, NAME_DROPDOWN_ITEM_BUTTON, NAME_DROPDOWN_TEXT, NAME_FORM, NAME_FORM_BUTTON_LABEL_CONTROL, NAME_FORM_CHECKBOX, NAME_FORM_CHECKBOX_GROUP, NAME_FORM_GROUP, NAME_FORM_INVALID_FEEDBACK, NAME_FORM_RADIO, NAME_FORM_RADIO_GROUP, NAME_FORM_RATING_STAR, NAME_FORM_ROW, NAME_FORM_SELECT, NAME_FORM_SELECT_OPTION, NAME_FORM_SELECT_OPTION_GROUP, NAME_FORM_TEXT, NAME_FORM_TEXTAREA, NAME_FORM_VALID_FEEDBACK, NAME_LINK, NAME_MODAL, NAME_NAV, NAME_NAV_ITEM, NAME_POPOVER, NAME_POPOVER_HELPER, NAME_POPOVER_TEMPLATE, NAME_POPPER, NAME_TAB, NAME_TABLE, NAME_TABLE_CELL, NAME_TABLE_LITE, NAME_TABLE_SIMPLE, NAME_TABS, NAME_TAB_BUTTON_HELPER, NAME_TBODY, NAME_TFOOT, NAME_TH, NAME_THEAD, NAME_TOAST, NAME_TOASTER, NAME_TOAST_POP, NAME_TOOLTIP, NAME_TOOLTIP_HELPER, NAME_TOOLTIP_TEMPLATE, NAME_TR, NAME_TRANSITION, NAME_TRANSPORTER, NAME_TRANSPORTER_TARGET };

package/dist/vendor/bootstrap-vue/src/utils/cache.js

@@ -1,7 +1,7 @@
 import { extend } from '../vue';
 import { cloneDeep } from './clone-deep';
 import { looseEqual } from './loose-equal';
-import { keys, hasOwnProperty } from './object';
+import { hasOwnProperty, keys } from './object';
 
 const isEmpty = value => !value || keys(value).length === 0;
 const makePropWatcher = propName => ({

package/dist/vendor/bootstrap-vue/src/utils/props.js

@@ -2,7 +2,7 @@ import { PROP_TYPE_ANY } from '../constants/props';
 import { cloneDeep } from './clone-deep';
 import { getComponentConfig } from './config';
 import { identity } from './identity';
-import { isFunction, isUndefined, isObject, isArray } from './inspect';
+import { isUndefined, isObject, isArray, isFunction } from './inspect';
 import { hasOwnProperty, clone, keys } from './object';
 import { upperFirst } from './string';
 

package/dist/vendor/bootstrap-vue/src/utils/router.js

@@ -1,4 +1,4 @@
-import { RX_ENCODE_REVERSE, RX_ENCODED_COMMA, RX_QUERY_START, RX_PLUS } from '../constants/regex';
+import { RX_QUERY_START, RX_PLUS, RX_ENCODE_REVERSE, RX_ENCODED_COMMA } from '../constants/regex';
 import { isTag } from './dom';
 import { isPlainObject, isUndefined, isNull, isArray, isString } from './inspect';
 import { keys } from './object';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "112.2.1",
+  "version": "112.2.3",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -152,7 +152,7 @@
     "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.11.4",
+    "eslint-plugin-storybook": "0.11.5",
     "fuse.js": "^7.0.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",

package/src/components/base/form/form_input_group/form_input_group.scss

@@ -0,0 +1,19 @@
+.input-group {
+  > .input-group-prepend > .btn-group,
+  > .input-group-append:not(:last-child) > .btn-group,
+  > .input-group-append:last-child > .btn-group:not(:last-child):not(.dropdown-toggle) {
+    > .btn {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  > .input-group-append > .btn-group,
+  > .input-group-prepend:not(:first-child) > .btn-group,
+  > .input-group-prepend:first-child > .btn-group:not(:first-child) {
+    > .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -116,7 +116,7 @@ export default {
 
 <template>
   <nav v-if="isVisible" class="gl-pagination" :aria-label="navigationLabel">
-    <gl-button-group class="gl-keyset-pagination" v-bind="$attrs" v-on="$listeners">
+    <gl-button-group class="gl-keyset-pagination gl-gap-3" v-bind="$attrs" v-on="$listeners">
       <gl-button
         :href="prevButtonLink"
         :disabled="disabled || !hasPreviousPage"

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -213,10 +213,11 @@ export default {
         class="gl-search-box-by-click-history"
         icon="history"
         category="tertiary"
-        toggle-text="Toggle history"
+        toggle-text="Toggle search history"
         text-sr-only
         fluid-width
         :disabled="disabled"
+        aria-label="Recent searches history"
       >
         <template #header>
           <div
@@ -231,6 +232,7 @@ export default {
             v-for="(item, idx) in historyItems"
             :key="idx"
             class="gl-search-box-by-click-history-item"
+            :aria-label="`Select recent search: ${item || 'empty search'}`"
             @action="selectHistoryItem(item)"
           >
             <template #list-item>
@@ -239,9 +241,13 @@ export default {
             </template>
           </gl-disclosure-dropdown-item>
         </template>
-        <div v-else class="gl-px-4 gl-py-2 gl-text-sm gl-text-subtle">
+        <gl-disclosure-dropdown-item
+          v-else
+          class="gl-px-4 gl-py-2 gl-text-sm gl-text-subtle"
+          :aria-label="`Select recent search: ${noRecentSearchesText}`"
+        >
           {{ noRecentSearchesText }}
-        </div>
+        </gl-disclosure-dropdown-item>
 
         <template v-if="historyItems.length" #footer>
           <div

package/src/scss/bootstrap_vue.scss

@@ -10,7 +10,6 @@ $bv-enable-popover-variants: false;
 @import '../vendor/bootstrap-vue/src/components/form-checkbox/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
 @import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
-@import '../vendor/bootstrap-vue/src/components/input-group/index.scss';
 @import '../vendor/bootstrap-vue/src/components/modal/index.scss';
 @import '../vendor/bootstrap-vue/src/components/popover/index.scss';
 @import '../vendor/bootstrap-vue/src/components/table/index.scss';

package/src/scss/components.scss

@@ -35,6 +35,7 @@
 @import '../components/base/filtered_search/filtered_search_token_segment';
 @import '../components/base/form/form_date/form_date';
 @import '../components/base/form/form_input/form_input';
+@import '../components/base/form/form_input_group/form_input_group';
 @import '../components/base/form/form_checkbox/form_checkbox';
 @import '../components/base/form/form_group/form_group';
 @import '../components/base/form/form_radio/form_radio';

package/src/vendor/bootstrap-vue/src/components/form-checkbox/_form-checkbox-group.scss

@@ -1,2 +1 @@
 @import "../../utilities";
-@import "../input-group/index";

package/src/vendor/bootstrap-vue/src/components/form-radio/_form-radio-group.scss

@@ -1,3 +1 @@
 @import "../../utilities";
-// Needed when radio-groups are inside an input group
-@import "../input-group/index";

package/src/vendor/bootstrap-vue/src/components/index.scss

@@ -2,7 +2,6 @@
 @import "form-checkbox/index";
 @import "form-input/index";
 @import "form-radio/index";
-@import "input-group/index";
 @import "modal/index";
 @import "popover/index";
 @import "table/index";

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

@@ -2,7 +2,6 @@
 export const NAME_BUTTON = 'BButton'
 export const NAME_BUTTON_CLOSE = 'BButtonClose'
 export const NAME_COL = 'BCol'
-export const NAME_COLLAPSE = 'BCollapse'
 export const NAME_DROPDOWN = 'BDropdown'
 export const NAME_DROPDOWN_DIVIDER = 'BDropdownDivider'
 export const NAME_DROPDOWN_FORM = 'BDropdownForm'
@@ -46,7 +45,6 @@ export const NAME_TOOLTIP = 'BTooltip'
 export const NAME_TR = 'BTr'
 
 // Helper component names
-export const NAME_COLLAPSE_HELPER = 'BVCollapse'
 export const NAME_FORM_BUTTON_LABEL_CONTROL = 'BVFormBtnLabelControl'
 export const NAME_FORM_RATING_STAR = 'BVFormRatingStar'
 export const NAME_POPOVER_HELPER = 'BVPopover'

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

@@ -1,207 +0,0 @@
-import { extend } from '../../vue';
-import { NAME_COLLAPSE } from '../../constants/components';
-import { EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_HIDE, EVENT_NAME_HIDDEN } from '../../constants/events';
-import { PROP_TYPE_BOOLEAN, PROP_TYPE_STRING } from '../../constants/props';
-import { SLOT_NAME_DEFAULT } from '../../constants/slots';
-import { getRootActionEventName, getRootEventName } from '../../utils/events';
-import { makeModelMixin } from '../../utils/model';
-import { sortKeys } from '../../utils/object';
-import { makePropsConfigurable, makeProp } from '../../utils/props';
-import { props as props$1, idMixin } from '../../mixins/id';
-import { listenOnRootMixin } from '../../mixins/listen-on-root';
-import { normalizeSlotMixin } from '../../mixins/normalize-slot';
-import { BVCollapse } from './helpers/bv-collapse';
-
-// --- Constants ---
-const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle');
-const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state');
-const ROOT_EVENT_NAME_ACCORDION = getRootEventName(NAME_COLLAPSE, 'accordion');
-const ROOT_EVENT_NAME_STATE = getRootEventName(NAME_COLLAPSE, 'state');
-const ROOT_EVENT_NAME_SYNC_STATE = getRootEventName(NAME_COLLAPSE, 'sync-state');
-const {
-  mixin: modelMixin,
-  props: modelProps,
-  prop: MODEL_PROP_NAME,
-  event: MODEL_EVENT_NAME
-} = makeModelMixin('visible', {
-  type: PROP_TYPE_BOOLEAN,
-  defaultValue: false
-});
-
-// --- Props ---
-
-const props = makePropsConfigurable(sortKeys({
-  ...props$1,
-  ...modelProps,
-  // If `true` (and `visible` is `true` on mount), animate initially visible
-  accordion: makeProp(PROP_TYPE_STRING),
-  appear: makeProp(PROP_TYPE_BOOLEAN, false),
-  tag: makeProp(PROP_TYPE_STRING, 'div')
-}), NAME_COLLAPSE);
-
-// --- Main component ---
-
-// @vue/component
-const BCollapse = /*#__PURE__*/extend({
-  name: NAME_COLLAPSE,
-  mixins: [idMixin, modelMixin, normalizeSlotMixin, listenOnRootMixin],
-  props,
-  data() {
-    return {
-      show: this[MODEL_PROP_NAME],
-      transitioning: false
-    };
-  },
-  computed: {
-    classObject() {
-      const {
-        transitioning
-      } = this;
-      return {
-        collapse: !transitioning,
-        show: this.show && !transitioning
-      };
-    },
-    slotScope() {
-      return {
-        visible: this.show,
-        close: () => {
-          this.show = false;
-        }
-      };
-    }
-  },
-  watch: {
-    [MODEL_PROP_NAME](newValue) {
-      if (newValue !== this.show) {
-        this.show = newValue;
-      }
-    },
-    show(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.emitState();
-      }
-    }
-  },
-  created() {
-    this.show = this[MODEL_PROP_NAME];
-  },
-  mounted() {
-    this.show = this[MODEL_PROP_NAME];
-    // Listen for toggle events to open/close us
-    this.listenOnRoot(ROOT_ACTION_EVENT_NAME_TOGGLE, this.handleToggleEvent);
-    // Listen to other collapses for accordion events
-    this.listenOnRoot(ROOT_EVENT_NAME_ACCORDION, this.handleAccordionEvent);
-    this.$nextTick(() => {
-      this.emitState();
-    });
-    // Listen for "Sync state" requests from `v-b-toggle`
-    this.listenOnRoot(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, id => {
-      if (id === this.safeId()) {
-        this.$nextTick(this.emitSync);
-      }
-    });
-  },
-  updated() {
-    // Emit a private event every time this component updates to ensure
-    // the toggle button is in sync with the collapse's state
-    // It is emitted regardless if the visible state changes
-    this.emitSync();
-  },
-  beforeDestroy() {
-    // Trigger state emit if needed
-    this.show = false;
-  },
-  methods: {
-    toggle() {
-      this.show = !this.show;
-    },
-    onEnter() {
-      this.transitioning = true;
-      // This should be moved out so we can add cancellable events
-      this.$emit(EVENT_NAME_SHOW);
-    },
-    onAfterEnter() {
-      this.transitioning = false;
-      this.$emit(EVENT_NAME_SHOWN);
-    },
-    onLeave() {
-      this.transitioning = true;
-      // This should be moved out so we can add cancellable events
-      this.$emit(EVENT_NAME_HIDE);
-    },
-    onAfterLeave() {
-      this.transitioning = false;
-      this.$emit(EVENT_NAME_HIDDEN);
-    },
-    emitState() {
-      const {
-        show,
-        accordion
-      } = this;
-      const id = this.safeId();
-      this.$emit(MODEL_EVENT_NAME, show);
-
-      // Let `v-b-toggle` know the state of this collapse
-      this.emitOnRoot(ROOT_EVENT_NAME_STATE, id, show);
-      if (accordion && show) {
-        // Tell the other collapses in this accordion to close
-        this.emitOnRoot(ROOT_EVENT_NAME_ACCORDION, id, accordion);
-      }
-    },
-    emitSync() {
-      // Emit a private event every time this component updates to ensure
-      // the toggle button is in sync with the collapse's state
-      // It is emitted regardless if the visible state changes
-      this.emitOnRoot(ROOT_EVENT_NAME_SYNC_STATE, this.safeId(), this.show);
-    },
-    handleToggleEvent(id) {
-      if (id === this.safeId()) {
-        this.toggle();
-      }
-    },
-    handleAccordionEvent(openedId, openAccordion) {
-      const {
-        accordion,
-        show
-      } = this;
-      if (!accordion || accordion !== openAccordion) {
-        return;
-      }
-      const isThis = openedId === this.safeId();
-      // Open this collapse if not shown or
-      // close this collapse if shown
-      if (isThis && !show || !isThis && show) {
-        this.toggle();
-      }
-    }
-  },
-  render(h) {
-    const {
-      appear
-    } = this;
-    const $content = h(this.tag, {
-      class: this.classObject,
-      directives: [{
-        name: 'show',
-        value: this.show
-      }],
-      attrs: {
-        id: this.safeId()
-      }
-    }, this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope));
-    return h(BVCollapse, {
-      props: {
-        appear
-      },
-      on: {
-        enter: this.onEnter,
-        afterEnter: this.onAfterEnter,
-        leave: this.onLeave,
-        afterLeave: this.onAfterLeave
-      }
-    }, [$content]);
-  }
-});
-
-export { BCollapse, props };

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

@@ -1,90 +0,0 @@
-import { extend, mergeData } from '../../../vue';
-import { NAME_COLLAPSE_HELPER } from '../../../constants/components';
-import { PROP_TYPE_BOOLEAN } from '../../../constants/props';
-import { setStyle, requestAF, reflow, removeStyle, getBCR } from '../../../utils/dom';
-import { makeProp } from '../../../utils/props';
-
-// Generic collapse transion helper component
-
-// --- Helper methods ---
-
-// Transition event handler helpers
-const onEnter = el => {
-  setStyle(el, 'height', 0);
-  // In a `requestAF()` for `appear` to work
-  requestAF(() => {
-    reflow(el);
-    setStyle(el, 'height', `${el.scrollHeight}px`);
-  });
-};
-const onAfterEnter = el => {
-  removeStyle(el, 'height');
-};
-const onLeave = el => {
-  setStyle(el, 'height', 'auto');
-  setStyle(el, 'display', 'block');
-  setStyle(el, 'height', `${getBCR(el).height}px`);
-  reflow(el);
-  setStyle(el, 'height', 0);
-};
-const onAfterLeave = el => {
-  removeStyle(el, 'height');
-};
-
-// --- Constants ---
-
-// Default transition props
-// `appear` will use the enter classes
-const TRANSITION_PROPS = {
-  css: true,
-  enterClass: '',
-  enterActiveClass: 'collapsing',
-  enterToClass: 'collapse show',
-  leaveClass: 'collapse show',
-  leaveActiveClass: 'collapsing',
-  leaveToClass: 'collapse'
-};
-
-// Default transition handlers
-// `appear` will use the enter handlers
-const TRANSITION_HANDLERS = {
-  enter: onEnter,
-  afterEnter: onAfterEnter,
-  leave: onLeave,
-  afterLeave: onAfterLeave
-};
-
-// --- Main component ---
-
-const props = {
-  // // If `true` (and `visible` is `true` on mount), animate initially visible
-  appear: makeProp(PROP_TYPE_BOOLEAN, false)
-};
-
-// --- Main component ---
-
-// @vue/component
-const BVCollapse = /*#__PURE__*/extend({
-  name: NAME_COLLAPSE_HELPER,
-  functional: true,
-  props,
-  render(h, _ref) {
-    let {
-      props,
-      data,
-      children
-    } = _ref;
-    return h('transition',
-    // We merge in the `appear` prop last
-    mergeData(data, {
-      props: TRANSITION_PROPS,
-      on: TRANSITION_HANDLERS
-    }, {
-      props
-    }),
-    // Note: `<transition>` supports a single root element only
-    children);
-  }
-});
-
-export { BVCollapse, props };

package/dist/vendor/bootstrap-vue/src/components/collapse/index.js

@@ -1 +0,0 @@
-export { BCollapse } from './collapse';

package/src/vendor/bootstrap-vue/src/components/collapse/MODIFICATIONS.md

@@ -1,14 +0,0 @@
-# Modifications to Vendored Code
-
-**Library**: BootstrapVue  
-**Version**: 2.23.1 **Link:** https://bootstrap-vue.org **Source:**
-https://github.com/bootstrap-vue/bootstrap-vue **Copyright:** (c) 2016-2024 BootstrapVue
-**License:** (c)
-[2016-2024 BootstrapVue](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE)
-
-This file documents modifications made to the original BootstrapVue component files.
-
-## Removed props
-
-The property `isNav` and code executed based on this property has been removed, as we removed the
-Navbar logic.