@ionic/core 8.7.13-dev.11765550444.1d97de23 → 8.7.13-dev.11765558154.1273081d

package/components/ion-datetime.js

@@ -1071,6 +1071,10 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1085,52 +1089,73 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
          * visible if used inside of a modal or a popover otherwise the scrollable
          * areas will not have the correct values snapped into place.
          *
-         * We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * We use ResizeObserver to detect when the element transitions between
+         * having dimensions (visible) and zero dimensions (hidden). This is more
+         * reliable than IntersectionObserver for detecting visibility changes,
+         * especially when the element is inside a modal or popover.
          */
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const { width, height } = entry.contentRect;
-            const isVisible = width > 0 && height > 0;
-            const isReady = el.classList.contains('datetime-ready');
-            if (isVisible && !isReady) {
-                this.initializeListeners();
-                /**
-                 * TODO FW-2793: Datetime needs a frame to ensure that it
-                 * can properly scroll contents into view. As a result
-                 * we hide the scrollable content until after that frame
-                 * so users do not see the content quickly shifting. The downside
-                 * is that the content will pop into view a frame after. Maybe there
-                 * is a better way to handle this?
-                 */
-                writeTask(() => {
-                    el.classList.add('datetime-ready');
-                });
-            }
-            else if (!isVisible && isReady) {
-                /**
-                 * Clean up listeners when hidden so we can properly
-                 * reinitialize scroll positions on re-presentation.
-                 */
-                this.destroyInteractionListeners();
-                /**
-                 * Close month/year picker when hidden, otherwise
-                 * it will be open when re-presented with a 0-height
-                 * scroll area, showing the wrong month.
-                 */
-                this.showMonthAndYear = false;
-                writeTask(() => {
-                    el.classList.remove('datetime-ready');
-                });
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
             }
-        });
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+        };
         /**
-         * Use raf to avoid a race condition between the component loading and
-         * its display animation starting (such as when shown in a modal).
+         * FW-6931: If datetime is inside a popover or modal, listen for the
+         * overlay's present/dismiss events. This is more reliable than
+         * ResizeObserver in some browsers (e.g., WebKit) where the observer
+         * doesn't always fire when the overlay opens.
          */
-        raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        if (parentOverlay) {
+            const handlePresent = () => markReady();
+            const handleDismiss = () => markHidden();
+            parentOverlay.addEventListener('didPresent', handlePresent);
+            parentOverlay.addEventListener('didDismiss', handleDismiss);
+            this.destroyOverlayListeners = () => {
+                parentOverlay.removeEventListener('didPresent', handlePresent);
+                parentOverlay.removeEventListener('didDismiss', handleDismiss);
+            };
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                const { width, height } = entry.contentRect;
+                const isVisible = width > 0 && height > 0;
+                const isReady = el.classList.contains('datetime-ready');
+                if (isVisible && !isReady) {
+                    markReady();
+                }
+                else if (!isVisible && isReady) {
+                    markHidden();
+                }
+            });
+            /**
+             * Use raf to avoid a race condition between the component loading and
+             * its display animation starting (such as when shown in a modal).
+             */
+            raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        }
+        else {
+            /**
+             * Fallback for test environments where ResizeObserver is not available.
+             * Just mark as ready without initializing scroll/keyboard listeners
+             * since those also require browser APIs not available in Jest.
+             */
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        }
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1859,7 +1884,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'f4d2e6577c288bdbd814760ab70cccfd91815f06', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -1067,6 +1067,10 @@ const Datetime = class {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1081,52 +1085,73 @@ const Datetime = class {
          * visible if used inside of a modal or a popover otherwise the scrollable
          * areas will not have the correct values snapped into place.
          *
-         * We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * We use ResizeObserver to detect when the element transitions between
+         * having dimensions (visible) and zero dimensions (hidden). This is more
+         * reliable than IntersectionObserver for detecting visibility changes,
+         * especially when the element is inside a modal or popover.
          */
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const { width, height } = entry.contentRect;
-            const isVisible = width > 0 && height > 0;
-            const isReady = el.classList.contains('datetime-ready');
-            if (isVisible && !isReady) {
-                this.initializeListeners();
-                /**
-                 * TODO FW-2793: Datetime needs a frame to ensure that it
-                 * can properly scroll contents into view. As a result
-                 * we hide the scrollable content until after that frame
-                 * so users do not see the content quickly shifting. The downside
-                 * is that the content will pop into view a frame after. Maybe there
-                 * is a better way to handle this?
-                 */
-                index.writeTask(() => {
-                    el.classList.add('datetime-ready');
-                });
-            }
-            else if (!isVisible && isReady) {
-                /**
-                 * Clean up listeners when hidden so we can properly
-                 * reinitialize scroll positions on re-presentation.
-                 */
-                this.destroyInteractionListeners();
-                /**
-                 * Close month/year picker when hidden, otherwise
-                 * it will be open when re-presented with a 0-height
-                 * scroll area, showing the wrong month.
-                 */
-                this.showMonthAndYear = false;
-                index.writeTask(() => {
-                    el.classList.remove('datetime-ready');
-                });
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
             }
-        });
+            this.initializeListeners();
+            index.writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            index.writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+        };
         /**
-         * Use raf to avoid a race condition between the component loading and
-         * its display animation starting (such as when shown in a modal).
+         * FW-6931: If datetime is inside a popover or modal, listen for the
+         * overlay's present/dismiss events. This is more reliable than
+         * ResizeObserver in some browsers (e.g., WebKit) where the observer
+         * doesn't always fire when the overlay opens.
          */
-        helpers.raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        if (parentOverlay) {
+            const handlePresent = () => markReady();
+            const handleDismiss = () => markHidden();
+            parentOverlay.addEventListener('didPresent', handlePresent);
+            parentOverlay.addEventListener('didDismiss', handleDismiss);
+            this.destroyOverlayListeners = () => {
+                parentOverlay.removeEventListener('didPresent', handlePresent);
+                parentOverlay.removeEventListener('didDismiss', handleDismiss);
+            };
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                const { width, height } = entry.contentRect;
+                const isVisible = width > 0 && height > 0;
+                const isReady = el.classList.contains('datetime-ready');
+                if (isVisible && !isReady) {
+                    markReady();
+                }
+                else if (!isVisible && isReady) {
+                    markHidden();
+                }
+            });
+            /**
+             * Use raf to avoid a race condition between the component loading and
+             * its display animation starting (such as when shown in a modal).
+             */
+            helpers.raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        }
+        else {
+            /**
+             * Fallback for test environments where ResizeObserver is not available.
+             * Just mark as ready without initializing scroll/keyboard listeners
+             * since those also require browser APIs not available in Jest.
+             */
+            index.writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        }
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1855,7 +1880,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
-        return (index.h(index.Host, { key: 'f4d2e6577c288bdbd814760ab70cccfd91815f06', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/collection/components/datetime/datetime.js

@@ -866,6 +866,10 @@ export class Datetime {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -880,52 +884,73 @@ export class Datetime {
          * visible if used inside of a modal or a popover otherwise the scrollable
          * areas will not have the correct values snapped into place.
          *
-         * We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * We use ResizeObserver to detect when the element transitions between
+         * having dimensions (visible) and zero dimensions (hidden). This is more
+         * reliable than IntersectionObserver for detecting visibility changes,
+         * especially when the element is inside a modal or popover.
          */
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const { width, height } = entry.contentRect;
-            const isVisible = width > 0 && height > 0;
-            const isReady = el.classList.contains('datetime-ready');
-            if (isVisible && !isReady) {
-                this.initializeListeners();
-                /**
-                 * TODO FW-2793: Datetime needs a frame to ensure that it
-                 * can properly scroll contents into view. As a result
-                 * we hide the scrollable content until after that frame
-                 * so users do not see the content quickly shifting. The downside
-                 * is that the content will pop into view a frame after. Maybe there
-                 * is a better way to handle this?
-                 */
-                writeTask(() => {
-                    el.classList.add('datetime-ready');
-                });
-            }
-            else if (!isVisible && isReady) {
-                /**
-                 * Clean up listeners when hidden so we can properly
-                 * reinitialize scroll positions on re-presentation.
-                 */
-                this.destroyInteractionListeners();
-                /**
-                 * Close month/year picker when hidden, otherwise
-                 * it will be open when re-presented with a 0-height
-                 * scroll area, showing the wrong month.
-                 */
-                this.showMonthAndYear = false;
-                writeTask(() => {
-                    el.classList.remove('datetime-ready');
-                });
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
             }
-        });
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+        };
         /**
-         * Use raf to avoid a race condition between the component loading and
-         * its display animation starting (such as when shown in a modal).
+         * FW-6931: If datetime is inside a popover or modal, listen for the
+         * overlay's present/dismiss events. This is more reliable than
+         * ResizeObserver in some browsers (e.g., WebKit) where the observer
+         * doesn't always fire when the overlay opens.
          */
-        raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        if (parentOverlay) {
+            const handlePresent = () => markReady();
+            const handleDismiss = () => markHidden();
+            parentOverlay.addEventListener('didPresent', handlePresent);
+            parentOverlay.addEventListener('didDismiss', handleDismiss);
+            this.destroyOverlayListeners = () => {
+                parentOverlay.removeEventListener('didPresent', handlePresent);
+                parentOverlay.removeEventListener('didDismiss', handleDismiss);
+            };
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                const { width, height } = entry.contentRect;
+                const isVisible = width > 0 && height > 0;
+                const isReady = el.classList.contains('datetime-ready');
+                if (isVisible && !isReady) {
+                    markReady();
+                }
+                else if (!isVisible && isReady) {
+                    markHidden();
+                }
+            });
+            /**
+             * Use raf to avoid a race condition between the component loading and
+             * its display animation starting (such as when shown in a modal).
+             */
+            raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        }
+        else {
+            /**
+             * Fallback for test environments where ResizeObserver is not available.
+             * Just mark as ready without initializing scroll/keyboard listeners
+             * since those also require browser APIs not available in Jest.
+             */
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        }
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1654,7 +1679,7 @@ export class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'f4d2e6577c288bdbd814760ab70cccfd91815f06', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-12T14:42:28",
+  "timestamp": "2025-12-12T16:51:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

package/dist/esm/ion-datetime_3.entry.js

@@ -1065,6 +1065,10 @@ const Datetime = class {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
+        if (this.destroyOverlayListeners) {
+            this.destroyOverlayListeners();
+            this.destroyOverlayListeners = undefined;
+        }
     }
     initializeListeners() {
         this.initializeCalendarListener();
@@ -1079,52 +1083,73 @@ const Datetime = class {
          * visible if used inside of a modal or a popover otherwise the scrollable
          * areas will not have the correct values snapped into place.
          *
-         * We use ResizeObserver to detect when the element transitions
-         * between having dimensions (visible) and zero dimensions (hidden). This
-         * is more reliable than IntersectionObserver for detecting visibility
-         * changes, especially when the element is inside a modal or popover.
+         * We use ResizeObserver to detect when the element transitions between
+         * having dimensions (visible) and zero dimensions (hidden). This is more
+         * reliable than IntersectionObserver for detecting visibility changes,
+         * especially when the element is inside a modal or popover.
          */
-        this.resizeObserver = new ResizeObserver((entries) => {
-            const entry = entries[0];
-            const { width, height } = entry.contentRect;
-            const isVisible = width > 0 && height > 0;
-            const isReady = el.classList.contains('datetime-ready');
-            if (isVisible && !isReady) {
-                this.initializeListeners();
-                /**
-                 * TODO FW-2793: Datetime needs a frame to ensure that it
-                 * can properly scroll contents into view. As a result
-                 * we hide the scrollable content until after that frame
-                 * so users do not see the content quickly shifting. The downside
-                 * is that the content will pop into view a frame after. Maybe there
-                 * is a better way to handle this?
-                 */
-                writeTask(() => {
-                    el.classList.add('datetime-ready');
-                });
-            }
-            else if (!isVisible && isReady) {
-                /**
-                 * Clean up listeners when hidden so we can properly
-                 * reinitialize scroll positions on re-presentation.
-                 */
-                this.destroyInteractionListeners();
-                /**
-                 * Close month/year picker when hidden, otherwise
-                 * it will be open when re-presented with a 0-height
-                 * scroll area, showing the wrong month.
-                 */
-                this.showMonthAndYear = false;
-                writeTask(() => {
-                    el.classList.remove('datetime-ready');
-                });
+        const markReady = () => {
+            if (el.classList.contains('datetime-ready')) {
+                return;
             }
-        });
+            this.initializeListeners();
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        };
+        const markHidden = () => {
+            this.destroyInteractionListeners();
+            this.showMonthAndYear = false;
+            writeTask(() => {
+                el.classList.remove('datetime-ready');
+            });
+        };
         /**
-         * Use raf to avoid a race condition between the component loading and
-         * its display animation starting (such as when shown in a modal).
+         * FW-6931: If datetime is inside a popover or modal, listen for the
+         * overlay's present/dismiss events. This is more reliable than
+         * ResizeObserver in some browsers (e.g., WebKit) where the observer
+         * doesn't always fire when the overlay opens.
          */
-        raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        const parentOverlay = el.closest('ion-modal, ion-popover');
+        if (parentOverlay) {
+            const handlePresent = () => markReady();
+            const handleDismiss = () => markHidden();
+            parentOverlay.addEventListener('didPresent', handlePresent);
+            parentOverlay.addEventListener('didDismiss', handleDismiss);
+            this.destroyOverlayListeners = () => {
+                parentOverlay.removeEventListener('didPresent', handlePresent);
+                parentOverlay.removeEventListener('didDismiss', handleDismiss);
+            };
+        }
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                const entry = entries[0];
+                const { width, height } = entry.contentRect;
+                const isVisible = width > 0 && height > 0;
+                const isReady = el.classList.contains('datetime-ready');
+                if (isVisible && !isReady) {
+                    markReady();
+                }
+                else if (!isVisible && isReady) {
+                    markHidden();
+                }
+            });
+            /**
+             * Use raf to avoid a race condition between the component loading and
+             * its display animation starting (such as when shown in a modal).
+             */
+            raf(() => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); });
+        }
+        else {
+            /**
+             * Fallback for test environments where ResizeObserver is not available.
+             * Just mark as ready without initializing scroll/keyboard listeners
+             * since those also require browser APIs not available in Jest.
+             */
+            writeTask(() => {
+                el.classList.add('datetime-ready');
+            });
+        }
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -1853,7 +1878,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: 'f4d2e6577c288bdbd814760ab70cccfd91815f06', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: '5d01aefc3fc66ae90c4b1a85e0f804a3e7819c44', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,