feat(action-sheet): use action sheet overlay inline (#26172)

core/api.txt

@@ -28,19 +28,25 @@ ion-action-sheet,prop,cssClass,string | string[] | undefined,undefined,false,fal
 ion-action-sheet,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,header,string | undefined,undefined,false,false
 ion-action-sheet,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-action-sheet,prop,isOpen,boolean,false,false,false
 ion-action-sheet,prop,keyboardClose,boolean,true,false,false
 ion-action-sheet,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-action-sheet,prop,mode,"ios" | "md",undefined,false,false
 ion-action-sheet,prop,subHeader,string | undefined,undefined,false,false
 ion-action-sheet,prop,translucent,boolean,false,false,false
+ion-action-sheet,prop,trigger,string | undefined,undefined,false,false
 ion-action-sheet,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-action-sheet,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-action-sheet,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-action-sheet,method,present,present() => Promise<void>
+ion-action-sheet,event,didDismiss,OverlayEventDetail<any>,true
+ion-action-sheet,event,didPresent,void,true
 ion-action-sheet,event,ionActionSheetDidDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetDidPresent,void,true
 ion-action-sheet,event,ionActionSheetWillDismiss,OverlayEventDetail<any>,true
 ion-action-sheet,event,ionActionSheetWillPresent,void,true
+ion-action-sheet,event,willDismiss,OverlayEventDetail<any>,true
+ion-action-sheet,event,willPresent,void,true
 ion-action-sheet,css-prop,--backdrop-opacity
 ion-action-sheet,css-prop,--background
 ion-action-sheet,css-prop,--button-background

core/src/components.d.ts

@@ -92,6 +92,7 @@ export namespace Components {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Dismiss the action sheet overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
@@ -102,6 +103,7 @@ export namespace Components {
           * Animation to use when the action sheet is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController": boolean;
         /**
           * Title for the action sheet.
          */
@@ -110,6 +112,10 @@ export namespace Components {
           * Additional attributes to pass to the action sheet.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
+         */
+        "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -143,6 +149,10 @@ export namespace Components {
           * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent": boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
+         */
+        "trigger": string | undefined;
     }
     interface IonAlert {
         /**
@@ -3851,10 +3861,12 @@ declare namespace LocalJSX {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Animation to use when the action sheet is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController"?: boolean;
         /**
           * Title for the action sheet.
          */
@@ -3863,6 +3875,10 @@ declare namespace LocalJSX {
           * Additional attributes to pass to the action sheet.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
+         */
+        "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -3876,21 +3892,37 @@ declare namespace LocalJSX {
          */
         "mode"?: "ios" | "md";
         /**
-          * Emitted after the alert has dismissed.
+          * Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
+         */
+        "onDidDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
+         */
+        "onDidPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
+        /**
+          * Emitted after the action sheet has dismissed.
          */
         "onIonActionSheetDidDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
         /**
-          * Emitted after the alert has presented.
+          * Emitted after the action sheet has presented.
          */
         "onIonActionSheetDidPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
         /**
-          * Emitted before the alert has dismissed.
+          * Emitted before the action sheet has dismissed.
          */
         "onIonActionSheetWillDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
         /**
-          * Emitted before the alert has presented.
+          * Emitted before the action sheet has presented.
          */
         "onIonActionSheetWillPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
+        /**
+          * Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
+         */
+        "onWillDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.
+         */
+        "onWillPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * Subtitle for the action sheet.
@@ -3900,6 +3932,10 @@ declare namespace LocalJSX {
           * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         "translucent"?: boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
+         */
+        "trigger"?: string | undefined;
     }
     interface IonAlert {
         /**

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

@@ -1,17 +1,28 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
+import { Watch, Component, Element, Event, Host, Method, Prop, h, readTask } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
   ActionSheetButton,
   AnimationBuilder,
   CssClassMap,
+  FrameworkDelegate,
   OverlayEventDetail,
   OverlayInterface,
 } from '../../interface';
 import type { Gesture } from '../../utils/gesture';
 import { createButtonActiveGesture } from '../../utils/gesture/button-active';
-import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
+import {
+  BACKDROP,
+  createDelegateController,
+  createTriggerController,
+  dismiss,
+  eventMethod,
+  isCancel,
+  prepareOverlay,
+  present,
+  safeCall,
+} from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -31,18 +42,28 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class ActionSheet implements ComponentInterface, OverlayInterface {
-  presented = false;
-  lastFocus?: HTMLElement;
-  animation?: any;
+  private readonly delegateController = createDelegateController(this);
+  private readonly triggerController = createTriggerController();
+  private currentTransition?: Promise<any>;
   private wrapperEl?: HTMLElement;
   private groupEl?: HTMLElement;
   private gesture?: Gesture;
 
+  presented = false;
+  lastFocus?: HTMLElement;
+  animation?: any;
+
   @Element() el!: HTMLIonActionSheetElement;
 
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /** @internal */
+  @Prop() delegate?: FrameworkDelegate;
+
+  /** @internal */
+  @Prop() hasController = false;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -102,35 +123,103 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
   @Prop() htmlAttributes?: { [key: string]: any };
 
   /**
-   * Emitted after the alert has presented.
+   * If `true`, the action sheet will open. If `false`, the action sheet will close.
+   * Use this if you need finer grained control over presentation, otherwise
+   * just use the actionSheetController or the `trigger` property.
+   * Note: `isOpen` will not automatically be set back to `false` when
+   * the action sheet dismisses. You will need to do that in your code.
+   */
+  @Prop() isOpen = false;
+  @Watch('isOpen')
+  onIsOpenChange(newValue: boolean, oldValue: boolean) {
+    if (newValue === true && oldValue === false) {
+      this.present();
+    } else if (newValue === false && oldValue === true) {
+      this.dismiss();
+    }
+  }
+
+  /**
+   * An ID corresponding to the trigger element that
+   * causes the action sheet to open when clicked.
+   */
+  @Prop() trigger: string | undefined;
+  @Watch('trigger')
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
+    }
+  }
+
+  /**
+   * Emitted after the action sheet has presented.
    */
   @Event({ eventName: 'ionActionSheetDidPresent' }) didPresent!: EventEmitter<void>;
 
   /**
-   * Emitted before the alert has presented.
+   * Emitted before the action sheet has presented.
    */
   @Event({ eventName: 'ionActionSheetWillPresent' }) willPresent!: EventEmitter<void>;
 
   /**
-   * Emitted before the alert has dismissed.
+   * Emitted before the action sheet has dismissed.
    */
   @Event({ eventName: 'ionActionSheetWillDismiss' }) willDismiss!: EventEmitter<OverlayEventDetail>;
 
   /**
-   * Emitted after the alert has dismissed.
+   * Emitted after the action sheet has dismissed.
    */
   @Event({ eventName: 'ionActionSheetDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  /**
+   * Emitted after the action sheet has presented.
+   * Shorthand for ionActionSheetWillDismiss.
+   */
+  @Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the action sheet has presented.
+   * Shorthand for ionActionSheetWillPresent.
+   */
+  @Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the action sheet has dismissed.
+   * Shorthand for ionActionSheetWillDismiss.
+   */
+  @Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
+  /**
+   * Emitted after the action sheet has dismissed.
+   * Shorthand for ionActionSheetDidDismiss.
+   */
+  @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
   /**
    * Present the action sheet overlay after it has been created.
    */
   @Method()
-  present(): Promise<void> {
-    return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
-  }
+  async present(): Promise<void> {
+    /**
+     * When using an inline action sheet
+     * and dismissing a action sheet it is possible to
+     * quickly present the action sheet while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
 
-  connectedCallback() {
-    prepareOverlay(this.el);
+    await this.delegateController.attachViewToDom();
+
+    this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
+
+    await this.currentTransition;
+
+    this.currentTransition = undefined;
   }
 
   /**
@@ -143,8 +232,15 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
-  dismiss(data?: any, role?: string): Promise<boolean> {
-    return dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
+  async dismiss(data?: any, role?: string): Promise<boolean> {
+    this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
+    const dismissed = await this.currentTransition;
+
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
+    }
+
+    return dismissed;
   }
 
   /**
@@ -207,11 +303,17 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     }
   };
 
+  connectedCallback() {
+    prepareOverlay(this.el);
+    this.triggerChanged();
+  }
+
   disconnectedCallback() {
     if (this.gesture) {
       this.gesture.destroy();
       this.gesture = undefined;
     }
+    this.triggerController.removeClickListener();
   }
 
   componentDidLoad() {

core/src/components/action-sheet/test/isOpen/action-sheet.e2e.ts

@@ -0,0 +1,30 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('action sheet: isOpen', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('isOpen does not behave differently in RTL');
+    skip.mode('md', 'isOpen does not behave differently in MD');
+    await page.goto('/src/components/action-sheet/test/isOpen');
+  });
+
+  test('should open the action sheet', async ({ page }) => {
+    const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    await page.click('#default');
+
+    await ionActionSheetDidPresent.next();
+    await page.waitForSelector('ion-action-sheet', { state: 'visible' });
+  });
+
+  test('should open the action sheet then close after a timeout', async ({ page }) => {
+    const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+    await page.click('#timeout');
+
+    await ionActionSheetDidPresent.next();
+    await page.waitForSelector('ion-action-sheet', { state: 'visible' });
+
+    await ionActionSheetDidDismiss.next();
+
+    await page.waitForSelector('ion-action-sheet', { state: 'hidden' });
+  });
+});

core/src/components/action-sheet/test/isOpen/index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ActionSheet - isOpen</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      .grid-item {
+        margin: 0 auto;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>ActionSheet - isOpen</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-button id="default" onclick="openActionSheet()">Open ActionSheet</ion-button>
+          </div>
+          <div class="grid-item">
+            <h2>Open, then close after 500ms</h2>
+            <ion-button id="timeout" onclick="openActionSheet(500)">Open ActionSheet</ion-button>
+          </div>
+        </div>
+
+        <ion-action-sheet header="Header" sub-header="Sub header"> </ion-action-sheet>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
+      actionSheet.buttons = [
+        {
+          role: 'destructive',
+          text: 'Delete',
+        },
+        {
+          text: 'Ok',
+        },
+      ];
+
+      const openActionSheet = (timeout) => {
+        actionSheet.isOpen = true;
+
+        if (timeout) {
+          setTimeout(() => {
+            actionSheet.isOpen = false;
+          }, timeout);
+        }
+      };
+
+      actionSheet.addEventListener('ionActionSheetDidDismiss', () => {
+        actionSheet.isOpen = false;
+      });
+    </script>
+  </body>
+</html>

core/src/components/action-sheet/test/trigger/action-sheet.e2e.ts

@@ -0,0 +1,31 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('action sheet: trigger', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('trigger does not behave differently in RTL');
+    skip.mode('md');
+    await page.goto('/src/components/action-sheet/test/trigger');
+  });
+
+  test('should open the action sheet', async ({ page }) => {
+    const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    await page.click('#default');
+
+    await ionActionSheetDidPresent.next();
+    await page.waitForSelector('#default-action-sheet', { state: 'visible' });
+  });
+
+  test('should present a previously presented action sheet', async ({ page }) => {
+    const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+    const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');
+
+    await page.click('#timeout');
+
+    await ionActionSheetDidDismiss.next();
+
+    await page.click('#timeout');
+
+    await ionActionSheetDidPresent.next();
+    await page.waitForSelector('#timeout-action-sheet', { state: 'visible' });
+  });
+});

core/src/components/action-sheet/test/trigger/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ActionSheet - trigger</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+
+      .grid-item {
+        margin: 0 auto;
+      }
+
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>ActionSheet - trigger</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-button id="default">Open ActionSheet</ion-button>
+          </div>
+          <div class="grid-item">
+            <h2>Open, then close after 500ms</h2>
+            <ion-button id="timeout">Open ActionSheet</ion-button>
+          </div>
+        </div>
+
+        <ion-action-sheet id="default-action-sheet" trigger="default" header="Header" sub-header="Sub header">
+        </ion-action-sheet>
+        <ion-action-sheet id="timeout-action-sheet" trigger="timeout" header="Header" sub-header="Sub header">
+        </ion-action-sheet>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const actionSheet = document.querySelector('ion-action-sheet');
+      actionSheet.buttons = [
+        {
+          role: 'destructive',
+          text: 'Delete',
+        },
+        {
+          text: 'Ok',
+        },
+      ];
+
+      const actionSheetTimeout = document.getElementById('timeout-action-sheet');
+      actionSheetTimeout.addEventListener('didPresent', () => {
+        setTimeout(() => {
+          actionSheetTimeout.dismiss();
+        }, 500);
+      });
+    </script>
+  </body>
+</html>

packages/react/src/components/IonActionSheet.tsx

@@ -1,11 +1,11 @@
 import {
   ActionSheetButton as ActionSheetButtonCore,
   ActionSheetOptions as ActionSheetOptionsCore,
-  actionSheetController as actionSheetControllerCore,
+  JSX
 } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
 
-import { createOverlayComponent } from './createOverlayComponent';
+import { createInlineOverlayComponent } from './createInlineOverlayComponent';
 
 export interface ActionSheetButton extends Omit<ActionSheetButtonCore, 'icon'> {
   icon?:
@@ -20,14 +20,7 @@ export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'button
   buttons?: (ActionSheetButton | string)[];
 }
 
-const actionSheetController = {
-  create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any),
-  dismiss: (data?: any, role?: string | undefined, id?: string | undefined) =>
-    actionSheetControllerCore.dismiss(data, role, id),
-  getTop: () => actionSheetControllerCore.getTop(),
-};
-
-export const IonActionSheet = /*@__PURE__*/ createOverlayComponent<
-  ActionSheetOptions,
+export const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent<
+  JSX.IonActionSheet,
   HTMLIonActionSheetElement
->('ion-action-sheet', actionSheetController, defineCustomElement);
+>('ion-action-sheet', defineCustomElement);

packages/react/test-app/tests/e2e/specs/overlay-components/IonActionSheet.cy.ts

@@ -13,7 +13,7 @@ describe('IonActionSheet', () => {
     //click ok
     cy.get('ion-action-sheet').get('button:contains("Ok")').click();
     cy.get('div').contains('Ok clicked');
-    cy.get('ion-action-sheet').should('not.exist');
+    cy.get('ion-action-sheet').should('not.be.visible');
   });
 
   it('display action and call dismiss to close it', () => {
@@ -21,7 +21,7 @@ describe('IonActionSheet', () => {
     cy.get('ion-button').contains('Show ActionSheet, hide after 250 ms').click();
     cy.get('ion-action-sheet').contains('Action Sheet');
 
-    //verify action sheet is gone
-    cy.get('ion-action-sheet').should('not.exist');
+    //verify action sheet is hidden
+    cy.get('ion-action-sheet').should('not.be.visible');
   });
 });

packages/vue/scripts/copy-overlays.js

@@ -5,7 +5,6 @@ function generateOverlays() {
   const components = [
     {
       tag: 'ion-action-sheet',
-      controller: 'actionSheetController',
       name: 'IonActionSheet'
     },
     {

packages/vue/src/components/Overlays.ts

@@ -5,7 +5,6 @@
 
 import {
   JSX,
-  actionSheetController,
   alertController,
   pickerController,
   toastController,
@@ -21,7 +20,7 @@ import { defineCustomElement as defineIonPopoverCustomElement } from '@ionic/cor
 
 import { defineOverlayContainer } from '../vue-component-lib/overlays';
 
-export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent'], actionSheetController);
+export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonActionSheet>('ion-action-sheet', defineIonActionSheetCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
     
 export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
     

packages/vue/test/base/tests/e2e/specs/overlays.cy.js

@@ -98,7 +98,7 @@ describe('Overlays', () => {
   });
 
   it(`should open and close ion-action-sheet via component`, () => {
-    testComponent('ion-action-sheet');
+    testInlineOverlay('ion-action-sheet');
   });
 
   it(`should open and close ion-loading via component`, () => {