@ionic/react - npm Package Compare versions

Comparing version 0.0.6-2 to 0.0.6-3

dist/index.esm.js

@@ -7,4 +7,5 @@ import { addIcons } from 'ionicons';
 import ReactDom from 'react-dom';
+import { alertController, loadingController, toastController, actionSheetController, modalController, popoverController } from '@ionic/core';
+export { setupConfig } from '@ionic/core';
 import { withRouter, matchPath } from 'react-router';
-export { setupConfig } from '@ionic/core';
 
@@ -87,10 +88,2 @@ function attachEventProps(node, newProps, oldProps = {}) {
 const dashToPascalCase = (str) => str.toLowerCase().split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');
-function ensureElementInBody(elementName) {
-    let element = document.querySelector(elementName);
-    if (!element) {
-        element = document.createElement(elementName);
-        document.body.appendChild(element);
-    }
-    return element;
-}
 function generateUniqueId() {
@@ -211,4 +204,3 @@ return ([1e7].toString() + -1e3.toString() + -4e3.toString() + -8e3.toString() + -1e11.toString()).replace(/[018]/g, function (c) {
 
-function createControllerComponent(tagName, controllerTagName) {
-    const displayName = dashToPascalCase(tagName);
+function createControllerComponent(displayName, controller) {
     const dismissEventName = `on${displayName}DidDismiss`;
@@ -223,5 +215,5 @@ return class ReactControllerComponent extends React.Component {
         }
-        componentDidMount() {
-            this.controllerElement = ensureElementInBody(controllerTagName);
-            if (this.props.isOpen) {
+        async componentDidMount() {
+            const { isOpen } = this.props;
+            if (isOpen) {
                 this.present();
@@ -232,6 +224,6 @@ }
             if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                this.present();
+                this.present(prevProps);
             }
-            if (this.element && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                await this.element.dismiss();
+            if (this.controller && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.controller.dismiss();
             }
@@ -242,8 +234,5 @@ }
             const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
-            if (this.controllerElement.componentOnReady) {
-                await this.controllerElement.componentOnReady();
-            }
-            this.element = await this.controllerElement.create(elementProps);
-            attachEventProps(this.element, elementProps, prevProps);
-            await this.element.present();
+            this.controller = await controller.create(Object.assign({}, elementProps));
+            attachEventProps(this.controller, elementProps, prevProps);
+            this.controller.present();
         }
@@ -256,10 +245,9 @@ render() {
 
-const IonAlert = /*@__PURE__*/ createControllerComponent('ion-alert', 'ion-alert-controller');
+const IonAlert = /*@__PURE__*/ createControllerComponent('IonAlert', alertController);
 
-const IonLoading = /*@__PURE__*/ createControllerComponent('ion-loading', 'ion-loading-controller');
+const IonLoading = /*@__PURE__*/ createControllerComponent('IonLoading', loadingController);
 
-const IonToast = /*@__PURE__*/ createControllerComponent('ion-toast', 'ion-toast-controller');
+const IonToast = /*@__PURE__*/ createControllerComponent('IonToast', toastController);
 
-function createOverlayComponent(tagName, controllerTagName) {
-    const displayName = dashToPascalCase(tagName);
+function createOverlayComponent(displayName, controller) {
     const dismissEventName = `on${displayName}DidDismiss`;
@@ -275,19 +263,21 @@ return class ReactOverlayComponent extends React.Component {
         componentDidMount() {
-            this.controllerElement = ensureElementInBody(controllerTagName);
+            if (this.props.isOpen) {
+                this.present();
+            }
         }
         async componentDidUpdate(prevProps) {
             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) {
-                    await this.controllerElement.componentOnReady();
-                }
-                this.element = await this.controllerElement.create(Object.assign({}, elementProps, { component: this.el, componentProps: {} }));
-                attachEventProps(this.element, elementProps, prevProps);
-                await this.element.present();
+                this.present(prevProps);
             }
-            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                await this.element.dismiss();
+            if (this.controller && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.controller.dismiss();
             }
         }
+        async present(prevProps) {
+            const _a = this.props, { children, isOpen, onDidDismiss = () => { } } = _a, cProps = __rest(_a, ["children", "isOpen", "onDidDismiss"]);
+            const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
+            this.controller = await controller.create(Object.assign({}, elementProps, { component: this.el, componentProps: {} }));
+            attachEventProps(this.controller, elementProps, prevProps);
+            this.controller.present();
+        }
         render() {
@@ -299,7 +289,7 @@ return ReactDom.createPortal(this.props.children, this.el);
 
-const IonActionSheet = /*@__PURE__*/ createOverlayComponent('ion-action-sheet', 'ion-action-sheet-controller');
+const IonActionSheet = /*@__PURE__*/ createOverlayComponent('IonActionSheet', actionSheetController);
 
-const IonModal = /*@__PURE__*/ createOverlayComponent('ion-modal', 'ion-modal-controller');
+const IonModal = /*@__PURE__*/ createOverlayComponent('IonModal', modalController);
 
-const IonPopover = /*@__PURE__*/ createOverlayComponent('ion-popover', 'ion-popover-controller');
+const IonPopover = /*@__PURE__*/ createOverlayComponent('IonPopover', popoverController);
 
@@ -886,4 +876,4 @@ const IonPageInternal = (_a) => {
 addIcons(ICON_PATHS);
-const bootStrapIonic = () => defineCustomElements(window);
+defineCustomElements(window);
 
-export { IonActionSheet, IonAlert, IonAnchor, IonApp, IonAvatar, IonBackButton, IonBackButtonInner, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNote, IonPage, IonPicker, IonPickerColumn, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRouterOutletInner, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSelectPopover, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabBarInner, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonVirtualScroll, bootStrapIonic, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
+export { IonActionSheet, IonAlert, IonAnchor, IonApp, IonAvatar, IonBackButton, IonBackButtonInner, IonBackdrop, IonBadge, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInput, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNote, IonPage, IonPicker, IonPickerColumn, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRouterOutletInner, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSelect, IonSelectOption, IonSelectPopover, IonSkeletonText, IonSlide, IonSlides, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabBarInner, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonVirtualScroll, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };

dist/index.js

@@ -13,4 +13,4 @@ 'use strict';
 var ReactDom = _interopDefault(require('react-dom'));
+var core = require('@ionic/core');
 var reactRouter = require('react-router');
-var core = require('@ionic/core');
 
@@ -93,10 +93,2 @@ function attachEventProps(node, newProps, oldProps = {}) {
 const dashToPascalCase = (str) => str.toLowerCase().split('-').map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)).join('');
-function ensureElementInBody(elementName) {
-    let element = document.querySelector(elementName);
-    if (!element) {
-        element = document.createElement(elementName);
-        document.body.appendChild(element);
-    }
-    return element;
-}
 function generateUniqueId() {
@@ -217,4 +209,3 @@ return ([1e7].toString() + -1e3.toString() + -4e3.toString() + -8e3.toString() + -1e11.toString()).replace(/[018]/g, function (c) {
 
-function createControllerComponent(tagName, controllerTagName) {
-    const displayName = dashToPascalCase(tagName);
+function createControllerComponent(displayName, controller) {
     const dismissEventName = `on${displayName}DidDismiss`;
@@ -229,5 +220,5 @@ return class ReactControllerComponent extends React.Component {
         }
-        componentDidMount() {
-            this.controllerElement = ensureElementInBody(controllerTagName);
-            if (this.props.isOpen) {
+        async componentDidMount() {
+            const { isOpen } = this.props;
+            if (isOpen) {
                 this.present();
@@ -238,6 +229,6 @@ }
             if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                this.present();
+                this.present(prevProps);
             }
-            if (this.element && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                await this.element.dismiss();
+            if (this.controller && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.controller.dismiss();
             }
@@ -248,8 +239,5 @@ }
             const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
-            if (this.controllerElement.componentOnReady) {
-                await this.controllerElement.componentOnReady();
-            }
-            this.element = await this.controllerElement.create(elementProps);
-            attachEventProps(this.element, elementProps, prevProps);
-            await this.element.present();
+            this.controller = await controller.create(Object.assign({}, elementProps));
+            attachEventProps(this.controller, elementProps, prevProps);
+            this.controller.present();
         }
@@ -262,10 +250,9 @@ render() {
 
-const IonAlert = /*@__PURE__*/ createControllerComponent('ion-alert', 'ion-alert-controller');
+const IonAlert = /*@__PURE__*/ createControllerComponent('IonAlert', core.alertController);
 
-const IonLoading = /*@__PURE__*/ createControllerComponent('ion-loading', 'ion-loading-controller');
+const IonLoading = /*@__PURE__*/ createControllerComponent('IonLoading', core.loadingController);
 
-const IonToast = /*@__PURE__*/ createControllerComponent('ion-toast', 'ion-toast-controller');
+const IonToast = /*@__PURE__*/ createControllerComponent('IonToast', core.toastController);
 
-function createOverlayComponent(tagName, controllerTagName) {
-    const displayName = dashToPascalCase(tagName);
+function createOverlayComponent(displayName, controller) {
     const dismissEventName = `on${displayName}DidDismiss`;
@@ -281,19 +268,21 @@ return class ReactOverlayComponent extends React.Component {
         componentDidMount() {
-            this.controllerElement = ensureElementInBody(controllerTagName);
+            if (this.props.isOpen) {
+                this.present();
+            }
         }
         async componentDidUpdate(prevProps) {
             if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
-                const _a = this.props, { children, isOpen, onDidDismiss = () => { } } = _a, cProps = tslib_1.__rest(_a, ["children", "isOpen", "onDidDismiss"]);
-                const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
-                if (this.controllerElement.componentOnReady) {
-                    await this.controllerElement.componentOnReady();
-                }
-                this.element = await this.controllerElement.create(Object.assign({}, elementProps, { component: this.el, componentProps: {} }));
-                attachEventProps(this.element, elementProps, prevProps);
-                await this.element.present();
+                this.present(prevProps);
             }
-            if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
-                await this.element.dismiss();
+            if (this.controller && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+                await this.controller.dismiss();
             }
         }
+        async present(prevProps) {
+            const _a = this.props, { children, isOpen, onDidDismiss = () => { } } = _a, cProps = tslib_1.__rest(_a, ["children", "isOpen", "onDidDismiss"]);
+            const elementProps = Object.assign({}, cProps, { [dismissEventName]: onDidDismiss });
+            this.controller = await controller.create(Object.assign({}, elementProps, { component: this.el, componentProps: {} }));
+            attachEventProps(this.controller, elementProps, prevProps);
+            this.controller.present();
+        }
         render() {
@@ -305,7 +294,7 @@ return ReactDom.createPortal(this.props.children, this.el);
 
-const IonActionSheet = /*@__PURE__*/ createOverlayComponent('ion-action-sheet', 'ion-action-sheet-controller');
+const IonActionSheet = /*@__PURE__*/ createOverlayComponent('IonActionSheet', core.actionSheetController);
 
-const IonModal = /*@__PURE__*/ createOverlayComponent('ion-modal', 'ion-modal-controller');
+const IonModal = /*@__PURE__*/ createOverlayComponent('IonModal', core.modalController);
 
-const IonPopover = /*@__PURE__*/ createOverlayComponent('ion-popover', 'ion-popover-controller');
+const IonPopover = /*@__PURE__*/ createOverlayComponent('IonPopover', core.popoverController);
 
@@ -892,3 +881,3 @@ const IonPageInternal = (_a) => {
 ionicons.addIcons(icons.ICON_PATHS);
-const bootStrapIonic = () => loader.defineCustomElements(window);
+loader.defineCustomElements(window);
 
@@ -989,3 +978,2 @@ Object.defineProperty(exports, 'setupConfig', {
 exports.IonVirtualScroll = IonVirtualScroll;
-exports.bootStrapIonic = bootStrapIonic;
 exports.useIonViewDidEnter = useIonViewDidEnter;
@@ -992,0 +980,0 @@ exports.useIonViewDidLeave = useIonViewDidLeave;

dist/types/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 & {
+interface LoadingElement {
+    present: () => any;
+    dismiss: () => any;
+}
+export declare function createControllerComponent<OptionsType extends object, LoadingElementType extends LoadingElement>(displayName: string, controller: {
+    create: (options: any) => Promise<LoadingElementType>;
+}): {
+    new (props: OptionsType & {
         isOpen: boolean;
         onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
     }): {
-        element: E;
-        controllerElement: C;
+        controller: LoadingElementType;
         id: string;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: T & {
+        componentDidMount(): Promise<void>;
+        componentDidUpdate(prevProps: OptionsType & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }): Promise<void>;
-        present(prevProps?: T & {
+        present(prevProps?: OptionsType & {
             isOpen: boolean;
@@ -23,3 +27,3 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<T & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<OptionsType & {
             isOpen: boolean;
@@ -29,3 +33,3 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         forceUpdate(callBack?: () => void): void;
-        readonly props: Readonly<T & {
+        readonly props: Readonly<OptionsType & {
             isOpen: boolean;
@@ -40,3 +44,3 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         };
-        shouldComponentUpdate?(nextProps: Readonly<T & {
+        shouldComponentUpdate?(nextProps: Readonly<OptionsType & {
             isOpen: boolean;
@@ -47,3 +51,3 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<T & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<OptionsType & {
             isOpen: boolean;
@@ -54,15 +58,15 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<T & {
+        componentWillReceiveProps?(nextProps: Readonly<OptionsType & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<T & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<OptionsType & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<T & {
+        componentWillUpdate?(nextProps: Readonly<OptionsType & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<T & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<OptionsType & {
             isOpen: boolean;
@@ -75,1 +79,2 @@ onDidDismiss: (event: CustomEvent<OverlayEventDetail<any>>) => void;
 };
+export {};

dist/types/components/createOverlayComponent.d.ts

 import React from 'react';
 import { OverlayEventDetail } from '@ionic/core';
-import { OverlayComponentElement, OverlayControllerComponentElement } from '../types';
-export declare function createOverlayComponent<T extends object, E extends OverlayComponentElement, C extends OverlayControllerComponentElement<E>>(tagName: string, controllerTagName: string): {
+interface LoadingElement {
+    present: () => any;
+    dismiss: () => any;
+}
+export declare function createOverlayComponent<T extends object, LoadingElementType extends LoadingElement>(displayName: string, controller: {
+    create: (options: any) => Promise<LoadingElementType>;
+}): {
     new (props: T & {
@@ -10,4 +15,3 @@ children?: React.ReactNode;
     }): {
-        element: E;
-        controllerElement: C;
+        controller: LoadingElementType;
         el: HTMLDivElement;
@@ -20,2 +24,7 @@ componentDidMount(): void;
         }): Promise<void>;
+        present(prevProps?: T & {
+            children?: React.ReactNode;
+            isOpen: boolean;
+            onDidDismiss?: (event: CustomEvent<OverlayEventDetail<any>>) => void;
+        }): Promise<void>;
         render(): React.ReactPortal;
@@ -78,1 +87,2 @@ context: any;
 };
+export {};

dist/types/components/index.d.ts

@@ -14,2 +14,1 @@ export { AlertButton, AlertInput } from '@ionic/core';
 export { IonBackButton } from './navigation/IonBackButton';
-export declare const bootStrapIonic: () => Promise<void>;

dist/types/components/IonActionSheet.d.ts

@@ -11,4 +11,3 @@ /// <reference types="react" />
     }): {
-        element: HTMLIonActionSheetElement;
-        controllerElement: HTMLIonActionSheetControllerElement;
+        controller: HTMLIonActionSheetElement;
         el: HTMLDivElement;
@@ -21,2 +20,7 @@ componentDidMount(): void;
         }): Promise<void>;
+        present(prevProps?: JSX.IonActionSheet & ReactProps & {
+            children?: import("react").ReactNode;
+            isOpen: boolean;
+            onDidDismiss?: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
+        }): Promise<void>;
         render(): import("react").ReactPortal;
@@ -23,0 +27,0 @@ context: any;

dist/types/components/IonAlert.d.ts

 /// <reference types="react" />
 import { JSX } from '@ionic/core';
-import { ReactProps } from './ReactProps';
 export declare type AlertOptions = JSX.IonAlert;
 export declare const IonAlert: {
-    new (props: JSX.IonAlert & ReactProps & {
+    new (props: JSX.IonAlert & {
         isOpen: boolean;
         onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
-        element: HTMLIonAlertElement;
-        controllerElement: HTMLIonAlertControllerElement;
+        controller: HTMLIonAlertElement;
         id: string;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: JSX.IonAlert & ReactProps & {
+        componentDidMount(): Promise<void>;
+        componentDidUpdate(prevProps: JSX.IonAlert & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
-        present(prevProps?: JSX.IonAlert & ReactProps & {
+        present(prevProps?: JSX.IonAlert & {
             isOpen: boolean;
@@ -24,3 +22,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonAlert & ReactProps & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonAlert & {
             isOpen: boolean;
@@ -30,3 +28,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         forceUpdate(callBack?: () => void): void;
-        readonly props: Readonly<JSX.IonAlert & ReactProps & {
+        readonly props: Readonly<JSX.IonAlert & {
             isOpen: boolean;
@@ -41,3 +39,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         };
-        shouldComponentUpdate?(nextProps: Readonly<JSX.IonAlert & ReactProps & {
+        shouldComponentUpdate?(nextProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
@@ -48,3 +46,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonAlert & ReactProps & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
@@ -55,15 +53,15 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<JSX.IonAlert & ReactProps & {
+        componentWillReceiveProps?(nextProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonAlert & ReactProps & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<JSX.IonAlert & ReactProps & {
+        componentWillUpdate?(nextProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonAlert & ReactProps & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonAlert & {
             isOpen: boolean;
@@ -70,0 +68,0 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;

dist/types/components/IonLoading.d.ts

 /// <reference types="react" />
 import { JSX } from '@ionic/core';
-import { ReactProps } from './ReactProps';
 export declare type LoadingOptions = JSX.IonLoading;
 export declare const IonLoading: {
-    new (props: JSX.IonLoading & ReactProps & {
+    new (props: JSX.IonLoading & {
         isOpen: boolean;
         onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
-        element: HTMLIonLoadingElement;
-        controllerElement: HTMLIonLoadingControllerElement;
+        controller: HTMLIonLoadingElement;
         id: string;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: JSX.IonLoading & ReactProps & {
+        componentDidMount(): Promise<void>;
+        componentDidUpdate(prevProps: JSX.IonLoading & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
-        present(prevProps?: JSX.IonLoading & ReactProps & {
+        present(prevProps?: JSX.IonLoading & {
             isOpen: boolean;
@@ -24,3 +22,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonLoading & ReactProps & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonLoading & {
             isOpen: boolean;
@@ -30,3 +28,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         forceUpdate(callBack?: () => void): void;
-        readonly props: Readonly<JSX.IonLoading & ReactProps & {
+        readonly props: Readonly<JSX.IonLoading & {
             isOpen: boolean;
@@ -41,3 +39,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         };
-        shouldComponentUpdate?(nextProps: Readonly<JSX.IonLoading & ReactProps & {
+        shouldComponentUpdate?(nextProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
@@ -48,3 +46,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonLoading & ReactProps & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
@@ -55,15 +53,15 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<JSX.IonLoading & ReactProps & {
+        componentWillReceiveProps?(nextProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonLoading & ReactProps & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<JSX.IonLoading & ReactProps & {
+        componentWillUpdate?(nextProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonLoading & ReactProps & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonLoading & {
             isOpen: boolean;
@@ -70,0 +68,0 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;

dist/types/components/IonModal.d.ts

@@ -16,4 +16,3 @@ /// <reference types="react" />
     }): {
-        element: HTMLIonModalElement;
-        controllerElement: HTMLIonModalControllerElement;
+        controller: HTMLIonModalElement;
         el: HTMLDivElement;
@@ -28,2 +27,9 @@ componentDidMount(): void;
         }): Promise<void>;
+        present(prevProps?: Pick<JSX.IonModal, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "animated" | "mode" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "prefix" | "innerHTML" | "contentEditable" | "inputMode" | "tabIndex" | "color" | "key" | "ref" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "part" | "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" | "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" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "onIonModalDidDismiss" | "onIonModalDidPresent" | "onIonModalWillDismiss" | "onIonModalWillPresent"> & {
+            children: import("react").ReactNode;
+        } & ReactProps & {
+            children?: import("react").ReactNode;
+            isOpen: boolean;
+            onDidDismiss?: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
+        }): Promise<void>;
         render(): import("react").ReactPortal;
@@ -30,0 +36,0 @@ context: any;

dist/types/components/IonPopover.d.ts

@@ -16,4 +16,3 @@ /// <reference types="react" />
     }): {
-        element: HTMLIonPopoverElement;
-        controllerElement: HTMLIonPopoverControllerElement;
+        controller: HTMLIonPopoverElement;
         el: HTMLDivElement;
@@ -28,2 +27,9 @@ componentDidMount(): void;
         }): Promise<void>;
+        present(prevProps?: Pick<JSX.IonPopover, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "animated" | "mode" | "accessKey" | "autocapitalize" | "draggable" | "lang" | "spellcheck" | "id" | "prefix" | "innerHTML" | "contentEditable" | "inputMode" | "tabIndex" | "color" | "key" | "ref" | "class" | "contenteditable" | "contextMenu" | "spellCheck" | "tabindex" | "inputmode" | "is" | "radioGroup" | "radiogroup" | "part" | "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" | "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" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "translucent" | "backdropDismiss" | "cssClass" | "enterAnimation" | "keyboardClose" | "leaveAnimation" | "showBackdrop" | "event" | "onIonPopoverDidDismiss" | "onIonPopoverDidPresent" | "onIonPopoverWillDismiss" | "onIonPopoverWillPresent"> & {
+            children: import("react").ReactNode;
+        } & ReactProps & {
+            children?: import("react").ReactNode;
+            isOpen: boolean;
+            onDidDismiss?: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
+        }): Promise<void>;
         render(): import("react").ReactPortal;
@@ -30,0 +36,0 @@ context: any;

dist/types/components/IonToast.d.ts

 /// <reference types="react" />
 import { JSX } from '@ionic/core';
-import { ReactProps } from './ReactProps';
 export declare type ToastOptions = JSX.IonToast;
 export declare const IonToast: {
-    new (props: JSX.IonToast & ReactProps & {
+    new (props: JSX.IonToast & {
         isOpen: boolean;
         onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
     }): {
-        element: HTMLIonToastElement;
-        controllerElement: HTMLIonToastControllerElement;
+        controller: HTMLIonToastElement;
         id: string;
-        componentDidMount(): void;
-        componentDidUpdate(prevProps: JSX.IonToast & ReactProps & {
+        componentDidMount(): Promise<void>;
+        componentDidUpdate(prevProps: JSX.IonToast & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }): Promise<void>;
-        present(prevProps?: JSX.IonToast & ReactProps & {
+        present(prevProps?: JSX.IonToast & {
             isOpen: boolean;
@@ -24,3 +22,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonToast & ReactProps & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<JSX.IonToast & {
             isOpen: boolean;
@@ -30,3 +28,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         forceUpdate(callBack?: () => void): void;
-        readonly props: Readonly<JSX.IonToast & ReactProps & {
+        readonly props: Readonly<JSX.IonToast & {
             isOpen: boolean;
@@ -41,3 +39,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         };
-        shouldComponentUpdate?(nextProps: Readonly<JSX.IonToast & ReactProps & {
+        shouldComponentUpdate?(nextProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
@@ -48,3 +46,3 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonToast & ReactProps & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
@@ -55,15 +53,15 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<JSX.IonToast & ReactProps & {
+        componentWillReceiveProps?(nextProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonToast & ReactProps & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<JSX.IonToast & ReactProps & {
+        componentWillUpdate?(nextProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
             onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;
         }>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonToast & ReactProps & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<JSX.IonToast & {
             isOpen: boolean;
@@ -70,0 +68,0 @@ onDidDismiss: (event: CustomEvent<import("@ionic/core").OverlayEventDetail<any>>) => void;

dist/types/components/utils/index.d.ts

 export declare const dashToPascalCase: (str: string) => string;
-export declare function ensureElementInBody<E extends HTMLElement>(elementName: string): E;
 export declare function generateUniqueId(): string;
 export * from './attachEventProps';

dist/types/types.d.ts

@@ -6,9 +6,2 @@ export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 }
-export interface OverlayComponentElement extends HTMLStencilElement {
-    'present': () => Promise<void>;
-    'dismiss': (data?: any, role?: string | undefined) => Promise<boolean>;
-}
-export interface OverlayControllerComponentElement<E extends OverlayComponentElement> extends HTMLStencilElement {
-    'create': (opts: any) => Promise<E>;
-}
 export interface IonicGlobal {
@@ -15,0 +8,0 @@ config?: any;

package.json

 {
   "name": "@ionic/react",
-  "version": "0.0.6-2",
+  "version": "0.0.6-3",
   "description": "React specific wrapper for @ionic/core",
@@ -24,4 +24,6 @@ "keywords": [
     "build": "npm run clean && npm run compile",
-    "clean": "rm -rf dist",
+    "build:dev": "npm run clean && npm run compile:dev",
+    "clean": "rm -rf dist && rm -rf dist-transpiled",
     "compile": "npm run tsc && rollup -c",
+    "compile:dev": "npm run tsc && rollup -c rollup.config.dev.js",
     "release": "np --any-branch --no-cleanup",
@@ -28,0 +30,0 @@ "tsc": "tsc -p .",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

447385

increased by1.15%

Lines of code

3983

increased by0.35%

No dependency changes