feat(cdk/overlay): add overlay changes

Author: tjshiu

goldens/cdk/overlay/index.api.md

@@ -284,7 +284,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     // (undocumented)
     detach(): void;
     dispose(): void;
-    getPopoverInsertionPoint(): Element | null | {parent: Element};
+    getPopoverInsertionPoint(): Element | null | {type: 'parent', element: Element};
     _origin: FlexibleConnectedPositionStrategyOrigin;
     positionChanges: Observable<ConnectedOverlayPositionChange>;
     get positions(): ConnectionPositionPair[];
@@ -536,7 +536,7 @@ export interface PositionStrategy {
     attach(overlayRef: OverlayRef): void;
     detach?(): void;
     dispose(): void;
-    getPopoverInsertionPoint?(): Element | null | {parent: Element};
+    getPopoverInsertionPoint?(): Element | null | {type: 'parent', element: Element};
 }
 
 // @public

src/cdk/overlay/overlay-ref.ts

@@ -413,7 +413,9 @@ export class OverlayRef implements PortalOutlet {
         if (customInsertionPoint instanceof Element) {
           customInsertionPoint.after(this._host);
         } else {
-          customInsertionPoint.parent?.appendChild(this._host);
+          if (customInsertionPoint.type === 'parent') {
+            customInsertionPoint.element?.appendChild(this._host);
+          }
         }
       } else {
         this._previousHostParent?.appendChild(this._host);

src/cdk/overlay/overlay.ts

@@ -98,7 +98,9 @@ export function createOverlayRef(injector: Injector, config?: OverlayConfig): Ov
     if (customInsertionPoint instanceof Element) {
       customInsertionPoint.after(host);
     } else {
-      customInsertionPoint.parent.appendChild(host);
+      if (customInsertionPoint.type === 'parent') {
+        customInsertionPoint.element?.appendChild(host);
+      }
     }
   }
 

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -3024,7 +3024,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
         return;
       }
 
-      positionStrategy.withPopoverLocation({parent: customHostElement});
+      positionStrategy.withPopoverLocation({type: 'parent', element: customHostElement});
       attachOverlay({positionStrategy, usePopover: true});
 
       expect(containerElement.contains(overlayRef.hostElement)).toBe(false);
@@ -3037,7 +3037,7 @@ describe('FlexibleConnectedPositionStrategy', () => {
         return;
       }
 
-      positionStrategy.withPopoverLocation({parent: originElement});
+      positionStrategy.withPopoverLocation({type: 'parent', element: originElement});
       attachOverlay({positionStrategy, usePopover: true});
 
       expect(containerElement.contains(overlayRef.hostElement)).toBe(false);

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -46,7 +46,7 @@ export type FlexibleConnectedPositionStrategyOrigin =
 type Dimensions = Omit<DOMRect, 'x' | 'y' | 'toJSON'>;
 
 /** Possible point to attach a popover to. */
-export type PopoverInsertionPoint = Element | {parent: Element} | null;
+export type PopoverInsertionPoint = Element | {type: 'parent'; element: Element} | null;
 
 /**
  * Creates a flexible position strategy.
@@ -70,7 +70,7 @@ export function createFlexibleConnectedPositionStrategy(
 export type FlexibleOverlayPopoverLocation =
   | 'global'
   | 'inline'
-  | {parent: FlexibleConnectedPositionStrategyOrigin};
+  | {type: 'parent'; element: FlexibleConnectedPositionStrategyOrigin};
 
 /**
  * A strategy for positioning overlays. Using this strategy, an overlay is given an
@@ -528,6 +528,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * @param location Configures the location in the DOM. Supports the following values:
    *  - `global` - The default which inserts the overlay inside the overlay container.
    *  - `inline` - Inserts the overlay next to the trigger.
+   *  - {type: 'parent', element: element} - Inserts the overlay to a child of a custom parent
+   *  element.
    */
   withPopoverLocation(location: FlexibleOverlayPopoverLocation): this {
     this._popoverLocation = location;
@@ -543,7 +545,12 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     const origin =
       this._popoverLocation === 'inline'
         ? this._origin
-        : (this._popoverLocation as {parent: FlexibleConnectedPositionStrategyOrigin}).parent;
+        : (
+            this._popoverLocation as {
+              type: 'parent';
+              element: FlexibleConnectedPositionStrategyOrigin;
+            }
+          ).element;
     let element: Element | null = null;
 
     if (origin instanceof ElementRef) {
@@ -559,7 +566,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
     // Otherwise we're inserting as a child.
     if (element) {
-      return {parent: element};
+      return {type: 'parent', element: element};
     }
 
     return null;

src/cdk/overlay/position/position-strategy.ts

@@ -26,5 +26,5 @@ export interface PositionStrategy {
    * Gets the element in the DOM after which to insert
    * the overlay when it is rendered out as a popover.
    */
-  getPopoverInsertionPoint?(): Element | null | {parent: Element};
+  getPopoverInsertionPoint?(): Element | null | {type: 'parent'; element: Element};
 }