@ionic/core 9.0.1-dev.11788285010.17561004 → 9.0.1-dev.11788375537.1f38f077

package/dist/collection/components/select/select.js

@@ -8,7 +8,7 @@ import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../..
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
-import { reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
+import { blockedTags, reflectPropertiesToAttributes, sanitizeDOMTree } from "../../utils/sanitization/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
@@ -947,7 +947,7 @@ export class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: '5d1e5bf46d0f204efdcb55cc42cfde52e6db304b', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -965,7 +965,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '15fd1f8e06510ae8472c621cf8cf90e51172e0be', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7964e3d9351671899793b117896acdda25ec24c4', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'aa309ef155c4025acfd7ed5739b5221c85097b36', name: "start" })), h("div", { key: '23d5a9dfea64a9d81b0b36d9426b15bed98901b9', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '810da9fbfa8771e09b5fb768d64e5f04858b5833', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'bf1c04704326ecfa14cf2e49bb76d3fb45beb08d', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '76a8bcaeefdcaa908aebd820d93171b08165cee3', name: "end" })), shouldRenderHighlight && h("div", { key: '55a9c417a82323a44e16328fd62a634d9d7c558b', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1663,29 +1663,14 @@ const textForValue = (opts, value, compareWith, useHTML = false) => {
         return getOptionContent(selectOpt, undefined, true);
     }
     /**
-     * When custom HTML is enabled, extract only the default slot content.
-     * This ensures aria-label and other text-only contexts read only
-     * the relevant option text.
+     * Every text-only context reads only the default slot, so the start
+     * and end slots stay out of the `aria-label` and the overlay labels.
+     * Both config paths derive that text through the same helper, so they
+     * cannot disagree about what an option's text is. `null` marks an
+     * option with no text, which is dropped from the joined text of a
+     * `multiple` select rather than joined in as an empty entry.
      */
-    if (customHTMLEnabled) {
-        const content = getOptionContent(selectOpt);
-        if (typeof content === 'string') {
-            return content;
-        }
-        /**
-         * Elements were found in the default slot, extract and concatenate
-         * their text content while trimming whitespace.
-         */
-        if (content) {
-            const texts = Array.from(content.childNodes)
-                .map((n) => n.textContent?.trim())
-                .filter((t) => t);
-            return texts.join(' ') || null;
-        }
-        // Empty option
-        return null;
-    }
-    return getDefaultSlotPlainText(selectOpt);
+    return getDefaultSlotPlainText(selectOpt) || null;
 };
 /**
  * Trims whitespace from all text nodes within a DOM tree.
@@ -1741,9 +1726,13 @@ const getOptionContent = (option, slotName, useHTML = false) => {
     if (nodes.length === 0) {
         return null;
     }
-    // Return plain text if no elements are found
+    /**
+     * Return plain text if no elements are found. This reads the option the
+     * same way the non-custom-HTML path does, so the two do not disagree
+     * about what an option's text is.
+     */
     if (!slotName && nodes.every((n) => n.nodeType === Node.TEXT_NODE)) {
-        return nodes.map((n) => n.textContent?.trim()).join(' ') || null;
+        return getDefaultSlotPlainText(option) || null;
     }
     /**
      * Mirror known custom-element properties (e.g. ion-icon's `icon`)
@@ -1799,22 +1788,43 @@ const getOptionDefaultSlot = (option) => {
     }
     return defaultSlotNodes;
 };
+/**
+ * Concatenates the text a node renders, skipping the subtrees of tags
+ * whose contents the browser never paints (`script`, `style`, and the
+ * rest of `blockedTags`). `textContent` includes those, so reading it
+ * directly would put stylesheet or script source into the select text
+ * and the `aria-label`.
+ *
+ * @param node - The node to read text from.
+ * @returns The node's rendered text.
+ */
+const getRenderedTextContent = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent ?? '';
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return '';
+    }
+    if (blockedTags.includes(node.tagName.toLowerCase())) {
+        return '';
+    }
+    return Array.from(node.childNodes)
+        .map((child) => getRenderedTextContent(child))
+        .join('');
+};
 /**
  * Extracts plain text from only the default slot of an option,
- * excluding content assigned to named slots (start/end).
+ * excluding content assigned to named slots (start/end). Text is
+ * concatenated with no separator and collapsible whitespace is
+ * collapsed, approximating how the browser renders the option.
+ * NBSP is not collapsible, so it is preserved.
+ *
+ * @param option - The `ion-select-option` element to read text from.
+ * @returns The option's default slot text.
  */
 const getDefaultSlotPlainText = (option) => {
-    const texts = Array.from(option.childNodes)
-        .filter((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            return !node.hasAttribute('slot');
-        }
-        return node.nodeType === Node.TEXT_NODE;
-    })
-        .filter((node) => node.nodeType === Node.TEXT_NODE)
-        .map((n) => n.textContent?.trim())
-        .filter((t) => t);
-    return texts.join(' ');
+    const text = (getOptionDefaultSlot(option) ?? []).map((node) => getRenderedTextContent(node)).join('');
+    return text.replace(/[ \t\n\r\f]+/g, ' ').replace(/^[ \t\n\r\f]+|[ \t\n\r\f]+$/g, '');
 };
 /**
  * Extracts the rich content from an `ion-select-option`.

package/dist/collection/utils/test/late-props/late-props.js

@@ -0,0 +1,69 @@
+/**
+ * Test helpers for the custom elements build, where `connectedCallback` runs
+ * synchronously as the element is inserted. Frameworks that assign element props after
+ * inserting the element leave a window where a component can't read its own props or
+ * its children's, and it still has to work.
+ */
+
+import { initialize } from '/components/index.js';
+
+/**
+ * Initializes Ionic in the mode the test asked for.
+ */
+export const initializeIonic = () => {
+  initialize({ mode: new URLSearchParams(location.search).get('ionic:mode') ?? 'ios' });
+};
+
+/**
+ * Defines the given tags. Safe to call again for tags that are already defined, so each
+ * test can ask for whatever it needs.
+ */
+export const defineTags = async (tags) => {
+  await Promise.all(
+    tags.map(async (tag) => {
+      const mod = await import(`/components/${tag}.js`);
+      mod.defineCustomElement();
+    })
+  );
+};
+
+/**
+ * Builds the tree described by `spec` and appends it to `root`. A spec node is
+ * `{ tag, props, attrs, children }`, where `children` holds specs or strings. The
+ * `attrs` are always set before the element connects, and the `props` are set before
+ * connecting when `lateProps` is false, or after the whole tree connects when it is true.
+ */
+export const mount = (root, spec, lateProps) => {
+  const pending = [];
+
+  const build = (node) => {
+    if (typeof node === 'string') {
+      return document.createTextNode(node);
+    }
+
+    const el = document.createElement(node.tag);
+
+    if (node.attrs) {
+      Object.entries(node.attrs).forEach(([key, value]) => el.setAttribute(key, String(value)));
+    }
+
+    if (node.props) {
+      if (lateProps) {
+        pending.push([el, node.props]);
+      } else {
+        Object.assign(el, node.props);
+      }
+    }
+
+    (node.children || []).forEach((child) => el.appendChild(build(child)));
+
+    return el;
+  };
+
+  const tree = build(spec);
+
+  root.appendChild(tree);
+
+  // Descendants before ancestors, matching the order framework effects run in.
+  pending.reverse().forEach(([el, props]) => Object.assign(el, props));
+};