voyager-ionic-core 8.7.2 → 8.7.9

package/dist/collection/components/accordion/accordion.js

@@ -21,10 +21,57 @@ import { getIonMode } from "../../global/ionic-global";
  */
 export class Accordion {
     constructor() {
-        this.updateListener = () => this.updateState(false);
+        this.accordionGroupUpdateHandler = () => {
+            /**
+             * Determine if this update will cause an actual state change.
+             * We only want to mark as "interacted" if the state is changing.
+             */
+            const accordionGroup = this.accordionGroupEl;
+            if (accordionGroup) {
+                const value = accordionGroup.value;
+                const accordionValue = this.value;
+                const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
+                const isExpanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
+                const stateWillChange = shouldExpand !== isExpanded;
+                /**
+                 * Only mark as interacted if:
+                 * 1. This is not the first update we've received with a defined value
+                 * 2. The state is actually changing (prevents redundant updates from enabling animations)
+                 */
+                if (this.hasReceivedFirstUpdate && stateWillChange) {
+                    this.hasInteracted = true;
+                }
+                /**
+                 * Only count this as the first update if the group value is defined.
+                 * This prevents the initial undefined value from the group's componentDidLoad
+                 * from being treated as the first real update.
+                 */
+                if (value !== undefined) {
+                    this.hasReceivedFirstUpdate = true;
+                }
+            }
+            this.updateState();
+        };
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
         this.isPrevious = false;
+        /**
+         * Tracks whether a user-initiated interaction has occurred.
+         * Animations are disabled until the first interaction happens.
+         * This prevents the accordion from animating when it's programmatically
+         * set to an expanded or collapsed state on initial load.
+         */
+        this.hasInteracted = false;
+        /**
+         * Tracks if this accordion has ever been expanded.
+         * Used to prevent the first expansion from animating.
+         */
+        this.hasEverBeenExpanded = false;
+        /**
+         * Tracks if this accordion has received its first update from the group.
+         * Used to distinguish initial programmatic sets from user interactions.
+         */
+        this.hasReceivedFirstUpdate = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -129,10 +176,15 @@ export class Accordion {
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
-        this.expandAccordion = (initialUpdate = false) => {
+        this.expandAccordion = () => {
             const { contentEl, contentElWrapper } = this;
-            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
+            /**
+             * If the content elements aren't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (contentEl === undefined || contentElWrapper === undefined) {
                 this.state = 4 /* AccordionState.Expanded */;
+                this.hasEverBeenExpanded = true;
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
@@ -141,6 +193,11 @@ export class Accordion {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
             }
+            /**
+             * Mark that this accordion has been expanded at least once.
+             * This allows subsequent expansions to animate.
+             */
+            this.hasEverBeenExpanded = true;
             if (this.shouldAnimate()) {
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
@@ -158,9 +215,13 @@ export class Accordion {
                 this.state = 4 /* AccordionState.Expanded */;
             }
         };
-        this.collapseAccordion = (initialUpdate = false) => {
+        this.collapseAccordion = () => {
             const { contentEl } = this;
-            if (initialUpdate || contentEl === undefined) {
+            /**
+             * If the content element isn't available yet, just set the state.
+             * This happens on initial render before the DOM is ready.
+             */
+            if (contentEl === undefined) {
                 this.state = 1 /* AccordionState.Collapsed */;
                 return;
             }
@@ -195,6 +256,18 @@ export class Accordion {
          * of what is set in the config.
          */
         this.shouldAnimate = () => {
+            /**
+             * Don't animate until after the first user interaction.
+             * This prevents animations on initial load when accordions
+             * start in an expanded or collapsed state programmatically.
+             *
+             * Additionally, don't animate the very first expansion even if
+             * hasInteracted is true. This handles edge cases like React StrictMode
+             * where effects run twice and might incorrectly mark as interacted.
+             */
+            if (!this.hasInteracted || !this.hasEverBeenExpanded) {
+                return false;
+            }
             if (typeof window === 'undefined') {
                 return false;
             }
@@ -211,7 +284,7 @@ export class Accordion {
             }
             return true;
         };
-        this.updateState = async (initialUpdate = false) => {
+        this.updateState = async () => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -220,11 +293,11 @@ export class Accordion {
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
             if (shouldExpand) {
-                this.expandAccordion(initialUpdate);
+                this.expandAccordion();
                 this.isNext = this.isPrevious = false;
             }
             else {
-                this.collapseAccordion(initialUpdate);
+                this.collapseAccordion();
                 /**
                  * When using popout or inset,
                  * the collapsed accordion items
@@ -272,14 +345,14 @@ export class Accordion {
         var _a;
         const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
         if (accordionGroupEl) {
-            this.updateState(true);
-            addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+            this.updateState();
+            addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
         }
     }
     disconnectedCallback() {
         const accordionGroupEl = this.accordionGroupEl;
         if (accordionGroupEl) {
-            removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
+            removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
         }
     }
     componentDidLoad() {
@@ -303,6 +376,11 @@ export class Accordion {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
             return;
+        /**
+         * Mark that the user has interacted with the accordion.
+         * This enables animations for all future state changes.
+         */
+        this.hasInteracted = true;
         if (accordionGroupEl) {
             /**
              * Because the accordion group may or may
@@ -323,7 +401,7 @@ export class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
+        return (h(Host, { key: '9c90bce01eff7e5774a19f69c872f3761d66cf3c', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -334,7 +412,7 @@ export class Accordion {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, h("div", { key: '9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '464c32a37f64655eacf4218284214f5f30b14a1e', name: "header" })), h("div", { key: '8bb52e6a62d7de0106b253201a89a32e79d9a594', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '1d9dfd952ad493754aaeea7a8f625b33c2dd90a0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '970dfbc55a612d739d0ca3b7b1a08e5c96d0c479', name: "content" })))));
+            } }, h("div", { key: 'cab40d5bcf3c93fd78e70b6d3906a541e725837d', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '672bc7fb3f9e18076b41e20fc9eaeab7cafcf3a2', name: "header" })), h("div", { key: 'fd777ca5b4ab04aa4f44c339d58c8cd987c52bcb', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '0aad70a71e2cd2c16b2e98fa0bdd40421d95fe16', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'd630e10ac7c56b4dbf943b523f26759b83aead55', name: "content" })))));
     }
     static get is() { return "ion-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -355,7 +433,6 @@ export class Accordion {
         return {
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -371,11 +448,11 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "`ion-accordion-${accordionIds++}`"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -391,11 +468,11 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -411,15 +488,15 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "toggleIcon": {
-                "type": "string",
-                "attribute": "toggle-icon",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "any",
+                    "resolved": "any",
                     "references": {}
                 },
                 "required": false,
@@ -431,11 +508,11 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "toggle-icon",
                 "defaultValue": "chevronDown"
             },
             "toggleIconSlot": {
                 "type": "string",
-                "attribute": "toggle-icon-slot",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end'",
@@ -451,6 +528,7 @@ export class Accordion {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "toggle-icon-slot",
                 "defaultValue": "'end'"
             }
         };
@@ -459,7 +537,8 @@ export class Accordion {
         return {
             "state": {},
             "isNext": {},
-            "isPrevious": {}
+            "isPrevious": {},
+            "hasInteracted": {}
         };
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/accordion-group/accordion-group.js

@@ -237,7 +237,6 @@ export class AccordionGroup {
         return {
             "animated": {
                 "type": "boolean",
-                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -253,11 +252,11 @@ export class AccordionGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "animated",
                 "defaultValue": "true"
             },
             "multiple": {
                 "type": "boolean",
-                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -272,11 +271,11 @@ export class AccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "multiple"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[] | null",
@@ -291,11 +290,11 @@ export class AccordionGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -311,11 +310,11 @@ export class AccordionGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -331,11 +330,11 @@ export class AccordionGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "expand": {
                 "type": "string",
-                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "'compact' | 'inset'",
@@ -351,6 +350,7 @@ export class AccordionGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expand",
                 "defaultValue": "'compact'"
             }
         };

package/dist/collection/components/action-sheet/action-sheet.js

@@ -234,7 +234,6 @@ export class ActionSheet {
         return {
             "overlayIndex": {
                 "type": "number",
-                "attribute": "overlay-index",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -252,11 +251,11 @@ export class ActionSheet {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "overlay-index"
             },
             "delegate": {
                 "type": "unknown",
-                "attribute": "delegate",
                 "mutable": false,
                 "complexType": {
                     "original": "FrameworkDelegate",
@@ -283,7 +282,6 @@ export class ActionSheet {
             },
             "hasController": {
                 "type": "boolean",
-                "attribute": "has-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +300,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "has-controller",
                 "defaultValue": "false"
             },
             "keyboardClose": {
                 "type": "boolean",
-                "attribute": "keyboard-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +320,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "keyboard-close",
                 "defaultValue": "true"
             },
             "enterAnimation": {
                 "type": "unknown",
-                "attribute": "enter-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -350,7 +348,6 @@ export class ActionSheet {
             },
             "leaveAnimation": {
                 "type": "unknown",
-                "attribute": "leave-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder",
@@ -374,7 +371,6 @@ export class ActionSheet {
             },
             "buttons": {
                 "type": "unknown",
-                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "(ActionSheetButton | string)[]",
@@ -399,7 +395,6 @@ export class ActionSheet {
             },
             "cssClass": {
                 "type": "string",
-                "attribute": "css-class",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -414,11 +409,11 @@ export class ActionSheet {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "css-class"
             },
             "backdropDismiss": {
                 "type": "boolean",
-                "attribute": "backdrop-dismiss",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -434,11 +429,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "backdrop-dismiss",
                 "defaultValue": "true"
             },
             "header": {
                 "type": "string",
-                "attribute": "header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -453,11 +448,11 @@ export class ActionSheet {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "header"
             },
             "subHeader": {
                 "type": "string",
-                "attribute": "sub-header",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -472,11 +467,11 @@ export class ActionSheet {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "sub-header"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -492,11 +487,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "translucent",
                 "defaultValue": "false"
             },
             "animated": {
                 "type": "boolean",
-                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -512,11 +507,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "animated",
                 "defaultValue": "true"
             },
             "htmlAttributes": {
                 "type": "unknown",
-                "attribute": "html-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: any }",
@@ -534,7 +529,6 @@ export class ActionSheet {
             },
             "isOpen": {
                 "type": "boolean",
-                "attribute": "is-open",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -550,11 +544,11 @@ export class ActionSheet {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-open",
                 "defaultValue": "false"
             },
             "trigger": {
                 "type": "string",
-                "attribute": "trigger",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -569,7 +563,8 @@ export class ActionSheet {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "trigger"
             }
         };
     }