fix(overlays): make them hidden until presented (#16903)

fixes #16685

core/api.txt

@@ -21,9 +21,7 @@ ion-action-sheet,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetai
 ion-action-sheet,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-action-sheet,method,present,present() => Promise<void>
 ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail,true
-ion-action-sheet,event,ionActionSheetDidLoad,void,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
-ion-action-sheet,event,ionActionSheetDidUnload,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
 ion-action-sheet,css-prop,--background
@@ -61,9 +59,7 @@ ion-alert,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-alert,method,present,present() => Promise<void>
 ion-alert,event,ionAlertDidDismiss,OverlayEventDetail,true
-ion-alert,event,ionAlertDidLoad,void,true
 ion-alert,event,ionAlertDidPresent,void,true
-ion-alert,event,ionAlertDidUnload,void,true
 ion-alert,event,ionAlertWillDismiss,OverlayEventDetail,true
 ion-alert,event,ionAlertWillPresent,void,true
 ion-alert,css-prop,--background
@@ -553,9 +549,7 @@ ion-loading,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any
 ion-loading,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-loading,method,present,present() => Promise<void>
 ion-loading,event,ionLoadingDidDismiss,OverlayEventDetail,true
-ion-loading,event,ionLoadingDidLoad,void,true
 ion-loading,event,ionLoadingDidPresent,void,true
-ion-loading,event,ionLoadingDidUnload,void,true
 ion-loading,event,ionLoadingWillDismiss,OverlayEventDetail,true
 ion-loading,event,ionLoadingWillPresent,void,true
 ion-loading,css-prop,--background
@@ -639,9 +633,7 @@ ion-modal,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-modal,method,present,present() => Promise<void>
 ion-modal,event,ionModalDidDismiss,OverlayEventDetail,true
-ion-modal,event,ionModalDidLoad,void,true
 ion-modal,event,ionModalDidPresent,void,true
-ion-modal,event,ionModalDidUnload,void,true
 ion-modal,event,ionModalWillDismiss,OverlayEventDetail,true
 ion-modal,event,ionModalWillPresent,void,true
 ion-modal,css-prop,--background
@@ -719,9 +711,7 @@ ion-picker,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>
 ion-picker,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-picker,method,present,present() => Promise<void>
 ion-picker,event,ionPickerDidDismiss,OverlayEventDetail,true
-ion-picker,event,ionPickerDidLoad,void,true
 ion-picker,event,ionPickerDidPresent,void,true
-ion-picker,event,ionPickerDidUnload,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail,true
 ion-picker,event,ionPickerWillPresent,void,true
 ion-picker,css-prop,--background
@@ -760,9 +750,7 @@ ion-popover,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any
 ion-popover,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-popover,method,present,present() => Promise<void>
 ion-popover,event,ionPopoverDidDismiss,OverlayEventDetail,true
-ion-popover,event,ionPopoverDidLoad,void,true
 ion-popover,event,ionPopoverDidPresent,void,true
-ion-popover,event,ionPopoverDidUnload,void,true
 ion-popover,event,ionPopoverWillDismiss,OverlayEventDetail,true
 ion-popover,event,ionPopoverWillPresent,void,true
 ion-popover,css-prop,--background
@@ -1162,9 +1150,7 @@ ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,onWillDismiss,onWillDismiss() => Promise<OverlayEventDetail<any>>
 ion-toast,method,present,present() => Promise<void>
 ion-toast,event,ionToastDidDismiss,OverlayEventDetail,true
-ion-toast,event,ionToastDidLoad,void,true
 ion-toast,event,ionToastDidPresent,void,true
-ion-toast,event,ionToastDidUnload,void,true
 ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true
 ion-toast,event,ionToastWillPresent,void,true
 ion-toast,css-prop,--background

core/src/components.d.ts

@@ -202,18 +202,10 @@ export namespace Components {
     */
     'onIonActionSheetDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the alert has loaded.
-    */
-    'onIonActionSheetDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the alert has presented.
     */
     'onIonActionSheetDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the alert has unloaded.
-    */
-    'onIonActionSheetDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the alert has dismissed.
     */
     'onIonActionSheetWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -371,16 +363,8 @@ export namespace Components {
     /**
     * Emitted after the alert has presented.
     */
-    'onIonAlertDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
-    * Emitted after the alert has presented.
-    */
     'onIonAlertDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted before the alert has presented.
-    */
-    'onIonAlertDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the alert has dismissed.
     */
     'onIonAlertWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -2298,18 +2282,10 @@ export namespace Components {
     */
     'onIonLoadingDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the loading has loaded.
-    */
-    'onIonLoadingDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the loading has presented.
     */
     'onIonLoadingDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the loading has unloaded.
-    */
-    'onIonLoadingDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the loading has dismissed.
     */
     'onIonLoadingWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -2667,18 +2643,10 @@ export namespace Components {
     */
     'onIonModalDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the modal has loaded.
-    */
-    'onIonModalDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the modal has presented.
     */
     'onIonModalDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the modal has unloaded.
-    */
-    'onIonModalDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the modal has dismissed.
     */
     'onIonModalWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -3008,18 +2976,10 @@ export namespace Components {
     */
     'onIonPickerDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the picker has loaded.
-    */
-    'onIonPickerDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the picker has presented.
     */
     'onIonPickerDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the picker has unloaded.
-    */
-    'onIonPickerDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the picker has dismissed.
     */
     'onIonPickerWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -3165,18 +3125,10 @@ export namespace Components {
     */
     'onIonPopoverDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the popover has loaded.
-    */
-    'onIonPopoverDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the popover has presented.
     */
     'onIonPopoverDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the popover has unloaded.
-    */
-    'onIonPopoverDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the popover has dismissed.
     */
     'onIonPopoverWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
@@ -4946,18 +4898,10 @@ export namespace Components {
     */
     'onIonToastDidDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;
     /**
-    * Emitted after the toast has loaded.
-    */
-    'onIonToastDidLoad'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted after the toast has presented.
     */
     'onIonToastDidPresent'?: (event: CustomEvent<void>) => void;
     /**
-    * Emitted after the toast has unloaded.
-    */
-    'onIonToastDidUnload'?: (event: CustomEvent<void>) => void;
-    /**
     * Emitted before the toast has dismissed.
     */
     'onIonToastWillDismiss'?: (event: CustomEvent<OverlayEventDetail>) => void;

core/src/components/action-sheet/action-sheet.scss

@@ -39,6 +39,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .action-sheet-wrapper {
   @include position(null, 0, 0, 0);
   @include margin(auto);

core/src/components/action-sheet/action-sheet.tsx

@@ -84,16 +84,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the alert has loaded.
-   */
-  @Event() ionActionSheetDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted after the alert has unloaded.
-   */
-  @Event() ionActionSheetDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the alert has presented.
    */
@@ -114,14 +104,6 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionActionSheetDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  componentDidLoad() {
-    this.ionActionSheetDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionActionSheetDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);

core/src/components/action-sheet/readme.md

@@ -146,9 +146,7 @@ async function presentActionSheet() {
 | Event                       | Description                             | Type                              |
 | --------------------------- | --------------------------------------- | --------------------------------- |
 | `ionActionSheetDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionActionSheetDidLoad`     | Emitted after the alert has loaded.     | `CustomEvent<void>`               |
 | `ionActionSheetDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
-| `ionActionSheetDidUnload`   | Emitted after the alert has unloaded.   | `CustomEvent<void>`               |
 | `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 

core/src/components/alert/alert.scss

@@ -38,6 +38,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 :host(.alert-top) {
   @include padding(50px, null, null, null);
 

core/src/components/alert/alert.tsx

@@ -100,16 +100,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the alert has presented.
-   */
-  @Event() ionAlertDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted before the alert has presented.
-   */
-  @Event() ionAlertDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the alert has presented.
    */
@@ -171,14 +161,6 @@ export class Alert implements ComponentInterface, OverlayInterface {
     this.buttonsChanged();
   }
 
-  componentDidLoad() {
-    this.ionAlertDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionAlertDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);

core/src/components/alert/readme.md

@@ -551,9 +551,7 @@ async function presentAlertCheckbox() {
 | Event                 | Description                             | Type                              |
 | --------------------- | --------------------------------------- | --------------------------------- |
 | `ionAlertDidDismiss`  | Emitted after the alert has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionAlertDidLoad`     | Emitted after the alert has presented.  | `CustomEvent<void>`               |
 | `ionAlertDidPresent`  | Emitted after the alert has presented.  | `CustomEvent<void>`               |
-| `ionAlertDidUnload`   | Emitted before the alert has presented. | `CustomEvent<void>`               |
 | `ionAlertWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionAlertWillPresent` | Emitted before the alert has presented. | `CustomEvent<void>`               |
 

core/src/components/loading/loading.scss

@@ -39,6 +39,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .loading-wrapper {
   display: flex;
 

core/src/components/loading/loading.tsx

@@ -91,16 +91,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the loading has unloaded.
-   */
-  @Event() ionLoadingDidUnload!: EventEmitter<void>;
-
-  /**
-   * Emitted after the loading has loaded.
-   */
-  @Event() ionLoadingDidLoad!: EventEmitter<void>;
-
   /**
    * Emitted after the loading has presented.
    */
@@ -127,14 +117,6 @@ export class Loading implements ComponentInterface, OverlayInterface {
     }
   }
 
-  componentDidLoad() {
-    this.ionLoadingDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionLoadingDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     this.dismiss(undefined, BACKDROP);

core/src/components/loading/readme.md

@@ -108,9 +108,7 @@ async function presentLoadingWithOptions() {
 | Event                   | Description                               | Type                              |
 | ----------------------- | ----------------------------------------- | --------------------------------- |
 | `ionLoadingDidDismiss`  | Emitted after the loading has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionLoadingDidLoad`     | Emitted after the loading has loaded.     | `CustomEvent<void>`               |
 | `ionLoadingDidPresent`  | Emitted after the loading has presented.  | `CustomEvent<void>`               |
-| `ionLoadingDidUnload`   | Emitted after the loading has unloaded.   | `CustomEvent<void>`               |
 | `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionLoadingWillPresent` | Emitted before the loading has presented. | `CustomEvent<void>`               |
 

core/src/components/menu-button/menu-button.scss

@@ -10,8 +10,6 @@
 
   color: var(--color);
 
-  pointer-events: all;
-
   text-align: center;
   text-decoration: none;
   text-overflow: ellipsis;

core/src/components/modal/modal.scss

@@ -46,6 +46,10 @@
   contain: strict;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .modal-wrapper {
   @include border-radius(var(--border-radius));
 

core/src/components/modal/modal.tsx

@@ -23,8 +23,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
   private usersElement?: HTMLElement;
 
-  animation: Animation | undefined;
   presented = false;
+  animation: Animation | undefined;
 
   @Element() el!: HTMLElement;
 
@@ -87,16 +87,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the modal has loaded.
-   */
-  @Event() ionModalDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted after the modal has unloaded.
-   */
-  @Event() ionModalDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the modal has presented.
    */
@@ -117,14 +107,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionModalDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  componentDidLoad() {
-    this.ionModalDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionModalDidUnload.emit();
-  }
-
   @Listen('ionDismiss')
   protected onDismiss(ev: UIEvent) {
     ev.stopPropagation();

core/src/components/modal/readme.md

@@ -162,9 +162,7 @@ async function presentModal() {
 | Event                 | Description                             | Type                              |
 | --------------------- | --------------------------------------- | --------------------------------- |
 | `ionModalDidDismiss`  | Emitted after the modal has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionModalDidLoad`     | Emitted after the modal has loaded.     | `CustomEvent<void>`               |
 | `ionModalDidPresent`  | Emitted after the modal has presented.  | `CustomEvent<void>`               |
-| `ionModalDidUnload`   | Emitted after the modal has unloaded.   | `CustomEvent<void>`               |
 | `ionModalWillDismiss` | Emitted before the modal has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionModalWillPresent` | Emitted before the modal has presented. | `CustomEvent<void>`               |
 

core/src/components/picker/picker.scss

@@ -45,6 +45,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .picker-wrapper {
   @include border-radius(var(--border-radius));
   @include position(null, 0, 0, 0);

core/src/components/picker/picker.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 
 import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
 import { dismiss, eventMethod, present } from '../../utils/overlays';
@@ -18,13 +18,14 @@ import { iosLeaveAnimation } from './animations/ios.leave';
 export class Picker implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
-  presented = false;
   animation?: Animation;
 
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'config' }) config!: Config;
 
+  @State() presented = false;
+
   /** @internal */
   @Prop() overlayIndex!: number;
 
@@ -84,11 +85,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the picker has loaded.
-   */
-  @Event() ionPickerDidLoad!: EventEmitter<void>;
-
   /**
    * Emitted after the picker has presented.
    */
@@ -109,19 +105,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  /**
-   * Emitted after the picker has unloaded.
-   */
-  @Event() ionPickerDidUnload!: EventEmitter<void>;
-
-  componentDidLoad() {
-    this.ionPickerDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionPickerDidUnload.emit();
-  }
-
   @Listen('ionBackdropTap')
   protected onBackdropTap() {
     const cancelBtn = this.buttons.find(b => b.role === 'cancel');
@@ -253,7 +236,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
 
         <div class="picker-columns">
           <div class="picker-above-highlight"></div>
-            {this.columns.map(c =>
+            {this.presented && this.columns.map(c =>
               <ion-picker-column col={c}></ion-picker-column>
             )}
           <div class="picker-below-highlight"></div>

core/src/components/picker/readme.md

@@ -29,9 +29,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a
 | Event                  | Description                              | Type                              |
 | ---------------------- | ---------------------------------------- | --------------------------------- |
 | `ionPickerDidDismiss`  | Emitted after the picker has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionPickerDidLoad`     | Emitted after the picker has loaded.     | `CustomEvent<void>`               |
 | `ionPickerDidPresent`  | Emitted after the picker has presented.  | `CustomEvent<void>`               |
-| `ionPickerDidUnload`   | Emitted after the picker has unloaded.   | `CustomEvent<void>`               |
 | `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent<void>`               |
 

core/src/components/popover/popover.scss

@@ -35,6 +35,10 @@
   z-index: $z-index-overlay;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 .popover-wrapper {
   opacity: 0;
   z-index: $z-index-overlay-wrapper;

core/src/components/popover/popover.tsx

@@ -97,16 +97,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the popover has loaded.
-   */
-  @Event() ionPopoverDidLoad!: EventEmitter<void>;
-
-  /**
-   * Emitted after the popover has unloaded.
-   */
-  @Event() ionPopoverDidUnload!: EventEmitter<void>;
-
   /**
    * Emitted after the popover has presented.
    */
@@ -127,14 +117,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionPopoverDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  componentDidLoad() {
-    this.ionPopoverDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionPopoverDidUnload.emit();
-  }
-
   @Listen('ionDismiss')
   protected onDismiss(ev: UIEvent) {
     ev.stopPropagation();
@@ -215,7 +197,6 @@ export class Popover implements ComponentInterface, OverlayInterface {
   }
 
   hostData() {
-
     return {
       style: {
         zIndex: 20000 + this.overlayIndex,

core/src/components/popover/readme.md

@@ -84,9 +84,7 @@ async function presentPopover(ev) {
 | Event                   | Description                               | Type                              |
 | ----------------------- | ----------------------------------------- | --------------------------------- |
 | `ionPopoverDidDismiss`  | Emitted after the popover has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionPopoverDidLoad`     | Emitted after the popover has loaded.     | `CustomEvent<void>`               |
 | `ionPopoverDidPresent`  | Emitted after the popover has presented.  | `CustomEvent<void>`               |
-| `ionPopoverDidUnload`   | Emitted after the popover has unloaded.   | `CustomEvent<void>`               |
 | `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionPopoverWillPresent` | Emitted before the popover has presented. | `CustomEvent<void>`               |
 

core/src/components/toast/readme.md

@@ -111,9 +111,7 @@ async function presentToastWithOptions() {
 | Event                 | Description                             | Type                              |
 | --------------------- | --------------------------------------- | --------------------------------- |
 | `ionToastDidDismiss`  | Emitted after the toast has dismissed.  | `CustomEvent<OverlayEventDetail>` |
-| `ionToastDidLoad`     | Emitted after the toast has loaded.     | `CustomEvent<void>`               |
 | `ionToastDidPresent`  | Emitted after the toast has presented.  | `CustomEvent<void>`               |
-| `ionToastDidUnload`   | Emitted after the toast has unloaded.   | `CustomEvent<void>`               |
 | `ionToastWillDismiss` | Emitted before the toast has dismissed. | `CustomEvent<OverlayEventDetail>` |
 | `ionToastWillPresent` | Emitted before the toast has presented. | `CustomEvent<void>`               |
 

core/src/components/toast/toast.scss

@@ -52,6 +52,10 @@
   pointer-events: none;
 }
 
+:host(.overlay-hidden) {
+  display: none;
+}
+
 :host(.ion-color) {
   --button-color: inherit;
 

core/src/components/toast/toast.tsx

@@ -103,11 +103,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
    */
   @Prop() animated = true;
 
-  /**
-   * Emitted after the toast has loaded.
-   */
-  @Event() ionToastDidLoad!: EventEmitter<void>;
-
   /**
    * Emitted after the toast has presented.
    */
@@ -128,19 +123,6 @@ export class Toast implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionToastDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
-  /**
-   * Emitted after the toast has unloaded.
-   */
-  @Event() ionToastDidUnload!: EventEmitter<void>;
-
-  componentDidLoad() {
-    this.ionToastDidLoad.emit();
-  }
-
-  componentDidUnload() {
-    this.ionToastDidUnload.emit();
-  }
-
   /**
    * Present the toast overlay after it has been created.
    */

core/src/utils/overlays.ts

@@ -9,7 +9,7 @@ export function createOverlay<T extends HTMLIonOverlayElement>(element: T, opts:
   // convert the passed in overlay options into props
   // that get passed down into the new overlay
   Object.assign(element, opts);
-  element.classList.add('ion-page-invisible');
+  element.classList.add('overlay-hidden');
   const overlayIndex = lastId++;
   element.overlayIndex = overlayIndex;
   if (!element.hasAttribute('id')) {
@@ -142,7 +142,7 @@ async function overlayAnimation(
 
   } else {
     // Make overlay visible in case it's hidden
-    baseEl.classList.remove('ion-page-invisible');
+    baseEl.classList.remove('overlay-hidden');
 
     const aniRoot = baseEl.shadowRoot || overlay.el;
     const animation = overlay.animation = await import('./animation').then(mod => mod.create(animationBuilder, aniRoot, opts));