@ionic/react 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/index.js +435 -1120
  2. package/dist/index.js.map +1 -1
  3. package/dist/types/components/IonActionSheet.d.ts +1 -1
  4. package/dist/types/components/IonAlert.d.ts +1 -1
  5. package/dist/types/components/IonIcon.d.ts +1 -1
  6. package/dist/types/components/IonLoading.d.ts +1 -1
  7. package/dist/types/components/IonModal.d.ts +1 -1
  8. package/dist/types/components/IonPage.d.ts +1 -1
  9. package/dist/types/components/IonPickerLegacy.d.ts +2 -0
  10. package/dist/types/components/IonPopover.d.ts +1 -1
  11. package/dist/types/components/IonRedirect.d.ts +16 -0
  12. package/dist/types/components/IonRoute.d.ts +3 -4
  13. package/dist/types/components/IonRouterContext.d.ts +0 -8
  14. package/dist/types/components/IonRouterOutlet.d.ts +0 -1
  15. package/dist/types/components/IonToast.d.ts +1 -1
  16. package/dist/types/components/__tests__/utils.spec.d.ts +1 -1
  17. package/dist/types/components/createInlineOverlayComponent.d.ts +1 -1
  18. package/dist/types/components/createRoutingComponent.d.ts +1 -1
  19. package/dist/types/components/index.d.ts +5 -2
  20. package/dist/types/components/navigation/IonBackButton.d.ts +1 -1
  21. package/dist/types/components/navigation/IonNav.d.ts +1 -2
  22. package/dist/types/components/navigation/IonTabBar.d.ts +1 -1
  23. package/dist/types/components/navigation/IonTabs.d.ts +3 -2
  24. package/dist/types/components/proxies.d.ts +73 -0
  25. package/dist/types/components/react-component-lib/createComponent.d.ts +1 -1
  26. package/dist/types/components/react-component-lib/utils/index.d.ts +1 -1
  27. package/dist/types/components/routing-proxies.d.ts +14 -14
  28. package/dist/types/components/utils/index.d.ts +11 -3
  29. package/dist/types/contexts/NavContext.d.ts +2 -0
  30. package/dist/types/hooks/useIonPicker.d.ts +27 -0
  31. package/dist/types/lifecycle/IonLifeCycleHOC.d.ts +3 -1
  32. package/dist/types/routing/LocationHistory.d.ts +0 -7
  33. package/dist/types/routing/NavManager.d.ts +4 -2
  34. package/dist/types/routing/OutletPageManager.d.ts +0 -2
  35. package/dist/types/routing/PageManager.d.ts +0 -8
  36. package/dist/types/routing/RouteManagerContext.d.ts +1 -6
  37. package/dist/types/routing/ViewLifeCycleManager.d.ts +17 -18
  38. package/dist/types/routing/ViewStacks.d.ts +2 -2
  39. package/package.json +16 -35
  40. package/dist/types/components/__tests__/createRoutingComponent.spec.d.ts +0 -1
  41. package/dist/types/components/components.d.ts +0 -326
  42. package/dist/types/components/react-component-lib/__tests__/createComponent.spec.d.ts +0 -1
package/dist/index.js CHANGED
@@ -1,80 +1,80 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
3
- import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, loadingController, initialize } from '@ionic/core/components';
3
+ import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, pickerController, loadingController, initialize } from '@ionic/core/components';
4
4
  export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
5
- import { createComponent } from '@stencil/react-output-target/runtime';
6
- import { IonAccordionGroup as IonAccordionGroup$1, defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
7
- import { IonAccordion as IonAccordion$1, defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
8
- import { IonAvatar as IonAvatar$1, defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
9
- import { IonBackdrop as IonBackdrop$1, defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
10
- import { IonBadge as IonBadge$1, defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
11
- import { IonBreadcrumbs as IonBreadcrumbs$1, defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
12
- import { IonButtons as IonButtons$1, defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
13
- import { IonCardContent as IonCardContent$1, defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
14
- import { IonCardHeader as IonCardHeader$1, defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
15
- import { IonCardSubtitle as IonCardSubtitle$1, defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
16
- import { IonCardTitle as IonCardTitle$1, defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
17
- import { IonCheckbox as IonCheckbox$1, defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
18
- import { IonChip as IonChip$1, defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
19
- import { IonCol as IonCol$1, defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
20
- import { IonContent as IonContent$1, defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
21
- import { IonDatetimeButton as IonDatetimeButton$1, defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
22
- import { IonDatetime as IonDatetime$1, defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
23
- import { IonFabList as IonFabList$1, defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
24
- import { IonFab as IonFab$1, defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
25
- import { IonFooter as IonFooter$1, defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
26
- import { IonGrid as IonGrid$1, defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
27
- import { IonHeader as IonHeader$1, defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
28
- import { IonImg as IonImg$1, defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
29
- import { IonInfiniteScrollContent as IonInfiniteScrollContent$1, defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
30
- import { IonInfiniteScroll as IonInfiniteScroll$1, defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
31
- import { IonInputOtp as IonInputOtp$1, defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
32
- import { IonInputPasswordToggle as IonInputPasswordToggle$1, defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
33
- import { IonInput as IonInput$1, defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
34
- import { IonItemDivider as IonItemDivider$1, defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
35
- import { IonItemGroup as IonItemGroup$1, defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
36
- import { IonItemOptions as IonItemOptions$1, defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
37
- import { IonItemSliding as IonItemSliding$1, defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
38
- import { IonLabel as IonLabel$1, defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
39
- import { IonListHeader as IonListHeader$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
40
- import { IonList as IonList$1, defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
41
- import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
42
- import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
43
- import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
44
- import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
45
- import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-nav.js';
46
- import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
47
- import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
48
- import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
49
- import { IonPicker as IonPicker$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
50
- import { IonProgressBar as IonProgressBar$1, defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
51
- import { IonRadioGroup as IonRadioGroup$1, defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
52
- import { IonRadio as IonRadio$1, defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
53
- import { IonRange as IonRange$1, defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
54
- import { IonRefresherContent as IonRefresherContent$1, defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
55
- import { IonRefresher as IonRefresher$1, defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
56
- import { IonReorderGroup as IonReorderGroup$1, defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
57
- import { IonReorder as IonReorder$1, defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
58
- import { IonRippleEffect as IonRippleEffect$1, defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
59
- import { IonRow as IonRow$1, defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
60
- import { IonSearchbar as IonSearchbar$1, defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
61
- import { IonSegmentButton as IonSegmentButton$1, defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
62
- import { IonSegmentContent as IonSegmentContent$1, defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
63
- import { IonSegmentView as IonSegmentView$1, defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
64
- import { IonSegment as IonSegment$1, defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
65
- import { IonSelectModal as IonSelectModal$1, defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
66
- import { IonSelectOption as IonSelectOption$1, defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
67
- import { IonSelect as IonSelect$1, defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
68
- import { IonSkeletonText as IonSkeletonText$1, defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
69
- import { IonSpinner as IonSpinner$1, defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
70
- import { IonSplitPane as IonSplitPane$1, defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
71
- import { IonTab as IonTab$1, defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
72
- import { IonText as IonText$1, defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
73
- import { IonTextarea as IonTextarea$1, defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
74
- import { IonThumbnail as IonThumbnail$1, defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
75
- import { IonTitle as IonTitle$1, defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
76
- import { IonToggle as IonToggle$1, defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
77
- import { IonToolbar as IonToolbar$1, defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
5
+ import ReactDOM, { createPortal } from 'react-dom';
6
+ import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
7
+ import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
8
+ import { defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
9
+ import { defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
10
+ import { defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
11
+ import { defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
12
+ import { defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
13
+ import { defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
14
+ import { defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
15
+ import { defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
16
+ import { defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
17
+ import { defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
18
+ import { defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
19
+ import { defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
20
+ import { defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
21
+ import { defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
22
+ import { defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
23
+ import { defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
24
+ import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
25
+ import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
26
+ import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
27
+ import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
28
+ import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
29
+ import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
30
+ import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
31
+ import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
32
+ import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
33
+ import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
34
+ import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
35
+ import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
36
+ import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
37
+ import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
38
+ import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
39
+ import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
40
+ import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
41
+ import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
42
+ import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
43
+ import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
44
+ import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-nav.js';
45
+ import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
46
+ import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
47
+ import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
48
+ import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
49
+ import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
50
+ import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
51
+ import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
52
+ import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
53
+ import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
54
+ import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
55
+ import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
56
+ import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
57
+ import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
58
+ import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
59
+ import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
60
+ import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
61
+ import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
62
+ import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
63
+ import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
64
+ import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
65
+ import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
66
+ import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
67
+ import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
68
+ import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
69
+ import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
70
+ import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
71
+ import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
72
+ import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
73
+ import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
74
+ import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
75
+ import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
76
+ import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
77
+ import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
78
78
  import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
79
79
  import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
80
80
  import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
@@ -83,19 +83,19 @@ import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-ite
83
83
  import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
84
84
  import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
85
85
  import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-alert.js';
86
- import ReactDOM, { createPortal } from 'react-dom';
87
86
  import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-loading.js';
88
87
  import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toast.js';
89
- import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-action-sheet.js';
90
- import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-modal.js';
91
- import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-popover.js';
92
- import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-app.js';
93
- import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-back-button.js';
94
- import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-router-outlet.js';
95
- import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-bar.js';
96
- import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-tab-button.js';
97
- import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tabs.js';
98
- import { defineCustomElement as defineCustomElement$1k } from 'ionicons/components/ion-icon.js';
88
+ import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-picker-legacy.js';
89
+ import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-action-sheet.js';
90
+ import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-modal.js';
91
+ import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-popover.js';
92
+ import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
93
+ import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-back-button.js';
94
+ import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-router-outlet.js';
95
+ import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tab-bar.js';
96
+ import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-button.js';
97
+ import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tabs.js';
98
+ import { defineCustomElement as defineCustomElement$1l } from 'ionicons/components/ion-icon.js';
99
99
 
100
100
  const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
101
101
  onIonViewWillEnter: () => {
@@ -136,15 +136,16 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
136
136
  },
137
137
  });
138
138
  const DefaultIonLifeCycleContext = class {
139
- ionViewWillEnterCallbacks = [];
140
- ionViewDidEnterCallbacks = [];
141
- ionViewWillLeaveCallbacks = [];
142
- ionViewDidLeaveCallbacks = [];
143
- componentCanBeDestroyedCallback;
144
- ionViewWillEnterDestructorCallbacks = [];
145
- ionViewDidEnterDestructorCallbacks = [];
146
- ionViewWillLeaveDestructorCallbacks = [];
147
- ionViewDidLeaveDestructorCallbacks = [];
139
+ constructor() {
140
+ this.ionViewWillEnterCallbacks = [];
141
+ this.ionViewDidEnterCallbacks = [];
142
+ this.ionViewWillLeaveCallbacks = [];
143
+ this.ionViewDidLeaveCallbacks = [];
144
+ this.ionViewWillEnterDestructorCallbacks = [];
145
+ this.ionViewDidEnterDestructorCallbacks = [];
146
+ this.ionViewWillLeaveDestructorCallbacks = [];
147
+ this.ionViewDidLeaveDestructorCallbacks = [];
148
+ }
148
149
  onIonViewWillEnter(callback) {
149
150
  if (callback.id) {
150
151
  const index = this.ionViewWillEnterCallbacks.findIndex((x) => x.id === callback.id);
@@ -293,9 +294,9 @@ const DefaultIonLifeCycleContext = class {
293
294
  // TODO(FW-2959): types
294
295
  const withIonLifeCycle = (WrappedComponent) => {
295
296
  return class IonLifeCycle extends React.Component {
296
- componentRef = React.createRef();
297
297
  constructor(props) {
298
298
  super(props);
299
+ this.componentRef = React.createRef();
299
300
  }
300
301
  componentDidMount() {
301
302
  const element = this.componentRef.current;
@@ -379,7 +380,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
379
380
  };
380
381
 
381
382
  const NavContext = /*@__PURE__*/ React.createContext({
383
+ getIonRedirect: () => undefined,
382
384
  getIonRoute: () => undefined,
385
+ getPageManager: () => undefined,
383
386
  getStackManager: () => undefined,
384
387
  goBack: (route) => {
385
388
  if (typeof window !== 'undefined') {
@@ -411,651 +414,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
411
414
  },
412
415
  });
413
416
 
414
- const IonAccordion = /*@__PURE__*/ createComponent({
415
- tagName: 'ion-accordion',
416
- elementClass: IonAccordion$1,
417
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
418
- react: React,
419
- events: {},
420
- defineCustomElement: defineCustomElement$1
421
- });
422
- const IonAccordionGroup = /*@__PURE__*/ createComponent({
423
- tagName: 'ion-accordion-group',
424
- elementClass: IonAccordionGroup$1,
425
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
426
- react: React,
427
- events: { onIonChange: 'ionChange' },
428
- defineCustomElement: defineCustomElement$2
429
- });
430
- const IonAvatar = /*@__PURE__*/ createComponent({
431
- tagName: 'ion-avatar',
432
- elementClass: IonAvatar$1,
433
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
434
- react: React,
435
- events: {},
436
- defineCustomElement: defineCustomElement$3
437
- });
438
- const IonBackdrop = /*@__PURE__*/ createComponent({
439
- tagName: 'ion-backdrop',
440
- elementClass: IonBackdrop$1,
441
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
442
- react: React,
443
- events: { onIonBackdropTap: 'ionBackdropTap' },
444
- defineCustomElement: defineCustomElement$4
445
- });
446
- const IonBadge = /*@__PURE__*/ createComponent({
447
- tagName: 'ion-badge',
448
- elementClass: IonBadge$1,
449
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
450
- react: React,
451
- events: {},
452
- defineCustomElement: defineCustomElement$5
453
- });
454
- const IonBreadcrumbs = /*@__PURE__*/ createComponent({
455
- tagName: 'ion-breadcrumbs',
456
- elementClass: IonBreadcrumbs$1,
457
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
458
- react: React,
459
- events: { onIonCollapsedClick: 'ionCollapsedClick' },
460
- defineCustomElement: defineCustomElement$6
461
- });
462
- const IonButtons = /*@__PURE__*/ createComponent({
463
- tagName: 'ion-buttons',
464
- elementClass: IonButtons$1,
465
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
466
- react: React,
467
- events: {},
468
- defineCustomElement: defineCustomElement$7
469
- });
470
- const IonCardContent = /*@__PURE__*/ createComponent({
471
- tagName: 'ion-card-content',
472
- elementClass: IonCardContent$1,
473
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
474
- react: React,
475
- events: {},
476
- defineCustomElement: defineCustomElement$8
477
- });
478
- const IonCardHeader = /*@__PURE__*/ createComponent({
479
- tagName: 'ion-card-header',
480
- elementClass: IonCardHeader$1,
481
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
482
- react: React,
483
- events: {},
484
- defineCustomElement: defineCustomElement$9
485
- });
486
- const IonCardSubtitle = /*@__PURE__*/ createComponent({
487
- tagName: 'ion-card-subtitle',
488
- elementClass: IonCardSubtitle$1,
489
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
490
- react: React,
491
- events: {},
492
- defineCustomElement: defineCustomElement$a
493
- });
494
- const IonCardTitle = /*@__PURE__*/ createComponent({
495
- tagName: 'ion-card-title',
496
- elementClass: IonCardTitle$1,
497
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
498
- react: React,
499
- events: {},
500
- defineCustomElement: defineCustomElement$b
501
- });
502
- const IonCheckbox = /*@__PURE__*/ createComponent({
503
- tagName: 'ion-checkbox',
504
- elementClass: IonCheckbox$1,
505
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
506
- react: React,
507
- events: {
508
- onIonChange: 'ionChange',
509
- onIonFocus: 'ionFocus',
510
- onIonBlur: 'ionBlur'
511
- },
512
- defineCustomElement: defineCustomElement$c
513
- });
514
- const IonChip = /*@__PURE__*/ createComponent({
515
- tagName: 'ion-chip',
516
- elementClass: IonChip$1,
517
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
518
- react: React,
519
- events: {},
520
- defineCustomElement: defineCustomElement$d
521
- });
522
- const IonCol = /*@__PURE__*/ createComponent({
523
- tagName: 'ion-col',
524
- elementClass: IonCol$1,
525
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
526
- react: React,
527
- events: {},
528
- defineCustomElement: defineCustomElement$e
529
- });
530
- const IonContent = /*@__PURE__*/ createComponent({
531
- tagName: 'ion-content',
532
- elementClass: IonContent$1,
533
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
534
- react: React,
535
- events: {
536
- onIonScrollStart: 'ionScrollStart',
537
- onIonScroll: 'ionScroll',
538
- onIonScrollEnd: 'ionScrollEnd'
539
- },
540
- defineCustomElement: defineCustomElement$f
541
- });
542
- const IonDatetime = /*@__PURE__*/ createComponent({
543
- tagName: 'ion-datetime',
544
- elementClass: IonDatetime$1,
545
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
546
- react: React,
547
- events: {
548
- onIonCancel: 'ionCancel',
549
- onIonChange: 'ionChange',
550
- onIonFocus: 'ionFocus',
551
- onIonBlur: 'ionBlur'
552
- },
553
- defineCustomElement: defineCustomElement$g
554
- });
555
- const IonDatetimeButton = /*@__PURE__*/ createComponent({
556
- tagName: 'ion-datetime-button',
557
- elementClass: IonDatetimeButton$1,
558
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
559
- react: React,
560
- events: {},
561
- defineCustomElement: defineCustomElement$h
562
- });
563
- const IonFab = /*@__PURE__*/ createComponent({
564
- tagName: 'ion-fab',
565
- elementClass: IonFab$1,
566
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
567
- react: React,
568
- events: {},
569
- defineCustomElement: defineCustomElement$i
570
- });
571
- const IonFabList = /*@__PURE__*/ createComponent({
572
- tagName: 'ion-fab-list',
573
- elementClass: IonFabList$1,
574
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
575
- react: React,
576
- events: {},
577
- defineCustomElement: defineCustomElement$j
578
- });
579
- const IonFooter = /*@__PURE__*/ createComponent({
580
- tagName: 'ion-footer',
581
- elementClass: IonFooter$1,
582
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
583
- react: React,
584
- events: {},
585
- defineCustomElement: defineCustomElement$k
586
- });
587
- const IonGrid = /*@__PURE__*/ createComponent({
588
- tagName: 'ion-grid',
589
- elementClass: IonGrid$1,
590
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
591
- react: React,
592
- events: {},
593
- defineCustomElement: defineCustomElement$l
594
- });
595
- const IonHeader = /*@__PURE__*/ createComponent({
596
- tagName: 'ion-header',
597
- elementClass: IonHeader$1,
598
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
599
- react: React,
600
- events: {},
601
- defineCustomElement: defineCustomElement$m
602
- });
603
- const IonImg = /*@__PURE__*/ createComponent({
604
- tagName: 'ion-img',
605
- elementClass: IonImg$1,
606
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
607
- react: React,
608
- events: {
609
- onIonImgWillLoad: 'ionImgWillLoad',
610
- onIonImgDidLoad: 'ionImgDidLoad',
611
- onIonError: 'ionError'
612
- },
613
- defineCustomElement: defineCustomElement$n
614
- });
615
- const IonInfiniteScroll = /*@__PURE__*/ createComponent({
616
- tagName: 'ion-infinite-scroll',
617
- elementClass: IonInfiniteScroll$1,
618
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
619
- react: React,
620
- events: { onIonInfinite: 'ionInfinite' },
621
- defineCustomElement: defineCustomElement$o
622
- });
623
- const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
624
- tagName: 'ion-infinite-scroll-content',
625
- elementClass: IonInfiniteScrollContent$1,
626
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
627
- react: React,
628
- events: {},
629
- defineCustomElement: defineCustomElement$p
630
- });
631
- const IonInput = /*@__PURE__*/ createComponent({
632
- tagName: 'ion-input',
633
- elementClass: IonInput$1,
634
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
635
- react: React,
636
- events: {
637
- onIonInput: 'ionInput',
638
- onIonChange: 'ionChange',
639
- onIonBlur: 'ionBlur',
640
- onIonFocus: 'ionFocus'
641
- },
642
- defineCustomElement: defineCustomElement$q
643
- });
644
- const IonInputOtp = /*@__PURE__*/ createComponent({
645
- tagName: 'ion-input-otp',
646
- elementClass: IonInputOtp$1,
647
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
648
- react: React,
649
- events: {
650
- onIonInput: 'ionInput',
651
- onIonChange: 'ionChange',
652
- onIonComplete: 'ionComplete',
653
- onIonBlur: 'ionBlur',
654
- onIonFocus: 'ionFocus'
655
- },
656
- defineCustomElement: defineCustomElement$r
657
- });
658
- const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
659
- tagName: 'ion-input-password-toggle',
660
- elementClass: IonInputPasswordToggle$1,
661
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
662
- react: React,
663
- events: {},
664
- defineCustomElement: defineCustomElement$s
665
- });
666
- const IonItemDivider = /*@__PURE__*/ createComponent({
667
- tagName: 'ion-item-divider',
668
- elementClass: IonItemDivider$1,
669
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
670
- react: React,
671
- events: {},
672
- defineCustomElement: defineCustomElement$t
673
- });
674
- const IonItemGroup = /*@__PURE__*/ createComponent({
675
- tagName: 'ion-item-group',
676
- elementClass: IonItemGroup$1,
677
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
678
- react: React,
679
- events: {},
680
- defineCustomElement: defineCustomElement$u
681
- });
682
- const IonItemOptions = /*@__PURE__*/ createComponent({
683
- tagName: 'ion-item-options',
684
- elementClass: IonItemOptions$1,
685
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
686
- react: React,
687
- events: { onIonSwipe: 'ionSwipe' },
688
- defineCustomElement: defineCustomElement$v
689
- });
690
- const IonItemSliding = /*@__PURE__*/ createComponent({
691
- tagName: 'ion-item-sliding',
692
- elementClass: IonItemSliding$1,
693
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
694
- react: React,
695
- events: { onIonDrag: 'ionDrag' },
696
- defineCustomElement: defineCustomElement$w
697
- });
698
- const IonLabel = /*@__PURE__*/ createComponent({
699
- tagName: 'ion-label',
700
- elementClass: IonLabel$1,
701
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
702
- react: React,
703
- events: {},
704
- defineCustomElement: defineCustomElement$x
705
- });
706
- const IonList = /*@__PURE__*/ createComponent({
707
- tagName: 'ion-list',
708
- elementClass: IonList$1,
709
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
710
- react: React,
711
- events: {},
712
- defineCustomElement: defineCustomElement$y
713
- });
714
- const IonListHeader = /*@__PURE__*/ createComponent({
715
- tagName: 'ion-list-header',
716
- elementClass: IonListHeader$1,
717
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
718
- react: React,
719
- events: {},
720
- defineCustomElement: defineCustomElement$z
721
- });
722
- const IonMenu = /*@__PURE__*/ createComponent({
723
- tagName: 'ion-menu',
724
- elementClass: IonMenu$1,
725
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
726
- react: React,
727
- events: {
728
- onIonWillOpen: 'ionWillOpen',
729
- onIonWillClose: 'ionWillClose',
730
- onIonDidOpen: 'ionDidOpen',
731
- onIonDidClose: 'ionDidClose'
732
- },
733
- defineCustomElement: defineCustomElement$A
734
- });
735
- const IonMenuButton = /*@__PURE__*/ createComponent({
736
- tagName: 'ion-menu-button',
737
- elementClass: IonMenuButton$1,
738
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
739
- react: React,
740
- events: {},
741
- defineCustomElement: defineCustomElement$B
742
- });
743
- const IonMenuToggle = /*@__PURE__*/ createComponent({
744
- tagName: 'ion-menu-toggle',
745
- elementClass: IonMenuToggle$1,
746
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
747
- react: React,
748
- events: {},
749
- defineCustomElement: defineCustomElement$C
750
- });
751
- const IonNavLink = /*@__PURE__*/ createComponent({
752
- tagName: 'ion-nav-link',
753
- elementClass: IonNavLink$1,
754
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
755
- react: React,
756
- events: {},
757
- defineCustomElement: defineCustomElement$D
758
- });
759
- const IonNote = /*@__PURE__*/ createComponent({
760
- tagName: 'ion-note',
761
- elementClass: IonNote$1,
762
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
763
- react: React,
764
- events: {},
765
- defineCustomElement: defineCustomElement$E
766
- });
767
- const IonPicker = /*@__PURE__*/ createComponent({
768
- tagName: 'ion-picker',
769
- elementClass: IonPicker$1,
770
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
771
- react: React,
772
- events: {},
773
- defineCustomElement: defineCustomElement$F
774
- });
775
- const IonPickerColumn = /*@__PURE__*/ createComponent({
776
- tagName: 'ion-picker-column',
777
- elementClass: IonPickerColumn$1,
778
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
779
- react: React,
780
- events: { onIonChange: 'ionChange' },
781
- defineCustomElement: defineCustomElement$G
782
- });
783
- const IonPickerColumnOption = /*@__PURE__*/ createComponent({
784
- tagName: 'ion-picker-column-option',
785
- elementClass: IonPickerColumnOption$1,
786
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
787
- react: React,
788
- events: {},
789
- defineCustomElement: defineCustomElement$H
790
- });
791
- const IonProgressBar = /*@__PURE__*/ createComponent({
792
- tagName: 'ion-progress-bar',
793
- elementClass: IonProgressBar$1,
794
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
795
- react: React,
796
- events: {},
797
- defineCustomElement: defineCustomElement$I
798
- });
799
- const IonRadio = /*@__PURE__*/ createComponent({
800
- tagName: 'ion-radio',
801
- elementClass: IonRadio$1,
802
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
803
- react: React,
804
- events: {
805
- onIonFocus: 'ionFocus',
806
- onIonBlur: 'ionBlur'
807
- },
808
- defineCustomElement: defineCustomElement$J
809
- });
810
- const IonRadioGroup = /*@__PURE__*/ createComponent({
811
- tagName: 'ion-radio-group',
812
- elementClass: IonRadioGroup$1,
813
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
814
- react: React,
815
- events: { onIonChange: 'ionChange' },
816
- defineCustomElement: defineCustomElement$K
817
- });
818
- const IonRange = /*@__PURE__*/ createComponent({
819
- tagName: 'ion-range',
820
- elementClass: IonRange$1,
821
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
822
- react: React,
823
- events: {
824
- onIonChange: 'ionChange',
825
- onIonInput: 'ionInput',
826
- onIonFocus: 'ionFocus',
827
- onIonBlur: 'ionBlur',
828
- onIonKnobMoveStart: 'ionKnobMoveStart',
829
- onIonKnobMoveEnd: 'ionKnobMoveEnd'
830
- },
831
- defineCustomElement: defineCustomElement$L
832
- });
833
- const IonRefresher = /*@__PURE__*/ createComponent({
834
- tagName: 'ion-refresher',
835
- elementClass: IonRefresher$1,
836
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
837
- react: React,
838
- events: {
839
- onIonRefresh: 'ionRefresh',
840
- onIonPull: 'ionPull',
841
- onIonStart: 'ionStart',
842
- onIonPullStart: 'ionPullStart',
843
- onIonPullEnd: 'ionPullEnd'
844
- },
845
- defineCustomElement: defineCustomElement$M
846
- });
847
- const IonRefresherContent = /*@__PURE__*/ createComponent({
848
- tagName: 'ion-refresher-content',
849
- elementClass: IonRefresherContent$1,
850
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
851
- react: React,
852
- events: {},
853
- defineCustomElement: defineCustomElement$N
854
- });
855
- const IonReorder = /*@__PURE__*/ createComponent({
856
- tagName: 'ion-reorder',
857
- elementClass: IonReorder$1,
858
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
859
- react: React,
860
- events: {},
861
- defineCustomElement: defineCustomElement$O
862
- });
863
- const IonReorderGroup = /*@__PURE__*/ createComponent({
864
- tagName: 'ion-reorder-group',
865
- elementClass: IonReorderGroup$1,
866
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
867
- react: React,
868
- events: {
869
- onIonItemReorder: 'ionItemReorder',
870
- onIonReorderStart: 'ionReorderStart',
871
- onIonReorderMove: 'ionReorderMove',
872
- onIonReorderEnd: 'ionReorderEnd'
873
- },
874
- defineCustomElement: defineCustomElement$P
875
- });
876
- const IonRippleEffect = /*@__PURE__*/ createComponent({
877
- tagName: 'ion-ripple-effect',
878
- elementClass: IonRippleEffect$1,
879
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
880
- react: React,
881
- events: {},
882
- defineCustomElement: defineCustomElement$Q
883
- });
884
- const IonRow = /*@__PURE__*/ createComponent({
885
- tagName: 'ion-row',
886
- elementClass: IonRow$1,
887
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
888
- react: React,
889
- events: {},
890
- defineCustomElement: defineCustomElement$R
891
- });
892
- const IonSearchbar = /*@__PURE__*/ createComponent({
893
- tagName: 'ion-searchbar',
894
- elementClass: IonSearchbar$1,
895
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
896
- react: React,
897
- events: {
898
- onIonInput: 'ionInput',
899
- onIonChange: 'ionChange',
900
- onIonCancel: 'ionCancel',
901
- onIonClear: 'ionClear',
902
- onIonBlur: 'ionBlur',
903
- onIonFocus: 'ionFocus'
904
- },
905
- defineCustomElement: defineCustomElement$S
906
- });
907
- const IonSegment = /*@__PURE__*/ createComponent({
908
- tagName: 'ion-segment',
909
- elementClass: IonSegment$1,
910
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
911
- react: React,
912
- events: { onIonChange: 'ionChange' },
913
- defineCustomElement: defineCustomElement$T
914
- });
915
- const IonSegmentButton = /*@__PURE__*/ createComponent({
916
- tagName: 'ion-segment-button',
917
- elementClass: IonSegmentButton$1,
918
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
919
- react: React,
920
- events: {},
921
- defineCustomElement: defineCustomElement$U
922
- });
923
- const IonSegmentContent = /*@__PURE__*/ createComponent({
924
- tagName: 'ion-segment-content',
925
- elementClass: IonSegmentContent$1,
926
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
927
- react: React,
928
- events: {},
929
- defineCustomElement: defineCustomElement$V
930
- });
931
- const IonSegmentView = /*@__PURE__*/ createComponent({
932
- tagName: 'ion-segment-view',
933
- elementClass: IonSegmentView$1,
934
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
935
- react: React,
936
- events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
937
- defineCustomElement: defineCustomElement$W
938
- });
939
- const IonSelect = /*@__PURE__*/ createComponent({
940
- tagName: 'ion-select',
941
- elementClass: IonSelect$1,
942
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
943
- react: React,
944
- events: {
945
- onIonChange: 'ionChange',
946
- onIonCancel: 'ionCancel',
947
- onIonDismiss: 'ionDismiss',
948
- onIonFocus: 'ionFocus',
949
- onIonBlur: 'ionBlur'
950
- },
951
- defineCustomElement: defineCustomElement$X
952
- });
953
- const IonSelectModal = /*@__PURE__*/ createComponent({
954
- tagName: 'ion-select-modal',
955
- elementClass: IonSelectModal$1,
956
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
957
- react: React,
958
- events: {},
959
- defineCustomElement: defineCustomElement$Y
960
- });
961
- const IonSelectOption = /*@__PURE__*/ createComponent({
962
- tagName: 'ion-select-option',
963
- elementClass: IonSelectOption$1,
964
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
965
- react: React,
966
- events: {},
967
- defineCustomElement: defineCustomElement$Z
968
- });
969
- const IonSkeletonText = /*@__PURE__*/ createComponent({
970
- tagName: 'ion-skeleton-text',
971
- elementClass: IonSkeletonText$1,
972
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
973
- react: React,
974
- events: {},
975
- defineCustomElement: defineCustomElement$_
976
- });
977
- const IonSpinner = /*@__PURE__*/ createComponent({
978
- tagName: 'ion-spinner',
979
- elementClass: IonSpinner$1,
980
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
981
- react: React,
982
- events: {},
983
- defineCustomElement: defineCustomElement$$
984
- });
985
- const IonSplitPane = /*@__PURE__*/ createComponent({
986
- tagName: 'ion-split-pane',
987
- elementClass: IonSplitPane$1,
988
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
989
- react: React,
990
- events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
991
- defineCustomElement: defineCustomElement$10
992
- });
993
- const IonTab = /*@__PURE__*/ createComponent({
994
- tagName: 'ion-tab',
995
- elementClass: IonTab$1,
996
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
997
- react: React,
998
- events: {},
999
- defineCustomElement: defineCustomElement$11
1000
- });
1001
- const IonText = /*@__PURE__*/ createComponent({
1002
- tagName: 'ion-text',
1003
- elementClass: IonText$1,
1004
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1005
- react: React,
1006
- events: {},
1007
- defineCustomElement: defineCustomElement$12
1008
- });
1009
- const IonTextarea = /*@__PURE__*/ createComponent({
1010
- tagName: 'ion-textarea',
1011
- elementClass: IonTextarea$1,
1012
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1013
- react: React,
1014
- events: {
1015
- onIonChange: 'ionChange',
1016
- onIonInput: 'ionInput',
1017
- onIonBlur: 'ionBlur',
1018
- onIonFocus: 'ionFocus'
1019
- },
1020
- defineCustomElement: defineCustomElement$13
1021
- });
1022
- const IonThumbnail = /*@__PURE__*/ createComponent({
1023
- tagName: 'ion-thumbnail',
1024
- elementClass: IonThumbnail$1,
1025
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1026
- react: React,
1027
- events: {},
1028
- defineCustomElement: defineCustomElement$14
1029
- });
1030
- const IonTitle = /*@__PURE__*/ createComponent({
1031
- tagName: 'ion-title',
1032
- elementClass: IonTitle$1,
1033
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1034
- react: React,
1035
- events: {},
1036
- defineCustomElement: defineCustomElement$15
1037
- });
1038
- const IonToggle = /*@__PURE__*/ createComponent({
1039
- tagName: 'ion-toggle',
1040
- elementClass: IonToggle$1,
1041
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1042
- react: React,
1043
- events: {
1044
- onIonChange: 'ionChange',
1045
- onIonFocus: 'ionFocus',
1046
- onIonBlur: 'ionBlur'
1047
- },
1048
- defineCustomElement: defineCustomElement$16
1049
- });
1050
- const IonToolbar = /*@__PURE__*/ createComponent({
1051
- tagName: 'ion-toolbar',
1052
- elementClass: IonToolbar$1,
1053
- // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1054
- react: React,
1055
- events: {},
1056
- defineCustomElement: defineCustomElement$17
1057
- });
1058
-
1059
417
  const dashToPascalCase = (str) => str
1060
418
  .toLowerCase()
1061
419
  .split('-')
@@ -1063,28 +421,6 @@ const dashToPascalCase = (str) => str
1063
421
  .join('');
1064
422
  const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
1065
423
 
1066
- // Enumerated attributes where the literal string "false" is meaningful and
1067
- // differs from the attribute being absent, so they must not be stripped like
1068
- // HTML boolean attributes. These are the dash-cased attribute names produced by
1069
- // camelToDashCase (e.g. the `spellCheck` prop renders as `spell-check`), so the
1070
- // entries must match that form. aria-* and data-* are handled by prefix below.
1071
- const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-check', 'content-editable']);
1072
- /**
1073
- * React serializes a boolean prop set to `false` (e.g. `disabled={false}`) as
1074
- * the string attribute `disabled="false"`. For HTML boolean attributes the mere
1075
- * presence means "true", so assistive tech treats the element as
1076
- * disabled/readonly even though Ionic renders it as interactive. The @lit/react
1077
- * runtime fixes this for the generated components on v9, but the hand-rolled
1078
- * wrappers (createReactComponent, createRoutingComponent, ...) render attributes
1079
- * directly and sync props through attachProps, so we strip the stray attribute
1080
- * here after the property has been assigned.
1081
- *
1082
- * TODO(FW-7629): This only matters on React 17 and 18. React 19 added full custom-element
1083
- * support and no longer serializes a `false` boolean prop to a `="false"`
1084
- * attribute, so there is nothing to strip there (this stays a harmless no-op).
1085
- * Once React 17/18 support is dropped, this stripping can be removed.
1086
- */
1087
- const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
1088
424
  const attachProps = (node, newProps, oldProps = {}) => {
1089
425
  // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
1090
426
  if (node instanceof Element) {
@@ -1115,12 +451,6 @@ const attachProps = (node, newProps, oldProps = {}) => {
1115
451
  if (propType === 'string') {
1116
452
  node.setAttribute(camelToDashCase(name), newProps[name]);
1117
453
  }
1118
- else if (newProps[name] === false) {
1119
- const attribute = camelToDashCase(name);
1120
- if (isStaleFalseBooleanAttribute(attribute)) {
1121
- node.removeAttribute(attribute);
1122
- }
1123
- }
1124
454
  }
1125
455
  });
1126
456
  }
@@ -1231,6 +561,147 @@ const defineCustomElement = (tagName, customElement) => {
1231
561
  }
1232
562
  };
1233
563
 
564
+ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
565
+ if (defineCustomElement !== undefined) {
566
+ defineCustomElement();
567
+ }
568
+ const displayName = dashToPascalCase(tagName);
569
+ const ReactComponent = class extends React.Component {
570
+ constructor(props) {
571
+ super(props);
572
+ this.setComponentElRef = (element) => {
573
+ this.componentEl = element;
574
+ };
575
+ }
576
+ componentDidMount() {
577
+ this.componentDidUpdate(this.props);
578
+ }
579
+ componentDidUpdate(prevProps) {
580
+ attachProps(this.componentEl, this.props, prevProps);
581
+ }
582
+ render() {
583
+ const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
584
+ let propsToPass = Object.keys(cProps).reduce((acc, name) => {
585
+ const value = cProps[name];
586
+ if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
587
+ const eventName = name.substring(2).toLowerCase();
588
+ if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
589
+ acc[name] = value;
590
+ }
591
+ }
592
+ else {
593
+ // we should only render strings, booleans, and numbers as attrs in html.
594
+ // objects, functions, arrays etc get synced via properties on mount.
595
+ const type = typeof value;
596
+ if (type === 'string' || type === 'boolean' || type === 'number') {
597
+ acc[camelToDashCase(name)] = value;
598
+ }
599
+ }
600
+ return acc;
601
+ }, {});
602
+ if (manipulatePropsFunction) {
603
+ propsToPass = manipulatePropsFunction(this.props, propsToPass);
604
+ }
605
+ const newProps = {
606
+ ...propsToPass,
607
+ ref: mergeRefs(forwardedRef, this.setComponentElRef),
608
+ style,
609
+ };
610
+ /**
611
+ * We use createElement here instead of
612
+ * React.createElement to work around a
613
+ * bug in Vite (https://github.com/vitejs/vite/issues/6104).
614
+ * React.createElement causes all elements to be rendered
615
+ * as <tagname> instead of the actual Web Component.
616
+ */
617
+ return createElement(tagName, newProps, children);
618
+ }
619
+ static get displayName() {
620
+ return displayName;
621
+ }
622
+ };
623
+ // If context was passed to createReactComponent then conditionally add it to the Component Class
624
+ if (ReactComponentContext) {
625
+ ReactComponent.contextType = ReactComponentContext;
626
+ }
627
+ return createForwardRef$1(ReactComponent, displayName);
628
+ };
629
+
630
+ /* eslint-disable */
631
+ /* tslint:disable */
632
+ /* auto-generated react proxies */
633
+ const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
634
+ const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
635
+ const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
636
+ const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
637
+ const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
638
+ const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
639
+ const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
640
+ const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
641
+ const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
642
+ const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
643
+ const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
644
+ const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
645
+ const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
646
+ const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
647
+ const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
648
+ const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
649
+ const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
650
+ const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$i);
651
+ const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$j);
652
+ const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$k);
653
+ const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$l);
654
+ const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$m);
655
+ const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$n);
656
+ const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$o);
657
+ const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$p);
658
+ const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$q);
659
+ const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$r);
660
+ const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$s);
661
+ const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$t);
662
+ const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$u);
663
+ const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$v);
664
+ const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$w);
665
+ const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$x);
666
+ const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$y);
667
+ const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$z);
668
+ const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$A);
669
+ const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$B);
670
+ const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$C);
671
+ const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$D);
672
+ const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$E);
673
+ const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$F);
674
+ const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$G);
675
+ const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$H);
676
+ const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$I);
677
+ const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$J);
678
+ const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$K);
679
+ const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$L);
680
+ const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$M);
681
+ const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$N);
682
+ const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$O);
683
+ const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$P);
684
+ const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$Q);
685
+ const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$R);
686
+ const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$S);
687
+ const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$T);
688
+ const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$U);
689
+ const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$V);
690
+ const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$W);
691
+ const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$X);
692
+ const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$Y);
693
+ const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$Z);
694
+ const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$_);
695
+ const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$$);
696
+ const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$10);
697
+ const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$11);
698
+ const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$12);
699
+ const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$13);
700
+ const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$14);
701
+ const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$15);
702
+ const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$16);
703
+ const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$17);
704
+
1234
705
  const createForwardRef = (ReactComponent, // TODO(FW-2959): type
1235
706
  displayName) => {
1236
707
  const forwardRef = (props, ref) => {
@@ -1263,10 +734,15 @@ const createRoutingComponent = (tagName, customElement) => {
1263
734
  defineCustomElement(tagName, customElement);
1264
735
  const displayName = dashToPascalCase(tagName);
1265
736
  const ReactComponent = class extends React.Component {
1266
- ref;
1267
- stableMergedRefs;
1268
737
  constructor(props) {
1269
738
  super(props);
739
+ this.handleClick = (e) => {
740
+ const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
741
+ if (routerLink !== undefined) {
742
+ e.preventDefault();
743
+ this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
744
+ }
745
+ };
1270
746
  // Create a local ref to to attach props to the wrapped element.
1271
747
  this.ref = React.createRef();
1272
748
  // React refs must be stable (not created inline).
@@ -1279,18 +755,6 @@ const createRoutingComponent = (tagName, customElement) => {
1279
755
  const node = this.ref.current;
1280
756
  attachProps(node, this.props, prevProps);
1281
757
  }
1282
- handleClick = (e) => {
1283
- const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
1284
- if (routerLink !== undefined) {
1285
- // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
1286
- // without triggering SPA navigation on the current page.
1287
- if (e.metaKey || e.ctrlKey || e.shiftKey) {
1288
- return;
1289
- }
1290
- e.preventDefault();
1291
- this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
1292
- }
1293
- };
1294
758
  render() {
1295
759
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1296
760
  const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
@@ -1397,14 +861,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
1397
861
  }
1398
862
  const displayName = dashToPascalCase(tagName);
1399
863
  const ReactComponent = class extends React.Component {
1400
- ref;
1401
- wrapperRef;
1402
- markerRef;
1403
- stableMergedRefs;
1404
- portalTarget;
1405
- isUnmounted = false;
1406
864
  constructor(props) {
1407
865
  super(props);
866
+ this.isUnmounted = false;
867
+ this.handleIonMount = () => {
868
+ /**
869
+ * Mount the inner component when the
870
+ * overlay is about to open.
871
+ *
872
+ * For ion-popover, this is when `ionMount` is emitted.
873
+ * For other overlays, this is when `willPresent` is emitted.
874
+ */
875
+ this.setState({ isOpen: true });
876
+ };
877
+ this.handleWillPresent = (evt) => {
878
+ this.setState({ isOpen: true });
879
+ /**
880
+ * Manually call the onWillPresent
881
+ * handler if present as setState will
882
+ * cause the event handlers to be
883
+ * destroyed and re-created.
884
+ */
885
+ this.props.onWillPresent && this.props.onWillPresent(evt);
886
+ };
887
+ this.handleDidDismiss = (evt) => {
888
+ const wrapper = this.wrapperRef.current;
889
+ const el = this.ref.current;
890
+ /**
891
+ * This component might be unmounted already, if the containing
892
+ * element was removed while the overlay was still open. (For
893
+ * example, if an item contains an inline overlay with a button
894
+ * that removes the item.)
895
+ */
896
+ if (wrapper && el) {
897
+ el.append(wrapper);
898
+ this.setState({ isOpen: false });
899
+ }
900
+ this.props.onDidDismiss && this.props.onDidDismiss(evt);
901
+ };
1408
902
  // Create a local ref to to attach props to the wrapped element.
1409
903
  this.ref = React.createRef();
1410
904
  // React refs must be stable (not created inline).
@@ -1581,41 +1075,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
1581
1075
  static get displayName() {
1582
1076
  return displayName;
1583
1077
  }
1584
- handleIonMount = () => {
1585
- /**
1586
- * Mount the inner component when the
1587
- * overlay is about to open.
1588
- *
1589
- * For ion-popover, this is when `ionMount` is emitted.
1590
- * For other overlays, this is when `willPresent` is emitted.
1591
- */
1592
- this.setState({ isOpen: true });
1593
- };
1594
- handleWillPresent = (evt) => {
1595
- this.setState({ isOpen: true });
1596
- /**
1597
- * Manually call the onWillPresent
1598
- * handler if present as setState will
1599
- * cause the event handlers to be
1600
- * destroyed and re-created.
1601
- */
1602
- this.props.onWillPresent && this.props.onWillPresent(evt);
1603
- };
1604
- handleDidDismiss = (evt) => {
1605
- const wrapper = this.wrapperRef.current;
1606
- const el = this.ref.current;
1607
- /**
1608
- * This component might be unmounted already, if the containing
1609
- * element was removed while the overlay was still open. (For
1610
- * example, if an item contains an inline overlay with a button
1611
- * that removes the item.)
1612
- */
1613
- if (wrapper && el) {
1614
- el.append(wrapper);
1615
- this.setState({ isOpen: false });
1616
- }
1617
- this.props.onDidDismiss && this.props.onDidDismiss(evt);
1618
- };
1619
1078
  };
1620
1079
  // Forward the nesting context as a prop to avoid contextType on the class.
1621
1080
  // The render function is passed via `children` (not as a varargs child) so it
@@ -1634,11 +1093,13 @@ const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', def
1634
1093
 
1635
1094
  const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
1636
1095
 
1637
- const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1b);
1096
+ const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1b);
1638
1097
 
1639
- const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1c, true);
1098
+ const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1c);
1640
1099
 
1641
- const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1d);
1100
+ const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1d, true);
1101
+
1102
+ const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1e);
1642
1103
 
1643
1104
  const IonContext = React.createContext({
1644
1105
  addOverlay: () => {
@@ -1730,101 +1191,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
1730
1191
  }) }));
1731
1192
  };
1732
1193
 
1733
- const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
1734
- if (defineCustomElement !== undefined) {
1735
- defineCustomElement();
1736
- }
1737
- const displayName = dashToPascalCase(tagName);
1738
- const ReactComponent = class extends React.Component {
1739
- componentEl;
1740
- setComponentElRef = (element) => {
1741
- this.componentEl = element;
1742
- };
1743
- constructor(props) {
1744
- super(props);
1745
- }
1746
- componentDidMount() {
1747
- this.componentDidUpdate(this.props);
1748
- }
1749
- componentDidUpdate(prevProps) {
1750
- attachProps(this.componentEl, this.props, prevProps);
1751
- }
1752
- render() {
1753
- const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
1754
- let propsToPass = Object.keys(cProps).reduce((acc, name) => {
1755
- const value = cProps[name];
1756
- if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
1757
- const eventName = name.substring(2).toLowerCase();
1758
- if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
1759
- acc[name] = value;
1760
- }
1761
- }
1762
- else {
1763
- // we should only render strings, booleans, and numbers as attrs in html.
1764
- // objects, functions, arrays etc get synced via properties on mount.
1765
- const type = typeof value;
1766
- if (type === 'string' || type === 'boolean' || type === 'number') {
1767
- acc[camelToDashCase(name)] = value;
1768
- }
1769
- }
1770
- return acc;
1771
- }, {});
1772
- if (manipulatePropsFunction) {
1773
- propsToPass = manipulatePropsFunction(this.props, propsToPass);
1774
- }
1775
- const newProps = {
1776
- ...propsToPass,
1777
- ref: mergeRefs(forwardedRef, this.setComponentElRef),
1778
- style,
1779
- children
1780
- };
1781
- /**
1782
- * We use createElement here instead of
1783
- * React.createElement to work around a
1784
- * bug in Vite (https://github.com/vitejs/vite/issues/6104).
1785
- * React.createElement causes all elements to be rendered
1786
- * as <tagname> instead of the actual Web Component.
1787
- */
1788
- return createElement(tagName, newProps, children);
1789
- }
1790
- static get displayName() {
1791
- return displayName;
1792
- }
1793
- };
1794
- // If context was passed to createReactComponent then conditionally add it to the Component Class
1795
- if (ReactComponentContext) {
1796
- ReactComponent.contextType = ReactComponentContext;
1797
- }
1798
- return createForwardRef$1(ReactComponent, displayName);
1799
- };
1800
-
1801
- const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
1802
- const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
1803
- const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
1804
- const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
1805
- const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
1806
- const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1j);
1194
+ const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1f);
1195
+ const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1g);
1196
+ const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1h);
1197
+ const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1i);
1198
+ const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1j);
1199
+ const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1k);
1807
1200
  // ionicons
1808
- const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1k);
1201
+ const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1l);
1809
1202
 
1810
1203
  class IonApp extends React.Component {
1811
- addOverlayCallback;
1812
- removeOverlayCallback;
1813
1204
  constructor(props) {
1814
1205
  super(props);
1206
+ this.ionContext = {
1207
+ addOverlay: (id, overlay, containerElement) => {
1208
+ if (this.addOverlayCallback) {
1209
+ this.addOverlayCallback(id, overlay, containerElement);
1210
+ }
1211
+ },
1212
+ removeOverlay: (id) => {
1213
+ if (this.removeOverlayCallback) {
1214
+ this.removeOverlayCallback(id);
1215
+ }
1216
+ },
1217
+ };
1815
1218
  }
1816
- ionContext = {
1817
- addOverlay: (id, overlay, containerElement) => {
1818
- if (this.addOverlayCallback) {
1819
- this.addOverlayCallback(id, overlay, containerElement);
1820
- }
1821
- },
1822
- removeOverlay: (id) => {
1823
- if (this.removeOverlayCallback) {
1824
- this.removeOverlayCallback(id);
1825
- }
1826
- },
1827
- };
1828
1219
  render() {
1829
1220
  return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
1830
1221
  this.addOverlayCallback = callback;
@@ -1832,8 +1223,8 @@ class IonApp extends React.Component {
1832
1223
  this.removeOverlayCallback = callback;
1833
1224
  } })] }));
1834
1225
  }
1835
- static displayName = 'IonApp';
1836
1226
  }
1227
+ IonApp.displayName = 'IonApp';
1837
1228
 
1838
1229
  const StackContext = React.createContext({
1839
1230
  registerIonPage: () => undefined,
@@ -1841,32 +1232,11 @@ const StackContext = React.createContext({
1841
1232
  });
1842
1233
 
1843
1234
  class PageManager extends React.PureComponent {
1844
- ionLifeCycleContext;
1845
- ionPageElementRef;
1846
- stableMergedRefs;
1847
1235
  constructor(props) {
1848
1236
  super(props);
1849
1237
  this.ionPageElementRef = React.createRef();
1850
1238
  // React refs must be stable (not created inline).
1851
- // Wrap merged refs to add ion-page-invisible synchronously when element is created
1852
- const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
1853
- // Guard against React 19 strict mode double-mount re-adding ion-page-invisible.
1854
- // The ref fires again on remount after StackManager may have already removed it.
1855
- let hasAppliedInvisible = false;
1856
- this.stableMergedRefs = (node) => {
1857
- if (node &&
1858
- !hasAppliedInvisible &&
1859
- !node.classList.contains('ion-page-invisible') &&
1860
- !node.classList.contains('ion-page-hidden')) {
1861
- // Add ion-page-invisible synchronously before first paint (if in an outlet)
1862
- // This prevents the flash that occurs when componentDidMount runs after paint
1863
- if (this.context?.isInOutlet?.()) {
1864
- node.classList.add('ion-page-invisible');
1865
- hasAppliedInvisible = true;
1866
- }
1867
- }
1868
- baseMergedRefs(node);
1869
- };
1239
+ this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
1870
1240
  /**
1871
1241
  * This binds the scope of the following methods to the class scope.
1872
1242
  * The `.bind` method returns a new function, so we need to assign it
@@ -1878,38 +1248,11 @@ class PageManager extends React.PureComponent {
1878
1248
  this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
1879
1249
  this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
1880
1250
  }
1881
- parseClasses(className) {
1882
- if (!className)
1883
- return new Set();
1884
- return new Set(className.split(/\s+/).filter(Boolean));
1885
- }
1886
- /**
1887
- * Updates classList by diffing old/new className props.
1888
- * Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
1889
- */
1890
- updateUserClasses(oldClassName, newClassName) {
1891
- if (!this.ionPageElementRef.current)
1892
- return;
1893
- const oldClasses = this.parseClasses(oldClassName);
1894
- const newClasses = this.parseClasses(newClassName);
1895
- oldClasses.forEach((cls) => {
1896
- if (!newClasses.has(cls)) {
1897
- this.ionPageElementRef.current.classList.remove(cls);
1898
- }
1899
- });
1900
- newClasses.forEach((cls) => {
1901
- if (!oldClasses.has(cls)) {
1902
- this.ionPageElementRef.current.classList.add(cls);
1903
- }
1904
- });
1905
- }
1906
1251
  componentDidMount() {
1907
1252
  if (this.ionPageElementRef.current) {
1908
- // Add user classes via DOM manipulation to preserve framework-added classes.
1909
- // We only set "ion-page" in JSX; user classes are added here.
1910
- // Note: ion-page-invisible is added in the ref callback (stableMergedRefs) to prevent flash.
1911
- // The ref callback runs synchronously when the element is created, before the browser paints.
1912
- this.updateUserClasses(undefined, this.props.className);
1253
+ if (this.context.isInOutlet()) {
1254
+ this.ionPageElementRef.current.classList.add('ion-page-invisible');
1255
+ }
1913
1256
  this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
1914
1257
  this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
1915
1258
  this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
@@ -1917,11 +1260,6 @@ class PageManager extends React.PureComponent {
1917
1260
  this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
1918
1261
  }
1919
1262
  }
1920
- componentDidUpdate(prevProps) {
1921
- if (prevProps.className !== this.props.className) {
1922
- this.updateUserClasses(prevProps.className, this.props.className);
1923
- }
1924
- }
1925
1263
  componentWillUnmount() {
1926
1264
  if (this.ionPageElementRef.current) {
1927
1265
  this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -1951,11 +1289,9 @@ class PageManager extends React.PureComponent {
1951
1289
  render() {
1952
1290
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1953
1291
  const { className, children, routeInfo, forwardedRef, ...props } = this.props;
1954
- // Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
1955
- // to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
1956
1292
  return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
1957
1293
  this.ionLifeCycleContext = context;
1958
- return (jsx("div", { className: "ion-page", ref: this.stableMergedRefs, ...props, children: children }));
1294
+ return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
1959
1295
  } }));
1960
1296
  }
1961
1297
  static get contextType() {
@@ -2015,7 +1351,7 @@ const ReactDelegate = (addView, removeView) => {
2015
1351
  };
2016
1352
  };
2017
1353
 
2018
- const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1l);
1354
+ const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1m);
2019
1355
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
2020
1356
  const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
2021
1357
  const [views, setViews] = useState([]);
@@ -2041,9 +1377,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
2041
1377
  });
2042
1378
 
2043
1379
  class OutletPageManager extends React.Component {
2044
- ionLifeCycleContext;
2045
- ionRouterOutlet;
2046
- outletIsReady;
2047
1380
  constructor(props) {
2048
1381
  super(props);
2049
1382
  this.outletIsReady = false;
@@ -2066,30 +1399,8 @@ class OutletPageManager extends React.Component {
2066
1399
  */
2067
1400
  if (!this.outletIsReady) {
2068
1401
  componentOnReady(this.ionRouterOutlet, () => {
2069
- /**
2070
- * Guard against duplicate callbacks from React strict mode double-mount.
2071
- * Both componentDidMount calls pass the outer !outletIsReady check before
2072
- * either async callback fires. Without this inner guard, the second callback
2073
- * re-adds ion-page-invisible after the first callback's transition removed it,
2074
- * and registerIonPage returns early (same element), leaving the page invisible.
2075
- */
2076
- if (this.outletIsReady)
2077
- return;
2078
1402
  this.outletIsReady = true;
2079
- /**
2080
- * Add ion-page + ion-page-invisible AFTER Stencil hydration but
2081
- * BEFORE registerIonPage. Stencil hydration overwrites className,
2082
- * so classes added in a React ref callback get wiped. Adding them
2083
- * here -- after hydration -- ensures they persist until the parent
2084
- * outlet's forward animation removes ion-page-invisible, preventing
2085
- * a flash where the outlet is briefly visible at full opacity.
2086
- */
2087
- const el = this.ionRouterOutlet;
2088
- if (!el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden')) {
2089
- el.classList.add('ion-page');
2090
- el.classList.add('ion-page-invisible');
2091
- }
2092
- this.context.registerIonPage(el, this.props.routeInfo);
1403
+ this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
2093
1404
  });
2094
1405
  }
2095
1406
  this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -2119,10 +1430,10 @@ class OutletPageManager extends React.Component {
2119
1430
  this.ionLifeCycleContext.ionViewDidLeave();
2120
1431
  }
2121
1432
  render() {
2122
- const { StackManager, children, routeInfo, id, ...props } = this.props;
1433
+ const { StackManager, children, routeInfo, ...props } = this.props;
2123
1434
  return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
2124
1435
  this.ionLifeCycleContext = context;
2125
- return (jsx(StackManager, { id: id, routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { id: id, setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
1436
+ return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
2126
1437
  } }));
2127
1438
  }
2128
1439
  static get contextType() {
@@ -2131,16 +1442,13 @@ class OutletPageManager extends React.Component {
2131
1442
  }
2132
1443
 
2133
1444
  class IonRouterOutletContainer extends React.Component {
2134
- outletId;
2135
1445
  constructor(props) {
2136
1446
  super(props);
2137
- this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
2138
1447
  }
2139
1448
  render() {
2140
1449
  const StackManager = this.context.getStackManager();
2141
1450
  const { children, forwardedRef, ...props } = this.props;
2142
- const outletId = props.id ?? this.outletId;
2143
- return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, id: outletId, children: jsx(IonRouterOutletInner, { ...props, id: outletId, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
1451
+ return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
2144
1452
  }
2145
1453
  static get contextType() {
2146
1454
  return NavContext;
@@ -2164,29 +1472,28 @@ class IonTabs extends React.Component {
2164
1472
  shouldComponentUpdate() {
2165
1473
  return true;
2166
1474
  }
2167
- /**
2168
- * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
2169
- * Without this, `ref.current` will be `undefined` in the user's app,
2170
- * breaking their ability to access the `IonRouterOutlet` instance.
2171
- * Do not remove this ref.
2172
- */
2173
- routerOutletRef = React.createRef();
2174
- selectTabHandler;
2175
- tabBarRef = React.createRef();
2176
- ionTabContextState = {
2177
- activeTab: undefined,
2178
- selectTab: () => false,
2179
- hasRouterOutlet: false,
2180
- /**
2181
- * Tab bar can be used as a standalone component,
2182
- * so the props can not be passed directly to the
2183
- * tab bar component. Instead, props will be
2184
- * passed through the context.
2185
- */
2186
- tabBarProps: { ref: this.tabBarRef },
2187
- };
2188
1475
  constructor(props) {
2189
1476
  super(props);
1477
+ /**
1478
+ * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
1479
+ * Without this, `ref.current` will be `undefined` in the user's app,
1480
+ * breaking their ability to access the `IonRouterOutlet` instance.
1481
+ * Do not remove this ref.
1482
+ */
1483
+ this.routerOutletRef = React.createRef();
1484
+ this.tabBarRef = React.createRef();
1485
+ this.ionTabContextState = {
1486
+ activeTab: undefined,
1487
+ selectTab: () => false,
1488
+ hasRouterOutlet: false,
1489
+ /**
1490
+ * Tab bar can be used as a standalone component,
1491
+ * so the props can not be passed directly to the
1492
+ * tab bar component. Instead, props will be
1493
+ * passed through the context.
1494
+ */
1495
+ tabBarProps: { ref: this.tabBarRef },
1496
+ };
2190
1497
  }
2191
1498
  componentDidMount() {
2192
1499
  if (this.tabBarRef.current) {
@@ -2338,14 +1645,14 @@ const matchesTab = (pathname, href) => {
2338
1645
  if (href === undefined) {
2339
1646
  return false;
2340
1647
  }
2341
- // Strip query string before comparing — href may contain search params (e.g., "/tabs/home?foo=bar")
2342
- const hrefPathname = href.split('?')[0];
2343
- const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
1648
+ const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
2344
1649
  return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
2345
1650
  };
2346
1651
  class IonTabBarUnwrapped extends React.PureComponent {
2347
1652
  constructor(props) {
2348
1653
  super(props);
1654
+ // eslint-disable-next-line
1655
+ this.setActiveTabOnContext = (_tab) => { };
2349
1656
  const tabs = {};
2350
1657
  React.Children.forEach(props.children, (child) => {
2351
1658
  if (child != null &&
@@ -2386,8 +1693,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
2386
1693
  this.setActiveTabOnContext(this.state.activeTab);
2387
1694
  }
2388
1695
  }
2389
- // eslint-disable-next-line
2390
- setActiveTabOnContext = (_tab) => { };
2391
1696
  selectTab(tab) {
2392
1697
  const tabUrl = this.state.tabs[tab];
2393
1698
  if (tabUrl) {
@@ -2432,7 +1737,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
2432
1737
  const prevHref = state.tabs[prevActiveTab].currentHref;
2433
1738
  const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
2434
1739
  if (activeTab !== prevActiveTab ||
2435
- prevHref !== (props.routeInfo?.pathname || '') + (props.routeInfo?.search || '') ||
1740
+ prevHref !== props.routeInfo?.pathname ||
2436
1741
  prevRouteOptions !== props.routeInfo?.routeOptions) {
2437
1742
  tabs[activeTab] = {
2438
1743
  originalHref: tabs[activeTab].originalHref,
@@ -2505,7 +1810,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
2505
1810
  return (child) => {
2506
1811
  if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
2507
1812
  const href = child.props.tab === activeTab
2508
- ? (this.props.routeInfo?.pathname || '') + (this.props.routeInfo?.search || '')
1813
+ ? this.props.routeInfo?.pathname
2509
1814
  : this.state.tabs[child.props.tab].currentHref;
2510
1815
  const routeOptions = child.props.tab === activeTab
2511
1816
  ? this.props.routeInfo?.routeOptions
@@ -2550,24 +1855,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
2550
1855
  const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
2551
1856
 
2552
1857
  class IonBackButton extends React.Component {
2553
- clickButton = (e) => {
2554
- /**
2555
- * If ion-back-button is being used inside
2556
- * of ion-nav then we should not interact with
2557
- * the router.
2558
- */
2559
- if (e.target && e.target.closest('ion-nav') !== null) {
2560
- return;
2561
- }
2562
- const { defaultHref, routerAnimation } = this.props;
2563
- if (this.context.hasIonicRouter()) {
2564
- e.stopPropagation();
2565
- this.context.goBack(defaultHref, routerAnimation);
2566
- }
2567
- else if (defaultHref !== undefined) {
2568
- window.location.href = defaultHref;
2569
- }
2570
- };
1858
+ constructor() {
1859
+ super(...arguments);
1860
+ this.clickButton = (e) => {
1861
+ /**
1862
+ * If ion-back-button is being used inside
1863
+ * of ion-nav then we should not interact with
1864
+ * the router.
1865
+ */
1866
+ if (e.target && e.target.closest('ion-nav') !== null) {
1867
+ return;
1868
+ }
1869
+ const { defaultHref, routerAnimation } = this.props;
1870
+ if (this.context.hasIonicRouter()) {
1871
+ e.stopPropagation();
1872
+ this.context.goBack(defaultHref, routerAnimation);
1873
+ }
1874
+ else if (defaultHref !== undefined) {
1875
+ window.location.href = defaultHref;
1876
+ }
1877
+ };
1878
+ }
2571
1879
  render() {
2572
1880
  return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
2573
1881
  }
@@ -2627,6 +1935,20 @@ class IonRoute extends React.PureComponent {
2627
1935
  }
2628
1936
  }
2629
1937
 
1938
+ class IonRedirect extends React.PureComponent {
1939
+ render() {
1940
+ const IonRedirectInner = this.context.getIonRedirect();
1941
+ if (!this.context.hasIonicRouter() || !IonRedirect) {
1942
+ console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
1943
+ return null;
1944
+ }
1945
+ return jsx(IonRedirectInner, { ...this.props });
1946
+ }
1947
+ static get contextType() {
1948
+ return NavContext;
1949
+ }
1950
+ }
1951
+
2630
1952
  const IonRouterContext = React.createContext({
2631
1953
  routeInfo: undefined, // TODO(FW-2959): type
2632
1954
  push: () => {
@@ -2635,9 +1957,6 @@ const IonRouterContext = React.createContext({
2635
1957
  back: () => {
2636
1958
  throw new Error('An Ionic Router is required for IonRouterContext');
2637
1959
  },
2638
- navigateRoot: () => {
2639
- throw new Error('An Ionic Router is required for IonRouterContext');
2640
- },
2641
1960
  canGoBack: () => {
2642
1961
  throw new Error('An Ionic Router is required for IonRouterContext');
2643
1962
  },
@@ -2654,17 +1973,15 @@ function useIonRouter() {
2654
1973
  back: context.back,
2655
1974
  push: context.push,
2656
1975
  goBack: context.back,
2657
- navigateRoot: context.navigateRoot,
2658
1976
  canGoBack: context.canGoBack,
2659
1977
  routeInfo: context.routeInfo,
2660
- }), [context.back, context.push, context.navigateRoot, context.canGoBack, context.routeInfo]);
1978
+ }), [context.back, context.push, context.canGoBack, context.routeInfo]);
2661
1979
  }
2662
1980
 
2663
1981
  class CreateAnimation extends React.PureComponent {
2664
- nodes = new Map();
2665
- animation;
2666
1982
  constructor(props) {
2667
1983
  super(props);
1984
+ this.nodes = new Map();
2668
1985
  this.animation = createAnimation(props.id);
2669
1986
  }
2670
1987
  setupAnimation(props) {
@@ -2812,7 +2129,7 @@ function useController(displayName, controller, defineCustomElement) {
2812
2129
  * @returns Returns the present and dismiss methods in an array
2813
2130
  */
2814
2131
  function useIonActionSheet() {
2815
- const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1b);
2132
+ const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1c);
2816
2133
  const present = useCallback((buttonsOrOptions, header) => {
2817
2134
  if (Array.isArray(buttonsOrOptions)) {
2818
2135
  return controller.present({
@@ -2938,7 +2255,7 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
2938
2255
  * @returns Returns the present and dismiss methods in an array
2939
2256
  */
2940
2257
  function useIonModal(component, componentProps) {
2941
- const controller = useOverlay('IonModal', modalController, defineCustomElement$1c, component, componentProps);
2258
+ const controller = useOverlay('IonModal', modalController, defineCustomElement$1d, component, componentProps);
2942
2259
  const present = useCallback((options = {}) => {
2943
2260
  controller.present(options);
2944
2261
  }, [controller.present]);
@@ -2953,13 +2270,34 @@ function useIonModal(component, componentProps) {
2953
2270
  * @returns Returns the present and dismiss methods in an array
2954
2271
  */
2955
2272
  function useIonPopover(component, componentProps) {
2956
- const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1d, component, componentProps);
2273
+ const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1e, component, componentProps);
2957
2274
  const present = useCallback((options = {}) => {
2958
2275
  controller.present(options);
2959
2276
  }, [controller.present]);
2960
2277
  return [present, controller.dismiss];
2961
2278
  }
2962
2279
 
2280
+ /**
2281
+ * A hook for presenting/dismissing an IonPicker component
2282
+ * @returns Returns the present and dismiss methods in an array
2283
+ * @deprecated Use the inline ion-picker component instead.
2284
+ */
2285
+ function useIonPicker() {
2286
+ const controller = useController('IonPicker', pickerController, defineCustomElement$1b);
2287
+ const present = useCallback((columnsOrOptions, buttons) => {
2288
+ if (Array.isArray(columnsOrOptions)) {
2289
+ return controller.present({
2290
+ columns: columnsOrOptions,
2291
+ buttons: buttons ?? [{ text: 'Ok' }],
2292
+ });
2293
+ }
2294
+ else {
2295
+ return controller.present(columnsOrOptions);
2296
+ }
2297
+ }, [controller.present]);
2298
+ return [present, controller.dismiss];
2299
+ }
2300
+
2963
2301
  /**
2964
2302
  * A hook for presenting/dismissing an IonLoading component
2965
2303
  * @returns Returns the present and dismiss methods in an array
@@ -3007,16 +2345,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
3007
2345
  findLeavingViewItemByRouteInfo: () => undefined,
3008
2346
  findViewItemByRouteInfo: () => undefined,
3009
2347
  getChildrenToRender: () => undefined,
3010
- getViewItemsForOutlet: () => [],
3011
2348
  goBack: () => undefined,
3012
2349
  unMountViewItem: () => undefined,
3013
2350
  });
3014
2351
 
3015
2352
  class ViewLifeCycleManager extends React.Component {
3016
- ionLifeCycleContext = new DefaultIonLifeCycleContext();
3017
- _isMounted = false;
3018
2353
  constructor(props) {
3019
2354
  super(props);
2355
+ this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
2356
+ this._isMounted = false;
3020
2357
  this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
3021
2358
  if (!this.props.mount) {
3022
2359
  if (this._isMounted) {
@@ -3044,8 +2381,10 @@ class ViewLifeCycleManager extends React.Component {
3044
2381
 
3045
2382
  // const RESTRICT_SIZE = 100;
3046
2383
  class LocationHistory {
3047
- locationHistory = [];
3048
- tabHistory = {};
2384
+ constructor() {
2385
+ this.locationHistory = [];
2386
+ this.tabHistory = {};
2387
+ }
3049
2388
  add(routeInfo) {
3050
2389
  if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
3051
2390
  this._add(routeInfo);
@@ -3124,14 +2463,7 @@ class LocationHistory {
3124
2463
  _replace(routeInfo) {
3125
2464
  const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
3126
2465
  routeInfos && routeInfos.pop();
3127
- // Get the current route that's being replaced
3128
- const currentRoute = this.locationHistory[this.locationHistory.length - 1];
3129
- // Only pop from global history if we're replacing in the same outlet context.
3130
- // Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
3131
- const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
3132
- if (!isEnteringNestedOutlet) {
3133
- this.locationHistory.pop();
3134
- }
2466
+ this.locationHistory.pop();
3135
2467
  this._add(routeInfo);
3136
2468
  }
3137
2469
  _clear() {
@@ -3163,20 +2495,6 @@ class LocationHistory {
3163
2495
  }
3164
2496
  return undefined;
3165
2497
  }
3166
- /**
3167
- * Returns the most recent RouteInfo in global history (excluding the current
3168
- * entry) whose pathname matches the given value. Unlike findLastLocation,
3169
- * this search is tab-agnostic. Used by the multi-step back detection.
3170
- */
3171
- findLastLocationByPathname(pathname) {
3172
- for (let i = this.locationHistory.length - 2; i >= 0; i--) {
3173
- const ri = this.locationHistory[i];
3174
- if (ri && ri.pathname === pathname) {
3175
- return ri;
3176
- }
3177
- }
3178
- return undefined;
3179
- }
3180
2498
  findLastLocation(routeInfo) {
3181
2499
  const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
3182
2500
  if (routeInfos) {
@@ -3208,42 +2526,30 @@ class LocationHistory {
3208
2526
  canGoBack() {
3209
2527
  return this.locationHistory.length > 1;
3210
2528
  }
3211
- findTabForPathname(pathname) {
3212
- for (const tab of Object.keys(this.tabHistory)) {
3213
- const routeInfos = this.tabHistory[tab];
3214
- for (let i = routeInfos.length - 1; i >= 0; i--) {
3215
- if (routeInfos[i].pathname === pathname) {
3216
- return tab;
3217
- }
3218
- }
3219
- }
3220
- return undefined;
3221
- }
3222
2529
  }
3223
2530
 
3224
2531
  class NavManager extends React.PureComponent {
3225
- ionRouterContextValue = {
3226
- push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
3227
- this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
3228
- },
3229
- back: (animationBuilder) => {
3230
- this.goBack(undefined, animationBuilder);
3231
- },
3232
- navigateRoot: (pathname, animationBuilder) => {
3233
- this.props.onNavigateRoot(pathname, animationBuilder);
3234
- },
3235
- canGoBack: () => this.props.locationHistory.canGoBack(),
3236
- nativeBack: () => this.props.onNativeBack(),
3237
- routeInfo: this.props.routeInfo,
3238
- };
3239
2532
  constructor(props) {
3240
2533
  super(props);
2534
+ this.ionRouterContextValue = {
2535
+ push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
2536
+ this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
2537
+ },
2538
+ back: (animationBuilder) => {
2539
+ this.goBack(undefined, animationBuilder);
2540
+ },
2541
+ canGoBack: () => this.props.locationHistory.canGoBack(),
2542
+ nativeBack: () => this.props.onNativeBack(),
2543
+ routeInfo: this.props.routeInfo,
2544
+ };
3241
2545
  this.state = {
3242
2546
  goBack: this.goBack.bind(this),
3243
2547
  hasIonicRouter: () => true,
3244
2548
  navigate: this.navigate.bind(this),
2549
+ getIonRedirect: this.getIonRedirect.bind(this),
3245
2550
  getIonRoute: this.getIonRoute.bind(this),
3246
2551
  getStackManager: this.getStackManager.bind(this),
2552
+ getPageManager: this.getPageManager.bind(this),
3247
2553
  routeInfo: this.props.routeInfo,
3248
2554
  setCurrentTab: this.props.onSetCurrentTab,
3249
2555
  changeTab: this.props.onChangeTab,
@@ -3276,6 +2582,12 @@ class NavManager extends React.PureComponent {
3276
2582
  navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
3277
2583
  this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
3278
2584
  }
2585
+ getPageManager() {
2586
+ return PageManager;
2587
+ }
2588
+ getIonRedirect() {
2589
+ return this.props.ionRedirect;
2590
+ }
3279
2591
  getIonRoute() {
3280
2592
  return this.props.ionRoute;
3281
2593
  }
@@ -3288,8 +2600,8 @@ class NavManager extends React.PureComponent {
3288
2600
  }
3289
2601
 
3290
2602
  class ViewStacks {
3291
- viewStacks = {};
3292
2603
  constructor() {
2604
+ this.viewStacks = {};
3293
2605
  this.add = this.add.bind(this);
3294
2606
  this.clear = this.clear.bind(this);
3295
2607
  this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
@@ -3305,7 +2617,10 @@ class ViewStacks {
3305
2617
  }
3306
2618
  }
3307
2619
  clear(outletId) {
3308
- delete this.viewStacks[outletId];
2620
+ // Give some time for the leaving views to transition before removing
2621
+ return setTimeout(() => {
2622
+ delete this.viewStacks[outletId];
2623
+ }, 500);
3309
2624
  }
3310
2625
  getViewItemsForOutlet(outletId) {
3311
2626
  return this.viewStacks[outletId] || [];
@@ -3334,5 +2649,5 @@ class ViewStacks {
3334
2649
  }
3335
2650
  }
3336
2651
 
3337
- export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
2652
+ export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRedirect, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
3338
2653
  //# sourceMappingURL=index.js.map