Issue number: resolves#28102
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
When one modal is added and another modal is removed, the modal that is
removed does not account for the newly added modal when updating the
overlay context in React. As a result, the inner contents of the newly
added modal is not mounted.
We originally tried to fix this in
https://github.com/ionic-team/ionic-framework/pull/24553, but the fix
was not complete. While storing the latest information in a React ref
was correct, the way we updated the ref was done in a way such that data
was still stale.
In particular, the `overlaysRef` is updated whenever `IonOverlayManager`
is re-rendered. State updates are batched, so updating the state twice
in quick succession does not necessarily result in 2 separate renders.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- We need to make sure the ref is updated synchronously before any
render so that `addOverlay` and `removeOverlay` always have access to
the latest data.
- Added a test
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev build: `7.3.3-dev.11693592339.18e000af`
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: Resolves#28010
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`onDidDismiss` and `onWillPresent` will fire twice when having a manual
binding in your implementation for inline overlays.
e.g.:
```tsx
<IonAlert onDidDismiss={() => console.log('hello world')} />
```
Will result in:
> hello world
> hello world
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onDidDismiss` and `onWillPresent` do not execute the callback handler
twice per invocation
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Dev-build: `7.3.1-dev.11692305436.16a4008f`
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
The sync script for the React package is out of date. It will
unintentionally delete the symlink directory of the build output from
`core/`, which breaks the build for the package during local
development.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the sync script to package and install the `core` package
- Matches the implementation pattern used for the sync script in our
other packages
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
React 17/18 test apps use react-scripts. This does not align with our
starter templates.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Updates the React 18 test app to use Vite
- Leaves the React 17 test app on react-scripts for now
- Updates test app dependencies to align with the react starters
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
closes#27949
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
- Typescript is complaining about the `onClick` event type of the
`IonTabButton`
```ts
const App: React.FC = () => {
async function handleTabClick(e: CustomEvent<HTMLIonTabButtonElement>) {
alert(e.detail.tab);
}
return (
<IonTabButton tab="myTab" onClick={handleTabClick}>
);
};
```
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onClick` handler uses `CustomEvent` type
- Typescript does not error
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: Resolves#21320
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
`onDoubleClick` bindings on Ionic components do not fire when the
element is double clicked.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- `onDoubleClick` fires on Ionic components
- Fixed the unit testing set-up for the react test apps
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Issue number: resolves#27221
---------
## What is the current behavior?
The value property of the segment component in Ionic Framework currently
only accepts string values.
## What is the new behavior?
This pull request updates the "value" property of the segment component
to accept a union of string and number types. This allows for more
versatile data input in the segment component, particularly for users
who work with numerical data.
## Does this introduce a breaking change?
- [ ] Yes
- [X] No
## Other information
N/A
Issue number: resolves#27470
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Passing multiple elements in to an inline modal causes `.ion-page` to
not get set. This causes content to get pushed off the bottom of the
modal equal to the height of the header. React has some special CSS that
prevents this:
eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)
However, I think this should be delegated to `.ion-page` instead so the
behavior is consistent across frameworks. For example, Angular uses
`.ion-page`:
eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Inline overlays in Ionic React and Ionic Vue wrap child content in
`.ion-delegate-host.ion-page`.
- Removed the custom flex styles from Ionic React as `.ion-page` has its
own styles.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
Revised Design Doc:
https://github.com/ionic-team/ionic-framework-design-documents/pull/84
