@ionic/core 9.0.1-dev.11787949960.1e63841c → 9.0.1-dev.11788285010.17561004

package/dist/collection/components/item-sliding/item-sliding.js

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { componentOnReady, isEndSide } from "../../utils/helpers";
+import { isEndSide } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { watchForOptions } from "../../utils/watch-options";
 import { getIonMode } from "../../global/ionic-global";
@@ -178,17 +178,19 @@ export class ItemSliding {
         }
     }
     async updateOptions() {
-        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
-        /**
-         * Frameworks that assign element props after inserting the element haven't set
-         * `side` while `connectedCallback` runs, so reading it any earlier reports every
-         * option as `end`.
-         */
-        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
+        const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (const option of options) {
+        for (let i = 0; i < options.length; i++) {
+            const item = options.item(i);
+            /**
+             * We cannot use the componentOnReady helper
+             * util here since we need to wait for all of these items
+             * to be ready before we set `this.sides` and `this.optsDirty`.
+             */
+            // eslint-disable-next-line custom-rules/no-component-on-ready-method
+            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
             const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
@@ -387,7 +389,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
+        return (h(Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

package/dist/collection/components/loading/loading.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -82,10 +82,6 @@ export class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
-        // Re-apply the root lock if moved without dismiss() being called
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(this.el);
-        }
     }
     componentWillLoad() {
         if (this.spinner === undefined) {
@@ -186,14 +182,14 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: '2d14122ff3081de73631a7fdd4affdd5c73b8618', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
             }, onIonBackdropTap: this.onBackdropTap, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'loading-translucent': this.translucent,
-            } }, h("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, h("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
+            } }, h("ion-backdrop", { key: 'b7d5bb0d670a20c159d7f67327bf3b1489449188', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '085ce92bd2004d323ab47eb472b83826e48dc619', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '4ecd5bfc0bbd3da434d32f0f319f867a44c5e1f1', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '5a4498e1421e09d01c0ee4312eae5272e95c3127', class: "loading-spinner" }, h("ion-spinner", { key: '1b3bc7d45d775195657ead3535f65e6b79f37e84', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'bc7c5467b9f1c6ab957f79934e97acc713bdec37', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal/modal.ios.css

@@ -77,12 +77,7 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  /**
-   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
-   * overlay, giving the wrapper's flex children something to shrink 
-   * toward so `ion-content` scrolls instead of overflowing.
-   */
-  --max-height: 100%;
+  --max-height: auto;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -134,14 +129,8 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
- *
- * A flex layout is required for the wrapper to size itself to its content
- * when the modal is content-sized (`--height` is auto, fit-content, ...).
- * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
-  display: flex;
-  flex-direction: column;
   outline: none;
 }
 

package/dist/collection/components/modal/modal.js

@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
@@ -43,9 +43,6 @@ export class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        // True from the first safe-area write in `present()` until the enter
-        // animation settles. A position-based read in that window is not the rest position.
-        this.isPresenting = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -282,17 +279,6 @@ export class Modal {
         const { el } = this;
         prepareOverlay(el);
         this.triggerChanged();
-        // A disconnect tears down state this presentation still needs and cannot
-        // tell a re-insert from a removal, so put it back.
-        if (this.presented || this.isPresenting) {
-            this.restoreSafeAreaOverrides();
-        }
-        // A relocation from `willPresent` reaches these before `present()` has
-        // applied the lock, so they apply it instead. Both are idempotent.
-        if (this.presented) {
-            restoreRootFocusTrapAccessibility(el);
-            this.initParentRemovalObserver();
-        }
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
@@ -470,33 +456,25 @@ export class Modal {
         // Recalculate isSheetModal before safe-area setup because framework
         // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
         this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        this.isPresenting = true;
+        // Set initial safe-area overrides before animation
+        this.setInitialSafeAreaOverrides();
         const hasCardModal = presentingElement !== undefined;
-        // Wrapped so a throw cannot strand `isPresenting`, which would suppress
-        // the position-based correction for the life of this instance.
-        try {
-            // Set initial safe-area overrides before animation
-            this.setInitialSafeAreaOverrides();
-            /**
-             * We need to change the status bar at the
-             * start of the animation so that it completes
-             * by the time the card animation is done.
-             */
-            if (hasCardModal && getIonMode(this) === 'ios') {
-                // Cache the original status bar color before the modal is presented
-                this.statusBarStyle = await StatusBar.getStyle();
-                setCardStatusBarDark();
-            }
-            await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
-                presentingEl: presentingElement,
-                currentBreakpoint: this.initialBreakpoint,
-                backdropBreakpoint: this.backdropBreakpoint,
-                expandToScroll: this.expandToScroll,
-            });
-        }
-        finally {
-            this.isPresenting = false;
+        /**
+         * We need to change the status bar at the
+         * start of the animation so that it completes
+         * by the time the card animation is done.
+         */
+        if (hasCardModal && getIonMode(this) === 'ios') {
+            // Cache the original status bar color before the modal is presented
+            this.statusBarStyle = await StatusBar.getStyle();
+            setCardStatusBarDark();
         }
+        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+            presentingEl: presentingElement,
+            currentBreakpoint: this.initialBreakpoint,
+            backdropBreakpoint: this.backdropBreakpoint,
+            expandToScroll: this.expandToScroll,
+        });
         // Update safe-area based on actual position after animation
         this.updateSafeAreaOverrides();
         // Apply fullscreen safe-area padding if needed
@@ -1006,9 +984,6 @@ export class Modal {
             this.cachedOriginalParent.tagName === 'ION-APP') {
             return;
         }
-        // Both `present()` and a reconnect call this, so drop any existing
-        // observer. Below the guards, so a call that bails cannot leave none.
-        this.cleanupParentRemovalObserver();
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -1087,9 +1062,6 @@ export class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
-            // A restore after a DOM move runs this a second time for the same
-            // modal, so drop the previous subscription rather than stacking one.
-            this.unsubscribeRootSafeAreaTop?.();
             this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
@@ -1208,31 +1180,6 @@ export class Modal {
         const { contentEl } = this.findContentAndFooter();
         this.clearContentSafeAreaPadding(contentEl);
     }
-    /**
-     * Re-applies what `cleanupSafeAreaOverrides()` removed for a modal moved
-     * while presented. Anything needing no measurement goes on synchronously so
-     * the modal is never painted without safe-area. The position-based
-     * correction waits a frame for the layout pass it reads.
-     */
-    restoreSafeAreaOverrides() {
-        this.setInitialSafeAreaOverrides();
-        this.applyFullscreenSafeArea();
-        raf(() => {
-            // A dismiss or another move can land first, and a read before the enter
-            // animation settles is not the rest position. `present()` redoes it.
-            if (!this.presented || !this.el.isConnected || this.isPresenting) {
-                return;
-            }
-            // A hidden subtree carries `display: none`, so there is no box and the
-            // read would write the safe-area for a modal touching no edge. The
-            // prediction applied above holds until the modal is shown again.
-            const { width, height } = this.el.getBoundingClientRect();
-            if (width === 0 && height === 0) {
-                return;
-            }
-            this.updateSafeAreaOverrides();
-        });
-    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -1240,7 +1187,7 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, { key: '7c9c736052c5a788cf31040b6b2386dd9ea7454b', "no-router": true,
+        return (h(Host, { key: 'a471c293319cb6ee5ffb7ffafec0b8413e4289de', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1, ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
@@ -1253,7 +1200,7 @@ export class Modal {
                 'overlay-hidden': true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 ...getClassMap(this.cssClass),
-            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: '01b5b5765fb3a32393c736065c824bf760728823', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '40fa7727a0923f7d7461dd027f1511a6a148d84a', class: "modal-shadow" }), h("div", { key: '9af934b607f60795bd5bff7bee6eacfc9b14fa35',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: 'f67934afd4ddad64623856fb641cb6db846df428', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a23f5cb6cf60c8f717c1dd556bce375829c80a43', class: "modal-shadow" }), h("div", { key: '51eb6cd1070e4b7e49840a78dc7437238c867a01',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1266,9 +1213,9 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'df84a6806413b13efc5b03c862edde83151579a7', class: "modal-handle",
+            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'f49a144642b5c227c0c2b00b33f4c7e37a2bf088', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '072d3929ec6f25481946b184d8ac24219011e783', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'e781c0d5881762c6b61aa432721a38b49580ff64', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.md.css

@@ -77,12 +77,7 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  /**
-   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
-   * overlay, giving the wrapper's flex children something to shrink 
-   * toward so `ion-content` scrolls instead of overflowing.
-   */
-  --max-height: 100%;
+  --max-height: auto;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -134,14 +129,8 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
- *
- * A flex layout is required for the wrapper to size itself to its content
- * when the modal is content-sized (`--height` is auto, fit-content, ...).
- * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
-  display: flex;
-  flex-direction: column;
   outline: none;
 }