@gitlab/ui 128.14.3 → 128.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "128.14.3",
+  "version": "128.15.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -129,7 +129,7 @@
     "@yarnpkg/lockfile": "^1.1.0",
     "acorn": "^8.16.0",
     "acorn-walk": "^8.3.5",
-    "autoprefixer": "10.4.24",
+    "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
     "cypress": "15.10.0",

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -16,22 +16,22 @@
     @apply gl-mb-0;
   }
 
-  &:hover {
+  &:not(.disabled):hover {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-hover);
       background-color: var(--gl-dropdown-option-background-color-unselected-hover);
     }
   }
 
-  &:focus {
+  &:not(.disabled):focus {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-focus);
       background-color: var(--gl-dropdown-option-background-color-unselected-focus);
     }
   }
 
-  &:active,
-  &:focus:active {
+  &:not(.disabled):active,
+  &:not(.disabled):focus:active {
     .gl-new-dropdown-item-content {
       color: var(--gl-dropdown-option-text-color-active);
       background-color: var(--gl-dropdown-option-background-color-unselected-active);
@@ -43,7 +43,13 @@
       background-color: var(--gl-dropdown-option-background-color-selected-default);
     }
 
-    &:hover {
+    &.disabled {
+      .gl-new-dropdown-item-content {
+        background-color: var(--gl-background-color-disabled);
+      }
+    }
+
+    &:not(.disabled):hover {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-hover);
       }
@@ -53,7 +59,7 @@
       }
     }
 
-    &:focus {
+    &:not(.disabled):focus {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-focus);
       }
@@ -63,8 +69,8 @@
       }
     }
 
-    &:active,
-    &:focus:active {
+    &:not(.disabled):active,
+    &:not(.disabled):focus:active {
       .gl-new-dropdown-item-content {
         background-color: var(--gl-dropdown-option-background-color-selected-active);
       }
@@ -79,9 +85,9 @@
     outline: none;
   }
 
-  &:active,
-  &:focus,
-  &:focus:active {
+  &:not(.disabled):active,
+  &:not(.disabled):focus,
+  &:not(.disabled):focus:active {
     .gl-new-dropdown-item-content {
       @include gl-focus($inset: true);
     }
@@ -100,6 +106,20 @@
     @include gl-focus($inset: true);
   }
 
+  &.disabled {
+    cursor: not-allowed;
+    user-select: none;
+
+    .gl-new-dropdown-item-content {
+      color: var(--gl-text-color-disabled);
+      pointer-events: none;
+
+      .gl-new-dropdown-item-check-icon {
+        color: var(--gl-icon-color-disabled);
+      }
+    }
+  }
+
   .gl-new-dropdown-item-content {
     transition:
       background-color $gl-transition-duration-fast $gl-easing-out-cubic,

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -603,10 +603,10 @@ export default {
 
           /**
            * Every time the list of items changes, and there is a search string,
-           * we want to visually highlight the first item
+           * we want to visually highlight the first enabled item
            */
           if (this.searchHasOptions) {
-            this.nextFocusedItemIndex = 0;
+            this.nextFocusedItemIndex = this.getFirstEnabledIndex();
           } else {
             this.nextFocusedItemIndex = null;
           }
@@ -677,16 +677,22 @@ export default {
         this.focusSearchInput();
 
         /**
-         * If the search string is not empty, highlight the first item
+         * If the search string is not empty, highlight the first enabled item
          */
         if (this.searchHasOptions) {
-          this.nextFocusedItemIndex = 0;
-          // Set activeItemId for the first item
-          const firstItem = this.flattenedOptions[0];
+          const firstEnabledIndex = this.getFirstEnabledIndex();
+          this.nextFocusedItemIndex = firstEnabledIndex;
+          // Set activeItemId for the first enabled item
+          const firstItem = this.flattenedOptions[firstEnabledIndex];
           this.activeItemId = this.generateItemId(firstItem);
         }
       } else {
-        this.focusItem(this.selectedIndices[0] ?? 0, this.getFocusableListItemElements());
+        const selectedIndex = this.selectedIndices[0];
+        const initialIndex =
+          selectedIndex !== undefined && !this.flattenedOptions[selectedIndex]?.disabled
+            ? selectedIndex
+            : this.getFirstEnabledIndex();
+        this.focusItem(initialIndex, this.getFocusableListItemElements());
       }
       /**
        * Emitted when dropdown is shown
@@ -707,13 +713,26 @@ export default {
       this.$emit('blur', event);
     },
     getNextIndex(currentIndex, keyCode, totalLength) {
-      // For UP: move up or wrap to end
-      if (keyCode === ARROW_UP) {
-        return currentIndex > 0 ? currentIndex - 1 : totalLength - 1;
+      const direction = keyCode === ARROW_UP ? -1 : 1;
+      let nextIndex = currentIndex;
+
+      for (let i = 0; i < totalLength; i += 1) {
+        nextIndex += direction;
+        if (nextIndex < 0) nextIndex = totalLength - 1;
+        if (nextIndex >= totalLength) nextIndex = 0;
+
+        if (!this.flattenedOptions[nextIndex]?.disabled) {
+          return nextIndex;
+        }
       }
 
-      // For DOWN: move down or wrap to start
-      return currentIndex < totalLength - 1 ? currentIndex + 1 : 0;
+      return currentIndex;
+    },
+    getFirstEnabledIndex() {
+      return this.flattenedOptions.findIndex((item) => !item.disabled);
+    },
+    getLastEnabledIndex() {
+      return this.flattenedOptions.findLastIndex((item) => !item.disabled);
     },
     handleListNavigation(keyCode, elements) {
       const currentIndex = this.nextFocusedItemIndex ?? -1;
@@ -731,16 +750,16 @@ export default {
 
       switch (code) {
         case HOME:
-          // Jump to first item if searchable or not in search input
+          // Jump to first enabled item if searchable or not in search input
           if (this.searchable || !isSearchInput) {
-            this.focusItem(0, elements, this.searchable);
+            this.focusItem(this.getFirstEnabledIndex(), elements, this.searchable);
           }
           break;
 
         case END:
-          // Jump to last item if searchable or not in search input
+          // Jump to last enabled item if searchable or not in search input
           if (this.searchable || !isSearchInput) {
-            this.focusItem(elements.length - 1, elements, this.searchable);
+            this.focusItem(this.getLastEnabledIndex(), elements, this.searchable);
           }
           break;
 
@@ -753,9 +772,9 @@ export default {
           break;
 
         case ARROW_DOWN:
-          // Focus first item from search input, otherwise navigate down
+          // Focus first enabled item from search input, otherwise navigate down
           if (isSearchInput && !this.searchable) {
-            this.focusItem(0, elements);
+            this.focusItem(this.getFirstEnabledIndex(), elements);
           } else {
             this.handleListNavigation(ARROW_DOWN, elements);
           }
@@ -763,10 +782,12 @@ export default {
 
         case ENTER:
           if (isSearchInput) {
-            // Toggle selection of highlighted item if one exists
+            // Toggle selection of highlighted item if one exists and is not disabled
             if (elements.length > 0 && this.nextFocusedItemIndex !== null) {
               const highlightedItem = this.flattenedOptions[this.nextFocusedItemIndex];
-              this.onSelect(highlightedItem, !this.isSelected(highlightedItem));
+              if (!highlightedItem?.disabled) {
+                this.onSelect(highlightedItem, !this.isSelected(highlightedItem));
+              }
             }
           } else {
             stop = false;
@@ -834,6 +855,9 @@ export default {
     isFocused(item) {
       return this.nextFocusedItemIndex === this.flattenedOptions.indexOf(item);
     },
+    isDisabled(item) {
+      return item.disabled;
+    },
     onSingleSelect(value, isSelected) {
       if (isSelected) {
         /**
@@ -1109,6 +1133,7 @@ export default {
               :is-selected="isSelected(item)"
               :is-focused="isFocused(item)"
               :is-check-centered="isCheckCentered"
+              :is-disabled="isDisabled(item)"
               v-bind="listboxItemMoreItemsAriaAttributes(index)"
               @select="onSelect(item, $event)"
             >
@@ -1140,6 +1165,7 @@ export default {
                 :is-selected="isSelected(option)"
                 :is-focused="isFocused(option)"
                 :is-check-centered="isCheckCentered"
+                :is-disabled="isDisabled(option)"
                 @select="onSelect(option, $event)"
               >
                 <!-- @slot Custom template of the listbox item -->

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -29,6 +29,11 @@ export default {
       default: false,
       required: false,
     },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   computed: {
     checkedClasses() {
@@ -40,7 +45,13 @@ export default {
     },
   },
   methods: {
+    onMousedown(event) {
+      if (this.isDisabled) {
+        stopEvent(event);
+      }
+    },
     toggleSelection() {
+      if (this.isDisabled) return;
       this.$emit('select', !this.isSelected);
     },
     onKeydown(event) {
@@ -57,10 +68,18 @@ export default {
 
 <template>
   <li
-    :class="['gl-new-dropdown-item', { 'gl-new-dropdown-item-highlighted': isHighlighted }]"
+    :class="[
+      'gl-new-dropdown-item',
+      {
+        'gl-new-dropdown-item-highlighted': isHighlighted,
+        disabled: isDisabled,
+      },
+    ]"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"
+    :aria-disabled="isDisabled"
+    @mousedown="onMousedown"
     @click="toggleSelection"
     @keydown="onKeydown"
   >

package/src/components/base/new_dropdowns/listbox/mock_data.js

@@ -14,14 +14,17 @@ export const mockOptions = [
   {
     value: 'leg',
     text: 'Legal',
+    disabled: true,
   },
   {
     value: 'eng',
     text: 'Engineering',
+    disabled: true,
   },
   {
     value: 'sales',
     text: 'Sales',
+    disabled: false,
   },
   {
     value: 'marketing',
@@ -30,6 +33,7 @@ export const mockOptions = [
   {
     value: 'acc',
     text: 'Accounting',
+    disabled: true,
   },
   {
     value: 'hr',
@@ -50,6 +54,7 @@ export const mockOptions = [
   {
     value: null,
     text: 'None',
+    disabled: true,
   },
 ];
 
@@ -134,6 +139,12 @@ export const mockUsers = [
     secondaryText: '@ohoral',
     icon: 'bar',
   },
+  {
+    value: 'jdoe',
+    text: 'Jane Doe',
+    secondaryText: '@jdoe',
+    disabled: true,
+  },
   {
     value: 'markian',
     text: 'Mark Florian',