@multiplatform.one/forms 7.11.0 → 7.15.0

package/src/fields/PhoneInput/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 import { CaretDownIcon, GlobeIcon } from "@phosphor-icons/react";
 import { ensureCompositeFocusRing, useGlyphColor } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
@@ -181,6 +182,7 @@ export function PhoneInput<
   TFormValidator extends Validator<TParentData, unknown> | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: PhoneInputProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
+  const hydrationTouch = useTouchSurface();
   const {
     defaultValue,
     form,
@@ -377,17 +379,20 @@ export function PhoneInput<
                   >
                     +{dialOf(code)}
                   </Text>
-                  <CaretDownIcon size={caretSize} color={glyphColor} />
+                  {inTableCell ? null : <CaretDownIcon size={caretSize} color={glyphColor} />}
                 </XStack>
               );
             }}
           />
-          <View
-            width={1}
-            alignSelf="stretch"
-            marginVertical="$1.5"
-            backgroundColor={formCommonColors.divider}
-          />
+          {inTableCell ? null : (
+            <View
+              data-testid="phone-divider"
+              width={1}
+              alignSelf="stretch"
+              marginVertical="$1.5"
+              backgroundColor={formCommonColors.divider}
+            />
+          )}
         </View>
       </InputParts.Section>
       <InputParts.Section>
@@ -415,7 +420,7 @@ export function PhoneInput<
   );
 
   if (skeleton) {
-    const controlH = getFieldHeight(sizeToken as any);
+    const controlH = getFieldHeight(sizeToken as any, 1, hydrationTouch);
     return (
       <FieldLayout
         id={id}

package/src/fields/PhoneInput/phone.native.spec.ts

@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Hermes ships Intl without DisplayNames. Without a fallback every native
+// country row read "flag DE +49" and a search for "Germ" found nothing
+// (MPO-263).
+beforeEach(() => {
+  vi.resetModules();
+  vi.stubGlobal("Intl", { ...Intl, DisplayNames: undefined });
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("phone country options without Intl.DisplayNames", () => {
+  it("still names every country", async () => {
+    const { getCountryOptions } = await import("./phone");
+    const options = getCountryOptions();
+    const unnamed = options.filter((option) => option.label.split("  ")[1] === option.value);
+    expect(unnamed.map((option) => option.value)).toEqual([]);
+    expect(options.find((option) => option.value === "DE")?.label).toContain("Germany");
+  });
+
+  it("finds Germany by a partial name, as the Combobox filter matches", async () => {
+    const { getCountryOptions } = await import("./phone");
+    const query = "germ";
+    const hits = getCountryOptions().filter(
+      (option) =>
+        option.label.toLowerCase().includes(query) || option.keywords.toLowerCase().includes(query),
+    );
+    expect(hits.map((option) => option.value)).toEqual(["DE"]);
+  });
+});

package/src/fields/PhoneInput/phone.ts

@@ -1,5 +1,6 @@
 import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { dialCodes, regionCodes } from "./dialCodes";
+import { regionNames } from "./regionNames";
 
 /** Countries pinned to the top of the picker (intl-tel preferredCountries). */
 export const PREFERRED_REGIONS = [
@@ -133,10 +134,12 @@ export function dialOf(region: string): string {
 
 function regionName(code: string): string {
   try {
-    return new Intl.DisplayNames(["en"], { type: "region" }).of(code) ?? code;
+    const name = new Intl.DisplayNames(["en"], { type: "region" }).of(code);
+    if (name && name !== code) return name;
   } catch {
-    return code;
+    // Hermes: no Intl.DisplayNames.
   }
+  return regionNames[code] ?? code;
 }
 
 export function detectRegion(raw: string, hint = "US"): string {

package/src/fields/PhoneInput/regionNames.ts

@@ -0,0 +1,250 @@
+// English region names for the phone country list. Hermes has no
+// Intl.DisplayNames, so without this table native rows read "DE" and a search
+// for "Germany" finds nothing (MPO-263). Generated from Intl.DisplayNames("en").
+export const regionNames: Record<string, string> = {
+  AC: "Ascension Island",
+  AD: "Andorra",
+  AE: "United Arab Emirates",
+  AF: "Afghanistan",
+  AG: "Antigua & Barbuda",
+  AI: "Anguilla",
+  AL: "Albania",
+  AM: "Armenia",
+  AO: "Angola",
+  AR: "Argentina",
+  AS: "American Samoa",
+  AT: "Austria",
+  AU: "Australia",
+  AW: "Aruba",
+  AX: "Åland Islands",
+  AZ: "Azerbaijan",
+  BA: "Bosnia & Herzegovina",
+  BB: "Barbados",
+  BD: "Bangladesh",
+  BE: "Belgium",
+  BF: "Burkina Faso",
+  BG: "Bulgaria",
+  BH: "Bahrain",
+  BI: "Burundi",
+  BJ: "Benin",
+  BL: "St. Barthélemy",
+  BM: "Bermuda",
+  BN: "Brunei",
+  BO: "Bolivia",
+  BQ: "Caribbean Netherlands",
+  BR: "Brazil",
+  BS: "Bahamas",
+  BT: "Bhutan",
+  BW: "Botswana",
+  BY: "Belarus",
+  BZ: "Belize",
+  CA: "Canada",
+  CC: "Cocos (Keeling) Islands",
+  CD: "Congo - Kinshasa",
+  CF: "Central African Republic",
+  CG: "Congo - Brazzaville",
+  CH: "Switzerland",
+  CI: "Côte d’Ivoire",
+  CK: "Cook Islands",
+  CL: "Chile",
+  CM: "Cameroon",
+  CN: "China",
+  CO: "Colombia",
+  CR: "Costa Rica",
+  CU: "Cuba",
+  CV: "Cape Verde",
+  CW: "Curaçao",
+  CX: "Christmas Island",
+  CY: "Cyprus",
+  CZ: "Czechia",
+  DE: "Germany",
+  DJ: "Djibouti",
+  DK: "Denmark",
+  DM: "Dominica",
+  DO: "Dominican Republic",
+  DZ: "Algeria",
+  EC: "Ecuador",
+  EE: "Estonia",
+  EG: "Egypt",
+  EH: "Western Sahara",
+  ER: "Eritrea",
+  ES: "Spain",
+  ET: "Ethiopia",
+  FI: "Finland",
+  FJ: "Fiji",
+  FK: "Falkland Islands",
+  FM: "Micronesia",
+  FO: "Faroe Islands",
+  FR: "France",
+  GA: "Gabon",
+  GB: "United Kingdom",
+  GD: "Grenada",
+  GE: "Georgia",
+  GF: "French Guiana",
+  GG: "Guernsey",
+  GH: "Ghana",
+  GI: "Gibraltar",
+  GL: "Greenland",
+  GM: "Gambia",
+  GN: "Guinea",
+  GP: "Guadeloupe",
+  GQ: "Equatorial Guinea",
+  GR: "Greece",
+  GT: "Guatemala",
+  GU: "Guam",
+  GW: "Guinea-Bissau",
+  GY: "Guyana",
+  HK: "Hong Kong SAR China",
+  HN: "Honduras",
+  HR: "Croatia",
+  HT: "Haiti",
+  HU: "Hungary",
+  ID: "Indonesia",
+  IE: "Ireland",
+  IL: "Israel",
+  IM: "Isle of Man",
+  IN: "India",
+  IO: "British Indian Ocean Territory",
+  IQ: "Iraq",
+  IR: "Iran",
+  IS: "Iceland",
+  IT: "Italy",
+  JE: "Jersey",
+  JM: "Jamaica",
+  JO: "Jordan",
+  JP: "Japan",
+  KE: "Kenya",
+  KG: "Kyrgyzstan",
+  KH: "Cambodia",
+  KI: "Kiribati",
+  KM: "Comoros",
+  KN: "St. Kitts & Nevis",
+  KP: "North Korea",
+  KR: "South Korea",
+  KW: "Kuwait",
+  KY: "Cayman Islands",
+  KZ: "Kazakhstan",
+  LA: "Laos",
+  LB: "Lebanon",
+  LC: "St. Lucia",
+  LI: "Liechtenstein",
+  LK: "Sri Lanka",
+  LR: "Liberia",
+  LS: "Lesotho",
+  LT: "Lithuania",
+  LU: "Luxembourg",
+  LV: "Latvia",
+  LY: "Libya",
+  MA: "Morocco",
+  MC: "Monaco",
+  MD: "Moldova",
+  ME: "Montenegro",
+  MF: "St. Martin",
+  MG: "Madagascar",
+  MH: "Marshall Islands",
+  MK: "North Macedonia",
+  ML: "Mali",
+  MM: "Myanmar (Burma)",
+  MN: "Mongolia",
+  MO: "Macao SAR China",
+  MP: "Northern Mariana Islands",
+  MQ: "Martinique",
+  MR: "Mauritania",
+  MS: "Montserrat",
+  MT: "Malta",
+  MU: "Mauritius",
+  MV: "Maldives",
+  MW: "Malawi",
+  MX: "Mexico",
+  MY: "Malaysia",
+  MZ: "Mozambique",
+  NA: "Namibia",
+  NC: "New Caledonia",
+  NE: "Niger",
+  NF: "Norfolk Island",
+  NG: "Nigeria",
+  NI: "Nicaragua",
+  NL: "Netherlands",
+  NO: "Norway",
+  NP: "Nepal",
+  NR: "Nauru",
+  NU: "Niue",
+  NZ: "New Zealand",
+  OM: "Oman",
+  PA: "Panama",
+  PE: "Peru",
+  PF: "French Polynesia",
+  PG: "Papua New Guinea",
+  PH: "Philippines",
+  PK: "Pakistan",
+  PL: "Poland",
+  PM: "St. Pierre & Miquelon",
+  PR: "Puerto Rico",
+  PS: "Palestinian Territories",
+  PT: "Portugal",
+  PW: "Palau",
+  PY: "Paraguay",
+  QA: "Qatar",
+  RE: "Réunion",
+  RO: "Romania",
+  RS: "Serbia",
+  RU: "Russia",
+  RW: "Rwanda",
+  SA: "Saudi Arabia",
+  SB: "Solomon Islands",
+  SC: "Seychelles",
+  SD: "Sudan",
+  SE: "Sweden",
+  SG: "Singapore",
+  SH: "St. Helena",
+  SI: "Slovenia",
+  SJ: "Svalbard & Jan Mayen",
+  SK: "Slovakia",
+  SL: "Sierra Leone",
+  SM: "San Marino",
+  SN: "Senegal",
+  SO: "Somalia",
+  SR: "Suriname",
+  SS: "South Sudan",
+  ST: "São Tomé & Príncipe",
+  SV: "El Salvador",
+  SX: "Sint Maarten",
+  SY: "Syria",
+  SZ: "Eswatini",
+  TA: "Tristan da Cunha",
+  TC: "Turks & Caicos Islands",
+  TD: "Chad",
+  TG: "Togo",
+  TH: "Thailand",
+  TJ: "Tajikistan",
+  TK: "Tokelau",
+  TL: "Timor-Leste",
+  TM: "Turkmenistan",
+  TN: "Tunisia",
+  TO: "Tonga",
+  TR: "Türkiye",
+  TT: "Trinidad & Tobago",
+  TV: "Tuvalu",
+  TW: "Taiwan",
+  TZ: "Tanzania",
+  UA: "Ukraine",
+  UG: "Uganda",
+  US: "United States",
+  UY: "Uruguay",
+  UZ: "Uzbekistan",
+  VA: "Vatican City",
+  VC: "St. Vincent & Grenadines",
+  VE: "Venezuela",
+  VG: "British Virgin Islands",
+  VI: "U.S. Virgin Islands",
+  VN: "Vietnam",
+  VU: "Vanuatu",
+  WF: "Wallis & Futuna",
+  WS: "Samoa",
+  XK: "Kosovo",
+  YE: "Yemen",
+  YT: "Mayotte",
+  ZA: "South Africa",
+  ZM: "Zambia",
+  ZW: "Zimbabwe",
+};

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -206,9 +206,9 @@ export const WithChildren: Story = {
       <YStack gap="$2">
         {sampleOptions.map((option) => (
           <XStack key={option.value} gap="$2" alignItems="center">
-            <TamaguiRadioGroup.Item value={option.value} id={option.value}>
-              <TamaguiRadioGroup.Indicator />
-            </TamaguiRadioGroup.Item>
+            <RadioGroup.Item value={option.value} id={option.value}>
+              <RadioGroup.Indicator />
+            </RadioGroup.Item>
             <Label htmlFor={option.value}>{option.label}</Label>
           </XStack>
         ))}
@@ -291,6 +291,7 @@ export const Interactive: Story = {
 };
 
 export const Comparison: Story = {
+  parameters: { foreignContrastSpecimen: true },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState("option1");

package/src/fields/RadioGroup/index.tsx

@@ -10,6 +10,7 @@ import {
   type DisabledChromeProps,
   type KnobProps,
   type KnobRecipe,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
 import type { FontSizeTokens, LabelProps, SizeTokens, TamaguiElement } from "tamagui";
@@ -283,12 +284,12 @@ function RadioOptionItem({
       borderColor={selected ? formSelectedColors.mark : formControlColors.boundary}
       {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
       data-radio-kb-focus={kbFocus ? "true" : "false"}
-      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+      {...transitionProps(knobProps.transition)}
     >
       <RadioIndicatorFrame
         borderRadius={radioDiscRadius}
         backgroundColor={onMark ?? "$color1"}
-        {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
+        {...transitionProps(knobProps.transition)}
       />
     </RadioGlyph>
   );

package/src/fields/Rating/StarInk.native.spec.tsx

@@ -8,7 +8,7 @@ import type { StarIconType } from "./types";
  * Native ink layer (LC-25). The device arm is BLOCKED — see
  * `p-results/fix-rating-native-ink.md` — so this is the native evidence:
  * `.native` specs are the standing substitute for a simulator capture
- * (`agent-os/standards/testing/falsifiability.md`, "Record the verdict
+ * (`docs/standards/testing/falsifiability.md`, "Record the verdict
  * against the code that ran").
  *
  * It cannot prove the RN driver's frame output. What it CAN prove is the

package/src/fields/SearchInput/index.tsx

@@ -1,3 +1,4 @@
+import { useTouchSurface } from "@multiplatform.one/theme";
 /**
  * SearchInput — the ONE search box (census item 6).
  *
@@ -17,7 +18,6 @@ import { MagnifyingGlassIcon, XIcon } from "@phosphor-icons/react";
 import {
   MIN_PRESS_TARGET,
   ensureCompositeFocusRing,
-  isTouchSurface,
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
@@ -148,6 +148,7 @@ export function SearchInput({
   iconSize,
   inputProps,
 }: SearchInputProps) {
+  const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -155,8 +156,8 @@ export function SearchInput({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
-  const recipe = sizeRecipeForToken(String(resolvedSize), { touch: isTouchSurface() });
-  const visualHeight = getFieldHeight(resolvedSize);
+  const recipe = sizeRecipeForToken(String(resolvedSize), { touch: hydrationTouch });
+  const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const isControlled = value !== undefined;
   const [internalText, setInternalText] = useState(defaultValue ?? "");

package/src/fields/Select/Select.spec.tsx

@@ -1,5 +1,5 @@
 import { useForm } from "@tanstack/react-form";
-import { act, fireEvent, waitFor } from "@testing-library/react";
+import { act, fireEvent, waitFor, within } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -8,6 +8,17 @@ import { Form } from "../../Form";
 import { __resetDevWarnSeen } from "../../shared/devWarn";
 import { Select, type SelectOption } from "./index";
 
+/** Web panels portal out to the page (MPO-335, LC-90), so panel text is read from the page. */
+function findInPage(text: string): Element | undefined {
+  try {
+    return within(document.body).queryByText(text, { exact: false }) ?? undefined;
+  } catch {
+    return Array.from(document.body.querySelectorAll("*")).find((el) =>
+      el.textContent?.includes(text),
+    );
+  }
+}
+
 const mockOptions: SelectOption[] = [
   { value: "option1", label: "Option 1" },
   { value: "option2", label: "Option 2" },
@@ -32,42 +43,38 @@ afterEach(() => {
 describe("Select Components", () => {
   describe("Select", () => {
     it("should display placeholder when no value is selected", () => {
-      const result = renderWithProviders(
-        <Select options={mockOptions} placeholder="Choose an option" />,
-      );
+      renderWithProviders(<Select options={mockOptions} placeholder="Choose an option" />);
 
       // Placeholder should be visible
-      expect(result.findTextElement("Choose an option")).toBeDefined();
+      expect(findInPage("Choose an option")).toBeDefined();
     });
 
     it("should display selected value", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Select options={mockOptions} value="option1" placeholder="Choose an option" />,
       );
 
       // Should show the selected option label
-      expect(result.findTextElement("Option 1")).toBeDefined();
+      expect(findInPage("Option 1")).toBeDefined();
     });
 
     it("should handle empty options array", () => {
-      const result = renderWithProviders(<Select options={[]} placeholder="No options" />);
+      renderWithProviders(<Select options={[]} placeholder="No options" />);
 
-      expect(result.findTextElement("No options")).toBeDefined();
+      expect(findInPage("No options")).toBeDefined();
     });
 
     it("should support custom placeholder", () => {
-      const result = renderWithProviders(
-        <Select options={mockOptions} placeholder="Custom placeholder text" />,
-      );
+      renderWithProviders(<Select options={mockOptions} placeholder="Custom placeholder text" />);
 
-      expect(result.findTextElement("Custom placeholder text")).toBeDefined();
+      expect(findInPage("Custom placeholder text")).toBeDefined();
     });
   });
 
   describe("Select", () => {
     describe("without form context", () => {
       it("should render with label and helper text", () => {
-        const result = renderWithProviders(
+        renderWithProviders(
           <Select
             label="Choose Option"
             helperText="Select an option from the list"
@@ -76,12 +83,12 @@ describe("Select Components", () => {
           />,
         );
 
-        expect(result.findTextElement("Choose Option")).toBeDefined();
-        expect(result.findTextElement("Select an option from the list")).toBeDefined();
+        expect(findInPage("Choose Option")).toBeDefined();
+        expect(findInPage("Select an option from the list")).toBeDefined();
       });
 
       it("should display error message", () => {
-        const result = renderWithProviders(
+        renderWithProviders(
           <Select
             label="Choose Option"
             name="option"
@@ -90,7 +97,7 @@ describe("Select Components", () => {
           />,
         );
 
-        expect(result.findTextElement("This field is required")).toBeDefined();
+        expect(findInPage("This field is required")).toBeDefined();
       });
 
       it("should render required label with asterisk", () => {
@@ -98,7 +105,7 @@ describe("Select Components", () => {
           <Select label="Required Select" name="option" options={mockOptions} required />,
         );
 
-        const label = result.container.querySelector("label");
+        const label = result.baseElement.querySelector("label");
         expect(label).toBeDefined();
         expect(label?.textContent).toContain("Required Select");
         expect(label?.textContent).toContain("*");
@@ -120,7 +127,7 @@ describe("Select Components", () => {
           />,
         );
         // Labels are differentiated per chip now — "Remove {label}".
-        const dismiss = result.container.querySelector('[aria-label^="Remove"]');
+        const dismiss = result.baseElement.querySelector('[aria-label^="Remove"]');
         expect(dismiss).toBeTruthy();
         await act(async () => {
           if (dismiss) fireEvent.click(dismiss);
@@ -239,17 +246,17 @@ describe("Select Components", () => {
           ]}
         />,
       );
-      expect(result.findTextElement("Dynamic Select")).toBeDefined();
+      expect(findInPage("Dynamic Select")).toBeDefined();
     });
   });
 
   describe("accessibility", () => {
     it("should announce selected value to screen readers", () => {
-      const result = renderWithProviders(
+      renderWithProviders(
         <Select options={mockOptions} value="option1" aria-label="Test select" />,
       );
 
-      expect(result.findTextElement("Option 1")).toBeDefined();
+      expect(findInPage("Option 1")).toBeDefined();
     });
   });
 
@@ -297,7 +304,7 @@ describe("Select Components", () => {
 
     it("does not ring the trigger or a row on mouse open", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
-      const trigger = result.container.querySelector(
+      const trigger = result.baseElement.querySelector(
         '[data-testid="select-trigger"]',
       ) as HTMLElement;
       expect(trigger).toBeTruthy();
@@ -305,26 +312,26 @@ describe("Select Components", () => {
       fireEvent.mouseDown(trigger);
       fireEvent.click(trigger);
       await waitFor(() => {
-        expect(result.container.querySelector('[role="option"]')).toBeTruthy();
+        expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
       });
       expect(trigger.getAttribute("data-kb-ring")).not.toBe("true");
-      for (const opt of result.container.querySelectorAll('[role="option"]')) {
+      for (const opt of result.baseElement.querySelectorAll('[role="option"]')) {
         expect(opt.getAttribute("data-kb-ring")).not.toBe("true");
       }
     });
 
     it("paints an inset ring on the keyboard-active row; rows stay square", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
-      const trigger = result.container.querySelector(
+      const trigger = result.baseElement.querySelector(
         '[data-testid="select-trigger"]',
       ) as HTMLElement;
       fireEvent.keyDown(document, { key: "ArrowDown" });
       fireEvent.keyDown(trigger, { key: "ArrowDown" });
       await waitFor(() => {
-        expect(result.container.querySelector('[role="option"]')).toBeTruthy();
+        expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
       });
       expect(trigger.getAttribute("data-kb-ring")).not.toBe("true");
-      const options = [...result.container.querySelectorAll('[role="option"]')];
+      const options = [...result.baseElement.querySelectorAll('[role="option"]')];
       const ringed = options.filter((el) => el.getAttribute("data-kb-ring") === "true");
       expect(ringed.length).toBe(1);
       for (const opt of options) {