fix(cdk-experimental/ui-patterns): small fixes for internal compatibi… (#30625)

* fix(cdk-experimental/ui-patterns): small fixes for internal compatibility

* fixup! fix(cdk-experimental/ui-patterns): small fixes for internal compatibility

Author: wagnermaciel

src/cdk-experimental/ui-patterns/BUILD.bazel

@@ -9,6 +9,7 @@ ts_library(
         exclude = ["**/*.spec.ts"],
     ),
     deps = [
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
         "//src/cdk-experimental/ui-patterns/listbox",
         "@npm//@angular/core",
     ],

src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts

@@ -34,7 +34,7 @@ export class ListFocus<T extends ListFocusItem> {
   }
 
   /** The id of the current active item. */
-  getActiveDescendant(): String | undefined {
+  getActiveDescendant(): string | undefined {
     if (this.inputs.focusMode() === 'roving') {
       return undefined;
     }

src/cdk-experimental/ui-patterns/behaviors/list-navigation/list-navigation.ts

@@ -41,9 +41,7 @@ export class ListNavigation<T extends ListNavigationItem> {
   /** The last index that was active. */
   prevActiveIndex = signal(0);
 
-  constructor(readonly inputs: ListNavigationInputs<T>) {
-    this.prevActiveIndex.set(inputs.activeIndex());
-  }
+  constructor(readonly inputs: ListNavigationInputs<T>) {}
 
   /** Navigates to the given item. */
   goto(item: T) {

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

@@ -259,7 +259,7 @@ export class ListboxPattern {
       return;
     }
 
-    const element = e.target.closest('[cdkoption]'); // TODO: Use a different identifier.
+    const element = e.target.closest('[role="option"]'); // TODO: Use a different identifier.
     return this.inputs.items().find(i => i.element() === element);
   }
 }

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

@@ -29,7 +29,7 @@ export interface OptionInputs
     ListSelectionItem,
     ListTypeaheadItem,
     ListFocusItem {
-  listbox: SignalLike<ListboxPattern>;
+  listbox: SignalLike<ListboxPattern | undefined>;
 }
 
 /** Represents an option in a listbox. */
@@ -41,12 +41,12 @@ export class OptionPattern {
   index = computed(
     () =>
       this.listbox()
-        .navigation.inputs.items()
+        ?.navigation.inputs.items()
         .findIndex(i => i.id() === this.id()) ?? -1,
   );
 
   /** Whether the option is selected. */
-  selected = computed(() => this.listbox().selection.inputs.selectedIds().includes(this.id()));
+  selected = computed(() => this.listbox()?.selection.inputs.selectedIds().includes(this.id()));
 
   /** Whether the option is disabled. */
   disabled: SignalLike<boolean>;
@@ -55,10 +55,10 @@ export class OptionPattern {
   searchTerm: SignalLike<string>;
 
   /** A reference to the parent listbox. */
-  listbox: SignalLike<ListboxPattern>;
+  listbox: SignalLike<ListboxPattern | undefined>;
 
   /** The tabindex of the option. */
-  tabindex = computed(() => this.listbox().focusManager.getItemTabindex(this));
+  tabindex = computed(() => this.listbox()?.focusManager.getItemTabindex(this));
 
   /** The html element that should receive focus. */
   element: SignalLike<HTMLElement>;

src/cdk-experimental/ui-patterns/public-api.ts

@@ -8,3 +8,4 @@
 
 export * from './listbox/listbox';
 export * from './listbox/option';
+export * from './behaviors/signal-like/signal-like';