fix(react,vue): backdrop for inline modal/popover overlay (#24453)

Resolves #24449

packages/react/src/components/IonActionSheet.tsx

@@ -3,17 +3,17 @@ import {
   ActionSheetOptions as ActionSheetOptionsCore,
   actionSheetController as actionSheetControllerCore,
 } from '@ionic/core/components';
-import { IonActionSheet as IonActionSheetCmp } from '@ionic/core/components/ion-action-sheet.js';
+import { defineCustomElement } from '@ionic/core/components/ion-action-sheet.js';
 
 import { createOverlayComponent } from './createOverlayComponent';
 
 export interface ActionSheetButton extends Omit<ActionSheetButtonCore, 'icon'> {
   icon?:
-    | {
-        ios: string;
-        md: string;
-      }
-    | string;
+  | {
+    ios: string;
+    md: string;
+  }
+  | string;
 }
 
 export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'buttons'> {
@@ -30,4 +30,4 @@ const actionSheetController = {
 export const IonActionSheet = /*@__PURE__*/ createOverlayComponent<
   ActionSheetOptions,
   HTMLIonActionSheetElement
->('ion-action-sheet', actionSheetController, IonActionSheetCmp);
+>('ion-action-sheet', actionSheetController, defineCustomElement);

packages/react/src/components/IonModal.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@ionic/core/components';
-import { IonModal as IonModalCmp } from '@ionic/core/components/ion-modal.js';
+import { defineCustomElement } from '@ionic/core/components/ion-modal.js';
 
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonModal = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonModal,
   HTMLIonModalElement
->('ion-modal', IonModalCmp);
+>('ion-modal', defineCustomElement);

packages/react/src/components/IonPopover.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@ionic/core/components';
-import { IonPopover as IonPopoverCmp } from '@ionic/core/components/ion-popover.js';
+import { defineCustomElement } from '@ionic/core/components/ion-popover.js';
 
 import { createInlineOverlayComponent } from './createInlineOverlayComponent'
 
 export const IonPopover = /*@__PURE__*/ createInlineOverlayComponent<
   JSX.IonPopover,
   HTMLIonPopoverElement
->('ion-popover', IonPopoverCmp);
+>('ion-popover', defineCustomElement);

packages/react/src/components/createInlineOverlayComponent.tsx

@@ -5,7 +5,6 @@ import {
   attachProps,
   camelToDashCase,
   dashToPascalCase,
-  defineCustomElement,
   isCoveredByReact,
   mergeRefs,
 } from './react-component-lib/utils';
@@ -26,10 +25,11 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
   tagName: string,
-  customElement?: any
+  defineCustomElement?: () => void
 ) => {
-  defineCustomElement(tagName, customElement);
-
+  if (defineCustomElement) {
+    defineCustomElement();
+  }
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {
     ref: React.RefObject<HTMLElement>;

packages/react/src/components/createOverlayComponent.tsx

@@ -2,7 +2,7 @@ import { OverlayEventDetail } from '@ionic/core/components';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { attachProps, dashToPascalCase, defineCustomElement, setRef } from './react-component-lib/utils';
+import { attachProps, dashToPascalCase, setRef } from './react-component-lib/utils';
 
 interface OverlayElement extends HTMLElement {
   present: () => Promise<void>;
@@ -24,9 +24,11 @@ export const createOverlayComponent = <
 >(
   tagName: string,
   controller: { create: (options: any) => Promise<OverlayType> },
-  customElement?: any
+  defineCustomElement?: () => void
 ) => {
-  defineCustomElement(tagName, customElement);
+  if (defineCustomElement !== undefined) {
+    defineCustomElement();
+  }
 
   const displayName = dashToPascalCase(tagName);
   const didDismissEventName = `on${displayName}DidDismiss`;