[chore] move core functionality of dropdown to base class (#34033)

Author: eljefe223

Diff for: change/@fluentui-web-components-3cb2badf-e1ee-4b92-a374-e8d45fb9c2d9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[chore]: move core functionality to base dropdown",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

Diff for: packages/web-components/docs/web-components.api.md

@@ -600,6 +600,8 @@ export class BaseDropdown extends FASTElement {
     ariaLabelledBy: string;
     changeHandler(e: Event): boolean | void;
     clickHandler(e: PointerEvent): boolean | void;
+    // (undocumented)
+    connectedCallback(): void;
     // @internal
     control: HTMLInputElement;
     // @internal
@@ -608,6 +610,8 @@ export class BaseDropdown extends FASTElement {
     controlSlot: HTMLSlotElement;
     disabled?: boolean;
     disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    // (undocumented)
+    disconnectedCallback(): void;
     get displayValue(): string;
     // @internal
     elementInternals: ElementInternals;
@@ -2484,16 +2488,9 @@ export type DrawerType = ValuesOf<typeof DrawerType>;
 
 // @public
 export class Dropdown extends BaseDropdown {
-    constructor();
     appearance: DropdownAppearance;
     // @internal
     appearanceChanged(prev: DropdownAppearance | undefined, next: DropdownAppearance | undefined): void;
-    // (undocumented)
-    connectedCallback(): void;
-    // (undocumented)
-    disconnectedCallback(): void;
-    // @internal
-    openChanged(prev: boolean | undefined, next: boolean | undefined): void;
     size?: DropdownSize;
     // @internal
     sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void;

Diff for: packages/web-components/src/dropdown/dropdown.base.ts

@@ -1,5 +1,6 @@
 import { attr, FASTElement, Observable, observable, Updates, volatile } from '@microsoft/fast-element';
 import type { Listbox } from '../listbox/listbox.js';
+import { isListbox } from '../listbox/listbox.options.js';
 import type { DropdownOption } from '../option/option.js';
 import { isDropdownOption } from '../option/option.options.js';
 import { toggleState } from '../utils/element-internals.js';
@@ -24,6 +25,14 @@ import { dropdownButtonTemplate, dropdownInputTemplate } from './dropdown.templa
  * @public
  */
 export class BaseDropdown extends FASTElement {
+  /**
+   * Static property for the anchor positioning fallback observer. The observer is used to flip the listbox when it is
+   * out of view.
+   * @remarks This is only used when the browser does not support CSS anchor positioning.
+   * @internal
+   */
+  private static AnchorPositionFallbackObserver: IntersectionObserver;
+
   /**
    * The ID of the current active descendant.
    *
@@ -307,6 +316,13 @@ export class BaseDropdown extends FASTElement {
     toggleState(this.elementInternals, 'open', next);
     this.elementInternals.ariaExpanded = next ? 'true' : 'false';
     this.activeIndex = this.selectedIndex ?? -1;
+
+    if (next) {
+      BaseDropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
+      return;
+    }
+
+    BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
   }
 
   /**
@@ -594,6 +610,8 @@ export class BaseDropdown extends FASTElement {
 
     this.elementInternals.role = 'presentation';
 
+    this.addEventListener('connected', this.listboxConnectedHandler);
+
     Updates.enqueue(() => {
       this.insertControl();
     });
@@ -866,4 +884,57 @@ export class BaseDropdown extends FASTElement {
     this.freeformOption.value = value;
     this.freeformOption.hidden = false;
   }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.anchorPositionFallback();
+  }
+
+  disconnectedCallback(): void {
+    BaseDropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
+
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Handles the connected event for the listbox.
+   *
+   * @param e - the event object
+   * @internal
+   */
+  private listboxConnectedHandler(e: Event): void {
+    const target = e.target as HTMLElement;
+
+    if (isListbox(target)) {
+      this.listbox = target;
+    }
+  }
+
+  /**
+   * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
+   * viewport bounds. One static observer is used for all dropdowns.
+   *
+   * @internal
+   */
+  private anchorPositionFallback(): void {
+    BaseDropdown.AnchorPositionFallbackObserver =
+      BaseDropdown.AnchorPositionFallbackObserver ??
+      new IntersectionObserver(
+        (entries: IntersectionObserverEntry[]): void => {
+          entries.forEach(({ boundingClientRect, isIntersecting, target }) => {
+            if (isListbox(target) && !isIntersecting) {
+              if (boundingClientRect.bottom > window.innerHeight) {
+                toggleState(target.dropdown!.elementInternals, 'flip-block', true);
+                return;
+              }
+
+              if (boundingClientRect.top < 0) {
+                toggleState(target.dropdown!.elementInternals, 'flip-block', false);
+              }
+            }
+          });
+        },
+        { threshold: 1 },
+      );
+  }
 }

Diff for: packages/web-components/src/dropdown/dropdown.ts

@@ -1,6 +1,5 @@
 import { attr } from '@microsoft/fast-element';
-import { isListbox } from '../listbox/listbox.options.js';
-import { swapStates, toggleState } from '../utils/element-internals.js';
+import { swapStates } from '../utils/element-internals.js';
 import { BaseDropdown } from './dropdown.base.js';
 import { DropdownAppearance, DropdownSize } from './dropdown.options.js';
 
@@ -14,14 +13,6 @@ import { DropdownAppearance, DropdownSize } from './dropdown.options.js';
  * @public
  */
 export class Dropdown extends BaseDropdown {
-  /**
-   * Static property for the anchor positioning fallback observer. The observer is used to flip the listbox when it is
-   * out of view.
-   * @remarks This is only used when the browser does not support CSS anchor positioning.
-   * @internal
-   */
-  private static AnchorPositionFallbackObserver: IntersectionObserver;
-
   /**
    * The appearance of the dropdown.
    *
@@ -62,81 +53,4 @@ export class Dropdown extends BaseDropdown {
   public sizeChanged(prev: DropdownSize | undefined, next: DropdownSize | undefined): void {
     swapStates(this.elementInternals, prev, next, DropdownSize);
   }
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.anchorPositionFallback();
-  }
-
-  constructor() {
-    super();
-
-    this.addEventListener('connected', this.listboxConnectedHandler);
-  }
-
-  disconnectedCallback(): void {
-    Dropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
-
-    super.disconnectedCallback();
-  }
-
-  /**
-   * Handles the connected event for the listbox.
-   *
-   * @param e - the event object
-   * @internal
-   */
-  private listboxConnectedHandler(e: Event): void {
-    const target = e.target as HTMLElement;
-
-    if (isListbox(target)) {
-      this.listbox = target;
-    }
-  }
-
-  /**
-   * Adds or removes the window event listener based on the open state.
-   *
-   * @param prev - the previous open state
-   * @param next - the current open state
-   * @internal
-   */
-  public openChanged(prev: boolean | undefined, next: boolean | undefined): void {
-    super.openChanged(prev, next);
-
-    if (next) {
-      Dropdown.AnchorPositionFallbackObserver?.observe(this.listbox);
-      return;
-    }
-
-    Dropdown.AnchorPositionFallbackObserver?.unobserve(this.listbox);
-  }
-
-  /**
-   * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
-   * viewport bounds. One static observer is used for all dropdowns.
-   *
-   * @internal
-   */
-  private anchorPositionFallback(): void {
-    Dropdown.AnchorPositionFallbackObserver =
-      Dropdown.AnchorPositionFallbackObserver ??
-      new IntersectionObserver(
-        (entries: IntersectionObserverEntry[]): void => {
-          entries.forEach(({ boundingClientRect, isIntersecting, target }) => {
-            if (isListbox(target) && !isIntersecting) {
-              if (boundingClientRect.bottom > window.innerHeight) {
-                toggleState(target.dropdown!.elementInternals, 'flip-block', true);
-                return;
-              }
-
-              if (boundingClientRect.top < 0) {
-                toggleState(target.dropdown!.elementInternals, 'flip-block', false);
-              }
-            }
-          });
-        },
-        { threshold: 1 },
-      );
-  }
 }