refactor(cdk/overlay): use ID generator

Switches to using the ID generator service to create unique IDs.

Author: crisbeto

src/cdk/overlay/BUILD.bazel

@@ -23,6 +23,7 @@ ng_module(
     ],
     deps = [
         "//src:dev_mode_types",
+        "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/coercion",
         "//src/cdk/keycodes",

src/cdk/overlay/overlay.ts

@@ -18,6 +18,7 @@ import {
   EnvironmentInjector,
   inject,
 } from '@angular/core';
+import {_IdGenerator} from '@angular/cdk/a11y';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 import {OverlayKeyboardDispatcher} from './dispatchers/overlay-keyboard-dispatcher';
 import {OverlayOutsideClickDispatcher} from './dispatchers/overlay-outside-click-dispatcher';
@@ -27,9 +28,6 @@ import {OverlayRef} from './overlay-ref';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {ScrollStrategyOptions} from './scroll/index';
 
-/** Next overlay unique ID. */
-let nextUniqueId = 0;
-
 /**
  * Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be
  * used as a low-level building block for other components. Dialogs, tooltips, menus,
@@ -51,6 +49,7 @@ export class Overlay {
   private _location = inject(Location);
   private _outsideClickDispatcher = inject(OverlayOutsideClickDispatcher);
   private _animationsModuleType = inject(ANIMATION_MODULE_TYPE, {optional: true});
+  private _idGenerator = inject(_IdGenerator);
 
   private _appRef: ApplicationRef;
   private _styleLoader = inject(_CdkPrivateStyleLoader);
@@ -106,7 +105,7 @@ export class Overlay {
   private _createPaneElement(host: HTMLElement): HTMLElement {
     const pane = this._document.createElement('div');
 
-    pane.id = `cdk-overlay-${nextUniqueId++}`;
+    pane.id = this._idGenerator.getId('cdk-overlay-');
     pane.classList.add('cdk-overlay-pane');
     host.appendChild(pane);