fixup! feat(cdk-experimental/ui-patterns): add popup behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/popup/popup.spec.ts

@@ -7,18 +7,17 @@
  */
 
 import {signal} from '@angular/core';
-import {ComboboxPopupTypes, PopupControl, PopupControlInputs} from './popup';
+import {PopupTypes, PopupControl, PopupControlInputs} from './popup';
 
-type TestInputs = Partial<Pick<PopupControlInputs, 'popup' | 'expanded'>>;
+type TestInputs = Partial<Pick<PopupControlInputs, 'expanded'>>;
 
 function getPopupControl(inputs: TestInputs = {}): PopupControl {
   const expanded = inputs.expanded || signal(false);
   const popup = signal({inert: signal(!expanded())});
   const controls = signal('popup-element-id');
-  const hasPopup = signal(ComboboxPopupTypes.LISTBOX);
+  const hasPopup = signal(PopupTypes.LISTBOX);
 
   return new PopupControl({
-    popup,
     controls,
     expanded,
     hasPopup,
@@ -31,12 +30,8 @@ describe('Popup Control', () => {
       const control = getPopupControl();
 
       expect(control.inputs.expanded()).toBeFalse();
-      expect(control.inputs.popup().inert()).toBeTrue();
-
       control.open();
-
       expect(control.inputs.expanded()).toBeTrue();
-      expect(control.inputs.popup().inert()).toBeFalse();
     });
   });
 
@@ -46,12 +41,8 @@ describe('Popup Control', () => {
       const control = getPopupControl({expanded});
 
       expect(control.inputs.expanded()).toBeTrue();
-      expect(control.inputs.popup().inert()).toBeFalse();
-
       control.close();
-
       expect(control.inputs.expanded()).toBeFalse();
-      expect(control.inputs.popup().inert()).toBeTrue();
     });
   });
 
@@ -60,17 +51,12 @@ describe('Popup Control', () => {
       const control = getPopupControl();
 
       expect(control.inputs.expanded()).toBeFalse();
-      expect(control.inputs.popup().inert()).toBeTrue();
-
       control.toggle();
 
       expect(control.inputs.expanded()).toBeTrue();
-      expect(control.inputs.popup().inert()).toBeFalse();
-
       control.toggle();
 
       expect(control.inputs.expanded()).toBeFalse();
-      expect(control.inputs.popup().inert()).toBeTrue();
     });
   });
 });

src/cdk-experimental/ui-patterns/behaviors/popup/popup.ts

@@ -8,63 +8,45 @@
 
 import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 
-/**
- * Represents the inputs required for a popup behavior.
- * It includes a signal for the expanded state and a reference to the popup element.
- */
-export enum ComboboxPopupTypes {
+/** Valid popup types for aria-haspopup. */
+export enum PopupTypes {
+  MENU = 'menu',
   TREE = 'tree',
   GRID = 'grid',
   DIALOG = 'dialog',
   LISTBOX = 'listbox',
 }
 
-/** The element that serves as the popup. */
-export interface Popup {
-  /** Whether the popup is interactive or not. */
-  inert: WritableSignalLike<boolean>;
-}
-
 /** Represents the inputs for the PopupControl behavior. */
 export interface PopupControlInputs {
-  /** The element that serves as the popup. */
-  popup: SignalLike<Popup>;
-
   /* Refers to the element that serves as the popup. */
   controls: SignalLike<string>;
 
   /* Whether the popup is open or closed. */
   expanded: WritableSignalLike<boolean>;
 
   /* Corresponds to the popup type. */
-  hasPopup: SignalLike<ComboboxPopupTypes>;
+  hasPopup: SignalLike<PopupTypes>;
 }
 
-/**
- * A behavior that manages the open/close state of a component.
- * It provides methods to open, close, and toggle the state,
- * which is controlled via a writable signal.
- */
+/** A behavior that manages the open/close state of a component. */
 export class PopupControl {
   /** The inputs for the popup behavior, containing the `expanded` state signal. */
   constructor(readonly inputs: PopupControlInputs) {}
 
   /** Opens the popup by setting the expanded state to true. */
   open(): void {
     this.inputs.expanded.set(true);
-    this.inputs.popup().inert.set(false);
   }
 
   /** Closes the popup by setting the expanded state to false. */
   close(): void {
     this.inputs.expanded.set(false);
-    this.inputs.popup().inert.set(true);
   }
 
   /** Toggles the popup's expanded state. */
   toggle(): void {
     const expanded = !this.inputs.expanded();
     this.inputs.expanded.set(expanded);
-    this.inputs.popup().inert.set(!expanded);
   }
 }