@multiplatform.one/forms 7.11.0 → 7.16.0

package/src/fields/PhoneInput/PhoneInput.spec.tsx

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { Button } from "../../Button";
+import { TableCellContext } from "../../shared/tableCellContext";
 import { PhoneInput } from "./index";
 
 describe("PhoneInput", () => {
@@ -98,6 +99,43 @@ describe("PhoneInput", () => {
         expect(input.value).not.toBe("");
       }
     });
+
+    // MPO-263: at 390px the country sheet opened with focus on its list, so
+    // typed text never reached the search and Enter re-picked the current
+    // country. The 1100px popover already focused its search.
+    it("at 390px the keyboard opens the sheet into its search, and typing then Enter picks a country", async () => {
+      const initialWidth = window.innerWidth;
+      window.innerWidth = 390;
+      try {
+        const onChange = vi.fn();
+        const result = renderWithProviders(
+          <PhoneInput label="Narrow" defaultCountry="US" onChange={onChange} />,
+        );
+        const number = result.container.querySelector("input") as HTMLInputElement;
+        await act(async () => {
+          fireEvent.change(number, { target: { value: "5125551234" } });
+        });
+        const trigger = result.container.querySelector('[role="combobox"]') as HTMLElement;
+        await act(async () => {
+          fireEvent.keyDown(trigger, { key: "Enter" });
+          await new Promise((resolve) => setTimeout(resolve, 50));
+        });
+        expect(document.activeElement?.getAttribute("placeholder")).toBe("Search countries...");
+        const search = document.activeElement as HTMLInputElement;
+        await act(async () => {
+          fireEvent.change(search, { target: { value: "Germany" } });
+        });
+        await act(async () => {
+          fireEvent.keyDown(search, { key: "Enter" });
+        });
+        expect(onChange).toHaveBeenLastCalledWith("+495125551234");
+        expect(result.container.querySelector('[data-testid="phone-dial"]')?.textContent).toBe(
+          "+49",
+        );
+      } finally {
+        window.innerWidth = initialWidth;
+      }
+    });
   });
 
   describe("value handling", () => {
@@ -463,3 +501,28 @@ describe("PhoneInput", () => {
     });
   });
 });
+
+describe("PhoneInput in a table cell (MPO-221)", () => {
+  const renderPhone = (inTableCell: boolean) =>
+    renderWithProviders(
+      <TableCellContext.Provider value={{ inTableCell, isHeader: false, editable: true }}>
+        <PhoneInput defaultCountry="US" aria-label="Phone" />
+      </TableCellContext.Provider>,
+    );
+
+  it("the country trigger is flag and dial only: no caret, no divider", () => {
+    const { container } = renderPhone(true);
+    const country = container.querySelector("[data-testid='phone-country']") as HTMLElement;
+    expect(country).toBeTruthy();
+    expect(country.querySelector("[data-testid='phone-dial']")?.textContent).toBe("+1");
+    expect(country.querySelector("svg")).toBeNull();
+    expect(container.querySelector("[data-testid='phone-divider']")).toBeNull();
+  });
+
+  it("outside a cell the trigger keeps its caret and the divider (positive control)", () => {
+    const { container } = renderPhone(false);
+    const country = container.querySelector("[data-testid='phone-country']") as HTMLElement;
+    expect(country.querySelector("svg")).not.toBeNull();
+    expect(container.querySelector("[data-testid='phone-divider']")).not.toBeNull();
+  });
+});

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 ?? "");
@@ -335,7 +336,7 @@ export function SearchInput({
         {...boxContract}
         disabled={disabled}
         {...chromelessProps}
-        {...(hasError ? { theme: "red" } : undefined)}
+        {...(hasError ? { theme: "error" } : undefined)}
       >
         <InputParts.Icon
           adornment="leading"
@@ -428,7 +429,7 @@ export function SearchInput({
             error={resolvedError}
             onBlur={mergeFieldHandler(field, "handleBlur", onBlur)}
           >
-            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "red" } : undefined)}>
+            <InputParts size={resolvedSize} {...(resolvedError ? { theme: "error" } : undefined)}>
               {renderBox(
                 String(field.state.value ?? ""),
                 (next) => field.handleChange(next as never),