@ionic/core 8.7.13-dev.11765550444.1d97de23 → 8.7.13-dev.11765552290.11441928

package/components/ion-datetime.js

@@ -1085,52 +1085,64 @@ 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
+         * FW-6931: 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');
-                });
-            }
-        });
-        /**
-         * 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); });
+        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) {
+                    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');
+                    });
+                }
+            });
+            /**
+             * 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 +1871,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: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "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

@@ -1081,52 +1081,64 @@ 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
+         * FW-6931: 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');
-                });
-            }
-        });
-        /**
-         * 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); });
+        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) {
+                    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');
+                    });
+                }
+            });
+            /**
+             * 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 +1867,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: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "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

@@ -880,52 +880,64 @@ 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
+         * FW-6931: 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');
-                });
-            }
-        });
-        /**
-         * 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); });
+        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) {
+                    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');
+                    });
+                }
+            });
+            /**
+             * 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 +1666,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: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "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-12T15:13:24",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.0",

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

@@ -1079,52 +1079,64 @@ 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
+         * FW-6931: 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');
-                });
-            }
-        });
-        /**
-         * 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); });
+        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) {
+                    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');
+                    });
+                }
+            });
+            /**
+             * 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 +1865,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: '187a5b5cf1413449a9db33f8c5b0fd3b7fded302', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,