@ionic/react 8.8.1-dev.11774384072.1e807ca8 → 8.8.1-dev.11775249812.1228163e

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 (37) hide show
  1. package/dist/index.js +860 -322
  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 +1 -1
  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 +2 -3
  13. package/dist/types/components/IonRouterContext.d.ts +0 -8
  14. package/dist/types/components/IonRouterOutlet.d.ts +2 -3
  15. package/dist/types/components/IonToast.d.ts +1 -1
  16. package/dist/types/components/components.d.ts +325 -0
  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 +2 -1
  20. package/dist/types/components/navigation/IonNav.d.ts +2 -1
  21. package/dist/types/components/navigation/IonTabBar.d.ts +1 -1
  22. package/dist/types/components/navigation/IonTabs.d.ts +1 -2
  23. package/dist/types/components/react-component-lib/createComponent.d.ts +1 -1
  24. package/dist/types/components/react-component-lib/utils/index.d.ts +1 -1
  25. package/dist/types/components/routing-proxies.d.ts +7 -7
  26. package/dist/types/components/utils/index.d.ts +2 -11
  27. package/dist/types/contexts/NavContext.d.ts +2 -0
  28. package/dist/types/lifecycle/IonLifeCycleHOC.d.ts +1 -3
  29. package/dist/types/routing/LocationHistory.d.ts +0 -7
  30. package/dist/types/routing/NavManager.d.ts +5 -1
  31. package/dist/types/routing/OutletPageManager.d.ts +1 -1
  32. package/dist/types/routing/PageManager.d.ts +1 -7
  33. package/dist/types/routing/RouteManagerContext.d.ts +1 -6
  34. package/dist/types/routing/ViewLifeCycleManager.d.ts +1 -0
  35. package/dist/types/routing/ViewStacks.d.ts +2 -2
  36. package/package.json +8 -8
  37. package/dist/types/components/proxies.d.ts +0 -73
package/dist/index.js CHANGED
@@ -2,79 +2,79 @@ 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
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 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';
5
+ import { IonAccordionGroup as IonAccordionGroup$1, defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
6
+ import { IonAccordion as IonAccordion$1, defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
7
+ import { IonAvatar as IonAvatar$1, defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
8
+ import { IonBackdrop as IonBackdrop$1, defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
9
+ import { IonBadge as IonBadge$1, defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
10
+ import { IonBreadcrumbs as IonBreadcrumbs$1, defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
11
+ import { IonButtons as IonButtons$1, defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
12
+ import { IonCardContent as IonCardContent$1, defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
13
+ import { IonCardHeader as IonCardHeader$1, defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
14
+ import { IonCardSubtitle as IonCardSubtitle$1, defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
15
+ import { IonCardTitle as IonCardTitle$1, defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
16
+ import { IonCheckbox as IonCheckbox$1, defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
17
+ import { IonChip as IonChip$1, defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
18
+ import { IonCol as IonCol$1, defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
19
+ import { IonContent as IonContent$1, defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
20
+ import { IonDatetimeButton as IonDatetimeButton$1, defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
21
+ import { IonDatetime as IonDatetime$1, defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
22
+ import { IonFabList as IonFabList$1, defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
23
+ import { IonFab as IonFab$1, defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
24
+ import { IonFooter as IonFooter$1, defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
25
+ import { IonGrid as IonGrid$1, defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
26
+ import { IonHeader as IonHeader$1, defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
27
+ import { IonImg as IonImg$1, defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
28
+ import { IonInfiniteScrollContent as IonInfiniteScrollContent$1, defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
29
+ import { IonInfiniteScroll as IonInfiniteScroll$1, defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
30
+ import { IonInputOtp as IonInputOtp$1, defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
31
+ import { IonInputPasswordToggle as IonInputPasswordToggle$1, defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
32
+ import { IonInput as IonInput$1, defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
33
+ import { IonItemDivider as IonItemDivider$1, defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
34
+ import { IonItemGroup as IonItemGroup$1, defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
35
+ import { IonItemOptions as IonItemOptions$1, defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
36
+ import { IonItemSliding as IonItemSliding$1, defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
37
+ import { IonLabel as IonLabel$1, defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
38
+ import { IonListHeader as IonListHeader$1, defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
39
+ import { IonList as IonList$1, defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
40
+ import { IonMenuButton as IonMenuButton$1, defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
41
+ import { IonMenuToggle as IonMenuToggle$1, defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
42
+ import { IonMenu as IonMenu$1, defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
43
+ import { IonNavLink as IonNavLink$1, defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
44
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';
45
+ import { IonNote as IonNote$1, defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
46
+ import { IonPickerColumnOption as IonPickerColumnOption$1, defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
47
+ import { IonPickerColumn as IonPickerColumn$1, defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
48
+ import { IonPicker as IonPicker$1, defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
49
+ import { IonProgressBar as IonProgressBar$1, defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
50
+ import { IonRadioGroup as IonRadioGroup$1, defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
51
+ import { IonRadio as IonRadio$1, defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
52
+ import { IonRange as IonRange$1, defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
53
+ import { IonRefresherContent as IonRefresherContent$1, defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
54
+ import { IonRefresher as IonRefresher$1, defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
55
+ import { IonReorderGroup as IonReorderGroup$1, defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
56
+ import { IonReorder as IonReorder$1, defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
57
+ import { IonRippleEffect as IonRippleEffect$1, defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
58
+ import { IonRow as IonRow$1, defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
59
+ import { IonSearchbar as IonSearchbar$1, defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
60
+ import { IonSegmentButton as IonSegmentButton$1, defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
61
+ import { IonSegmentContent as IonSegmentContent$1, defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
62
+ import { IonSegmentView as IonSegmentView$1, defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
63
+ import { IonSegment as IonSegment$1, defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
64
+ import { IonSelectModal as IonSelectModal$1, defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
65
+ import { IonSelectOption as IonSelectOption$1, defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
66
+ import { IonSelect as IonSelect$1, defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
67
+ import { IonSkeletonText as IonSkeletonText$1, defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
68
+ import { IonSpinner as IonSpinner$1, defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
69
+ import { IonSplitPane as IonSplitPane$1, defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
70
+ import { IonTab as IonTab$1, defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
71
+ import { IonText as IonText$1, defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
72
+ import { IonTextarea as IonTextarea$1, defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
73
+ import { IonThumbnail as IonThumbnail$1, defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
74
+ import { IonTitle as IonTitle$1, defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
75
+ import { IonToggle as IonToggle$1, defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
76
+ import { IonToolbar as IonToolbar$1, defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
77
+ import { createComponent } from '@stencil/react-output-target/runtime';
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';
@@ -89,6 +89,7 @@ import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/compo
89
89
  import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-action-sheet.js';
90
90
  import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-modal.js';
91
91
  import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-popover.js';
92
+ import ReactDOM, { createPortal } from 'react-dom';
92
93
  import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
93
94
  import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-back-button.js';
94
95
  import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-router-outlet.js';
@@ -380,7 +381,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
380
381
  };
381
382
 
382
383
  const NavContext = /*@__PURE__*/ React.createContext({
384
+ getIonRedirect: () => undefined,
383
385
  getIonRoute: () => undefined,
386
+ getPageManager: () => undefined,
384
387
  getStackManager: () => undefined,
385
388
  goBack: (route) => {
386
389
  if (typeof window !== 'undefined') {
@@ -412,6 +415,684 @@ const NavContext = /*@__PURE__*/ React.createContext({
412
415
  },
413
416
  });
414
417
 
418
+ const IonAccordion =
419
+ /*@__PURE__*/ createComponent({
420
+ tagName: 'ion-accordion',
421
+ elementClass: IonAccordion$1,
422
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
423
+ react: React,
424
+ events: {},
425
+ defineCustomElement: defineCustomElement$1,
426
+ });
427
+ const IonAccordionGroup =
428
+ /*@__PURE__*/ createComponent({
429
+ tagName: 'ion-accordion-group',
430
+ elementClass: IonAccordionGroup$1,
431
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
432
+ react: React,
433
+ events: { onIonChange: 'ionChange' },
434
+ defineCustomElement: defineCustomElement$2,
435
+ });
436
+ const IonAvatar = /*@__PURE__*/ createComponent({
437
+ tagName: 'ion-avatar',
438
+ elementClass: IonAvatar$1,
439
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
440
+ react: React,
441
+ events: {},
442
+ defineCustomElement: defineCustomElement$3,
443
+ });
444
+ const IonBackdrop = /*@__PURE__*/ createComponent({
445
+ tagName: 'ion-backdrop',
446
+ elementClass: IonBackdrop$1,
447
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
448
+ react: React,
449
+ events: { onIonBackdropTap: 'ionBackdropTap' },
450
+ defineCustomElement: defineCustomElement$4,
451
+ });
452
+ const IonBadge = /*@__PURE__*/ createComponent({
453
+ tagName: 'ion-badge',
454
+ elementClass: IonBadge$1,
455
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
456
+ react: React,
457
+ events: {},
458
+ defineCustomElement: defineCustomElement$5,
459
+ });
460
+ const IonBreadcrumbs =
461
+ /*@__PURE__*/ createComponent({
462
+ tagName: 'ion-breadcrumbs',
463
+ elementClass: IonBreadcrumbs$1,
464
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
465
+ react: React,
466
+ events: { onIonCollapsedClick: 'ionCollapsedClick' },
467
+ defineCustomElement: defineCustomElement$6,
468
+ });
469
+ const IonButtons = /*@__PURE__*/ createComponent({
470
+ tagName: 'ion-buttons',
471
+ elementClass: IonButtons$1,
472
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
473
+ react: React,
474
+ events: {},
475
+ defineCustomElement: defineCustomElement$7,
476
+ });
477
+ const IonCardContent =
478
+ /*@__PURE__*/ createComponent({
479
+ tagName: 'ion-card-content',
480
+ elementClass: IonCardContent$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$8,
485
+ });
486
+ const IonCardHeader =
487
+ /*@__PURE__*/ createComponent({
488
+ tagName: 'ion-card-header',
489
+ elementClass: IonCardHeader$1,
490
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
491
+ react: React,
492
+ events: {},
493
+ defineCustomElement: defineCustomElement$9,
494
+ });
495
+ const IonCardSubtitle =
496
+ /*@__PURE__*/ createComponent({
497
+ tagName: 'ion-card-subtitle',
498
+ elementClass: IonCardSubtitle$1,
499
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
500
+ react: React,
501
+ events: {},
502
+ defineCustomElement: defineCustomElement$a,
503
+ });
504
+ const IonCardTitle =
505
+ /*@__PURE__*/ createComponent({
506
+ tagName: 'ion-card-title',
507
+ elementClass: IonCardTitle$1,
508
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
509
+ react: React,
510
+ events: {},
511
+ defineCustomElement: defineCustomElement$b,
512
+ });
513
+ const IonCheckbox = /*@__PURE__*/ createComponent({
514
+ tagName: 'ion-checkbox',
515
+ elementClass: IonCheckbox$1,
516
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
517
+ react: React,
518
+ events: {
519
+ onIonChange: 'ionChange',
520
+ onIonFocus: 'ionFocus',
521
+ onIonBlur: 'ionBlur',
522
+ },
523
+ defineCustomElement: defineCustomElement$c,
524
+ });
525
+ const IonChip = /*@__PURE__*/ createComponent({
526
+ tagName: 'ion-chip',
527
+ elementClass: IonChip$1,
528
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
529
+ react: React,
530
+ events: {},
531
+ defineCustomElement: defineCustomElement$d,
532
+ });
533
+ const IonCol = /*@__PURE__*/ createComponent({
534
+ tagName: 'ion-col',
535
+ elementClass: IonCol$1,
536
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
537
+ react: React,
538
+ events: {},
539
+ defineCustomElement: defineCustomElement$e,
540
+ });
541
+ const IonContent = /*@__PURE__*/ createComponent({
542
+ tagName: 'ion-content',
543
+ elementClass: IonContent$1,
544
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
545
+ react: React,
546
+ events: {
547
+ onIonScrollStart: 'ionScrollStart',
548
+ onIonScroll: 'ionScroll',
549
+ onIonScrollEnd: 'ionScrollEnd',
550
+ },
551
+ defineCustomElement: defineCustomElement$f,
552
+ });
553
+ const IonDatetime = /*@__PURE__*/ createComponent({
554
+ tagName: 'ion-datetime',
555
+ elementClass: IonDatetime$1,
556
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
557
+ react: React,
558
+ events: {
559
+ onIonCancel: 'ionCancel',
560
+ onIonChange: 'ionChange',
561
+ onIonFocus: 'ionFocus',
562
+ onIonBlur: 'ionBlur',
563
+ },
564
+ defineCustomElement: defineCustomElement$g,
565
+ });
566
+ const IonDatetimeButton =
567
+ /*@__PURE__*/ createComponent({
568
+ tagName: 'ion-datetime-button',
569
+ elementClass: IonDatetimeButton$1,
570
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
571
+ react: React,
572
+ events: {},
573
+ defineCustomElement: defineCustomElement$h,
574
+ });
575
+ const IonFab = /*@__PURE__*/ createComponent({
576
+ tagName: 'ion-fab',
577
+ elementClass: IonFab$1,
578
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
579
+ react: React,
580
+ events: {},
581
+ defineCustomElement: defineCustomElement$i,
582
+ });
583
+ const IonFabList = /*@__PURE__*/ createComponent({
584
+ tagName: 'ion-fab-list',
585
+ elementClass: IonFabList$1,
586
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
587
+ react: React,
588
+ events: {},
589
+ defineCustomElement: defineCustomElement$j,
590
+ });
591
+ const IonFooter = /*@__PURE__*/ createComponent({
592
+ tagName: 'ion-footer',
593
+ elementClass: IonFooter$1,
594
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
595
+ react: React,
596
+ events: {},
597
+ defineCustomElement: defineCustomElement$k,
598
+ });
599
+ const IonGrid = /*@__PURE__*/ createComponent({
600
+ tagName: 'ion-grid',
601
+ elementClass: IonGrid$1,
602
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
603
+ react: React,
604
+ events: {},
605
+ defineCustomElement: defineCustomElement$l,
606
+ });
607
+ const IonHeader = /*@__PURE__*/ createComponent({
608
+ tagName: 'ion-header',
609
+ elementClass: IonHeader$1,
610
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
611
+ react: React,
612
+ events: {},
613
+ defineCustomElement: defineCustomElement$m,
614
+ });
615
+ const IonImg = /*@__PURE__*/ createComponent({
616
+ tagName: 'ion-img',
617
+ elementClass: IonImg$1,
618
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
619
+ react: React,
620
+ events: {
621
+ onIonImgWillLoad: 'ionImgWillLoad',
622
+ onIonImgDidLoad: 'ionImgDidLoad',
623
+ onIonError: 'ionError',
624
+ },
625
+ defineCustomElement: defineCustomElement$n,
626
+ });
627
+ const IonInfiniteScroll =
628
+ /*@__PURE__*/ createComponent({
629
+ tagName: 'ion-infinite-scroll',
630
+ elementClass: IonInfiniteScroll$1,
631
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
632
+ react: React,
633
+ events: { onIonInfinite: 'ionInfinite' },
634
+ defineCustomElement: defineCustomElement$o,
635
+ });
636
+ const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
637
+ tagName: 'ion-infinite-scroll-content',
638
+ elementClass: IonInfiniteScrollContent$1,
639
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
640
+ react: React,
641
+ events: {},
642
+ defineCustomElement: defineCustomElement$p,
643
+ });
644
+ const IonInput = /*@__PURE__*/ createComponent({
645
+ tagName: 'ion-input',
646
+ elementClass: IonInput$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
+ onIonBlur: 'ionBlur',
653
+ onIonFocus: 'ionFocus',
654
+ },
655
+ defineCustomElement: defineCustomElement$q,
656
+ });
657
+ const IonInputOtp = /*@__PURE__*/ createComponent({
658
+ tagName: 'ion-input-otp',
659
+ elementClass: IonInputOtp$1,
660
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
661
+ react: React,
662
+ events: {
663
+ onIonInput: 'ionInput',
664
+ onIonChange: 'ionChange',
665
+ onIonComplete: 'ionComplete',
666
+ onIonBlur: 'ionBlur',
667
+ onIonFocus: 'ionFocus',
668
+ },
669
+ defineCustomElement: defineCustomElement$r,
670
+ });
671
+ const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
672
+ tagName: 'ion-input-password-toggle',
673
+ elementClass: IonInputPasswordToggle$1,
674
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
675
+ react: React,
676
+ events: {},
677
+ defineCustomElement: defineCustomElement$s,
678
+ });
679
+ const IonItemDivider =
680
+ /*@__PURE__*/ createComponent({
681
+ tagName: 'ion-item-divider',
682
+ elementClass: IonItemDivider$1,
683
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
684
+ react: React,
685
+ events: {},
686
+ defineCustomElement: defineCustomElement$t,
687
+ });
688
+ const IonItemGroup =
689
+ /*@__PURE__*/ createComponent({
690
+ tagName: 'ion-item-group',
691
+ elementClass: IonItemGroup$1,
692
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
693
+ react: React,
694
+ events: {},
695
+ defineCustomElement: defineCustomElement$u,
696
+ });
697
+ const IonItemOptions =
698
+ /*@__PURE__*/ createComponent({
699
+ tagName: 'ion-item-options',
700
+ elementClass: IonItemOptions$1,
701
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
702
+ react: React,
703
+ events: { onIonSwipe: 'ionSwipe' },
704
+ defineCustomElement: defineCustomElement$v,
705
+ });
706
+ const IonItemSliding =
707
+ /*@__PURE__*/ createComponent({
708
+ tagName: 'ion-item-sliding',
709
+ elementClass: IonItemSliding$1,
710
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
711
+ react: React,
712
+ events: { onIonDrag: 'ionDrag' },
713
+ defineCustomElement: defineCustomElement$w,
714
+ });
715
+ const IonLabel = /*@__PURE__*/ createComponent({
716
+ tagName: 'ion-label',
717
+ elementClass: IonLabel$1,
718
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
719
+ react: React,
720
+ events: {},
721
+ defineCustomElement: defineCustomElement$x,
722
+ });
723
+ const IonList = /*@__PURE__*/ createComponent({
724
+ tagName: 'ion-list',
725
+ elementClass: IonList$1,
726
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
727
+ react: React,
728
+ events: {},
729
+ defineCustomElement: defineCustomElement$y,
730
+ });
731
+ const IonListHeader =
732
+ /*@__PURE__*/ createComponent({
733
+ tagName: 'ion-list-header',
734
+ elementClass: IonListHeader$1,
735
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
736
+ react: React,
737
+ events: {},
738
+ defineCustomElement: defineCustomElement$z,
739
+ });
740
+ const IonMenu = /*@__PURE__*/ createComponent({
741
+ tagName: 'ion-menu',
742
+ elementClass: IonMenu$1,
743
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
744
+ react: React,
745
+ events: {
746
+ onIonWillOpen: 'ionWillOpen',
747
+ onIonWillClose: 'ionWillClose',
748
+ onIonDidOpen: 'ionDidOpen',
749
+ onIonDidClose: 'ionDidClose',
750
+ },
751
+ defineCustomElement: defineCustomElement$A,
752
+ });
753
+ const IonMenuButton =
754
+ /*@__PURE__*/ createComponent({
755
+ tagName: 'ion-menu-button',
756
+ elementClass: IonMenuButton$1,
757
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
758
+ react: React,
759
+ events: {},
760
+ defineCustomElement: defineCustomElement$B,
761
+ });
762
+ const IonMenuToggle =
763
+ /*@__PURE__*/ createComponent({
764
+ tagName: 'ion-menu-toggle',
765
+ elementClass: IonMenuToggle$1,
766
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
767
+ react: React,
768
+ events: {},
769
+ defineCustomElement: defineCustomElement$C,
770
+ });
771
+ const IonNavLink = /*@__PURE__*/ createComponent({
772
+ tagName: 'ion-nav-link',
773
+ elementClass: IonNavLink$1,
774
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
775
+ react: React,
776
+ events: {},
777
+ defineCustomElement: defineCustomElement$D,
778
+ });
779
+ const IonNote = /*@__PURE__*/ createComponent({
780
+ tagName: 'ion-note',
781
+ elementClass: IonNote$1,
782
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
783
+ react: React,
784
+ events: {},
785
+ defineCustomElement: defineCustomElement$E,
786
+ });
787
+ const IonPicker = /*@__PURE__*/ createComponent({
788
+ tagName: 'ion-picker',
789
+ elementClass: IonPicker$1,
790
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
791
+ react: React,
792
+ events: {},
793
+ defineCustomElement: defineCustomElement$F,
794
+ });
795
+ const IonPickerColumn =
796
+ /*@__PURE__*/ createComponent({
797
+ tagName: 'ion-picker-column',
798
+ elementClass: IonPickerColumn$1,
799
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
800
+ react: React,
801
+ events: { onIonChange: 'ionChange' },
802
+ defineCustomElement: defineCustomElement$G,
803
+ });
804
+ const IonPickerColumnOption =
805
+ /*@__PURE__*/ createComponent({
806
+ tagName: 'ion-picker-column-option',
807
+ elementClass: IonPickerColumnOption$1,
808
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
809
+ react: React,
810
+ events: {},
811
+ defineCustomElement: defineCustomElement$H,
812
+ });
813
+ const IonProgressBar =
814
+ /*@__PURE__*/ createComponent({
815
+ tagName: 'ion-progress-bar',
816
+ elementClass: IonProgressBar$1,
817
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
818
+ react: React,
819
+ events: {},
820
+ defineCustomElement: defineCustomElement$I,
821
+ });
822
+ const IonRadio = /*@__PURE__*/ createComponent({
823
+ tagName: 'ion-radio',
824
+ elementClass: IonRadio$1,
825
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
826
+ react: React,
827
+ events: {
828
+ onIonFocus: 'ionFocus',
829
+ onIonBlur: 'ionBlur',
830
+ },
831
+ defineCustomElement: defineCustomElement$J,
832
+ });
833
+ const IonRadioGroup =
834
+ /*@__PURE__*/ createComponent({
835
+ tagName: 'ion-radio-group',
836
+ elementClass: IonRadioGroup$1,
837
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
838
+ react: React,
839
+ events: { onIonChange: 'ionChange' },
840
+ defineCustomElement: defineCustomElement$K,
841
+ });
842
+ const IonRange = /*@__PURE__*/ createComponent({
843
+ tagName: 'ion-range',
844
+ elementClass: IonRange$1,
845
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
846
+ react: React,
847
+ events: {
848
+ onIonChange: 'ionChange',
849
+ onIonInput: 'ionInput',
850
+ onIonFocus: 'ionFocus',
851
+ onIonBlur: 'ionBlur',
852
+ onIonKnobMoveStart: 'ionKnobMoveStart',
853
+ onIonKnobMoveEnd: 'ionKnobMoveEnd',
854
+ },
855
+ defineCustomElement: defineCustomElement$L,
856
+ });
857
+ const IonRefresher =
858
+ /*@__PURE__*/ createComponent({
859
+ tagName: 'ion-refresher',
860
+ elementClass: IonRefresher$1,
861
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
862
+ react: React,
863
+ events: {
864
+ onIonRefresh: 'ionRefresh',
865
+ onIonPull: 'ionPull',
866
+ onIonStart: 'ionStart',
867
+ onIonPullStart: 'ionPullStart',
868
+ onIonPullEnd: 'ionPullEnd',
869
+ },
870
+ defineCustomElement: defineCustomElement$M,
871
+ });
872
+ const IonRefresherContent =
873
+ /*@__PURE__*/ createComponent({
874
+ tagName: 'ion-refresher-content',
875
+ elementClass: IonRefresherContent$1,
876
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
877
+ react: React,
878
+ events: {},
879
+ defineCustomElement: defineCustomElement$N,
880
+ });
881
+ const IonReorder = /*@__PURE__*/ createComponent({
882
+ tagName: 'ion-reorder',
883
+ elementClass: IonReorder$1,
884
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
885
+ react: React,
886
+ events: {},
887
+ defineCustomElement: defineCustomElement$O,
888
+ });
889
+ const IonReorderGroup =
890
+ /*@__PURE__*/ createComponent({
891
+ tagName: 'ion-reorder-group',
892
+ elementClass: IonReorderGroup$1,
893
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
894
+ react: React,
895
+ events: {
896
+ onIonItemReorder: 'ionItemReorder',
897
+ onIonReorderStart: 'ionReorderStart',
898
+ onIonReorderMove: 'ionReorderMove',
899
+ onIonReorderEnd: 'ionReorderEnd',
900
+ },
901
+ defineCustomElement: defineCustomElement$P,
902
+ });
903
+ const IonRippleEffect =
904
+ /*@__PURE__*/ createComponent({
905
+ tagName: 'ion-ripple-effect',
906
+ elementClass: IonRippleEffect$1,
907
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
908
+ react: React,
909
+ events: {},
910
+ defineCustomElement: defineCustomElement$Q,
911
+ });
912
+ const IonRow = /*@__PURE__*/ createComponent({
913
+ tagName: 'ion-row',
914
+ elementClass: IonRow$1,
915
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
916
+ react: React,
917
+ events: {},
918
+ defineCustomElement: defineCustomElement$R,
919
+ });
920
+ const IonSearchbar =
921
+ /*@__PURE__*/ createComponent({
922
+ tagName: 'ion-searchbar',
923
+ elementClass: IonSearchbar$1,
924
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
925
+ react: React,
926
+ events: {
927
+ onIonInput: 'ionInput',
928
+ onIonChange: 'ionChange',
929
+ onIonCancel: 'ionCancel',
930
+ onIonClear: 'ionClear',
931
+ onIonBlur: 'ionBlur',
932
+ onIonFocus: 'ionFocus',
933
+ },
934
+ defineCustomElement: defineCustomElement$S,
935
+ });
936
+ const IonSegment = /*@__PURE__*/ createComponent({
937
+ tagName: 'ion-segment',
938
+ elementClass: IonSegment$1,
939
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
940
+ react: React,
941
+ events: { onIonChange: 'ionChange' },
942
+ defineCustomElement: defineCustomElement$T,
943
+ });
944
+ const IonSegmentButton =
945
+ /*@__PURE__*/ createComponent({
946
+ tagName: 'ion-segment-button',
947
+ elementClass: IonSegmentButton$1,
948
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
949
+ react: React,
950
+ events: {},
951
+ defineCustomElement: defineCustomElement$U,
952
+ });
953
+ const IonSegmentContent =
954
+ /*@__PURE__*/ createComponent({
955
+ tagName: 'ion-segment-content',
956
+ elementClass: IonSegmentContent$1,
957
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
958
+ react: React,
959
+ events: {},
960
+ defineCustomElement: defineCustomElement$V,
961
+ });
962
+ const IonSegmentView =
963
+ /*@__PURE__*/ createComponent({
964
+ tagName: 'ion-segment-view',
965
+ elementClass: IonSegmentView$1,
966
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
967
+ react: React,
968
+ events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
969
+ defineCustomElement: defineCustomElement$W,
970
+ });
971
+ const IonSelect = /*@__PURE__*/ createComponent({
972
+ tagName: 'ion-select',
973
+ elementClass: IonSelect$1,
974
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
975
+ react: React,
976
+ events: {
977
+ onIonChange: 'ionChange',
978
+ onIonCancel: 'ionCancel',
979
+ onIonDismiss: 'ionDismiss',
980
+ onIonFocus: 'ionFocus',
981
+ onIonBlur: 'ionBlur',
982
+ },
983
+ defineCustomElement: defineCustomElement$X,
984
+ });
985
+ const IonSelectModal =
986
+ /*@__PURE__*/ createComponent({
987
+ tagName: 'ion-select-modal',
988
+ elementClass: IonSelectModal$1,
989
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
990
+ react: React,
991
+ events: {},
992
+ defineCustomElement: defineCustomElement$Y,
993
+ });
994
+ const IonSelectOption =
995
+ /*@__PURE__*/ createComponent({
996
+ tagName: 'ion-select-option',
997
+ elementClass: IonSelectOption$1,
998
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
999
+ react: React,
1000
+ events: {},
1001
+ defineCustomElement: defineCustomElement$Z,
1002
+ });
1003
+ const IonSkeletonText =
1004
+ /*@__PURE__*/ createComponent({
1005
+ tagName: 'ion-skeleton-text',
1006
+ elementClass: IonSkeletonText$1,
1007
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1008
+ react: React,
1009
+ events: {},
1010
+ defineCustomElement: defineCustomElement$_,
1011
+ });
1012
+ const IonSpinner = /*@__PURE__*/ createComponent({
1013
+ tagName: 'ion-spinner',
1014
+ elementClass: IonSpinner$1,
1015
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1016
+ react: React,
1017
+ events: {},
1018
+ defineCustomElement: defineCustomElement$$,
1019
+ });
1020
+ const IonSplitPane =
1021
+ /*@__PURE__*/ createComponent({
1022
+ tagName: 'ion-split-pane',
1023
+ elementClass: IonSplitPane$1,
1024
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1025
+ react: React,
1026
+ events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
1027
+ defineCustomElement: defineCustomElement$10,
1028
+ });
1029
+ const IonTab = /*@__PURE__*/ createComponent({
1030
+ tagName: 'ion-tab',
1031
+ elementClass: IonTab$1,
1032
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1033
+ react: React,
1034
+ events: {},
1035
+ defineCustomElement: defineCustomElement$11,
1036
+ });
1037
+ const IonText = /*@__PURE__*/ createComponent({
1038
+ tagName: 'ion-text',
1039
+ elementClass: IonText$1,
1040
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1041
+ react: React,
1042
+ events: {},
1043
+ defineCustomElement: defineCustomElement$12,
1044
+ });
1045
+ const IonTextarea = /*@__PURE__*/ createComponent({
1046
+ tagName: 'ion-textarea',
1047
+ elementClass: IonTextarea$1,
1048
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1049
+ react: React,
1050
+ events: {
1051
+ onIonChange: 'ionChange',
1052
+ onIonInput: 'ionInput',
1053
+ onIonBlur: 'ionBlur',
1054
+ onIonFocus: 'ionFocus',
1055
+ },
1056
+ defineCustomElement: defineCustomElement$13,
1057
+ });
1058
+ const IonThumbnail =
1059
+ /*@__PURE__*/ createComponent({
1060
+ tagName: 'ion-thumbnail',
1061
+ elementClass: IonThumbnail$1,
1062
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1063
+ react: React,
1064
+ events: {},
1065
+ defineCustomElement: defineCustomElement$14,
1066
+ });
1067
+ const IonTitle = /*@__PURE__*/ createComponent({
1068
+ tagName: 'ion-title',
1069
+ elementClass: IonTitle$1,
1070
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1071
+ react: React,
1072
+ events: {},
1073
+ defineCustomElement: defineCustomElement$15,
1074
+ });
1075
+ const IonToggle = /*@__PURE__*/ createComponent({
1076
+ tagName: 'ion-toggle',
1077
+ elementClass: IonToggle$1,
1078
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1079
+ react: React,
1080
+ events: {
1081
+ onIonChange: 'ionChange',
1082
+ onIonFocus: 'ionFocus',
1083
+ onIonBlur: 'ionBlur',
1084
+ },
1085
+ defineCustomElement: defineCustomElement$16,
1086
+ });
1087
+ const IonToolbar = /*@__PURE__*/ createComponent({
1088
+ tagName: 'ion-toolbar',
1089
+ elementClass: IonToolbar$1,
1090
+ // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
1091
+ react: React,
1092
+ events: {},
1093
+ defineCustomElement: defineCustomElement$17,
1094
+ });
1095
+
415
1096
  const dashToPascalCase = (str) => str
416
1097
  .toLowerCase()
417
1098
  .split('-')
@@ -555,147 +1236,6 @@ const defineCustomElement = (tagName, customElement) => {
555
1236
  }
556
1237
  };
557
1238
 
558
- const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
559
- if (defineCustomElement !== undefined) {
560
- defineCustomElement();
561
- }
562
- const displayName = dashToPascalCase(tagName);
563
- const ReactComponent = class extends React.Component {
564
- constructor(props) {
565
- super(props);
566
- this.setComponentElRef = (element) => {
567
- this.componentEl = element;
568
- };
569
- }
570
- componentDidMount() {
571
- this.componentDidUpdate(this.props);
572
- }
573
- componentDidUpdate(prevProps) {
574
- attachProps(this.componentEl, this.props, prevProps);
575
- }
576
- render() {
577
- const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
578
- let propsToPass = Object.keys(cProps).reduce((acc, name) => {
579
- const value = cProps[name];
580
- if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
581
- const eventName = name.substring(2).toLowerCase();
582
- if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
583
- acc[name] = value;
584
- }
585
- }
586
- else {
587
- // we should only render strings, booleans, and numbers as attrs in html.
588
- // objects, functions, arrays etc get synced via properties on mount.
589
- const type = typeof value;
590
- if (type === 'string' || type === 'boolean' || type === 'number') {
591
- acc[camelToDashCase(name)] = value;
592
- }
593
- }
594
- return acc;
595
- }, {});
596
- if (manipulatePropsFunction) {
597
- propsToPass = manipulatePropsFunction(this.props, propsToPass);
598
- }
599
- const newProps = {
600
- ...propsToPass,
601
- ref: mergeRefs(forwardedRef, this.setComponentElRef),
602
- style,
603
- };
604
- /**
605
- * We use createElement here instead of
606
- * React.createElement to work around a
607
- * bug in Vite (https://github.com/vitejs/vite/issues/6104).
608
- * React.createElement causes all elements to be rendered
609
- * as <tagname> instead of the actual Web Component.
610
- */
611
- return createElement(tagName, newProps, children);
612
- }
613
- static get displayName() {
614
- return displayName;
615
- }
616
- };
617
- // If context was passed to createReactComponent then conditionally add it to the Component Class
618
- if (ReactComponentContext) {
619
- ReactComponent.contextType = ReactComponentContext;
620
- }
621
- return createForwardRef$1(ReactComponent, displayName);
622
- };
623
-
624
- /* eslint-disable */
625
- /* tslint:disable */
626
- /* auto-generated react proxies */
627
- const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
628
- const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
629
- const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
630
- const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
631
- const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
632
- const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
633
- const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
634
- const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
635
- const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
636
- const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
637
- const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
638
- const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
639
- const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
640
- const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
641
- const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
642
- const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
643
- const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
644
- const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$i);
645
- const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$j);
646
- const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$k);
647
- const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$l);
648
- const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$m);
649
- const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$n);
650
- const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$o);
651
- const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$p);
652
- const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$q);
653
- const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$r);
654
- const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$s);
655
- const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$t);
656
- const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$u);
657
- const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$v);
658
- const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$w);
659
- const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$x);
660
- const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$y);
661
- const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$z);
662
- const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$A);
663
- const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$B);
664
- const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$C);
665
- const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$D);
666
- const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$E);
667
- const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$F);
668
- const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$G);
669
- const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$H);
670
- const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$I);
671
- const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$J);
672
- const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$K);
673
- const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$L);
674
- const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$M);
675
- const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$N);
676
- const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$O);
677
- const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$P);
678
- const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$Q);
679
- const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$R);
680
- const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$S);
681
- const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$T);
682
- const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$U);
683
- const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$V);
684
- const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$W);
685
- const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$X);
686
- const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$Y);
687
- const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$Z);
688
- const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$_);
689
- const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$$);
690
- const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$10);
691
- const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$11);
692
- const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$12);
693
- const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$13);
694
- const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$14);
695
- const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$15);
696
- const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$16);
697
- const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$17);
698
-
699
1239
  const createForwardRef = (ReactComponent, // TODO(FW-2959): type
700
1240
  displayName) => {
701
1241
  const forwardRef = (props, ref) => {
@@ -729,11 +1269,6 @@ const createRoutingComponent = (tagName, customElement) => {
729
1269
  this.handleClick = (e) => {
730
1270
  const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
731
1271
  if (routerLink !== undefined) {
732
- // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
733
- // without triggering SPA navigation on the current page.
734
- if (e.metaKey || e.ctrlKey || e.shiftKey) {
735
- return;
736
- }
737
1272
  e.preventDefault();
738
1273
  this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
739
1274
  }
@@ -1095,6 +1630,73 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
1095
1630
  }) }));
1096
1631
  };
1097
1632
 
1633
+ const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
1634
+ if (defineCustomElement !== undefined) {
1635
+ defineCustomElement();
1636
+ }
1637
+ const displayName = dashToPascalCase(tagName);
1638
+ const ReactComponent = class extends React.Component {
1639
+ constructor(props) {
1640
+ super(props);
1641
+ this.setComponentElRef = (element) => {
1642
+ this.componentEl = element;
1643
+ };
1644
+ }
1645
+ componentDidMount() {
1646
+ this.componentDidUpdate(this.props);
1647
+ }
1648
+ componentDidUpdate(prevProps) {
1649
+ attachProps(this.componentEl, this.props, prevProps);
1650
+ }
1651
+ render() {
1652
+ const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
1653
+ let propsToPass = Object.keys(cProps).reduce((acc, name) => {
1654
+ const value = cProps[name];
1655
+ if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
1656
+ const eventName = name.substring(2).toLowerCase();
1657
+ if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
1658
+ acc[name] = value;
1659
+ }
1660
+ }
1661
+ else {
1662
+ // we should only render strings, booleans, and numbers as attrs in html.
1663
+ // objects, functions, arrays etc get synced via properties on mount.
1664
+ const type = typeof value;
1665
+ if (type === 'string' || type === 'boolean' || type === 'number') {
1666
+ acc[camelToDashCase(name)] = value;
1667
+ }
1668
+ }
1669
+ return acc;
1670
+ }, {});
1671
+ if (manipulatePropsFunction) {
1672
+ propsToPass = manipulatePropsFunction(this.props, propsToPass);
1673
+ }
1674
+ const newProps = {
1675
+ ...propsToPass,
1676
+ ref: mergeRefs(forwardedRef, this.setComponentElRef),
1677
+ style,
1678
+ children
1679
+ };
1680
+ /**
1681
+ * We use createElement here instead of
1682
+ * React.createElement to work around a
1683
+ * bug in Vite (https://github.com/vitejs/vite/issues/6104).
1684
+ * React.createElement causes all elements to be rendered
1685
+ * as <tagname> instead of the actual Web Component.
1686
+ */
1687
+ return createElement(tagName, newProps, children);
1688
+ }
1689
+ static get displayName() {
1690
+ return displayName;
1691
+ }
1692
+ };
1693
+ // If context was passed to createReactComponent then conditionally add it to the Component Class
1694
+ if (ReactComponentContext) {
1695
+ ReactComponent.contextType = ReactComponentContext;
1696
+ }
1697
+ return createForwardRef$1(ReactComponent, displayName);
1698
+ };
1699
+
1098
1700
  const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1f);
1099
1701
  const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1g);
1100
1702
  const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1h);
@@ -1140,18 +1742,7 @@ class PageManager extends React.PureComponent {
1140
1742
  super(props);
1141
1743
  this.ionPageElementRef = React.createRef();
1142
1744
  // React refs must be stable (not created inline).
1143
- // Wrap merged refs to add ion-page-invisible synchronously when element is created
1144
- const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
1145
- this.stableMergedRefs = (node) => {
1146
- if (node && !node.classList.contains('ion-page-invisible') && !node.classList.contains('ion-page-hidden')) {
1147
- // Add ion-page-invisible synchronously before first paint (if in an outlet)
1148
- // This prevents the flash that occurs when componentDidMount runs after paint
1149
- if (this.context?.isInOutlet?.()) {
1150
- node.classList.add('ion-page-invisible');
1151
- }
1152
- }
1153
- baseMergedRefs(node);
1154
- };
1745
+ this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
1155
1746
  /**
1156
1747
  * This binds the scope of the following methods to the class scope.
1157
1748
  * The `.bind` method returns a new function, so we need to assign it
@@ -1163,38 +1754,11 @@ class PageManager extends React.PureComponent {
1163
1754
  this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
1164
1755
  this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
1165
1756
  }
1166
- parseClasses(className) {
1167
- if (!className)
1168
- return new Set();
1169
- return new Set(className.split(/\s+/).filter(Boolean));
1170
- }
1171
- /**
1172
- * Updates classList by diffing old/new className props.
1173
- * Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
1174
- */
1175
- updateUserClasses(oldClassName, newClassName) {
1176
- if (!this.ionPageElementRef.current)
1177
- return;
1178
- const oldClasses = this.parseClasses(oldClassName);
1179
- const newClasses = this.parseClasses(newClassName);
1180
- oldClasses.forEach((cls) => {
1181
- if (!newClasses.has(cls)) {
1182
- this.ionPageElementRef.current.classList.remove(cls);
1183
- }
1184
- });
1185
- newClasses.forEach((cls) => {
1186
- if (!oldClasses.has(cls)) {
1187
- this.ionPageElementRef.current.classList.add(cls);
1188
- }
1189
- });
1190
- }
1191
1757
  componentDidMount() {
1192
1758
  if (this.ionPageElementRef.current) {
1193
- // Add user classes via DOM manipulation to preserve framework-added classes.
1194
- // We only set "ion-page" in JSX; user classes are added here.
1195
- // Note: ion-page-invisible is added in the ref callback (stableMergedRefs) to prevent flash.
1196
- // The ref callback runs synchronously when the element is created, before the browser paints.
1197
- this.updateUserClasses(undefined, this.props.className);
1759
+ if (this.context.isInOutlet()) {
1760
+ this.ionPageElementRef.current.classList.add('ion-page-invisible');
1761
+ }
1198
1762
  this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
1199
1763
  this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
1200
1764
  this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
@@ -1202,11 +1766,6 @@ class PageManager extends React.PureComponent {
1202
1766
  this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
1203
1767
  }
1204
1768
  }
1205
- componentDidUpdate(prevProps) {
1206
- if (prevProps.className !== this.props.className) {
1207
- this.updateUserClasses(prevProps.className, this.props.className);
1208
- }
1209
- }
1210
1769
  componentWillUnmount() {
1211
1770
  if (this.ionPageElementRef.current) {
1212
1771
  this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
@@ -1236,11 +1795,9 @@ class PageManager extends React.PureComponent {
1236
1795
  render() {
1237
1796
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
1238
1797
  const { className, children, routeInfo, forwardedRef, ...props } = this.props;
1239
- // Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
1240
- // to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
1241
1798
  return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
1242
1799
  this.ionLifeCycleContext = context;
1243
- return (jsx("div", { className: "ion-page", ref: this.stableMergedRefs, ...props, children: children }));
1800
+ return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
1244
1801
  } }));
1245
1802
  }
1246
1803
  static get contextType() {
@@ -1379,10 +1936,10 @@ class OutletPageManager extends React.Component {
1379
1936
  this.ionLifeCycleContext.ionViewDidLeave();
1380
1937
  }
1381
1938
  render() {
1382
- const { StackManager, children, routeInfo, id, ...props } = this.props;
1939
+ const { StackManager, children, routeInfo, ...props } = this.props;
1383
1940
  return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
1384
1941
  this.ionLifeCycleContext = context;
1385
- return (jsx(StackManager, { id: id, routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { id: id, setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
1942
+ return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
1386
1943
  } }));
1387
1944
  }
1388
1945
  static get contextType() {
@@ -1393,13 +1950,11 @@ class OutletPageManager extends React.Component {
1393
1950
  class IonRouterOutletContainer extends React.Component {
1394
1951
  constructor(props) {
1395
1952
  super(props);
1396
- this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
1397
1953
  }
1398
1954
  render() {
1399
1955
  const StackManager = this.context.getStackManager();
1400
1956
  const { children, forwardedRef, ...props } = this.props;
1401
- const outletId = props.id ?? this.outletId;
1402
- 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 }));
1957
+ 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 }));
1403
1958
  }
1404
1959
  static get contextType() {
1405
1960
  return NavContext;
@@ -1596,9 +2151,7 @@ const matchesTab = (pathname, href) => {
1596
2151
  if (href === undefined) {
1597
2152
  return false;
1598
2153
  }
1599
- // Strip query string before comparing — href may contain search params (e.g., "/tabs/home?foo=bar")
1600
- const hrefPathname = href.split('?')[0];
1601
- const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
2154
+ const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
1602
2155
  return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
1603
2156
  };
1604
2157
  class IonTabBarUnwrapped extends React.PureComponent {
@@ -1690,7 +2243,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
1690
2243
  const prevHref = state.tabs[prevActiveTab].currentHref;
1691
2244
  const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
1692
2245
  if (activeTab !== prevActiveTab ||
1693
- prevHref !== (props.routeInfo?.pathname || '') + (props.routeInfo?.search || '') ||
2246
+ prevHref !== props.routeInfo?.pathname ||
1694
2247
  prevRouteOptions !== props.routeInfo?.routeOptions) {
1695
2248
  tabs[activeTab] = {
1696
2249
  originalHref: tabs[activeTab].originalHref,
@@ -1757,7 +2310,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
1757
2310
  return (child) => {
1758
2311
  if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
1759
2312
  const href = child.props.tab === activeTab
1760
- ? (this.props.routeInfo?.pathname || '') + (this.props.routeInfo?.search || '')
2313
+ ? this.props.routeInfo?.pathname
1761
2314
  : this.state.tabs[child.props.tab].currentHref;
1762
2315
  const routeOptions = child.props.tab === activeTab
1763
2316
  ? this.props.routeInfo?.routeOptions
@@ -1882,6 +2435,20 @@ class IonRoute extends React.PureComponent {
1882
2435
  }
1883
2436
  }
1884
2437
 
2438
+ class IonRedirect extends React.PureComponent {
2439
+ render() {
2440
+ const IonRedirectInner = this.context.getIonRedirect();
2441
+ if (!this.context.hasIonicRouter() || !IonRedirect) {
2442
+ console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
2443
+ return null;
2444
+ }
2445
+ return jsx(IonRedirectInner, { ...this.props });
2446
+ }
2447
+ static get contextType() {
2448
+ return NavContext;
2449
+ }
2450
+ }
2451
+
1885
2452
  const IonRouterContext = React.createContext({
1886
2453
  routeInfo: undefined, // TODO(FW-2959): type
1887
2454
  push: () => {
@@ -1890,9 +2457,6 @@ const IonRouterContext = React.createContext({
1890
2457
  back: () => {
1891
2458
  throw new Error('An Ionic Router is required for IonRouterContext');
1892
2459
  },
1893
- navigateRoot: () => {
1894
- throw new Error('An Ionic Router is required for IonRouterContext');
1895
- },
1896
2460
  canGoBack: () => {
1897
2461
  throw new Error('An Ionic Router is required for IonRouterContext');
1898
2462
  },
@@ -1909,10 +2473,9 @@ function useIonRouter() {
1909
2473
  back: context.back,
1910
2474
  push: context.push,
1911
2475
  goBack: context.back,
1912
- navigateRoot: context.navigateRoot,
1913
2476
  canGoBack: context.canGoBack,
1914
2477
  routeInfo: context.routeInfo,
1915
- }), [context.back, context.push, context.navigateRoot, context.canGoBack, context.routeInfo]);
2478
+ }), [context.back, context.push, context.canGoBack, context.routeInfo]);
1916
2479
  }
1917
2480
 
1918
2481
  class CreateAnimation extends React.PureComponent {
@@ -2282,7 +2845,6 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
2282
2845
  findLeavingViewItemByRouteInfo: () => undefined,
2283
2846
  findViewItemByRouteInfo: () => undefined,
2284
2847
  getChildrenToRender: () => undefined,
2285
- getViewItemsForOutlet: () => [],
2286
2848
  goBack: () => undefined,
2287
2849
  unMountViewItem: () => undefined,
2288
2850
  });
@@ -2401,14 +2963,7 @@ class LocationHistory {
2401
2963
  _replace(routeInfo) {
2402
2964
  const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
2403
2965
  routeInfos && routeInfos.pop();
2404
- // Get the current route that's being replaced
2405
- const currentRoute = this.locationHistory[this.locationHistory.length - 1];
2406
- // Only pop from global history if we're replacing in the same outlet context.
2407
- // Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
2408
- const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
2409
- if (!isEnteringNestedOutlet) {
2410
- this.locationHistory.pop();
2411
- }
2966
+ this.locationHistory.pop();
2412
2967
  this._add(routeInfo);
2413
2968
  }
2414
2969
  _clear() {
@@ -2440,20 +2995,6 @@ class LocationHistory {
2440
2995
  }
2441
2996
  return undefined;
2442
2997
  }
2443
- /**
2444
- * Returns the most recent RouteInfo in global history (excluding the current
2445
- * entry) whose pathname matches the given value. Unlike findLastLocation,
2446
- * this search is tab-agnostic. Used by the multi-step back detection.
2447
- */
2448
- findLastLocationByPathname(pathname) {
2449
- for (let i = this.locationHistory.length - 2; i >= 0; i--) {
2450
- const ri = this.locationHistory[i];
2451
- if (ri && ri.pathname === pathname) {
2452
- return ri;
2453
- }
2454
- }
2455
- return undefined;
2456
- }
2457
2998
  findLastLocation(routeInfo) {
2458
2999
  const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
2459
3000
  if (routeInfos) {
@@ -2485,17 +3026,6 @@ class LocationHistory {
2485
3026
  canGoBack() {
2486
3027
  return this.locationHistory.length > 1;
2487
3028
  }
2488
- findTabForPathname(pathname) {
2489
- for (const tab of Object.keys(this.tabHistory)) {
2490
- const routeInfos = this.tabHistory[tab];
2491
- for (let i = routeInfos.length - 1; i >= 0; i--) {
2492
- if (routeInfos[i].pathname === pathname) {
2493
- return tab;
2494
- }
2495
- }
2496
- }
2497
- return undefined;
2498
- }
2499
3029
  }
2500
3030
 
2501
3031
  class NavManager extends React.PureComponent {
@@ -2508,9 +3038,6 @@ class NavManager extends React.PureComponent {
2508
3038
  back: (animationBuilder) => {
2509
3039
  this.goBack(undefined, animationBuilder);
2510
3040
  },
2511
- navigateRoot: (pathname, animationBuilder) => {
2512
- this.props.onNavigateRoot(pathname, animationBuilder);
2513
- },
2514
3041
  canGoBack: () => this.props.locationHistory.canGoBack(),
2515
3042
  nativeBack: () => this.props.onNativeBack(),
2516
3043
  routeInfo: this.props.routeInfo,
@@ -2519,8 +3046,10 @@ class NavManager extends React.PureComponent {
2519
3046
  goBack: this.goBack.bind(this),
2520
3047
  hasIonicRouter: () => true,
2521
3048
  navigate: this.navigate.bind(this),
3049
+ getIonRedirect: this.getIonRedirect.bind(this),
2522
3050
  getIonRoute: this.getIonRoute.bind(this),
2523
3051
  getStackManager: this.getStackManager.bind(this),
3052
+ getPageManager: this.getPageManager.bind(this),
2524
3053
  routeInfo: this.props.routeInfo,
2525
3054
  setCurrentTab: this.props.onSetCurrentTab,
2526
3055
  changeTab: this.props.onChangeTab,
@@ -2553,6 +3082,12 @@ class NavManager extends React.PureComponent {
2553
3082
  navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
2554
3083
  this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
2555
3084
  }
3085
+ getPageManager() {
3086
+ return PageManager;
3087
+ }
3088
+ getIonRedirect() {
3089
+ return this.props.ionRedirect;
3090
+ }
2556
3091
  getIonRoute() {
2557
3092
  return this.props.ionRoute;
2558
3093
  }
@@ -2582,7 +3117,10 @@ class ViewStacks {
2582
3117
  }
2583
3118
  }
2584
3119
  clear(outletId) {
2585
- delete this.viewStacks[outletId];
3120
+ // Give some time for the leaving views to transition before removing
3121
+ return setTimeout(() => {
3122
+ delete this.viewStacks[outletId];
3123
+ }, 500);
2586
3124
  }
2587
3125
  getViewItemsForOutlet(outletId) {
2588
3126
  return this.viewStacks[outletId] || [];
@@ -2611,5 +3149,5 @@ class ViewStacks {
2611
3149
  }
2612
3150
  }
2613
3151
 
2614
- 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, 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 };
3152
+ 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 };
2615
3153
  //# sourceMappingURL=index.js.map