voyager-ionic-core 7.7.3 → 8.0.0-beta.1

package/dist/collection/utils/input-shims/input-shims.js

@@ -29,7 +29,14 @@ export const startInputShims = async (config, platform) => {
     const keyboardHeight = config.getNumber('keyboardHeight', 290);
     const scrollAssist = config.getBoolean('scrollAssist', true);
     const hideCaret = config.getBoolean('hideCaretOnScroll', isIOS);
-    const inputBlurring = config.getBoolean('inputBlurring', isIOS);
+    /**
+     * The team is evaluating if inputBlurring is still needed. As a result
+     * this feature is disabled by default as of Ionic 8.0. Developers are
+     * able to re-enable it temporarily. The team may remove this utility
+     * if it is determined that doing so would not bring any adverse side effects.
+     * TODO FW-6014 remove input blurring utility (including implementation)
+     */
+    const inputBlurring = config.getBoolean('inputBlurring', false);
     const scrollPadding = config.getBoolean('scrollPadding', true);
     const inputs = Array.from(doc.querySelectorAll('ion-input, ion-textarea'));
     const hideCaretMap = new WeakMap();

package/dist/collection/utils/native/status-bar.js

@@ -16,17 +16,6 @@ export const StatusBar = {
         }
         return undefined;
     },
-    // TODO FW-4696 Remove supportDefaultStatusBarStyle in Ionic v8
-    supportsDefaultStatusBarStyle() {
-        const capacitor = getCapacitor();
-        /**
-         * The 'DEFAULT' status bar style was added
-         * to the @capacitor/status-bar plugin in Capacitor 3.
-         * PluginHeaders is only supported in Capacitor 3+,
-         * so we can use this to detect Capacitor 3.
-         */
-        return !!(capacitor === null || capacitor === void 0 ? void 0 : capacitor.PluginHeaders);
-    },
     setStyle(options) {
         const engine = this.getEngine();
         if (!engine) {

package/dist/collection/utils/overlays.js

@@ -2,10 +2,12 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc } from "./browser/index";
+import { focusFirstDescendant, focusLastDescendant, focusableQueryString } from "./focus-trap";
 import { shoudUseCloseWatcher } from "./hardware-back-button";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
+import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -29,7 +31,10 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-export const pickerController = /*@__PURE__*/ createController('ion-picker');
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -86,39 +91,7 @@ export const createOverlay = (tagName, opts) => {
     }
     return Promise.resolve();
 };
-/**
- * This query string selects elements that
- * are eligible to receive focus. We select
- * interactive elements that meet the following
- * criteria:
- * 1. Element does not have a negative tabindex
- * 2. Element does not have `hidden`
- * 3. Element does not have `disabled` for non-Ionic components.
- * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
- * Note: We need this distinction because `disabled="false"` is
- * valid usage for the disabled property on ion-button.
- */
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
 const isOverlayHidden = (overlay) => overlay.classList.contains('overlay-hidden');
-/**
- * Focuses the first descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-export const focusFirstDescendant = (ref, overlay) => {
-    const firstInput = ref.querySelector(focusableQueryString);
-    focusElementInOverlay(firstInput, overlay);
-};
-/**
- * Focuses the last descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-const focusLastDescendant = (ref, overlay) => {
-    const inputs = Array.from(ref.querySelectorAll(focusableQueryString));
-    const lastInput = inputs.length > 0 ? inputs[inputs.length - 1] : null;
-    focusElementInOverlay(lastInput, overlay);
-};
 /**
  * Focuses a particular element in an overlay. If the element
  * doesn't have anything focusable associated with it then
@@ -155,7 +128,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -309,7 +282,7 @@ const trapKeyboardFocus = (ev, doc) => {
              */
             const lastFocus = lastOverlay.lastFocus;
             // Focus the first element in the overlay wrapper
-            focusFirstDescendant(lastOverlay, lastOverlay);
+            focusFirstDescendant(lastOverlay);
             /**
              * If the cached last focused element is the
              * same as the active element, then we need
@@ -320,7 +293,7 @@ const trapKeyboardFocus = (ev, doc) => {
              * last focus to equal the active element.
              */
             if (lastFocus === doc.activeElement) {
-                focusLastDescendant(lastOverlay, lastOverlay);
+                focusLastDescendant(lastOverlay);
             }
             lastOverlay.lastFocus = doc.activeElement;
         }
@@ -389,7 +362,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -455,6 +428,7 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
+    document.body.classList.add(BACKDROP_NO_SCROLL);
     /**
      * Hide all other overlays from screen readers so only this one
      * can be read. Note that presenting an overlay always makes
@@ -560,12 +534,14 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     if (!overlay.presented) {
         return false;
     }
+    const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
     /**
      * If this is the last visible overlay then
      * we want to re-add the root to the accessibility tree.
      */
-    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
+    if (lastOverlay) {
         setRootAriaHidden(false);
+        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {

package/dist/collection/utils/test/aria.spec.js

@@ -6,7 +6,8 @@ import { Item } from "../../components/item/item";
 import { Label } from "../../components/label/label";
 import { Toggle } from "../../components/toggle/toggle";
 import { getAriaLabel } from "../helpers";
-describe('getAriaLabel()', () => {
+// TODO FW-5969
+describe.skip('getAriaLabel()', () => {
     it('should correctly link component to label', async () => {
         const page = await newSpecPage({
             components: [Item, Label, Toggle],

package/dist/collection/utils/test/overlays/overlays-scroll-blocking.spec.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Modal } from "../../../components/modal/modal";
+describe('overlays: scroll blocking', () => {
+    it('should not block scroll when the overlay is created', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const body = page.doc.querySelector('body');
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should block scroll when the overlay is presented', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not block scroll when the overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal></ion-modal>
+      `,
+        });
+        const modal = page.body.querySelector('ion-modal');
+        const body = page.doc.querySelector('body');
+        await modal.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modal.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+    it('should not enable scroll until last overlay is dismissed', async () => {
+        const page = await newSpecPage({
+            components: [Modal],
+            html: `
+        <ion-modal id="one"></ion-modal>
+        <ion-modal id="two"></ion-modal>
+      `,
+        });
+        const modalOne = page.body.querySelector('#one');
+        const modalTwo = page.body.querySelector('#two');
+        const body = page.doc.querySelector('body');
+        await modalOne.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.present();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalOne.dismiss();
+        expect(body).toHaveClass('backdrop-no-scroll');
+        await modalTwo.dismiss();
+        expect(body).not.toHaveClass('backdrop-no-scroll');
+    });
+});

package/dist/collection/utils/test/playwright/generator.js

@@ -72,4 +72,5 @@ const DEFAULT_THEMES = ['light'];
 const DEFAULT_TEST_CONFIG_OPTION = {
     modes: DEFAULT_MODES,
     directions: DEFAULT_DIRECTIONS,
+    themes: DEFAULT_THEMES,
 };

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -39,7 +39,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
         <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
-        ${theme !== 'light' ? `<link href="${baseUrl}/scripts/testing/themes/${theme}.css" rel="stylesheet" />` : ''}
+        ${theme !== 'light' ? `<link href="${baseUrl}/css/themes/${theme}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
         <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>