fixup! fix(cdk-experimental/listbox): change shift+nav behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/event-manager/event-manager.ts

@@ -47,6 +47,7 @@ export enum ModifierKey {
   Shift = 0b10,
   Alt = 0b100,
   Meta = 0b1000,
+  Any = 0b10000,
 }
 
 export type ModifierInputs = ModifierKey | ModifierKey[];
@@ -99,5 +100,10 @@ export function getModifiers(event: EventWithModifiers): number {
 export function hasModifiers(event: EventWithModifiers, modifiers: ModifierInputs): boolean {
   const eventModifiers = getModifiers(event);
   const modifiersList = Array.isArray(modifiers) ? modifiers : [modifiers];
+
+  if (modifiersList.includes(ModifierKey.Any)) {
+    return true;
+  }
+
   return modifiersList.some(modifiers => eventModifiers === modifiers);
 }

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -76,6 +76,9 @@ export class ListboxPattern<V> {
   /** Whether the listbox selection follows focus. */
   followFocus = computed(() => this.inputs.selectionMode() === 'follow');
 
+  /** Whether the listbox should wrap. */
+  wrap = signal(true);
+
   /** The key used to navigate to the previous item in the list. */
   prevKey = computed(() => {
     if (this.inputs.orientation() === 'vertical') {
@@ -137,22 +140,26 @@ export class ListboxPattern<V> {
       // index where the shift key begins being held down. Note that this is very different from
       // selecting from the current active or focused index.
       manager
-        .on(Modifier.Shift, 'Shift', () => this.shiftAnchorIndex.set(this.inputs.activeIndex()))
+        .on(Modifier.Any, 'Shift', () => this.shiftAnchorIndex.set(this.inputs.activeIndex()))
         .on(Modifier.Shift, this.prevKey, () => {
           if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
             this.selection.select();
           } else if (this.inputs.activeIndex() > this.shiftAnchorIndex()) {
             this.selection.deselect();
           }
+          this.wrap.set(false);
           this.prev({select: true});
+          this.wrap.set(true);
         })
         .on(Modifier.Shift, this.nextKey, () => {
           if (this.inputs.activeIndex() === this.shiftAnchorIndex()) {
             this.selection.select();
           } else if (this.inputs.activeIndex() < this.shiftAnchorIndex()) {
             this.selection.deselect();
           }
+          this.wrap.set(false);
           this.next({select: true});
+          this.wrap.set(true);
         });
 
       manager
@@ -230,7 +237,10 @@ export class ListboxPattern<V> {
     this.orientation = inputs.orientation;
     this.multi = inputs.multi;
 
-    this.navigation = new ListNavigation(inputs);
+    this.navigation = new ListNavigation({
+      ...inputs,
+      wrap: computed(() => this.wrap() && this.inputs.wrap()),
+    });
     this.selection = new ListSelection({...inputs, navigation: this.navigation});
     this.typeahead = new ListTypeahead({...inputs, navigation: this.navigation});
     this.focusManager = new ListFocus({...inputs, navigation: this.navigation});