@ionic/core 7.3.2-dev.11692887667.1614d10a → 7.3.2-dev.11693262117.17edbf6d

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 (105) hide show
  1. package/components/action-sheet.js +8 -17
  2. package/components/alert.js +8 -17
  3. package/components/ion-loading.js +8 -17
  4. package/components/ion-menu.js +15 -2
  5. package/components/ion-modal.js +12 -33
  6. package/components/ion-picker.js +8 -17
  7. package/components/ion-toast.js +8 -17
  8. package/components/overlays.js +22 -1
  9. package/components/popover.js +8 -29
  10. package/dist/cjs/index.cjs.js +1 -1
  11. package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -17
  12. package/dist/cjs/ion-alert.cjs.entry.js +8 -17
  13. package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -17
  14. package/dist/cjs/ion-loading.cjs.entry.js +8 -17
  15. package/dist/cjs/ion-menu_3.cjs.entry.js +15 -2
  16. package/dist/cjs/ion-modal.cjs.entry.js +12 -33
  17. package/dist/cjs/ion-popover.cjs.entry.js +8 -29
  18. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-toast.cjs.entry.js +8 -17
  20. package/dist/cjs/{overlays-0ea06fcb.js → overlays-2b9fa92e.js} +22 -0
  21. package/dist/collection/components/action-sheet/action-sheet.js +8 -17
  22. package/dist/collection/components/alert/alert.js +8 -17
  23. package/dist/collection/components/loading/loading.js +8 -17
  24. package/dist/collection/components/menu/menu.js +14 -1
  25. package/dist/collection/components/menu-button/test/async/menu-button.e2e.js +23 -0
  26. package/dist/collection/components/modal/modal.js +12 -33
  27. package/dist/collection/components/picker/picker.js +8 -17
  28. package/dist/collection/components/popover/popover.js +8 -29
  29. package/dist/collection/components/toast/toast.js +8 -17
  30. package/dist/collection/utils/overlays.js +21 -0
  31. package/dist/docs.json +1 -1
  32. package/dist/esm/index.js +1 -1
  33. package/dist/esm/ion-action-sheet.entry.js +8 -17
  34. package/dist/esm/ion-alert.entry.js +8 -17
  35. package/dist/esm/ion-datetime_3.entry.js +8 -17
  36. package/dist/esm/ion-loading.entry.js +8 -17
  37. package/dist/esm/ion-menu_3.entry.js +15 -2
  38. package/dist/esm/ion-modal.entry.js +12 -33
  39. package/dist/esm/ion-popover.entry.js +8 -29
  40. package/dist/esm/ion-select_3.entry.js +1 -1
  41. package/dist/esm/ion-toast.entry.js +8 -17
  42. package/dist/esm/{overlays-c3387ec0.js → overlays-66222f79.js} +22 -1
  43. package/dist/esm-es5/index.js +1 -1
  44. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  45. package/dist/esm-es5/ion-alert.entry.js +1 -1
  46. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  47. package/dist/esm-es5/ion-loading.entry.js +1 -1
  48. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  49. package/dist/esm-es5/ion-modal.entry.js +1 -1
  50. package/dist/esm-es5/ion-popover.entry.js +1 -1
  51. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  52. package/dist/esm-es5/ion-toast.entry.js +1 -1
  53. package/dist/esm-es5/{overlays-c3387ec0.js → overlays-66222f79.js} +1 -1
  54. package/dist/ionic/index.esm.js +1 -1
  55. package/dist/ionic/ionic.esm.js +1 -1
  56. package/dist/ionic/{p-8fa43732.system.entry.js → p-0494a5b7.system.entry.js} +1 -1
  57. package/dist/ionic/p-16fd72f2.entry.js +4 -0
  58. package/dist/ionic/p-1c9e3bc7.entry.js +4 -0
  59. package/dist/ionic/p-2a51c81c.entry.js +4 -0
  60. package/dist/ionic/p-2a649b3e.system.entry.js +4 -0
  61. package/dist/ionic/p-3ef9e271.system.entry.js +4 -0
  62. package/dist/ionic/p-6d484719.system.entry.js +4 -0
  63. package/dist/ionic/p-70d137a0.js +4 -0
  64. package/dist/ionic/p-721933ff.system.js +1 -1
  65. package/dist/ionic/{p-c0d1e5a1.entry.js → p-7776d062.entry.js} +1 -1
  66. package/dist/ionic/p-7ac9bdfa.system.entry.js +4 -0
  67. package/dist/ionic/p-8d53d5a5.entry.js +4 -0
  68. package/dist/ionic/p-9888a5a7.entry.js +4 -0
  69. package/dist/ionic/{p-db46fc66.system.js → p-a0ffdd91.system.js} +1 -1
  70. package/dist/ionic/p-a133c215.system.entry.js +4 -0
  71. package/dist/ionic/p-b2098e96.system.entry.js +4 -0
  72. package/dist/ionic/p-c0b4ca5c.system.entry.js +4 -0
  73. package/dist/ionic/p-cf768a4f.entry.js +4 -0
  74. package/dist/ionic/p-ddffbfa9.entry.js +4 -0
  75. package/dist/ionic/p-e2e2c2b0.entry.js +4 -0
  76. package/dist/ionic/p-ebb442c4.system.entry.js +4 -0
  77. package/dist/ionic/{p-81b46714.system.js → p-f8e4da48.system.js} +1 -1
  78. package/dist/types/components/action-sheet/action-sheet.d.ts +1 -1
  79. package/dist/types/components/alert/alert.d.ts +1 -1
  80. package/dist/types/components/loading/loading.d.ts +1 -1
  81. package/dist/types/components/menu/menu.d.ts +2 -0
  82. package/dist/types/components/modal/modal.d.ts +1 -1
  83. package/dist/types/components/picker/picker.d.ts +1 -1
  84. package/dist/types/components/popover/popover.d.ts +1 -1
  85. package/dist/types/components/toast/toast.d.ts +1 -1
  86. package/dist/types/utils/overlays.d.ts +9 -0
  87. package/hydrate/index.js +87 -141
  88. package/package.json +2 -2
  89. package/dist/ionic/p-06f1f560.system.entry.js +0 -4
  90. package/dist/ionic/p-2936ec7f.system.entry.js +0 -4
  91. package/dist/ionic/p-29b3e70a.entry.js +0 -4
  92. package/dist/ionic/p-2bc49e5d.system.entry.js +0 -4
  93. package/dist/ionic/p-2da3e015.system.entry.js +0 -4
  94. package/dist/ionic/p-423d5a4d.entry.js +0 -4
  95. package/dist/ionic/p-564aaba3.entry.js +0 -4
  96. package/dist/ionic/p-5ef91692.js +0 -4
  97. package/dist/ionic/p-61769039.entry.js +0 -4
  98. package/dist/ionic/p-74723f41.entry.js +0 -4
  99. package/dist/ionic/p-8b55f026.entry.js +0 -4
  100. package/dist/ionic/p-9b3c3564.entry.js +0 -4
  101. package/dist/ionic/p-ac80da6c.system.entry.js +0 -4
  102. package/dist/ionic/p-ccea9adc.system.entry.js +0 -4
  103. package/dist/ionic/p-d5db0834.system.entry.js +0 -4
  104. package/dist/ionic/p-d8538837.entry.js +0 -4
  105. package/dist/ionic/p-dd0b6889.system.entry.js +0 -4
@@ -5,7 +5,7 @@ import { Host, forceUpdate, h } from "@stencil/core";
5
5
  import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
6
6
  import { createButtonActiveGesture } from "../../utils/gesture/button-active";
7
7
  import { raf } from "../../utils/helpers";
8
- import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
8
+ import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
9
9
  import { sanitizeDOMString } from "../../utils/sanitization/index";
10
10
  import { getClassMap } from "../../utils/theme";
11
11
  import { config } from "../../global/config";
@@ -21,6 +21,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
21
21
  export class Alert {
22
22
  constructor() {
23
23
  this.delegateController = createDelegateController(this);
24
+ this.lockController = createLockController();
24
25
  this.triggerController = createTriggerController();
25
26
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
26
27
  this.processedInputs = [];
@@ -187,21 +188,10 @@ export class Alert {
187
188
  * Present the alert overlay after it has been created.
188
189
  */
189
190
  async present() {
190
- /**
191
- * When using an inline alert
192
- * and dismissing an alert it is possible to
193
- * quickly present the alert while it is
194
- * dismissing. We need to await any current
195
- * transition to allow the dismiss to finish
196
- * before presenting again.
197
- */
198
- if (this.currentTransition !== undefined) {
199
- await this.currentTransition;
200
- }
191
+ const unlock = await this.lockController.lock();
201
192
  await this.delegateController.attachViewToDom();
202
- this.currentTransition = present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
203
- await this.currentTransition;
204
- this.currentTransition = undefined;
193
+ await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation);
194
+ unlock();
205
195
  }
206
196
  /**
207
197
  * Dismiss the alert overlay after it has been presented.
@@ -213,11 +203,12 @@ export class Alert {
213
203
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
214
204
  */
215
205
  async dismiss(data, role) {
216
- this.currentTransition = dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
217
- const dismissed = await this.currentTransition;
206
+ const unlock = await this.lockController.lock();
207
+ const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation, mdLeaveAnimation);
218
208
  if (dismissed) {
219
209
  this.delegateController.removeViewFromDom();
220
210
  }
211
+ unlock();
221
212
  return dismissed;
222
213
  }
223
214
  /**
@@ -4,7 +4,7 @@
4
4
  import { Host, h } from "@stencil/core";
5
5
  import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
6
6
  import { raf } from "../../utils/helpers";
7
- import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createTriggerController, setOverlayId, } from "../../utils/overlays";
7
+ import { BACKDROP, dismiss, eventMethod, prepareOverlay, present, createDelegateController, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
8
8
  import { sanitizeDOMString } from "../../utils/sanitization/index";
9
9
  import { getClassMap } from "../../utils/theme";
10
10
  import { config } from "../../global/config";
@@ -20,6 +20,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
20
20
  export class Loading {
21
21
  constructor() {
22
22
  this.delegateController = createDelegateController(this);
23
+ this.lockController = createLockController();
23
24
  this.triggerController = createTriggerController();
24
25
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
25
26
  this.presented = false;
@@ -85,24 +86,13 @@ export class Loading {
85
86
  * Present the loading overlay after it has been created.
86
87
  */
87
88
  async present() {
88
- /**
89
- * When using an inline loading indicator
90
- * and dismissing a loading indicator it is possible to
91
- * quickly present the loading indicator while it is
92
- * dismissing. We need to await any current
93
- * transition to allow the dismiss to finish
94
- * before presenting again.
95
- */
96
- if (this.currentTransition !== undefined) {
97
- await this.currentTransition;
98
- }
89
+ const unlock = await this.lockController.lock();
99
90
  await this.delegateController.attachViewToDom();
100
- this.currentTransition = present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
101
- await this.currentTransition;
91
+ await present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
102
92
  if (this.duration > 0) {
103
93
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
104
94
  }
105
- this.currentTransition = undefined;
95
+ unlock();
106
96
  }
107
97
  /**
108
98
  * Dismiss the loading overlay after it has been presented.
@@ -114,14 +104,15 @@ export class Loading {
114
104
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
115
105
  */
116
106
  async dismiss(data, role) {
107
+ const unlock = await this.lockController.lock();
117
108
  if (this.durationTimeout) {
118
109
  clearTimeout(this.durationTimeout);
119
110
  }
120
- this.currentTransition = dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
121
- const dismissed = await this.currentTransition;
111
+ const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation, mdLeaveAnimation);
122
112
  if (dismissed) {
123
113
  this.delegateController.removeViewFromDom();
124
114
  }
115
+ unlock();
125
116
  return dismissed;
126
117
  }
127
118
  /**
@@ -23,6 +23,7 @@ export class Menu {
23
23
  constructor() {
24
24
  this.lastOnEnd = 0;
25
25
  this.blocker = GESTURE_CONTROLLER.createBlocker({ disableScroll: true });
26
+ this.didLoad = false;
26
27
  this.isAnimating = false;
27
28
  this._isOpen = false;
28
29
  this.inheritedAttributes = {};
@@ -110,6 +111,7 @@ export class Menu {
110
111
  this.sideChanged();
111
112
  // register this menu with the app's menu controller
112
113
  menuController._register(this);
114
+ this.menuChanged();
113
115
  this.gesture = (await import('../../utils/gesture')).createGesture({
114
116
  el: document,
115
117
  gestureName: 'menu-swipe',
@@ -128,9 +130,20 @@ export class Menu {
128
130
  this.inheritedAttributes = inheritAriaAttributes(this.el);
129
131
  }
130
132
  async componentDidLoad() {
131
- this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
133
+ this.didLoad = true;
134
+ this.menuChanged();
132
135
  this.updateState();
133
136
  }
137
+ menuChanged() {
138
+ /**
139
+ * Inform dependent components such as ion-menu-button
140
+ * that the menu is ready. Note that we only want to do this
141
+ * once the menu has been rendered which is why we check for didLoad.
142
+ */
143
+ if (this.didLoad) {
144
+ this.ionMenuChange.emit({ disabled: this.disabled, open: this._isOpen });
145
+ }
146
+ }
134
147
  async disconnectedCallback() {
135
148
  /**
136
149
  * The menu should be closed when it is
@@ -0,0 +1,23 @@
1
+ /*!
2
+ * (C) Ionic http://ionicframework.com - MIT License
3
+ */
4
+ import { expect } from "@playwright/test";
5
+ import { configs, test } from "../../../../utils/test/playwright/index";
6
+ /**
7
+ * This behavior does not vary across modes/directions
8
+ */
9
+ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
10
+ test.describe(title('menu button: async'), () => {
11
+ test('menu button should be visible if menu is moved', async ({ page }) => {
12
+ await page.goto(`/src/components/menu-button/test/async`, config);
13
+ const menu = page.locator('ion-menu');
14
+ const menuButton = page.locator('ion-menu-button');
15
+ const triggerButton = page.locator('#trigger');
16
+ await expect(menu).not.toBeAttached();
17
+ await expect(menuButton).toBeHidden();
18
+ await triggerButton.click();
19
+ await expect(menu).toBeAttached();
20
+ await expect(menuButton).toBeVisible();
21
+ });
22
+ });
23
+ });
@@ -7,7 +7,7 @@ import { CoreDelegate, attachComponent, detachComponent } from "../../utils/fram
7
7
  import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
8
8
  import { printIonWarning } from "../../utils/logging/index";
9
9
  import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
10
- import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
10
+ import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createLockController, createTriggerController, setOverlayId, } from "../../utils/overlays";
11
11
  import { getClassMap } from "../../utils/theme";
12
12
  import { deepReady, waitForMount } from "../../utils/transition/index";
13
13
  import { config } from "../../global/config";
@@ -32,6 +32,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
32
32
  */
33
33
  export class Modal {
34
34
  constructor() {
35
+ this.lockController = createLockController();
35
36
  this.triggerController = createTriggerController();
36
37
  this.coreDelegate = CoreDelegate();
37
38
  this.isSheetModal = false;
@@ -199,18 +200,8 @@ export class Modal {
199
200
  if (this.presented) {
200
201
  return;
201
202
  }
203
+ const unlock = await this.lockController.lock();
202
204
  const { presentingElement, el } = this;
203
- /**
204
- * When using an inline modal
205
- * and dismissing a modal it is possible to
206
- * quickly present the modal while it is
207
- * dismissing. We need to await any current
208
- * transition to allow the dismiss to finish
209
- * before presenting again.
210
- */
211
- if (this.currentTransition !== undefined) {
212
- await this.currentTransition;
213
- }
214
205
  /**
215
206
  * If the modal is presented multiple times (inline modals), we
216
207
  * need to reset the current breakpoint to the initial breakpoint.
@@ -242,11 +233,6 @@ export class Modal {
242
233
  await waitForMount();
243
234
  }
244
235
  writeTask(() => this.el.classList.add('show-modal'));
245
- this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
246
- presentingEl: presentingElement,
247
- currentBreakpoint: this.initialBreakpoint,
248
- backdropBreakpoint: this.backdropBreakpoint,
249
- });
250
236
  /* tslint:disable-next-line */
251
237
  if (typeof window !== 'undefined') {
252
238
  /**
@@ -289,14 +275,18 @@ export class Modal {
289
275
  this.statusBarStyle = await StatusBar.getStyle();
290
276
  setCardStatusBarDark();
291
277
  }
292
- await this.currentTransition;
278
+ await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
279
+ presentingEl: presentingElement,
280
+ currentBreakpoint: this.initialBreakpoint,
281
+ backdropBreakpoint: this.backdropBreakpoint,
282
+ });
293
283
  if (this.isSheetModal) {
294
284
  this.initSheetGesture();
295
285
  }
296
286
  else if (hasCardModal) {
297
287
  this.initSwipeToClose();
298
288
  }
299
- this.currentTransition = undefined;
289
+ unlock();
300
290
  }
301
291
  initSwipeToClose() {
302
292
  var _a;
@@ -386,6 +376,7 @@ export class Modal {
386
376
  if (this.gestureAnimationDismissing && role !== GESTURE) {
387
377
  return false;
388
378
  }
379
+ const unlock = await this.lockController.lock();
389
380
  /**
390
381
  * If a canDismiss handler is responsible
391
382
  * for calling the dismiss method, we should
@@ -409,24 +400,12 @@ export class Modal {
409
400
  window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
410
401
  this.keyboardOpenCallback = undefined;
411
402
  }
412
- /**
413
- * When using an inline modal
414
- * and presenting a modal it is possible to
415
- * quickly dismiss the modal while it is
416
- * presenting. We need to await any current
417
- * transition to allow the present to finish
418
- * before dismissing again.
419
- */
420
- if (this.currentTransition !== undefined) {
421
- await this.currentTransition;
422
- }
423
403
  const enteringAnimation = activeAnimations.get(this) || [];
424
- this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
404
+ const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
425
405
  presentingEl: presentingElement,
426
406
  currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
427
407
  backdropBreakpoint: this.backdropBreakpoint,
428
408
  });
429
- const dismissed = await this.currentTransition;
430
409
  if (dismissed) {
431
410
  const { delegate } = this.getDelegate();
432
411
  await detachComponent(delegate, this.usersElement);
@@ -440,8 +419,8 @@ export class Modal {
440
419
  enteringAnimation.forEach((ani) => ani.destroy());
441
420
  }
442
421
  this.currentBreakpoint = undefined;
443
- this.currentTransition = undefined;
444
422
  this.animation = undefined;
423
+ unlock();
445
424
  return dismissed;
446
425
  }
447
426
  /**
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { Host, h } from "@stencil/core";
5
5
  import { raf } from "../../utils/helpers";
6
- import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
6
+ import { createDelegateController, createLockController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
7
7
  import { getClassMap } from "../../utils/theme";
8
8
  import { getIonMode } from "../../global/ionic-global";
9
9
  import { iosEnterAnimation } from "./animations/ios.enter";
@@ -15,6 +15,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
15
15
  export class Picker {
16
16
  constructor() {
17
17
  this.delegateController = createDelegateController(this);
18
+ this.lockController = createLockController();
18
19
  this.triggerController = createTriggerController();
19
20
  this.onBackdropTap = () => {
20
21
  this.dismiss(undefined, BACKDROP);
@@ -81,24 +82,13 @@ export class Picker {
81
82
  * Present the picker overlay after it has been created.
82
83
  */
83
84
  async present() {
84
- /**
85
- * When using an inline picker
86
- * and dismissing an picker it is possible to
87
- * quickly present the picker while it is
88
- * dismissing. We need to await any current
89
- * transition to allow the dismiss to finish
90
- * before presenting again.
91
- */
92
- if (this.currentTransition !== undefined) {
93
- await this.currentTransition;
94
- }
85
+ const unlock = await this.lockController.lock();
95
86
  await this.delegateController.attachViewToDom();
96
- this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
97
- await this.currentTransition;
98
- this.currentTransition = undefined;
87
+ await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
99
88
  if (this.duration > 0) {
100
89
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
101
90
  }
91
+ unlock();
102
92
  }
103
93
  /**
104
94
  * Dismiss the picker overlay after it has been presented.
@@ -110,14 +100,15 @@ export class Picker {
110
100
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
111
101
  */
112
102
  async dismiss(data, role) {
103
+ const unlock = await this.lockController.lock();
113
104
  if (this.durationTimeout) {
114
105
  clearTimeout(this.durationTimeout);
115
106
  }
116
- this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
117
- const dismissed = await this.currentTransition;
107
+ const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
118
108
  if (dismissed) {
119
109
  this.delegateController.removeViewFromDom();
120
110
  }
111
+ unlock();
121
112
  return dismissed;
122
113
  }
123
114
  /**
@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
5
5
  import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
6
6
  import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
7
7
  import { printIonWarning } from "../../utils/logging/index";
8
- import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
8
+ import { BACKDROP, createLockController, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
9
9
  import { isPlatform } from "../../utils/platform";
10
10
  import { getClassMap } from "../../utils/theme";
11
11
  import { deepReady, waitForMount } from "../../utils/transition/index";
@@ -29,6 +29,7 @@ export class Popover {
29
29
  constructor() {
30
30
  this.parentPopover = null;
31
31
  this.coreDelegate = CoreDelegate();
32
+ this.lockController = createLockController();
32
33
  this.inline = false;
33
34
  this.focusDescendantOnPresent = false;
34
35
  this.onBackdropTap = () => {
@@ -205,17 +206,7 @@ export class Popover {
205
206
  if (this.presented) {
206
207
  return;
207
208
  }
208
- /**
209
- * When using an inline popover
210
- * and dismissing a popover it is possible to
211
- * quickly present the popover while it is
212
- * dismissing. We need to await any current
213
- * transition to allow the dismiss to finish
214
- * before presenting again.
215
- */
216
- if (this.currentTransition !== undefined) {
217
- await this.currentTransition;
218
- }
209
+ const unlock = await this.lockController.lock();
219
210
  const { el } = this;
220
211
  const { inline, delegate } = this.getDelegate(true);
221
212
  this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
@@ -246,7 +237,7 @@ export class Popover {
246
237
  else if (!this.keepContentsMounted) {
247
238
  await waitForMount();
248
239
  }
249
- this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
240
+ await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
250
241
  event: event || this.event,
251
242
  size: this.size,
252
243
  trigger: this.triggerEl,
@@ -254,8 +245,6 @@ export class Popover {
254
245
  side: this.side,
255
246
  align: this.alignment,
256
247
  });
257
- await this.currentTransition;
258
- this.currentTransition = undefined;
259
248
  /**
260
249
  * If popover is nested and was
261
250
  * presented using the "Right" arrow key,
@@ -265,6 +254,7 @@ export class Popover {
265
254
  if (this.focusDescendantOnPresent) {
266
255
  focusFirstDescendant(this.el, this.el);
267
256
  }
257
+ unlock();
268
258
  }
269
259
  /**
270
260
  * Dismiss the popover overlay after it has been presented.
@@ -275,23 +265,12 @@ export class Popover {
275
265
  * a parent popover if this popover is nested. Defaults to `true`.
276
266
  */
277
267
  async dismiss(data, role, dismissParentPopover = true) {
278
- /**
279
- * When using an inline popover
280
- * and presenting a popover it is possible to
281
- * quickly dismiss the popover while it is
282
- * presenting. We need to await any current
283
- * transition to allow the present to finish
284
- * before dismissing again.
285
- */
286
- if (this.currentTransition !== undefined) {
287
- await this.currentTransition;
288
- }
268
+ const unlock = await this.lockController.lock();
289
269
  const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
290
270
  if (dismissParentPopover && this.parentPopover) {
291
271
  this.parentPopover.dismiss(data, role, dismissParentPopover);
292
272
  }
293
- this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
294
- const shouldDismiss = await this.currentTransition;
273
+ const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
295
274
  if (shouldDismiss) {
296
275
  if (destroyKeyboardInteraction) {
297
276
  destroyKeyboardInteraction();
@@ -309,7 +288,7 @@ export class Popover {
309
288
  const { delegate } = this.getDelegate();
310
289
  await detachComponent(delegate, this.usersElement);
311
290
  }
312
- this.currentTransition = undefined;
291
+ unlock();
313
292
  return shouldDismiss;
314
293
  }
315
294
  /**
@@ -5,7 +5,7 @@ import { h, Host } from "@stencil/core";
5
5
  import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
6
6
  import { raf } from "../../utils/helpers";
7
7
  import { printIonWarning } from "../../utils/logging/index";
8
- import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
8
+ import { createDelegateController, createLockController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
9
9
  import { sanitizeDOMString } from "../../utils/sanitization/index";
10
10
  import { createColorClasses, getClassMap } from "../../utils/theme";
11
11
  import { config } from "../../global/config";
@@ -28,6 +28,7 @@ import { mdLeaveAnimation } from "./animations/md.leave";
28
28
  export class Toast {
29
29
  constructor() {
30
30
  this.delegateController = createDelegateController(this);
31
+ this.lockController = createLockController();
31
32
  this.triggerController = createTriggerController();
32
33
  this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
33
34
  this.presented = false;
@@ -97,30 +98,19 @@ export class Toast {
97
98
  * Present the toast overlay after it has been created.
98
99
  */
99
100
  async present() {
100
- /**
101
- * When using an inline toast
102
- * and dismissing a toast it is possible to
103
- * quickly present the toast while it is
104
- * dismissing. We need to await any current
105
- * transition to allow the dismiss to finish
106
- * before presenting again.
107
- */
108
- if (this.currentTransition !== undefined) {
109
- await this.currentTransition;
110
- }
101
+ const unlock = await this.lockController.lock();
111
102
  await this.delegateController.attachViewToDom();
112
- this.currentTransition = present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
113
- await this.currentTransition;
103
+ await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
114
104
  /**
115
105
  * Content is revealed to screen readers after
116
106
  * the transition to avoid jank since this
117
107
  * state updates will cause a re-render.
118
108
  */
119
109
  this.revealContentToScreenReader = true;
120
- this.currentTransition = undefined;
121
110
  if (this.duration > 0) {
122
111
  this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
123
112
  }
113
+ unlock();
124
114
  }
125
115
  /**
126
116
  * Dismiss the toast overlay after it has been presented.
@@ -132,15 +122,16 @@ export class Toast {
132
122
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
133
123
  */
134
124
  async dismiss(data, role) {
125
+ const unlock = await this.lockController.lock();
135
126
  if (this.durationTimeout) {
136
127
  clearTimeout(this.durationTimeout);
137
128
  }
138
- this.currentTransition = dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
139
- const dismissed = await this.currentTransition;
129
+ const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
140
130
  if (dismissed) {
141
131
  this.delegateController.removeViewFromDom();
142
132
  this.revealContentToScreenReader = false;
143
133
  }
134
+ unlock();
144
135
  return dismissed;
145
136
  }
146
137
  /**
@@ -617,6 +617,27 @@ export const createDelegateController = (ref) => {
617
617
  removeViewFromDom,
618
618
  };
619
619
  };
620
+ /**
621
+ * Creates a lock controller.
622
+ *
623
+ * This function locks transitions.
624
+ * The unlock() function within it calls resolve on this function, unlocking the transitions.
625
+ */
626
+ export const createLockController = () => {
627
+ let waitPromise;
628
+ const lock = async () => {
629
+ const p = waitPromise;
630
+ let resolve;
631
+ waitPromise = new Promise((r) => (resolve = r));
632
+ if (p !== undefined) {
633
+ await p;
634
+ }
635
+ return resolve;
636
+ };
637
+ return {
638
+ lock,
639
+ };
640
+ };
620
641
  /**
621
642
  * Constructs a trigger interaction for an overlay.
622
643
  * Presents an overlay when the trigger is clicked.
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2023-08-24T14:37:16",
2
+ "timestamp": "2023-08-28T22:37:59",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.1.0",
package/dist/esm/index.js CHANGED
@@ -11,7 +11,7 @@ export { c as componentOnReady } from './helpers-3379ba19.js';
11
11
  export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
12
12
  export { a as LIFECYCLE_DID_ENTER, c as LIFECYCLE_DID_LEAVE, L as LIFECYCLE_WILL_ENTER, b as LIFECYCLE_WILL_LEAVE, d as LIFECYCLE_WILL_UNLOAD } from './index-6391de89.js';
13
13
  export { m as menuController } from './index-b3e05099.js';
14
- export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-c3387ec0.js';
14
+ export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-66222f79.js';
15
15
  import './index-7a14ecec.js';
16
16
  import './gesture-controller-0fa396c4.js';
17
17
  import './index-847f2fde.js';
@@ -4,7 +4,7 @@
4
4
  import { r as registerInstance, d as createEvent, e as readTask, h, H as Host, f as getElement } from './index-847f2fde.js';
5
5
  import { c as createButtonActiveGesture } from './button-active-2da0f611.js';
6
6
  import { r as raf } from './helpers-3379ba19.js';
7
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-c3387ec0.js';
7
+ import { d as createDelegateController, e as createLockController, f as createTriggerController, B as BACKDROP, i as isCancel, g as present, h as dismiss, j as eventMethod, s as safeCall, k as prepareOverlay, n as setOverlayId } from './overlays-66222f79.js';
8
8
  import { g as getClassMap } from './theme-17531cdf.js';
9
9
  import { b as getIonMode } from './ionic-global-1ef19007.js';
10
10
  import { c as createAnimation } from './animation-a1d9e088.js';
@@ -117,6 +117,7 @@ const ActionSheet = class {
117
117
  this.willDismissShorthand = createEvent(this, "willDismiss", 7);
118
118
  this.didDismissShorthand = createEvent(this, "didDismiss", 7);
119
119
  this.delegateController = createDelegateController(this);
120
+ this.lockController = createLockController();
120
121
  this.triggerController = createTriggerController();
121
122
  this.presented = false;
122
123
  this.onBackdropTap = () => {
@@ -164,21 +165,10 @@ const ActionSheet = class {
164
165
  * Present the action sheet overlay after it has been created.
165
166
  */
166
167
  async present() {
167
- /**
168
- * When using an inline action sheet
169
- * and dismissing a action sheet it is possible to
170
- * quickly present the action sheet while it is
171
- * dismissing. We need to await any current
172
- * transition to allow the dismiss to finish
173
- * before presenting again.
174
- */
175
- if (this.currentTransition !== undefined) {
176
- await this.currentTransition;
177
- }
168
+ const unlock = await this.lockController.lock();
178
169
  await this.delegateController.attachViewToDom();
179
- this.currentTransition = present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
180
- await this.currentTransition;
181
- this.currentTransition = undefined;
170
+ await present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
171
+ unlock();
182
172
  }
183
173
  /**
184
174
  * Dismiss the action sheet overlay after it has been presented.
@@ -190,11 +180,12 @@ const ActionSheet = class {
190
180
  * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
191
181
  */
192
182
  async dismiss(data, role) {
193
- this.currentTransition = dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
194
- const dismissed = await this.currentTransition;
183
+ const unlock = await this.lockController.lock();
184
+ const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation, mdLeaveAnimation);
195
185
  if (dismissed) {
196
186
  this.delegateController.removeViewFromDom();
197
187
  }
188
+ unlock();
198
189
  return dismissed;
199
190
  }
200
191
  /**