fix(react): fix types for new stencil

Author: elylucas

packages/react/CHANGELOG.md

@@ -10,6 +10,26 @@ Render first route even if url is same, fixes [#19392](https://github.com/ionic-
 
 ## Breaking Changes
 
+### Events have been updated to use proper types from React
+
+The types for events (such as `onClick`) were not typed correctly prior to RC3. Before, they were the normal browser events, but now they are the proper React Synthetic events. Therefore, you might have type errors that need to be remedied:
+
+```typescript
+function handleClick(e: MouseEvent) {
+  ...
+}
+```
+
+Will need to become: 
+
+```typescript
+function handleClick(e: React.MouseEvent) {
+  ...
+}
+```
+
+Some Ionic components have the option to pass the event to them (like `IonPopover`). For these, you can access the `nativeEvent` property on the React synthetic event.
+
 ### Components with href attributes and the new routerLink prop
 As of RC3, components that use the href prop (`IonButton`, `IonItem`, etc..), no longer run these links through the router. As a result, page transitions are no longer applied to these links. To maintain page transitions, use the new `routerLink` prop instead. The href prop should be used when you want to enforce a full browser transition on the page, or when you need to link to an external resource.
 

packages/react/src/components/IonPage.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { NavContext } from '../contexts/NavContext';
 
-import { ReactProps } from './ReactProps';
+import { IonicReactProps } from './IonicReactProps';
 
-export const IonPage = /*@__PURE__*/(() => class IonPageInternal extends React.Component<React.HTMLAttributes<HTMLElement> & ReactProps> {
+export const IonPage = /*@__PURE__*/(() => class IonPageInternal extends React.Component<React.HTMLAttributes<HTMLElement> & IonicReactProps> {
   context!: React.ContextType<typeof NavContext>;
   ref = React.createRef<HTMLDivElement>();
 

packages/react/src/components/IonRouterOutlet.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import { NavContext } from '../contexts/NavContext';
 
-import { ReactProps } from './ReactProps';
+import { IonicReactProps } from './IonicReactProps';
 import { IonRouterOutletInner } from './inner-proxies';
 import { createForwardRef } from './utils';
 
@@ -43,4 +43,4 @@ const IonRouterOutletContainer = /*@__PURE__*/(() => class extends React.Compone
   }
 })();
 
-export const IonRouterOutlet = createForwardRef<Props & ReactProps, HTMLIonRouterOutletElement>(IonRouterOutletContainer, 'IonRouterOutlet');
+export const IonRouterOutlet = createForwardRef<Props & IonicReactProps, HTMLIonRouterOutletElement>(IonRouterOutletContainer, 'IonRouterOutlet');

packages/react/src/components/IonicReactProps.ts

@@ -0,0 +1,5 @@
+
+export interface IonicReactProps {
+  class?: string;
+  style?: {[key: string]: any };
+}

packages/react/src/components/ReactProps.ts

@@ -3,7 +3,6 @@ import ReactDom from 'react-dom';
 
 import { NavContext } from '../contexts/NavContext';
 
-import { ReactProps } from './ReactProps';
 import { RouterDirection } from './hrefprops';
 import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils';
 import { deprecationWarning } from './utils/dev';
@@ -98,5 +97,5 @@ export const createReactComponent = <PropType, ElementType>(
       return NavContext;
     }
   };
-  return createForwardRef<PropType & ReactProps, ElementType>(ReactComponent, displayName);
+  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
 };

packages/react/src/components/createComponent.tsx

@@ -2,10 +2,10 @@ import { JSX as LocalJSX } from '@ionic/core';
 import React from 'react';
 
 import { NavContext } from '../../contexts/NavContext';
-import { ReactProps } from '../ReactProps';
+import { IonicReactProps } from '../IonicReactProps';
 import { IonBackButtonInner } from '../inner-proxies';
 
-type Props = LocalJSX.IonBackButton & ReactProps & {
+type Props = LocalJSX.IonBackButton & IonicReactProps & {
   ref?: React.RefObject<HTMLIonBackButtonElement>;
 };
 

packages/react/src/components/navigation/IonBackButton.tsx

@@ -6,10 +6,9 @@ import { IonTabBarInner } from '../inner-proxies';
 import { IonTabButton } from '../proxies';
 
 type Props = LocalJSX.IonTabBar & {
-  ref?: React.RefObject<HTMLIonTabBarElement>;
-  navigate: (path: string, direction: 'back' | 'none') => void;
-  currentPath: string;
-  children?: React.ReactNode;
+  navigate?: (path: string, direction: 'back' | 'none') => void;
+  currentPath?: string;
+  slot?: 'bottom' | 'top';
 };
 
 interface Tab {
@@ -48,7 +47,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
     const activeTab = Object.keys(state.tabs)
       .find(key => {
         const href = state.tabs[key].originalHref;
-        return props.currentPath.startsWith(href);
+        return props.currentPath!.startsWith(href);
       });
 
     if (activeTab === undefined || (activeTab === state.activeTab && state.tabs[activeTab].currentHref === props.currentPath)) {
@@ -68,10 +67,13 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
   }
 
   private onTabButtonClick = (e: CustomEvent<{ href: string, selected: boolean, tab: string }>) => {
-    if (this.state.activeTab === e.detail.tab) {
-      this.props.navigate(this.state.tabs[e.detail.tab].originalHref, 'back');
-    } else {
-      this.props.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
+    const { navigate } = this.props;
+    if (navigate) {
+      if (this.state.activeTab === e.detail.tab) {
+        navigate(this.state.tabs[e.detail.tab].originalHref, 'back');
+      } else {
+        navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
+      }
     }
   }
 
@@ -96,7 +98,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
   }
 })();
 
-export const IonTabBar: React.FC<LocalJSX.IonTabBar & { currentPath?: string, navigate?: (path: string) => void; }> = props => {
+export const IonTabBar: React.FC<Props> = props => {
   const context = useContext(NavContext);
   return (
     <IonTabBarUnwrapped

packages/react/src/components/navigation/IonTabBar.tsx

@@ -1,7 +1,9 @@
 import { Platforms, getPlatforms as getPlatformsCore, isPlatform as isPlatformCore } from '@ionic/core';
 import React from 'react';
 
-export type IonicReactExternalProps<PropType, ElementType> = PropType & React.HTMLAttributes<ElementType>;
+import { IonicReactProps } from '../IonicReactProps';
+
+export type IonicReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & IonicReactProps;
 
 export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
   const forwardRef = (props: IonicReactExternalProps<PropType, ElementType>, ref: React.Ref<ElementType>) => {