voyager-ionic-core 7.2.3-tweak.1 → 7.4.3

package/dist/collection/components/popover/popover.js

@@ -1,20 +1,21 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { addEventListener, raf, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { isPlatform } from "../../utils/platform";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-import { getIonMode } from '../../global/ionic-global';
-import { iosEnterAnimation } from './animations/ios.enter';
-import { iosLeaveAnimation } from './animations/ios.leave';
-import { mdEnterAnimation } from './animations/md.enter';
-import { mdLeaveAnimation } from './animations/md.leave';
-import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from './utils';
+import { getIonMode } from "../../global/ionic-global";
+import { iosEnterAnimation } from "./animations/ios.enter";
+import { iosLeaveAnimation } from "./animations/ios.leave";
+import { mdEnterAnimation } from "./animations/md.enter";
+import { mdLeaveAnimation } from "./animations/md.leave";
+import { configureDismissInteraction, configureKeyboardInteraction, configureTriggerInteraction } from "./utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -29,6 +30,7 @@ export class Popover {
   constructor() {
     this.parentPopover = null;
     this.coreDelegate = CoreDelegate();
+    this.lockController = createLockController();
     this.inline = false;
     this.focusDescendantOnPresent = false;
     this.onBackdropTap = () => {
@@ -202,28 +204,24 @@ export class Popover {
    * was dispatched.
    */
   async present(event) {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
-    /**
-     * When using an inline popover
-     * and dismissing a popover it is possible to
-     * quickly present the popover while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const { el } = this;
     const { inline, delegate } = this.getDelegate(true);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
+    this.ionMount.emit();
     this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
     if (!this.keyboardEvents) {
       this.configureKeyboardInteraction();
     }
     this.configureDismissInteraction();
-    this.ionMount.emit();
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -246,7 +244,7 @@ export class Popover {
     else if (!this.keepContentsMounted) {
       await waitForMount();
     }
-    this.currentTransition = present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
+    await present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, {
       event: event || this.event,
       size: this.size,
       trigger: this.triggerEl,
@@ -254,8 +252,6 @@ export class Popover {
       side: this.side,
       align: this.alignment,
     });
-    await this.currentTransition;
-    this.currentTransition = undefined;
     /**
      * If popover is nested and was
      * presented using the "Right" arrow key,
@@ -265,6 +261,7 @@ export class Popover {
     if (this.focusDescendantOnPresent) {
       focusFirstDescendant(this.el, this.el);
     }
+    unlock();
   }
   /**
    * Dismiss the popover overlay after it has been presented.
@@ -275,23 +272,12 @@ export class Popover {
    * a parent popover if this popover is nested. Defaults to `true`.
    */
   async dismiss(data, role, dismissParentPopover = true) {
-    /**
-     * When using an inline popover
-     * and presenting a popover it is possible to
-     * quickly dismiss the popover while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
+    const unlock = await this.lockController.lock();
     const { destroyKeyboardInteraction, destroyDismissInteraction } = this;
     if (dismissParentPopover && this.parentPopover) {
       this.parentPopover.dismiss(data, role, dismissParentPopover);
     }
-    this.currentTransition = dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
-    const shouldDismiss = await this.currentTransition;
+    const shouldDismiss = await dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
     if (shouldDismiss) {
       if (destroyKeyboardInteraction) {
         destroyKeyboardInteraction();
@@ -309,7 +295,7 @@ export class Popover {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
     }
-    this.currentTransition = undefined;
+    unlock();
     return shouldDismiss;
   }
   /**
@@ -385,7 +371,8 @@ export class Popover {
           "references": {
             "FrameworkDelegate": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::FrameworkDelegate"
             }
           }
         },
@@ -428,7 +415,8 @@ export class Popover {
           "references": {
             "AnimationBuilder": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::AnimationBuilder"
             }
           }
         },
@@ -448,7 +436,8 @@ export class Popover {
           "references": {
             "AnimationBuilder": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::AnimationBuilder"
             }
           }
         },
@@ -468,7 +457,8 @@ export class Popover {
           "references": {
             "ComponentRef": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::ComponentRef"
             }
           }
         },
@@ -490,7 +480,8 @@ export class Popover {
           "references": {
             "ComponentProps": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::ComponentProps"
             }
           }
         },
@@ -652,7 +643,8 @@ export class Popover {
           "references": {
             "TriggerAction": {
               "location": "import",
-              "path": "./popover-interface"
+              "path": "./popover-interface",
+              "id": "src/components/popover/popover-interface.ts::TriggerAction"
             }
           }
         },
@@ -692,7 +684,8 @@ export class Popover {
           "references": {
             "PopoverSize": {
               "location": "import",
-              "path": "./popover-interface"
+              "path": "./popover-interface",
+              "id": "src/components/popover/popover-interface.ts::PopoverSize"
             }
           }
         },
@@ -733,7 +726,8 @@ export class Popover {
           "references": {
             "PositionReference": {
               "location": "import",
-              "path": "./popover-interface"
+              "path": "./popover-interface",
+              "id": "src/components/popover/popover-interface.ts::PositionReference"
             }
           }
         },
@@ -756,7 +750,8 @@ export class Popover {
           "references": {
             "PositionSide": {
               "location": "import",
-              "path": "./popover-interface"
+              "path": "./popover-interface",
+              "id": "src/components/popover/popover-interface.ts::PositionSide"
             }
           }
         },
@@ -779,7 +774,8 @@ export class Popover {
           "references": {
             "PositionAlign": {
               "location": "import",
-              "path": "./popover-interface"
+              "path": "./popover-interface",
+              "id": "src/components/popover/popover-interface.ts::PositionAlign"
             }
           }
         },
@@ -921,7 +917,8 @@ export class Popover {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -941,7 +938,8 @@ export class Popover {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -991,7 +989,8 @@ export class Popover {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1011,7 +1010,8 @@ export class Popover {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1049,7 +1049,8 @@ export class Popover {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1071,22 +1072,28 @@ export class Popover {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "MouseEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::MouseEvent"
             },
             "TouchEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::TouchEvent"
             },
             "PointerEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::PointerEvent"
             },
             "CustomEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::CustomEvent"
             },
             "PopoverPresentOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::PopoverPresentOptions"
             }
           },
           "return": "Promise<void>"
@@ -1120,10 +1127,12 @@ export class Popover {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "PopoverDismissOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::PopoverDismissOptions"
             }
           },
           "return": "Promise<boolean>"
@@ -1148,10 +1157,12 @@ export class Popover {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "HTMLIonPopoverElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLIonPopoverElement"
             }
           },
           "return": "Promise<HTMLIonPopoverElement | null>"
@@ -1170,14 +1181,17 @@ export class Popover {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             },
             "T": {
-              "location": "global"
+              "location": "global",
+              "id": "global::T"
             }
           },
           "return": "Promise<OverlayEventDetail<T>>"
@@ -1193,14 +1207,17 @@ export class Popover {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             },
             "T": {
-              "location": "global"
+              "location": "global",
+              "id": "global::T"
             }
           },
           "return": "Promise<OverlayEventDetail<T>>"

package/dist/collection/components/popover/test/adjustment/popover.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions.

package/dist/collection/components/popover/test/arrow/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
-import { openPopover } from '../test.utils';
+import { openPopover } from "../test.utils";
 /**
  * This feature only exists on iOS.
  */

package/dist/collection/components/popover/test/async/popover.e2e.js

@@ -0,0 +1,42 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: alignment with async component'), async () => {
+    test('should align popover centered with button when component is added async', async ({ page }) => {
+      await page.goto('/src/components/popover/test/async', config);
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const button = page.locator('#button');
+      await button.click();
+      await ionPopoverDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`popover-async`));
+    });
+    /**
+     * Framework delegate should fall back to returning the host
+     * component when no child content is passed otherwise
+     * the overlay will get stuck when trying to re-present.
+     */
+    test('should open popover even if nothing was passed', async ({ page }) => {
+      await page.setContent(`
+        <ion-popover></ion-popover>
+      `, config);
+      const popover = page.locator('ion-popover');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+      await popover.evaluate((el) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+      await expect(popover).toBeHidden();
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+    });
+  });
+});

package/dist/collection/components/popover/test/basic/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { PopoverFixture } from '../fixture';
+import { PopoverFixture } from "../fixture";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: rendering'), async () => {
     test('should not have visual regressions', async ({ page }) => {

package/dist/collection/components/popover/test/dismiss-on-select/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { openPopover } from '../test.utils';
+import { openPopover } from "../test.utils";
 /**
  * This behavior does not vary across modes/directions.
  */

package/dist/collection/components/popover/test/fixture.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 export class PopoverFixture {
   constructor(page) {
     this.page = page;

package/dist/collection/components/popover/test/inline/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { closePopover, openPopover } from '../test.utils';
+import { closePopover, openPopover } from "../test.utils";
 /**
  * this behavior does not vary across modes/directions.
  */

package/dist/collection/components/popover/test/is-open/popover.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('popover: isOpen'), () => {

package/dist/collection/components/popover/test/nested/popover.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: nested rendering'), async () => {

package/dist/collection/components/popover/test/position/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
-import { openPopover } from '../test.utils';
+import { openPopover } from "../test.utils";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: position'), async () => {
     /**

package/dist/collection/components/popover/test/reference/popover.e2e.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { PopoverFixture } from '../fixture';
+import { PopoverFixture } from "../fixture";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: reference'), async () => {
     let popoverFixture;

package/dist/collection/components/popover/test/size/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
-import { openPopover, screenshotPopover } from '../test.utils';
+import { openPopover, screenshotPopover } from "../test.utils";
 /**
  * This behavior does not vary across modes/directions.
  */

package/dist/collection/components/popover/test/standalone/popover.e2e.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { PopoverFixture } from '../fixture';
+import { PopoverFixture } from "../fixture";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('popover: standalone'), async () => {
     test('should render correctly', async ({ page }) => {

package/dist/collection/components/popover/test/test.utils.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 export const openPopover = async (page, buttonID, useEvalClick = false) => {
   const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
   const trigger = page.locator(`#${buttonID}`);

package/dist/collection/components/popover/test/trigger/popover.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { openPopover } from '../test.utils';
+import { openPopover } from "../test.utils";
 configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('popover: trigger'), async () => {
     test.beforeEach(async ({ page }) => {

package/dist/collection/components/progress-bar/progress-bar.js

@@ -1,11 +1,11 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { clamp } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
+import { config } from "../../global/config";
+import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -130,7 +130,8 @@ export class ProgressBar {
           "references": {
             "Color": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::Color"
             }
           }
         },

package/dist/collection/components/progress-bar/test/basic/progress-bar.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('progress-bar: basic'), () => {

package/dist/collection/components/progress-bar/test/buffer/progress-bar.e2e.js

@@ -0,0 +1,20 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: buffer'), () => {
+    test.describe('with a dynamic progress value', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-progress-bar value="0.20" buffer="0.4"></ion-progress-bar>
+        `, config);
+        await page.setIonViewport();
+        const progressBar = await page.locator('ion-progress-bar');
+        await progressBar.evaluate((node) => (node.value = 0.8));
+        await expect(progressBar).toHaveScreenshot(screenshot(`progress-bar-buffer-dynamic-value`));
+      });
+    });
+  });
+});