@ionic/core 7.5.8-dev.11702398696.1ab62ea9 → 7.5.8-dev.11703088210.14a72b83

package/dist/collection/components/refresher/refresher.utils.js

@@ -4,7 +4,6 @@
 import { writeTask } from "@stencil/core";
 import { createAnimation } from "../../utils/animation/animation";
 import { clamp, componentOnReady, transitionEndAsync } from "../../utils/helpers";
-import { isPlatform } from "../../utils/platform";
 export const getRefresherAnimationType = (contentEl) => {
     const previousSibling = contentEl.previousElementSibling;
     const hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
@@ -162,6 +161,24 @@ export const translateElement = (el, value, duration = 200) => {
 };
 // Utils
 // -----------------------------
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+export const supportsRubberBandScrolling = () => {
+    return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
 export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refresherContent = referenceEl.querySelector('ion-refresher-content');
     if (!refresherContent) {
@@ -172,14 +189,5 @@ export const shouldUseNativeRefresher = async (referenceEl, mode) => {
     const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
     return (pullingSpinner !== null &&
         refreshingSpinner !== null &&
-        /**
-         * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-         * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-         * However, it will be the empty string on iOS.
-         * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-         * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-         * set on the element, even if the platform does not support that.
-         */
-        ((mode === 'ios' && isPlatform('mobile') && referenceEl.style.webkitOverflowScrolling !== undefined) ||
-            mode === 'md'));
+        ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md'));
 };

package/dist/collection/components/refresher-content/refresher-content.js

@@ -3,11 +3,11 @@
  */
 import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { isPlatform } from "../../utils/platform";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { arrowDown, caretBackSharp } from "ionicons/icons";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
+import { supportsRubberBandScrolling } from "../refresher/refresher.utils";
 import { SPINNERS } from "../spinner/spinner-configs";
 export class RefresherContent {
     constructor() {
@@ -19,9 +19,15 @@ export class RefresherContent {
     }
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
+            /**
+             * The native iOS refresher uses a spinner instead of
+             * an icon, so we need to see if this device supports
+             * the native iOS refresher.
+             */
+            const hasRubberBandScrolling = supportsRubberBandScrolling();
             const mode = getIonMode(this);
-            const overflowRefresher = this.el.style.webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
-            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular');
+            const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
+            this.pullingIcon = config.get('refreshingIcon', mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular');
         }
         if (this.refreshingSpinner === undefined) {
             const mode = getIonMode(this);

package/dist/collection/components/searchbar/searchbar.js

@@ -180,8 +180,6 @@ export class Searchbar {
      *
      * Developers who wish to focus an input when an overlay is presented
      * should call `setFocus` after `didPresent` has resolved.
-     *
-     * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
         if (this.nativeInput) {
@@ -892,7 +890,7 @@ export class Searchbar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
+                    "text": "Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global\n`input.focus()`.\n\nDevelopers who wish to focus an input when a page enters\nshould call `setFocus()` in the `ionViewDidEnter()` lifecycle method.\n\nDevelopers who wish to focus an input when an overlay is presented\nshould call `setFocus` after `didPresent` has resolved.",
                     "tags": []
                 }
             },

package/dist/collection/components/textarea/textarea.js

@@ -160,8 +160,6 @@ export class Textarea {
     /**
      * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global
      * `textarea.focus()`.
-     *
-     * See [managing focus](/docs/developing/managing-focus) for more information.
      */
     async setFocus() {
         if (this.nativeInput) {
@@ -450,7 +448,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.\n\nThis may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information."
+                    "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
                 },
                 "attribute": "autofocus",
                 "reflect": false,
@@ -1037,7 +1035,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.\n\nSee [managing focus](/docs/developing/managing-focus) for more information.",
+                    "text": "Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global\n`textarea.focus()`.",
                     "tags": []
                 }
             },

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
         this.ctrl = undefined;
     }
 }
-export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/overlays.js

@@ -5,7 +5,6 @@ import { doc } from "./browser/index";
 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, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -29,10 +28,7 @@ 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');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
+export const pickerController = /*@__PURE__*/ createController('ion-picker');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -142,7 +138,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -327,7 +323,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-legacy,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -393,7 +389,6 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         return;
     }
     setRootAriaHidden(true);
-    document.body.classList.add(BACKDROP_NO_SCROLL);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -456,14 +451,12 @@ 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 (lastOverlay) {
+    if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
         setRootAriaHidden(false);
-        document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     overlay.presented = false;
     try {