@ionic/react - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/components/createComponent.js

@@ -28,5 +28,2 @@ var __rest = (this && this.__rest) || function (s, e) {
             const node = ReactDOM.findDOMNode(this);
-            if (!(node instanceof HTMLElement)) {
-                return;
-            }
             attachEventProps(node, props);
@@ -33,0 +30,0 @@ }

dist/components/createControllerComponent.d.ts

 import React from 'react';
+import { OverlayEventDetail } from '@ionic/core';
 import { OverlayComponentElement, OverlayControllerComponentElement } from '../types';
 export declare function createControllerComponent<T extends object, E extends OverlayComponentElement, C extends OverlayControllerComponentElement<E>>(tagName: string, controllerTagName: string): {
     new (props: T & {
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
     }): {
         element: E;
         controllerElement: C;
-        componentDidMount(): Promise<void>;
+        id: string;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -16,3 +20,4 @@ render(): null;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -23,3 +28,4 @@ forceUpdate(callBack?: () => void): void;
         }> & Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>;
@@ -31,3 +37,4 @@ state: Readonly<{}>;
         shouldComponentUpdate?(nextProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -37,3 +44,4 @@ componentWillUnmount?(): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -43,12 +51,16 @@ componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<T & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -55,0 +67,0 @@ };

dist/components/createControllerComponent.js

@@ -19,9 +19,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import React from 'react';
-import { attachEventProps } from './utils';
-import { ensureElementInBody, dashToPascalCase } from './utils';
+import { attachEventProps, ensureElementInBody, dashToPascalCase, generateUniqueId } from './utils';
 export function createControllerComponent(tagName, controllerTagName) {
     const displayName = dashToPascalCase(tagName);
+    const dismissEventName = `on${displayName}DidDismiss`;
     return class ReactControllerComponent extends React.Component {
         constructor(props) {
             super(props);
+            this.id = generateUniqueId();
         }
@@ -32,16 +33,17 @@ static get displayName() {
         componentDidMount() {
-            return __awaiter(this, void 0, void 0, function* () {
-                this.controllerElement = ensureElementInBody(controllerTagName);
-                yield this.controllerElement.componentOnReady();
-            });
+            this.controllerElement = ensureElementInBody(controllerTagName);
         }
         componentDidUpdate(prevProps) {
             return __awaiter(this, void 0, void 0, function* () {
-                if (prevProps.show !== this.props.show && this.props.show === true) {
-                    const _a = this.props, { show } = _a, cProps = __rest(_a, ["show"]);
-                    this.element = yield this.controllerElement.create(cProps);
+                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                    const _a = this.props, { isOpen, onDidDismiss } = _a, cProps = __rest(_a, ["isOpen", "onDidDismiss"]);
+                    const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
+                    if (this.controllerElement.componentOnReady) {
+                        yield this.controllerElement.componentOnReady();
+                    }
+                    this.element = yield this.controllerElement.create(elementProps);
+                    attachEventProps(this.element, elementProps);
                     yield this.element.present();
-                    attachEventProps(this.element, cProps);
                 }
-                if (prevProps.show !== this.props.show && this.props.show === false) {
+                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
                     yield this.element.dismiss();
@@ -48,0 +50,0 @@ }

dist/components/createOverlayComponent.d.ts

 import React from 'react';
+import { OverlayEventDetail } from '@ionic/core';
 import { OverlayComponentElement, OverlayControllerComponentElement } from '../types';
@@ -6,3 +7,4 @@ export declare function createOverlayComponent<T extends object, E extends OverlayComponentElement, C extends OverlayControllerComponentElement<E>>(tagName: string, controllerTagName: string): {
         children: React.ReactNode;
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
     }): {
@@ -12,6 +14,7 @@ element: E;
         el: HTMLDivElement;
-        componentDidMount(): Promise<void>;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: T & {
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -22,3 +25,4 @@ render(): React.ReactPortal;
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -30,3 +34,4 @@ forceUpdate(callBack?: () => void): void;
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>;
@@ -39,3 +44,4 @@ state: Readonly<{}>;
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -46,3 +52,4 @@ componentWillUnmount?(): void;
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -53,15 +60,19 @@ componentWillMount?(): void;
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T & {
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<T & {
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<T & {
             children: React.ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -68,0 +79,0 @@ };

dist/components/createOverlayComponent.js

@@ -24,2 +24,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     const displayName = dashToPascalCase(tagName);
+    const dismissEventName = `on${displayName}DidDismiss`;
     return class ReactControllerComponent extends React.Component {
@@ -34,16 +35,17 @@ constructor(props) {
         componentDidMount() {
-            return __awaiter(this, void 0, void 0, function* () {
-                this.controllerElement = ensureElementInBody(controllerTagName);
-                yield this.controllerElement.componentOnReady();
-            });
+            this.controllerElement = ensureElementInBody(controllerTagName);
         }
         componentDidUpdate(prevProps) {
             return __awaiter(this, void 0, void 0, function* () {
-                if (prevProps.show !== this.props.show && this.props.show === true) {
-                    const _a = this.props, { children, show } = _a, cProps = __rest(_a, ["children", "show"]);
-                    this.element = yield this.controllerElement.create(Object.assign({}, cProps, { component: this.el, componentProps: {} }));
+                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+                    const _a = this.props, { children, isOpen, onDidDismiss } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss"]);
+                    const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
+                    if (this.controllerElement.componentOnReady) {
+                        yield this.controllerElement.componentOnReady();
+                    }
+                    this.element = yield this.controllerElement.create(Object.assign({}, elementProps, { component: this.el, componentProps: {} }));
+                    attachEventProps(this.element, elementProps);
                     yield this.element.present();
-                    attachEventProps(this.element, cProps);
                 }
-                if (prevProps.show !== this.props.show && this.props.show === false) {
+                if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
                     yield this.element.dismiss();
@@ -50,0 +52,0 @@ }

dist/components/index.js

@@ -0,11 +1,23 @@
+import { addIcons } from 'ionicons';
+import { ICON_PATHS } from 'ionicons/icons';
+import { defineCustomElements } from '@ionic/core/loader';
 import { createReactComponent } from './createComponent';
-export { default as IonActionSheet } from './IonActionSheet';
+// createControllerComponent
 export { default as IonAlert } from './IonAlert';
 export { default as IonLoading } from './IonLoading';
+export { default as IonToast } from './IonToast';
+// createOverlayComponent
+export { default as IonActionSheet } from './IonActionSheet';
 export { default as IonModal } from './IonModal';
 export { default as IonPopover } from './IonPopover';
-export { default as IonToast } from './IonToast';
+// Custom Components
+export { default as IonPage } from './IonPage';
 export { default as IonTabs } from './navigation/IonTabs';
 export { default as IonTabBar } from './navigation/IonTabBar';
 export { IonRouterOutlet, IonBackButton } from './navigation/IonRouterOutlet';
+addIcons(ICON_PATHS);
+defineCustomElements(window);
+// ionicons
+export const IonIcon = createReactComponent('ion-icon');
+// createReactComponent
 export const IonTabBarInner = createReactComponent('ion-tab-bar');
@@ -39,3 +51,2 @@ export const IonRouterOutletInner = createReactComponent('ion-router-outlet');
 export const IonHeader = createReactComponent('ion-header');
-export const IonIcon = createReactComponent('ion-icon');
 export const IonImg = createReactComponent('ion-img');
@@ -42,0 +53,0 @@ export const IonInfiniteScroll = createReactComponent('ion-infinite-scroll');

dist/components/IonActionSheet.d.ts

@@ -7,3 +7,4 @@ /// <reference types="react" />
         children: import("react").ReactNode;
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
@@ -13,6 +14,7 @@ element: HTMLIonActionSheetElement;
         el: HTMLDivElement;
-        componentDidMount(): Promise<void>;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Components.IonActionSheetAttributes & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -23,3 +25,4 @@ render(): import("react").ReactPortal;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -31,3 +34,4 @@ forceUpdate(callBack?: () => void): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -40,3 +44,4 @@ state: Readonly<{}>;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -47,3 +52,4 @@ componentWillUnmount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -54,15 +60,19 @@ componentWillMount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Components.IonActionSheetAttributes & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Components.IonActionSheetAttributes & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Components.IonActionSheetAttributes & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -69,0 +79,0 @@ };

dist/components/IonAlert.d.ts

@@ -6,9 +6,12 @@ /// <reference types="react" />
     new (props: Components.IonAlertAttributes & {
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
         element: HTMLIonAlertElement;
         controllerElement: HTMLIonAlertControllerElement;
-        componentDidMount(): Promise<void>;
+        id: string;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -18,3 +21,4 @@ render(): null;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -25,3 +29,4 @@ forceUpdate(callBack?: () => void): void;
         }> & Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -33,3 +38,4 @@ state: Readonly<{}>;
         shouldComponentUpdate?(nextProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -39,3 +45,4 @@ componentWillUnmount?(): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -45,12 +52,16 @@ componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Components.IonAlertAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -57,0 +68,0 @@ };

dist/components/IonLoading.d.ts

 /// <reference types="react" />
 import { Components } from '@ionic/core';
 export declare type LoadingOptions = Components.IonLoadingAttributes;
-declare const IonActionSheet: {
+declare const IonLoading: {
     new (props: Components.IonLoadingAttributes & {
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
         element: HTMLIonLoadingElement;
         controllerElement: HTMLIonLoadingControllerElement;
-        componentDidMount(): Promise<void>;
+        id: string;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -17,3 +20,4 @@ render(): null;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -24,3 +28,4 @@ forceUpdate(callBack?: () => void): void;
         }> & Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -32,3 +37,4 @@ state: Readonly<{}>;
         shouldComponentUpdate?(nextProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -38,3 +44,4 @@ componentWillUnmount?(): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -44,12 +51,16 @@ componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Components.IonLoadingAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -60,2 +71,2 @@ };
 };
-export default IonActionSheet;
+export default IonLoading;

dist/components/IonLoading.js

 import { createControllerComponent } from './createControllerComponent';
-const IonActionSheet = createControllerComponent('ion-loading', 'ion-loading-controller');
-export default IonActionSheet;
+const IonLoading = createControllerComponent('ion-loading', 'ion-loading-controller');
+export default IonLoading;
 //# sourceMappingURL=IonLoading.js.map

dist/components/IonModal.d.ts

@@ -12,3 +12,4 @@ /// <reference types="react" />
         children: import("react").ReactNode;
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
@@ -18,3 +19,3 @@ element: HTMLIonModalElement;
         el: HTMLDivElement;
-        componentDidMount(): Promise<void>;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Pick<Components.IonModalAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "onIonModalDidDismiss" | "onIonModalDidPresent" | "onIonModalWillDismiss" | "onIonModalWillPresent" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
@@ -24,3 +25,4 @@ children: import("react").ReactNode;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -33,3 +35,4 @@ render(): import("react").ReactPortal;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -43,3 +46,4 @@ forceUpdate(callBack?: () => void): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -54,3 +58,4 @@ state: Readonly<{}>;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -63,3 +68,4 @@ componentWillUnmount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -72,3 +78,4 @@ componentWillMount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
@@ -79,3 +86,4 @@ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Components.IonModalAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "onIonModalDidDismiss" | "onIonModalDidPresent" | "onIonModalWillDismiss" | "onIonModalWillPresent" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
@@ -86,3 +94,4 @@ componentWillUpdate?(nextProps: Readonly<Pick<Components.IonModalAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "onIonModalDidDismiss" | "onIonModalDidPresent" | "onIonModalWillDismiss" | "onIonModalWillPresent" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -93,3 +102,4 @@ UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Components.IonModalAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "onIonModalDidDismiss" | "onIonModalDidPresent" | "onIonModalWillDismiss" | "onIonModalWillPresent" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -96,0 +106,0 @@ };

dist/components/IonPopover.d.ts

@@ -12,3 +12,4 @@ /// <reference types="react" />
         children: import("react").ReactNode;
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
@@ -18,3 +19,3 @@ element: HTMLIonPopoverElement;
         el: HTMLDivElement;
-        componentDidMount(): Promise<void>;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Pick<Components.IonPopoverAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "event" | "onIonPopoverDidDismiss" | "onIonPopoverDidPresent" | "onIonPopoverWillDismiss" | "onIonPopoverWillPresent" | "translucent"> & {
@@ -24,3 +25,4 @@ children: import("react").ReactNode;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -33,3 +35,4 @@ render(): import("react").ReactPortal;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -43,3 +46,4 @@ forceUpdate(callBack?: () => void): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -54,3 +58,4 @@ state: Readonly<{}>;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -63,3 +68,4 @@ componentWillUnmount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -72,3 +78,4 @@ componentWillMount?(): void;
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
@@ -79,3 +86,4 @@ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Components.IonPopoverAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "event" | "onIonPopoverDidDismiss" | "onIonPopoverDidPresent" | "onIonPopoverWillDismiss" | "onIonPopoverWillPresent" | "translucent"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
@@ -86,3 +94,4 @@ componentWillUpdate?(nextProps: Readonly<Pick<Components.IonPopoverAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "event" | "onIonPopoverDidDismiss" | "onIonPopoverDidPresent" | "onIonPopoverWillDismiss" | "onIonPopoverWillPresent" | "translucent"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -93,3 +102,4 @@ UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Components.IonPopoverAttributes, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "innerHTML" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "main" | "animated" | "mode" | "padding-top" | "padding-bottom" | "padding-left" | "padding-right" | "padding-horizontal" | "padding-vertical" | "margin-top" | "margin-bottom" | "margin-left" | "margin-right" | "margin-horizontal" | "margin-vertical" | "no-padding" | "no-margin" | "color" | "padding" | "ref" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "key" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autocorrect" | "autoSave" | "autosave" | "itemProp" | "itemprop" | "itemScope" | "itemscope" | "itemType" | "itemtype" | "itemID" | "itemid" | "itemRef" | "itemref" | "results" | "security" | "unselectable" | "margin" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAuxClick" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "event" | "onIonPopoverDidDismiss" | "onIonPopoverDidPresent" | "onIonPopoverWillDismiss" | "onIonPopoverWillPresent" | "translucent"> & {
             children: import("react").ReactNode;
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -96,0 +106,0 @@ };

dist/components/IonToast.d.ts

@@ -6,9 +6,12 @@ /// <reference types="react" />
     new (props: Components.IonToastAttributes & {
-        show: boolean;
+        isOpen: boolean;
+        onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
         element: HTMLIonToastElement;
         controllerElement: HTMLIonToastControllerElement;
-        componentDidMount(): Promise<void>;
+        id: string;
+        componentDidMount(): void;
         componentDidUpdate(prevProps: Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
@@ -18,3 +21,4 @@ render(): null;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>) => {} | Pick<{}, K>) | Pick<{}, K>, callback?: () => void): void;
@@ -25,3 +29,4 @@ forceUpdate(callBack?: () => void): void;
         }> & Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>;
@@ -33,3 +38,4 @@ state: Readonly<{}>;
         shouldComponentUpdate?(nextProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): boolean;
@@ -39,3 +45,4 @@ componentWillUnmount?(): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, prevState: Readonly<{}>): any;
@@ -45,12 +52,16 @@ componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Components.IonToastAttributes & {
-            show: boolean;
+            isOpen: boolean;
+            onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
@@ -57,0 +68,0 @@ };

dist/components/navigation/IonRouterOutlet.js

@@ -5,2 +5,3 @@ import React, { Component } from 'react';
 import { IonBackButtonInner, IonRouterOutletInner } from '../index';
+import IonPage from '../IonPage';
 const Context = React.createContext({
@@ -134,3 +135,3 @@ goBack: () => { }
                         'hidden': this.state.direction == null,
-                        'className': 'ion-page' + (this.state.direction == null ? ' ion-page-hidden' : '')
+                        'className': (this.state.direction == null ? ' ion-page-hidden' : '')
                     };
@@ -141,3 +142,3 @@ }
                         'ref': this.enteringEl,
-                        'className': 'ion-page' + (this.state.direction != null ? ' ion-page-invisible' : '')
+                        'className': (this.state.direction != null ? ' ion-page-invisible' : '')
                     };
@@ -148,6 +149,6 @@ }
                         'aria-hidden': true,
-                        'className': 'ion-page ion-page-hidden'
+                        'className': 'ion-page-hidden'
                     };
                 }
-                return (React.createElement("div", Object.assign({}, props, { key: item.id }), this.renderChild(item)));
+                return (React.createElement(IonPage, Object.assign({}, props, { key: item.id }), this.renderChild(item)));
             }))));
@@ -154,0 +155,0 @@ }

dist/index.d.ts

 export * from './components';
 export * from './types';
-export * from './register';
+export { setupConfig } from '@ionic/core';

dist/index.js

 export * from './components';
-export * from './register';
+export { setupConfig } from '@ionic/core';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@ionic/react",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React specific wrapper for @ionic/core",
@@ -27,3 +27,4 @@ "keywords": [
     "deploy": "np --any-branch",
-    "tsc": "tsc -p ."
+    "tsc": "tsc -p .",
+    "test": "jest"
   },
@@ -37,2 +38,3 @@ "main": "./dist/index.js",
   "devDependencies": {
+    "@trust/webcrypto": "^0.9.2",
     "@types/jest": "23.3.9",
@@ -42,3 +44,7 @@ "@types/node": "10.12.9",
     "@types/react-dom": "16.0.9",
-    "@types/react-router": "^4.4.3",
+    "@types/react-router": "^4.4.4",
+    "@types/react-router-dom": "^4.3.1",
+    "jest": "^23.0.0",
+    "jest-dom": "^3.0.2",
+    "np": "^3.1.0",
     "react": "^16.7.0",
@@ -48,7 +54,8 @@ "react-dom": "^16.7.0",
     "react-router-dom": "^4.3.1",
-    "typescript": "^3.2.2",
-    "np": "^3.1.0"
+    "react-testing-library": "^5.5.3",
+    "ts-jest": "^23.10.5",
+    "typescript": "^3.2.2"
   },
   "dependencies": {
-    "@ionic/core": "4.0.1"
+    "@ionic/core": "^4.0.2"
   },
@@ -60,3 +67,11 @@ "peerDependencies": {
     "react-router-dom": "^4.3.1"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
+    "testPathIgnorePatterns": [
+      "node_modules",
+      "dist"
+    ]
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

396180

increased by5.27%

Number of package files

56

increased by5.66%

Lines of code

2593

increased by8.09%

Worsened metrics

Dev dependency count

17

increased by54.55%

Dependency changes

• + Added@ionic/core@4.11.13(transitive)

• + Addedionicons@4.6.3(transitive)

• + Addedtslib@1.14.1(transitive)

• - Removed@ionic/core@4.0.1(transitive)

• - Removedionicons@4.5.5(transitive)

• Updated@ionic/core@^4.0.2