@gitlab/ui 138.0.0 → 138.2.0

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

@@ -117,7 +117,8 @@ export default {
 </script>
 <template>
   <ul :class="listClasses">
-    <li ref="top"></li>
+    <!-- Sentinel used by stepItem() to reset scroll position; not a real suggestion. -->
+    <li ref="top" aria-hidden="true" role="presentation"></li>
     <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
     <slot></slot>
   </ul>

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

@@ -1,17 +1,185 @@
 <script>
-import { isObject } from 'lodash-es';
-import { BFormSelect } from '../../../../vendor/bootstrap-vue/src/components/form-select/form-select';
+import { isObject, uniqueId, isPlainObject, isBoolean, isUndefined, isNull, get } from 'lodash-es';
 import { formInputWidths } from '../../../../utils/constants';
+import { isVisible } from '../../../../utils/utils';
+import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
 
 export default {
   name: 'GlFormSelect',
-  components: {
-    BFormSelect,
+  directives: {
+    SafeHtml,
   },
   inheritAttrs: false,
   props: {
     /**
-     * Width of the select element.
+     * Current value of the select. Should be set to an array when the 'multiple' prop is set
+     */
+    value: {
+      // Value can be any type!
+      type: undefined,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: [Array, Object],
+      required: false,
+      default: undefined,
+    },
+    /**
+     * When set to a number larger than 0, will set the number of display option rows. Note not all browser will respect this setting
+     * @deprecated Only useful with `multiple`, which is also deprecated.
+     */
+    selectSize: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Render the form control in plain mode, rather than custom styled mode
+     * @deprecated Use a native <select> element instead.
+     */
+    plain: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'
+     * @deprecated Has no effect. Use the `width` prop instead.
+     */
+    size: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false,
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state
+     */
+    state: {
+      // Tri-state prop: true, false, null (or undefined)
+      type: Boolean,
+      required: false,
+      default: null,
+    },
+    /**
+     * Field name in the `options` array that should be used for the value
+     */
+    valueField: {
+      type: String,
+      required: false,
+      default: 'value',
+    },
+    /**
+     * The key to use from the option object to get the label
+     */
+    labelField: {
+      type: String,
+      required: false,
+      default: 'label',
+    },
+    /**
+     * The key to use from the option object to get the options
+     */
+    optionsField: {
+      type: String,
+      required: false,
+      default: 'options',
+    },
+    /**
+     * Field name in the `options` array that should be used for the text label
+     */
+    textField: {
+      type: String,
+      required: false,
+      default: 'text',
+    },
+    /**
+     * Field name in the `options` array that should be used for the disabled state
+     */
+    disabledField: {
+      type: String,
+      required: false,
+      default: 'disabled',
+    },
+    /**
+     * Field name in the `options` array that should be used for the html label instead of text field
+     * @deprecated Using the `.html` field (whatever its name) is potentially unsafe.
+     */
+    htmlField: {
+      type: String,
+      required: false,
+      default: 'html',
+    },
+    /**
+     * When set, allows multiple options to be selected (multi-select)
+     * @deprecated Use GlCollapsibleListbox instead.
+     */
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control
+     */
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * ID of the form that the form control belongs to. Sets the `form` attribute on the control
+     */
+    form: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    /**
+     * Adds the `required` attribute to the form control
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Maximum width of the Select
      */
     width: {
       type: [String, Object],
@@ -32,7 +200,32 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      localValue: this.value,
+      localId: null,
+    };
+  },
   computed: {
+    computedId() {
+      return this.id || this.localId;
+    },
+    computedSelectSize() {
+      // Custom selects with a size of zero causes the arrows to be hidden,
+      // so dont render the size attribute in this case
+      return !this.plain && this.selectSize === 0 ? null : this.selectSize;
+    },
+    computedAriaInvalid() {
+      const { ariaInvalid } = this;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedState() {
+      // If not a boolean, ensure that value is null
+      return isBoolean(this.state) ? this.state : null;
+    },
     cssClasses() {
       if (this.width === null) {
         return [];
@@ -54,15 +247,202 @@ export default {
       // eslint-disable-next-line @gitlab/tailwind-no-interpolation -- Not a CSS utility
       return [`gl-form-select-${this.width}`];
     },
+    stateClass() {
+      if (this.computedState === true) return 'is-valid';
+      if (this.computedState === false) return 'is-invalid';
+      return null;
+    },
+    inputClass() {
+      return [
+        'gl-form-select',
+        this.plain ? 'form-control' : 'custom-select',
+        this.size && this.plain ? `form-control-${this.size}` : null,
+        this.size && !this.plain ? `custom-select-${this.size}` : null,
+        this.stateClass,
+        this.selectClass,
+      ];
+    },
+    normalizedOptions() {
+      return this.normalizeOptions(this.options);
+    },
+  },
+  watch: {
+    value(newValue) {
+      this.localValue = newValue;
+    },
+    localValue(newValue) {
+      /**
+       * Emitted when the select value changes
+       *
+       * @event input
+       * @type {any}
+       */
+      this.$emit('input', newValue);
+    },
+  },
+  activated() {
+    this.handleAutofocus();
+  },
+  async mounted() {
+    this.handleAutofocus();
+    await this.$nextTick();
+    // Update DOM with auto-generated ID after mount
+    // to prevent SSR hydration errors
+    this.localId = uniqueId('gl-form-select-');
+  },
+  methods: {
+    focus() {
+      this.$refs.select?.focus();
+    },
+    blur() {
+      this.$refs.select?.blur();
+    },
+    normalizeOptions(options) {
+      // Normalize the given options array
+      if (Array.isArray(options)) return options.map((option) => this.normalizeOption(option));
+
+      if (isPlainObject(options)) {
+        if (process.env.NODE_ENV !== 'production') {
+          // Deprecate the object options format
+          // eslint-disable-next-line no-console
+          console.warn(
+            '[@gitlab/ui] GlFormSelect - Setting prop "options" to an object is deprecated. Use the array format instead.',
+          );
+        }
+
+        // Normalize a `options` object to an array of options
+        return Object.keys(options).map((key) => this.normalizeOption(options[key] || {}, key));
+      }
+
+      // If not an array or object, return an empty array
+      return [];
+    },
+    normalizeOption(option, key = null) {
+      // When the option is an object, normalize it
+      if (isPlainObject(option)) {
+        const value = get(option, this.valueField);
+        const text = get(option, this.textField);
+        const options = get(option, this.optionsField, null);
+        // When it has options, create an <optgroup> object
+        if (!isNull(options)) {
+          return {
+            label: String(get(option, this.labelField) || text),
+            options: this.normalizeOptions(options),
+          };
+        }
+        // Otherwise create an <option> object
+        return {
+          value: isUndefined(value) ? key || text : value,
+          text: String(isUndefined(text) ? key : text),
+          html: get(option, this.htmlField),
+          disabled: Boolean(get(option, this.disabledField)),
+        };
+      }
+      // Otherwise create an <option> object from the given value
+      return {
+        value: key || option,
+        text: String(option),
+        disabled: false,
+      };
+    },
+    isOptionGroup(option) {
+      return Array.isArray(option.options);
+    },
+    async onChange(event) {
+      const { target } = event;
+      const selectedValue = Array.from(target.options)
+        .filter((option) => option.selected)
+        // NOTE: the _value property is set up by both Vue 2 and 3 explicitly for the
+        // purpose of handling non-string values on form elements.
+        //
+        // See:
+        // - https://github.com/vuejs/vue/blob/v2.7.16/src/platforms/web/runtime/modules/dom-props.ts#L42-L44
+        // - https://github.com/vuejs/vue/blob/v2.7.16/test/unit/modules/vdom/modules/dom-props.spec.ts#L38
+        // - https://github.com/vuejs/core/blob/v3.4.27/packages/runtime-dom/src/modules/props.ts#L48-L50
+        // - https://github.com/vuejs/core/blob/v3.4.27/packages/runtime-dom/__tests__/patchProps.spec.ts#L25
+        // eslint-disable-next-line no-underscore-dangle
+        .map((option) => ('_value' in option ? option._value : option.value));
+
+      this.localValue = target.multiple ? selectedValue : selectedValue[0];
+
+      await this.$nextTick();
+      /**
+       * Emitted when the select value changes via user interaction
+       *
+       * @event change
+       * @type {any}
+       */
+      this.$emit('change', this.localValue);
+    },
+    async handleAutofocus() {
+      await this.$nextTick();
+      window.requestAnimationFrame(() => {
+        if (this.autofocus && isVisible(this.$refs.select)) this.focus();
+      });
+    },
   },
 };
 </script>
 <template>
   <span class="gl-form-select-wrapper" :class="cssClasses">
-    <b-form-select class="gl-form-select" v-bind="$attrs" :class="selectClass" v-on="$listeners">
-      <template v-for="slot in Object.keys($slots)" #[slot]>
-        <slot :name="slot"></slot>
+    <select
+      :id="computedId"
+      ref="select"
+      v-model="localValue"
+      :aria-invalid="computedAriaInvalid"
+      :aria-required="required ? 'true' : null"
+      :class="inputClass"
+      :disabled="disabled"
+      :form="form"
+      :multiple="multiple"
+      :name="name"
+      :required="required"
+      :size="computedSelectSize"
+      v-bind="$attrs"
+      @change="onChange"
+    >
+      <!-- @slot Slot to place options or option groups above options provided via the 'options' prop -->
+      <slot name="first"></slot>
+
+      <template v-for="(option, index) of normalizedOptions">
+        <template v-if="isOptionGroup(option)">
+          <optgroup :key="index" :label="option.label">
+            <template v-for="(childOption, childIndex) of option.options">
+              <option
+                v-if="childOption.html"
+                :key="`${childIndex}-html`"
+                v-safe-html="childOption.html"
+                :value="childOption.value"
+                :disabled="childOption.disabled"
+              ></option>
+              <option
+                v-else
+                :key="childIndex"
+                :value="childOption.value"
+                :disabled="childOption.disabled"
+              >
+                {{ childOption.text }}
+              </option>
+            </template>
+          </optgroup>
+        </template>
+
+        <template v-else>
+          <option
+            v-if="option.html"
+            :key="`${index}-html`"
+            v-safe-html="option.html"
+            :value="option.value"
+            :disabled="option.disabled"
+          ></option>
+          <option v-else :key="index" :value="option.value" :disabled="option.disabled">
+            {{ option.text }}
+          </option>
+        </template>
       </template>
-    </b-form-select>
+
+      <!-- @slot Content to place in the form select after 'options' prop options -->
+      <slot></slot>
+    </select>
   </span>
 </template>

package/src/components/base/sorting/sorting.vue

@@ -98,6 +98,15 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Disables the entire sorting control (both the sort-by dropdown and the
+     * sort direction toggle) while keeping it visible.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -106,7 +115,14 @@ export default {
     };
   },
   computed: {
+    unavailableLabel() {
+      return translate('GlSorting.sortingUnavailable', 'Sorting is unavailable');
+    },
     sortingListboxLabel() {
+      if (this.disabled) {
+        return this.unavailableLabel;
+      }
+
       return translate('GlSorting.sortByLabel', 'Sort by:');
     },
     localSortDirection() {
@@ -119,19 +135,19 @@ export default {
       return this.selectedSortOption?.text ?? '';
     },
     isDirectionToggleDisabled() {
-      return Boolean(this.selectedSortOption?.directionToggleDisabled);
+      return this.disabled || Boolean(this.selectedSortOption?.directionToggleDisabled);
     },
     sortDirectionText() {
-      if (this.sortDirectionToolTip) return this.sortDirectionToolTip;
+      if (this.sortDirectionToolTip && !this.disabled) return this.sortDirectionToolTip;
 
       if (this.isDirectionToggleDisabled) {
         return this.selectedSortText
           ? translate(
               'GlSorting.sortDirectionUnavailableFor',
-              'Sort direction unavailable for %{sortField}',
+              'Sorting is unavailable for %{sortField}',
               { sortField: this.selectedSortText },
             )
-          : translate('GlSorting.sortDirectionUnavailable', 'Sort direction unavailable');
+          : this.unavailableLabel;
       }
 
       return this.isAscending
@@ -139,6 +155,11 @@ export default {
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
   },
+  watch: {
+    disabled(isDisabled) {
+      if (isDisabled) this.$refs.listbox.close();
+    },
+  },
   methods: {
     toggleSortDirection() {
       if (this.isDirectionToggleDisabled) return;
@@ -156,6 +177,8 @@ export default {
       this.$emit('sort-direction-change', newDirection);
     },
     onSortByChanged(event) {
+      if (this.disabled) return;
+
       /**
        * Emitted when the sort field is changed.
        *
@@ -174,6 +197,7 @@ export default {
 <template>
   <gl-button-group class="gl-sorting gl-flex">
     <gl-collapsible-listbox
+      ref="listbox"
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
@@ -182,6 +206,7 @@ export default {
       :class="dropdownClass"
       placement="bottom-end"
       :block="block"
+      :disabled="disabled"
       :toggle-id="toggleId"
       :toggle-aria-labelled-by="`${sortingListboxId} ${toggleId}`"
       @select="onSortByChanged"

package/src/components/base/toggle/toggle.vue

@@ -1,6 +1,7 @@
 <script>
 import { uniqueId } from 'lodash-es';
 
+import { glToggleConfig } from '../../../config';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -43,6 +44,22 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Keep the toggle focusable while `disabled` is `true`. Uses `aria-disabled` so the toggle stays in the tab order and is announced by assistive technology.
+     */
+    accessibleDisabled: {
+      type: Boolean,
+      required: false,
+      default: () => glToggleConfig.accessibleDisabledToggle,
+    },
+    /**
+     * Space-separated ids of elements that describe the toggle, in addition to its help text.
+     */
+    ariaDescribedby: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
     /**
      * Whether the toggle is in the loading state.
      */
@@ -111,6 +128,12 @@ export default {
     helpId() {
       return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
+    describedBy() {
+      return [this.helpId, this.ariaDescribedby].filter(Boolean).join(' ') || undefined;
+    },
+    isNativeDisabled() {
+      return this.disabled && !this.accessibleDisabled;
+    },
     isChecked() {
       return this.value ? 'true' : 'false';
     },
@@ -172,7 +195,7 @@ export default {
       role="switch"
       :aria-checked="isChecked"
       :aria-labelledby="labelId"
-      :aria-describedby="helpId"
+      :aria-describedby="describedBy"
       :aria-disabled="disabled"
       :class="{
         'is-checked': value,
@@ -181,7 +204,7 @@ export default {
       }"
       class="gl-toggle gl-shrink-0"
       type="button"
-      :disabled="disabled"
+      :disabled="isNativeDisabled"
       @click.prevent="toggleFeature"
     >
       <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />

package/src/components/charts/chart/chart.vue

@@ -80,6 +80,15 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * A name for the chart that screen readers announce. It is added as a hidden title, which
+     * ECharts reads into the description it generates. Ignored when `options` sets a title.
+     */
+    accessibleTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -96,6 +105,10 @@ export default {
         options = merge({}, options, { aria: { enabled: true } });
       }
 
+      if (this.accessibleTitle && !options.title) {
+        options = merge({}, options, { title: { text: this.accessibleTitle, show: false } });
+      }
+
       // Add space at the top to fit the toolbox
       if (options.toolbox?.show === true) {
         const top = (options.grid?.top || 0) + toolboxHeight;
@@ -111,6 +124,11 @@ export default {
         this.draw();
       }
     },
+    accessibleTitle() {
+      if (this.chart) {
+        this.draw();
+      }
+    },
     width() {
       this.setChartSize();
     },

package/src/config.js

@@ -7,6 +7,7 @@ export const defaultConfig = {
 };
 
 export const glButtonConfig = {};
+export const glToggleConfig = {};
 
 let configured = false;
 
@@ -18,9 +19,15 @@ let configured = false;
  * @property {undefined | Object} translations Generic translations for component labels to fall back to.
  * @property {undefined | Number} firstDayOfWeek Configured first day of the week, from 0 (Sunday) to 6 (Saturday).
  * @property {boolean} [accessibleDisabledButton] Temporary flag to enable the accessible disabled button.
+ * @property {boolean} [accessibleDisabledToggle] Temporary flag to enable the accessible disabled toggle.
  *
  */
-const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = false } = {}) => {
+const setConfigs = ({
+  translations,
+  firstDayOfWeek,
+  accessibleDisabledButton = false,
+  accessibleDisabledToggle = false,
+} = {}) => {
   if (configured) {
     if (process.env.NODE_ENV === 'development') {
       throw new Error('GitLab UI can only be configured once!');
@@ -71,6 +78,14 @@ const setConfigs = ({ translations, firstDayOfWeek, accessibleDisabledButton = f
       accessibleDisabledButton,
     });
   }
+
+  // Temporary flag for the accessible disabled toggle. Once validated, aria-disabled becomes
+  // the default for disabled toggles and this flag is removed.
+  if (typeof accessibleDisabledToggle === 'boolean') {
+    Object.assign(glToggleConfig, {
+      accessibleDisabledToggle,
+    });
+  }
 };
 
 export default setConfigs;

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

@@ -14,9 +14,6 @@ export const NAME_FORM = 'BForm'
 export const NAME_FORM_GROUP = 'BFormGroup'
 export const NAME_FORM_INVALID_FEEDBACK = 'BFormInvalidFeedback'
 export const NAME_FORM_ROW = 'BFormRow'
-export const NAME_FORM_SELECT = 'BFormSelect'
-export const NAME_FORM_SELECT_OPTION = 'BFormSelectOption'
-export const NAME_FORM_SELECT_OPTION_GROUP = 'BFormSelectOptionGroup'
 export const NAME_FORM_TEXT = 'BFormText'
 export const NAME_FORM_VALID_FEEDBACK = 'BFormValidFeedback'
 export const NAME_LINK = 'BLink'

package/translations.js

@@ -43,8 +43,8 @@ export default {
   'GlSorting.sortAscending': 'Sort direction: ascending',
   'GlSorting.sortByLabel': 'Sort by:',
   'GlSorting.sortDescending': 'Sort direction: descending',
-  'GlSorting.sortDirectionUnavailable': 'Sort direction unavailable',
-  'GlSorting.sortDirectionUnavailableFor': 'Sort direction unavailable for %{sortField}',
+  'GlSorting.sortDirectionUnavailableFor': 'Sorting is unavailable for %{sortField}',
+  'GlSorting.sortingUnavailable': 'Sorting is unavailable',
   'GlTabs.GlScrollableTabs.scrollLeftLabel': 'Scroll left',
   'GlTabs.GlScrollableTabs.scrollRightLabel': 'Scroll right',
   'GlToken.closeButtonTitle': 'Remove',