chore(git): update 8.5 to be in sync with main (#30224)

.github/workflows/assign-issues.yml

@@ -11,7 +11,7 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@c015a6a3f410f12f58255c3d085fd774312f7a2f # v2.1.2
+        uses: pozil/auto-assign-issue@39c06395cbac76e79afc4ad4e5c5c6db6ecfdd2e # v2.2.0
         with:
           assignees: brandyscarney, thetaPC, joselrio, rugoncalves, BenOsodrac, JoaoFerreira-FrontEnd, OS-giulianasilva, tanner-reits
           numOfAssignee: 1

core/package-lock.json

@@ -19,7 +19,7 @@
         "@capacitor/haptics": "^6.0.0",
         "@capacitor/keyboard": "^6.0.0",
         "@capacitor/status-bar": "^6.0.0",
-        "@clack/prompts": "^0.9.0",
+        "@clack/prompts": "^0.10.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@playwright/test": "^1.46.1",
@@ -709,9 +709,9 @@
       }
     },
     "node_modules/@clack/prompts": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
-      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz",
+      "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==",
       "dev": true,
       "dependencies": {
         "@clack/core": "0.4.1",
@@ -11017,9 +11017,9 @@
       }
     },
     "@clack/prompts": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
-      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.10.0.tgz",
+      "integrity": "sha512-H3rCl6CwW1NdQt9rE3n373t7o5cthPv7yUoxF2ytZvyvlJv89C5RYMJu83Hed8ODgys5vpBU0GKxIRG83jd8NQ==",
       "dev": true,
       "requires": {
         "@clack/core": "0.4.1",

core/package.json

@@ -41,7 +41,7 @@
     "@capacitor/haptics": "^6.0.0",
     "@capacitor/keyboard": "^6.0.0",
     "@capacitor/status-bar": "^6.0.0",
-    "@clack/prompts": "^0.9.0",
+    "@clack/prompts": "^0.10.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@playwright/test": "^1.46.1",

core/src/components/segment-button/segment-button.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -65,7 +65,41 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     this.updateState();
   }
 
-  connectedCallback() {
+  private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise<HTMLElement> {
+    return new Promise((resolve, reject) => {
+      let timeoutId: NodeJS.Timeout | undefined = undefined;
+      let animationFrameId: number;
+
+      const check = () => {
+        if (!ionSegment) {
+          reject(new Error(`Segment not found when looking for Segment Content`));
+          return;
+        }
+
+        const segmentView = getNextSiblingOfType<HTMLIonSegmentViewElement>(ionSegment); // Skip the text nodes
+        const segmentContent = segmentView?.querySelector(
+          `ion-segment-content[id="${contentId}"]`
+        ) as HTMLIonSegmentContentElement | null;
+        if (segmentContent && timeoutId) {
+          clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
+          cancelAnimationFrame(animationFrameId);
+          resolve(segmentContent);
+        } else {
+          animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
+        }
+      };
+
+      check();
+
+      // Set a timeout to reject the promise
+      timeoutId = setTimeout(() => {
+        cancelAnimationFrame(animationFrameId);
+        reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
+      }, 1000);
+    });
+  }
+
+  async connectedCallback() {
     const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
     if (segmentEl) {
       this.updateState();
@@ -76,12 +110,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     // Return if there is no contentId defined
     if (!this.contentId) return;
 
-    // Attempt to find the Segment Content by its contentId
-    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
-
-    // If no associated Segment Content exists, log an error and return
-    if (!segmentContent) {
-      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+    let segmentContent;
+    try {
+      // Attempt to find the Segment Content by its contentId
+      segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
+    } catch (error) {
+      // If no associated Segment Content exists, log an error and return
+      console.error('Segment Button: ', (error as Error).message);
       return;
     }
 

core/src/components/segment-view/test/basic/index.html

@@ -123,6 +123,8 @@
         <button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
 
         <button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
+
+        <button class="expand" onClick="addSegmentButtonAndContent()">Add New Segment Button & Content</button>
       </ion-content>
 
       <ion-footer>
@@ -158,6 +160,34 @@
             segment.value = undefined;
           });
         }
+
+        async function addSegmentButtonAndContent() {
+          const segment = document.querySelector('ion-segment');
+          const segmentView = document.querySelector('ion-segment-view');
+
+          const newButton = document.createElement('ion-segment-button');
+          const newId = `new-${Date.now()}`;
+          newButton.setAttribute('content-id', newId);
+          newButton.setAttribute('value', newId);
+          newButton.innerHTML = '<ion-label>New Button</ion-label>';
+
+          segment.appendChild(newButton);
+
+          setTimeout(() => {
+            // Timeout to test waitForSegmentContent() in segment-button
+            const newContent = document.createElement('ion-segment-content');
+            newContent.setAttribute('id', newId);
+            newContent.innerHTML = 'New Content';
+
+            segmentView.appendChild(newContent);
+
+            // Necessary timeout to ensure the value is set after the content is added.
+            // Otherwise, the transition is unsuccessful and the content is not shown.
+            setTimeout(() => {
+              segment.setAttribute('value', newId);
+            }, 200);
+          }, 200);
+        }
       </script>
     </ion-app>
   </body>

core/src/components/select/select.tsx

@@ -317,19 +317,10 @@ export class Select implements ComponentInterface {
     }
     this.isExpanded = true;
     const overlay = (this.overlay = await this.createOverlay(event));
-    overlay.onDidDismiss().then(() => {
-      this.overlay = undefined;
-      this.isExpanded = false;
-      this.ionDismiss.emit();
-      this.setFocus();
-    });
 
-    await overlay.present();
-
-    // focus selected option for popovers and modals
-    if (this.interface === 'popover' || this.interface === 'modal') {
+    // Add logic to scroll selected item into view before presenting
+    const scrollSelectedIntoView = () => {
       const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
-
       if (indexOfSelected > -1) {
         const selectedItem = overlay.querySelector<HTMLElement>(
           `.select-interface-option:nth-child(${indexOfSelected + 1})`
@@ -352,6 +343,7 @@ export class Select implements ComponentInterface {
             | HTMLIonCheckboxElement
             | null;
           if (interactiveEl) {
+            selectedItem.scrollIntoView({ block: 'nearest' });
             // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
             // and removing `ion-focused` style
             interactiveEl.setFocus();
@@ -379,8 +371,40 @@ export class Select implements ComponentInterface {
           focusVisibleElement(firstEnabledOption.closest('ion-item')!);
         }
       }
+    };
+
+    // For modals and popovers, we can scroll before they're visible
+    if (this.interface === 'modal') {
+      overlay.addEventListener('ionModalWillPresent', scrollSelectedIntoView, { once: true });
+    } else if (this.interface === 'popover') {
+      overlay.addEventListener('ionPopoverWillPresent', scrollSelectedIntoView, { once: true });
+    } else {
+      /**
+       * For alerts and action sheets, we need to wait a frame after willPresent
+       * because these overlays don't have their content in the DOM immediately
+       * when willPresent fires. By waiting a frame, we ensure the content is
+       * rendered and can be properly scrolled into view.
+       */
+      const scrollAfterRender = () => {
+        requestAnimationFrame(() => {
+          scrollSelectedIntoView();
+        });
+      };
+      if (this.interface === 'alert') {
+        overlay.addEventListener('ionAlertWillPresent', scrollAfterRender, { once: true });
+      } else if (this.interface === 'action-sheet') {
+        overlay.addEventListener('ionActionSheetWillPresent', scrollAfterRender, { once: true });
+      }
     }
 
+    overlay.onDidDismiss().then(() => {
+      this.overlay = undefined;
+      this.isExpanded = false;
+      this.ionDismiss.emit();
+      this.setFocus();
+    });
+
+    await overlay.present();
     return overlay;
   }
 

core/src/components/select/test/basic/index.html

@@ -61,6 +61,169 @@
           </ion-item>
         </ion-list>
 
+        <ion-list>
+          <ion-list-header>
+            <ion-label>Single Value - Overflowing Options</ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-select id="alert-select-scroll-to-selected" label="Alert" interface="alert" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select
+              id="action-sheet-select-scroll-to-selected"
+              label="Action Sheet"
+              interface="action-sheet"
+              value="watermelon"
+            >
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select id="popover-select-scroll-to-selected" label="Popover" interface="popover" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+
+          <ion-item>
+            <ion-select id="modal-select-scroll-to-selected" label="Modal" interface="modal" value="watermelon">
+              <ion-select-option value="apple">Apple</ion-select-option>
+              <ion-select-option value="apricot">Apricot</ion-select-option>
+              <ion-select-option value="avocado">Avocado</ion-select-option>
+              <ion-select-option value="banana">Banana</ion-select-option>
+              <ion-select-option value="blackberry">Blackberry</ion-select-option>
+              <ion-select-option value="blueberry">Blueberry</ion-select-option>
+              <ion-select-option value="cantaloupe">Cantaloupe</ion-select-option>
+              <ion-select-option value="cherry">Cherry</ion-select-option>
+              <ion-select-option value="coconut">Coconut</ion-select-option>
+              <ion-select-option value="cranberry">Cranberry</ion-select-option>
+              <ion-select-option value="dragonfruit">Dragonfruit</ion-select-option>
+              <ion-select-option value="fig">Fig</ion-select-option>
+              <ion-select-option value="grape">Grape</ion-select-option>
+              <ion-select-option value="grapefruit">Grapefruit</ion-select-option>
+              <ion-select-option value="guava">Guava</ion-select-option>
+              <ion-select-option value="kiwi">Kiwi</ion-select-option>
+              <ion-select-option value="lemon">Lemon</ion-select-option>
+              <ion-select-option value="lime">Lime</ion-select-option>
+              <ion-select-option value="lychee">Lychee</ion-select-option>
+              <ion-select-option value="mango">Mango</ion-select-option>
+              <ion-select-option value="nectarine">Nectarine</ion-select-option>
+              <ion-select-option value="orange">Orange</ion-select-option>
+              <ion-select-option value="papaya">Papaya</ion-select-option>
+              <ion-select-option value="passion-fruit">Passion Fruit</ion-select-option>
+              <ion-select-option value="peach">Peach</ion-select-option>
+              <ion-select-option value="pear">Pear</ion-select-option>
+              <ion-select-option value="pineapple">Pineapple</ion-select-option>
+              <ion-select-option value="plum">Plum</ion-select-option>
+              <ion-select-option value="pomegranate">Pomegranate</ion-select-option>
+              <ion-select-option value="raspberry">Raspberry</ion-select-option>
+              <ion-select-option value="strawberry">Strawberry</ion-select-option>
+              <ion-select-option value="tangerine">Tangerine</ion-select-option>
+              <ion-select-option value="watermelon">Watermelon</ion-select-option>
+            </ion-select>
+          </ion-item>
+        </ion-list>
+
         <ion-list>
           <ion-list-header>
             <ion-label>Multiple Value Select</ion-label>

core/src/components/select/test/basic/select.e2e.ts

@@ -8,7 +8,7 @@ import type { E2ELocator } from '@utils/test/playwright';
  * does not. The overlay rendering is already tested in the respective
  * test files.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('select: basic'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/select/test/basic', config);
@@ -24,6 +24,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(page.locator('ion-alert')).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
+
+        await page.click('#alert-select-scroll-to-selected');
+        await ionAlertDidPresent.next();
+
+        const alert = page.locator('ion-alert');
+        await expect(alert).toHaveScreenshot(screenshot(`select-basic-alert-scroll-to-selected`));
+      });
     });
 
     test.describe('select: action sheet', () => {
@@ -36,6 +46,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(page.locator('ion-action-sheet')).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+        await page.click('#action-sheet-select-scroll-to-selected');
+        await ionActionSheetDidPresent.next();
+
+        const actionSheet = page.locator('ion-action-sheet');
+        await expect(actionSheet).toHaveScreenshot(screenshot(`select-basic-action-sheet-scroll-to-selected`));
+      });
     });
 
     test.describe('select: popover', () => {
@@ -57,6 +77,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(popover).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+        await page.click('#popover-select-scroll-to-selected');
+        await ionPopoverDidPresent.next();
+
+        const popover = page.locator('ion-popover');
+        await expect(popover).toHaveScreenshot(screenshot(`select-basic-popover-scroll-to-selected`));
+      });
     });
 
     test.describe('select: modal', () => {
@@ -75,6 +105,16 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
 
         await expect(modal).toBeVisible();
       });
+
+      test('it should scroll to selected option when opened', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#modal-select-scroll-to-selected');
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        await expect(modal).toHaveScreenshot(screenshot(`select-basic-modal-scroll-to-selected`));
+      });
     });
   });
 });

core/src/utils/helpers.ts

@@ -413,3 +413,14 @@ export const shallowEqualStringMap = (
 
   return true;
 };
+
+export const getNextSiblingOfType = <T extends Element>(element: Element): T | null => {
+  let sibling = element.nextSibling;
+  while (sibling) {
+    if (sibling.nodeType === Node.ELEMENT_NODE && (sibling as T) !== null) {
+      return sibling as T;
+    }
+    sibling = sibling.nextSibling;
+  }
+  return null;
+};