@ionic/core 7.4.4-dev.11699472805.157e2476 → 7.4.4-dev.11699475060.1eee2115

package/dist/collection/components/nav/nav.js

@@ -672,7 +672,6 @@ export class Nav {
       : undefined;
     const mode = getIonMode(this);
     const enteringEl = enteringView.element;
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const leavingEl = leavingView && leavingView.element;
     const animationOpts = Object.assign(Object.assign({ mode, showGoBack: this.canGoBackSync(enteringView), baseEl: this.el, progressCallback, animated: this.animated && config.getBoolean('animated', true), enteringEl,
       leavingEl }, opts), { animationBuilder: opts.animationBuilder || this.animation || config.get('navAnimation') });

package/dist/collection/components/radio/radio.js

@@ -27,7 +27,10 @@ export class Radio {
       }
     };
     this.onClick = () => {
-      const { radioGroup, checked } = this;
+      const { radioGroup, checked, disabled } = this;
+      if (disabled) {
+        return;
+      }
       /**
        * The legacy control uses a native input inside
        * of the radio host, so we can set this.checked

package/dist/collection/components/radio-group/radio-group.js

@@ -33,7 +33,7 @@ export class RadioGroup {
        * using the `name` attribute.
        */
       const selectedRadio = ev.target && ev.target.closest('ion-radio');
-      if (selectedRadio) {
+      if (selectedRadio && selectedRadio.disabled === false) {
         const currentValue = this.value;
         const newValue = selectedRadio.value;
         if (newValue !== currentValue) {

package/dist/collection/components/router/router.js

@@ -215,14 +215,12 @@ export class Router {
     }
     const routes = readRoutes(this.el);
     const fromChain = findChainForSegments(from, routes);
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const beforeLeaveHook = fromChain && fromChain[fromChain.length - 1].beforeLeave;
     const canLeave = beforeLeaveHook ? await beforeLeaveHook() : true;
     if (canLeave === false || typeof canLeave === 'object') {
       return canLeave;
     }
     const toChain = findChainForSegments(to, routes);
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const beforeEnterHook = toChain && toChain[toChain.length - 1].beforeEnter;
     return beforeEnterHook ? beforeEnterHook() : true;
   }

package/dist/collection/components/router/utils/path.js

@@ -38,7 +38,6 @@ export const chainToSegments = (chain) => {
   for (const route of chain) {
     for (const segment of route.segments) {
       if (segment[0] === ':') {
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
         const param = route.params && route.params[segment.slice(1)];
         if (!param) {
           return null;

package/dist/collection/components/select/select.js

@@ -119,25 +119,39 @@ export class Select {
     await overlay.present();
     // focus selected option for popovers
     if (this.interface === 'popover') {
-      let indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
-      indexOfSelected = indexOfSelected > -1 ? indexOfSelected : 0; // default to first option if nothing selected
-      const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
-      if (selectedItem) {
-        focusElement(selectedItem);
+      const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+      if (indexOfSelected > -1) {
+        const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
+        if (selectedItem) {
+          focusElement(selectedItem);
+          /**
+           * Browsers such as Firefox do not
+           * correctly delegate focus when manually
+           * focusing an element with delegatesFocus.
+           * We work around this by manually focusing
+           * the interactive element.
+           * ion-radio and ion-checkbox are the only
+           * elements that ion-select-popover uses, so
+           * we only need to worry about those two components
+           * when focusing.
+           */
+          const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
+          if (interactiveEl) {
+            interactiveEl.focus();
+          }
+        }
+      }
+      else {
         /**
-         * Browsers such as Firefox do not
-         * correctly delegate focus when manually
-         * focusing an element with delegatesFocus.
-         * We work around this by manually focusing
-         * the interactive element.
-         * ion-radio and ion-checkbox are the only
-         * elements that ion-select-popover uses, so
-         * we only need to worry about those two components
-         * when focusing.
+         * If no value is set then focus the first enabled option.
          */
-        const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
-        if (interactiveEl) {
-          interactiveEl.focus();
+        const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
+        if (firstEnabledOption) {
+          focusElement(firstEnabledOption.closest('ion-item'));
+          /**
+           * Focus the option for the same reason as we do above.
+           */
+          firstEnabledOption.focus();
         }
       }
     }
@@ -642,7 +656,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
   }
   renderListbox() {
     const { disabled, inputId, isExpanded } = this;
-    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+    return (h("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "listbox", "aria-expanded": `${isExpanded}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
   }
   render() {
     const { legacyFormController } = this;

package/dist/collection/components/select/test/disabled/select.e2e.js

@@ -0,0 +1,30 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('select: disabled options'), () => {
+    test('should not focus a disabled option when no value is set', async ({ page, skip }) => {
+      // TODO (FW-2979)
+      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28284',
+      });
+      await page.setContent(`
+        <ion-select interface="popover">
+          <ion-select-option value="a" disabled="true">A</ion-select-option>
+          <ion-select-option value="b">B</ion-select-option>
+        </ion-select>
+      `, config);
+      const select = page.locator('ion-select');
+      const popover = page.locator('ion-popover');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      await select.click();
+      await ionPopoverDidPresent.next();
+      const popoverOption = popover.locator('.select-interface-option:nth-of-type(2) ion-radio');
+      await expect(popoverOption).toBeFocused();
+    });
+  });
+});

package/dist/collection/components/toast/animations/ios.enter.js

@@ -6,12 +6,13 @@ import { getElementRoot } from "../../../utils/helpers";
 /**
  * iOS Toast Enter Animation
  */
-export const iosEnterAnimation = (baseEl, opts) => {
+export const iosEnterAnimation = (baseEl, position) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
+  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':

package/dist/collection/components/toast/animations/ios.leave.js

@@ -6,12 +6,13 @@ import { getElementRoot } from "../../../utils/helpers";
 /**
  * iOS Toast Leave Animation
  */
-export const iosLeaveAnimation = (baseEl, opts) => {
+export const iosLeaveAnimation = (baseEl, position) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
+  const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':

package/dist/collection/components/toast/animations/md.enter.js

@@ -6,12 +6,13 @@ import { getElementRoot } from "../../../utils/helpers";
 /**
  * MD Toast Enter Animation
  */
-export const mdEnterAnimation = (baseEl, opts) => {
+export const mdEnterAnimation = (baseEl, position) => {
   const baseAnimation = createAnimation();
   const wrapperAnimation = createAnimation();
-  const { position, top, bottom } = opts;
   const root = getElementRoot(baseEl);
   const wrapperEl = root.querySelector('.toast-wrapper');
+  const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
   wrapperAnimation.addElement(wrapperEl);
   switch (position) {
     case 'top':

package/dist/collection/components/toast/toast.js

@@ -15,7 +15,6 @@ 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 { getAnimationPosition } from "./animations/utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -55,7 +54,6 @@ export class Toast {
     this.message = undefined;
     this.keyboardClose = false;
     this.position = 'bottom';
-    this.positionAnchor = undefined;
     this.buttons = undefined;
     this.translucent = false;
     this.animated = true;
@@ -103,19 +101,7 @@ export class Toast {
   async present() {
     const unlock = await this.lockController.lock();
     await this.delegateController.attachViewToDom();
-    const { el, position } = this;
-    const anchor = this.getAnchorElement();
-    const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
-    /**
-     * Cache the calculated position of the toast, so we can re-use it
-     * in the dismiss animation.
-     */
-    this.lastPresentedPosition = animationPosition;
-    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
-      position,
-      top: animationPosition.top,
-      bottom: animationPosition.bottom,
-    });
+    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
     /**
      * Content is revealed to screen readers after
      * the transition to avoid jank since this
@@ -137,28 +123,15 @@ export class Toast {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   async dismiss(data, role) {
-    var _a, _b;
     const unlock = await this.lockController.lock();
-    const { durationTimeout, position, lastPresentedPosition } = this;
-    if (durationTimeout) {
-      clearTimeout(durationTimeout);
+    if (this.durationTimeout) {
+      clearTimeout(this.durationTimeout);
     }
-    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
-    /**
-     * Fetch the cached position that was calculated back in the present
-     * animation. We always want to animate the dismiss from the same
-     * position the present stopped at, so the animation looks continuous.
-     */
-    {
-      position,
-      top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
-      bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
-    });
+    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
     if (dismissed) {
       this.delegateController.removeViewFromDom();
       this.revealContentToScreenReader = false;
     }
-    this.lastPresentedPosition = undefined;
     unlock();
     return dismissed;
   }
@@ -182,44 +155,6 @@ export class Toast {
       : [];
     return buttons;
   }
-  /**
-   * Returns the element specified by the positionAnchor prop,
-   * or undefined if prop's value is an ID string and the element
-   * is not found in the DOM.
-   */
-  getAnchorElement() {
-    const { position, positionAnchor, el } = this;
-    /**
-     * If positionAnchor is undefined then
-     * no anchor should be used when presenting the toast.
-     */
-    if (positionAnchor === undefined) {
-      return;
-    }
-    if (position === 'middle' && positionAnchor !== undefined) {
-      printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
-      return undefined;
-    }
-    if (typeof positionAnchor === 'string') {
-      /**
-       * If the anchor is defined as an ID, find the element.
-       * We do this on every present so the toast doesn't need
-       * to account for the surrounding DOM changing since the
-       * last time it was presented.
-       */
-      const foundEl = document.getElementById(positionAnchor);
-      if (foundEl === null) {
-        printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
-        return undefined;
-      }
-      return foundEl;
-    }
-    if (positionAnchor instanceof HTMLElement) {
-      return positionAnchor;
-    }
-    printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
-    return undefined;
-  }
   async buttonClick(button) {
     const role = button.role;
     if (isCancel(role)) {
@@ -582,34 +517,12 @@ export class Toast {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The starting position of the toast on the screen. Can be tweaked further\nusing the `positionAnchor` property."
+          "text": "The position of the toast on the screen."
         },
         "attribute": "position",
         "reflect": false,
         "defaultValue": "'bottom'"
       },
-      "positionAnchor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | string",
-          "resolved": "HTMLElement | string | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global",
-              "id": "global::HTMLElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The element to anchor the toast's position to. Can be set as a direct reference\nor the ID of the element. With `position=\"bottom\"`, the toast will sit above the\nchosen element. With `position=\"top\"`, the toast will sit below the chosen element.\nWith `position=\"middle\"`, the value of `positionAnchor` is ignored."
-        },
-        "attribute": "position-anchor",
-        "reflect": false
-      },
       "buttons": {
         "type": "unknown",
         "mutable": false,
@@ -900,9 +813,8 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastPresentOptions": {
-              "location": "import",
-              "path": "./toast-interface",
-              "id": "src/components/toast/toast-interface.ts::ToastPresentOptions"
+              "location": "global",
+              "id": "global::ToastPresentOptions"
             }
           },
           "return": "Promise<void>"
@@ -934,9 +846,8 @@ export class Toast {
               "id": "global::Promise"
             },
             "ToastDismissOptions": {
-              "location": "import",
-              "path": "./toast-interface",
-              "id": "src/components/toast/toast-interface.ts::ToastDismissOptions"
+              "location": "global",
+              "id": "global::ToastDismissOptions"
             }
           },
           "return": "Promise<boolean>"

package/dist/collection/components/toggle/toggle.js

@@ -44,6 +44,9 @@ export class Toggle {
       }
     };
     this.onClick = (ev) => {
+      if (this.disabled) {
+        return;
+      }
       ev.preventDefault();
       if (this.lastDrag + 300 < Date.now()) {
         this.toggleChecked();

package/dist/collection/index.js

@@ -13,7 +13,6 @@ export { componentOnReady } from './utils/helpers';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';
-export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
 export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';

package/dist/collection/utils/menu-controller/index.js

@@ -1,7 +1,6 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonWarning } from "../logging/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
@@ -11,21 +10,21 @@ const createMenuController = () => {
   const menuAnimations = new Map();
   const menus = [];
   const open = async (menu) => {
-    const menuEl = await get(menu, true);
+    const menuEl = await get(menu);
     if (menuEl) {
       return menuEl.open();
     }
     return false;
   };
   const close = async (menu) => {
-    const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
+    const menuEl = await (menu !== undefined ? get(menu) : getOpen());
     if (menuEl !== undefined) {
       return menuEl.close();
     }
     return false;
   };
   const toggle = async (menu) => {
-    const menuEl = await get(menu, true);
+    const menuEl = await get(menu);
     if (menuEl) {
       return menuEl.toggle();
     }
@@ -63,35 +62,18 @@ const createMenuController = () => {
     }
     return false;
   };
-  /**
-   * Finds and returns the menu specified by "menu" if registered.
-   * @param menu - The side or ID of the desired menu
-   * @param logOnMultipleSideMenus - If true, this function will log a warning
-   * if "menu" is a side but multiple menus on the same side were found. Since this function
-   * is used in multiple places, we default this log to false so that the calling
-   * functions can choose whether or not it is appropriate to log this warning.
-   */
-  const get = async (menu, logOnMultipleSideMenus = false) => {
+  const get = async (menu) => {
     await waitUntilReady();
     if (menu === 'start' || menu === 'end') {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
-      const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
-      if (menuRefs.length >= 1) {
-        if (menuRefs.length > 1 && logOnMultipleSideMenus) {
-          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
-        }
-        return menuRefs[0].el;
+      const menuRef = find((m) => m.side === menu && !m.disabled);
+      if (menuRef) {
+        return menuRef;
       }
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
-      const sideMenuRefs = menus.filter((m) => m.side === menu);
-      if (sideMenuRefs.length >= 1) {
-        if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
-          printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
-        }
-        return sideMenuRefs[0].el;
-      }
+      return find((m) => m.side === menu);
     }
     else if (menu != null) {
       // the menuId was not left or right
@@ -133,6 +115,9 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        _setActiveMenu(menu);
+      }
       menus.push(menu);
     }
   };
@@ -142,6 +127,13 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
+  const _setActiveMenu = (menu) => {
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
+  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -213,6 +205,7 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
+    _setActiveMenu,
   };
 };
 export const menuController = /*@__PURE__*/ createMenuController();

package/dist/collection/utils/native/haptic.js

@@ -75,7 +75,6 @@ const HapticEngine = {
      * if the browser does not support the Vibrate API.
      */
     if ((capacitor === null || capacitor === void 0 ? void 0 : capacitor.getPlatform()) === 'web') {
-      // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
       return typeof navigator !== 'undefined' && navigator.vibrate !== undefined;
     }
     return true;

package/dist/collection/utils/overlays.js

@@ -68,7 +68,6 @@ export const setOverlayId = (el) => {
   return el.id;
 };
 export const createOverlay = (tagName, opts) => {
-  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
   if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     return window.customElements.whenDefined(tagName).then(() => {
       const element = document.createElement(tagName);

package/dist/collection/utils/transition/ios.transition.js

@@ -202,7 +202,6 @@ export const iosTransitionAnimation = (navEl, opts) => {
       .easing(opts.easing || EASING)
       .fill('both')
       .beforeRemoveClass('ion-page-invisible');
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     if (leavingEl && navEl !== null && navEl !== undefined) {
       const navDecorAnimation = createAnimation();
       navDecorAnimation.addElement(navEl);