@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/fields/PhoneInput/index.tsx

@@ -1,55 +1,71 @@
-import { GlobeIcon } from "@phosphor-icons/react";
-import { ensureFocusVisibleRing } from "@multiplatform.one/theme";
+import { CaretDownIcon, GlobeIcon } from "@phosphor-icons/react";
+import { ensureCompositeFocusRing } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import type { ComponentProps, FocusEventHandler, ReactNode } from "react";
-import { useEffect, useRef, useState } from "react";
-import { useProps } from "tamagui";
-import { Input, Text, View } from "tamagui";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import type { TamaguiElement } from "tamagui";
+import { isWeb, useProps } from "tamagui";
+import { Input, Text, View, XStack } from "tamagui";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
 import type { SimpleFieldApi, Validator } from "../../types";
 import {
   getFieldError,
+  getFieldHeight,
   mergeFieldHandler,
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
 import type { FormFieldProps } from "../../fieldLayout";
-import { FocusContext, Input as InputParts } from "../../InputParts";
+import { Input as InputParts } from "../../InputParts";
+import { formButtonColors, formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
+import { useIsInTableCell } from "../../shared/tableCellContext";
 import type { FieldComponentProps } from "../../types";
-import { Combobox, type ComboboxOption } from "../Combobox";
-import { dialCodes, regionCodes } from "./dialCodes";
-
-// ── Helpers ───────────────────────────────────────────────────
-
-/**
- * The knob focus ring must be CSS-driven on the focused input itself
- * (DG-A11Y-01): Input.Box paints its ring from React `focused` state one
- * frame after focus, which synchronous a11y probes never see. Same
- * OTP/Stepper/Input template — Box ring suppressed, ring lives on the Area.
- */
-const suppressBoxFocusRing = { focused: false, setFocused: (_val: boolean) => {} };
+import { Combobox } from "../Combobox";
+import { dialCodes } from "./dialCodes";
+import {
+  caretIndexForDigitCount,
+  caretSizeForToken,
+  countryCodeToFlag,
+  dialOf,
+  digitsOnly,
+  examplePlaceholder,
+  flagSizeForToken,
+  formatNational,
+  getCountryOptions,
+  parsePhone,
+  toE164,
+} from "./phone";
 
-function countryCodeToFlag(countryCode: string): string {
-  const codePoints = countryCode
-    .toUpperCase()
-    .split("")
-    .map((char) => 127397 + char.charCodeAt(0));
-  return String.fromCodePoint(...codePoints);
+const PHONE_RING_STYLE_ID = "mp-phone-input-ring";
+const phoneInputCss = `/* LC-71: flag+dial are adornments of one control. Ring lives on the Box. */
+.mp-phone-input [data-testid="combobox-trigger"] {
+  outline: none !important;
+  box-shadow: none !important;
+  width: auto !important;
+  flex: 0 0 auto;
 }
-
-function dialPrefix(regionCode: string): string {
-  return `+${dialCodes[regionCode] ?? 1} `;
+.mp-phone-input [data-testid="combobox-trigger"]:focus,
+.mp-phone-input [data-testid="combobox-trigger"]:focus-visible {
+  outline: none !important;
 }
+.mp-phone-input input,
+.mp-phone-input .mp-input-area,
+.mp-phone-input .mp-input-area:focus,
+.mp-phone-input .mp-input-area:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}`;
 
-const countryOptions: ComboboxOption[] = regionCodes.map((code) => ({
-  value: code,
-  label: `${countryCodeToFlag(code)} ${code}  +${dialCodes[code]}`,
-  keywords: `+${dialCodes[code]} ${code}`,
-}));
-
-// ── Types ─────────────────────────────────────────────────────
+function ensurePhoneInputCss() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PHONE_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = PHONE_RING_STYLE_ID;
+  tag.textContent = phoneInputCss;
+  document.head.appendChild(tag);
+}
 
 export type PhoneInputProps<
   TParentData = Record<string, unknown>,
@@ -59,8 +75,6 @@ export type PhoneInputProps<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 > = Omit<
   FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>,
-  // "onChange": FormFieldProps carries the DOM ChangeEventHandler from
-  // YStackProps; this field exposes a canonical value callback instead.
   "children" | "field" | "onChange"
 > &
   Partial<
@@ -74,24 +88,20 @@ export type PhoneInputProps<
     showFlags?: boolean;
     placeholder?: string;
     inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onChangeText" | "ref">;
-    /** Standalone (no form/name) change callback */
+    value?: string;
     onChange?: (value: string) => void;
-    /** When true, renders a skeleton placeholder instead of the phone input */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
     compact?: boolean;
   };
 
-// ── Form Field Renderer ──────────────────────────────────────
-
 interface PhoneInputFieldRendererProps<TData> {
   field: {
     state: { value: unknown; meta: { errors: readonly (string | undefined)[] } };
     handleChange: (value: TData) => void;
     handleBlur: () => void;
   };
-  phoneNumber: string;
-  setPhoneNumber: (value: string) => void;
+  serialized: string;
+  hydrate: (raw: string) => void;
   errorProp?: string | boolean;
   size?: string;
   knobProps: { sizeToken: string };
@@ -107,8 +117,8 @@ interface PhoneInputFieldRendererProps<TData> {
 
 function PhoneInputFieldRenderer<TData>({
   field,
-  phoneNumber,
-  setPhoneNumber,
+  serialized,
+  hydrate,
   errorProp,
   size,
   knobProps,
@@ -125,28 +135,26 @@ function PhoneInputFieldRenderer<TData>({
   const didInitRef = useRef(false);
 
   useEffect(() => {
-    const fieldValue = field.state.value as string;
-    if (fieldValue && fieldValue !== lastSyncedRef.current) {
-      setPhoneNumber(fieldValue);
+    const fieldValue = (field.state.value as string) ?? "";
+    if (fieldValue !== lastSyncedRef.current) {
       lastSyncedRef.current = fieldValue;
+      hydrate(fieldValue);
     }
-  }, [field.state.value, setPhoneNumber]);
+  }, [field.state.value, hydrate]);
 
   useEffect(() => {
     if (!didInitRef.current) {
       didInitRef.current = true;
-      // On mount: never push to field. Just record the current phoneNumber so
-      // subsequent changes are diffed against it. Effect 1 handles syncing any
-      // non-empty defaultValue from field → local state.
-      const fieldValue = field.state.value as string;
-      lastSyncedRef.current = fieldValue || phoneNumber;
+      const fieldValue = (field.state.value as string) ?? "";
+      lastSyncedRef.current = fieldValue;
+      if (fieldValue) hydrate(fieldValue);
       return;
     }
-    if (phoneNumber !== lastSyncedRef.current) {
-      lastSyncedRef.current = phoneNumber;
-      field.handleChange(phoneNumber as TData);
+    if (serialized !== lastSyncedRef.current) {
+      lastSyncedRef.current = serialized;
+      field.handleChange(serialized as TData);
     }
-  }, [field, phoneNumber]);
+  }, [field, serialized, hydrate]);
 
   const resolvedError = getFieldError(field as SimpleFieldApi<any>, errorProp);
 
@@ -161,8 +169,6 @@ function PhoneInputFieldRenderer<TData>({
       size={size as any}
       knobProps={knobProps as any}
       onBlur={mergeFieldHandler(field as SimpleFieldApi<any>, "handleBlur", onBlur)}
-      // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
-      // the sibling label/helper readable) — it needs the disabled state.
       disabled={disabled}
     >
       <InputParts size={size || knobProps.sizeToken}>{renderPhoneRow(!!resolvedError)}</InputParts>
@@ -170,8 +176,6 @@ function PhoneInputFieldRenderer<TData>({
   );
 }
 
-// ── PhoneInput ───────────────────────────────────────────────
-
 export function PhoneInput<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -185,7 +189,7 @@ export function PhoneInput<
     inputProps,
     defaultCountry = "US",
     showFlags = true,
-    placeholder = t("Phone number"),
+    placeholder: placeholderProp,
     mode,
     name,
     preserveValue,
@@ -200,126 +204,236 @@ export function PhoneInput<
     size,
     onBlur,
     onChange,
+    value: valueProp,
     skeleton,
     compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, control, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  // Inset (-2) keeps the ring inside the Box chrome (OTP/Stepper template).
-  const areaFocusRing = ensureFocusVisibleRing({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2,
-  });
+  const inTableCell = useIsInTableCell();
+  const countryOptions = useMemo(() => getCountryOptions(), []);
+  const sizeToken = (size || knobProps.sizeToken) as string;
+  const flagSize = flagSizeForToken(sizeToken);
+  const caretSize = caretSizeForToken(sizeToken);
 
-  const [regionCode, setRegionCode] = useState(defaultCountry);
-  const [phoneNumber, setPhoneNumber] = useState(() => {
-    if (typeof defaultValue === "string" && defaultValue) return defaultValue;
-    return dialPrefix(defaultCountry);
-  });
-  const regionCodeMountedRef = useRef(false);
-  const standaloneSyncedRef = useRef(phoneNumber);
+  const seed =
+    typeof valueProp === "string"
+      ? valueProp
+      : typeof defaultValue === "string"
+        ? defaultValue
+        : "";
+  const initial = parsePhone(seed, defaultCountry);
+  const [regionCode, setRegionCode] = useState(initial.region);
+  const [national, setNational] = useState(initial.national);
+  const serialized = toE164(regionCode, national);
+  const display = formatNational(regionCode, national);
+  const placeholder = placeholderProp ?? examplePlaceholder(regionCode);
 
-  // Filter phone input to only allow valid phone number characters
-  const handlePhoneChange = (text: string) => {
-    // Allow digits, +, -, (, ), and spaces for phone number formatting
-    const filtered = text.replace(/[^0-9+\-() ]/g, "");
-    setPhoneNumber(filtered);
-  };
+  const areaRef = useRef<TamaguiElement | null>(null);
+  const pendingCaretDigits = useRef<number | null>(null);
+  const regionCodeRef = useRef(regionCode);
+  regionCodeRef.current = regionCode;
+
+  const hydrate = useCallback(
+    (raw: string) => {
+      const parsed = parsePhone(raw, regionCodeRef.current || defaultCountry);
+      setRegionCode(parsed.region);
+      setNational(parsed.national);
+    },
+    [defaultCountry],
+  );
+
+  const isControlled = typeof valueProp === "string";
+  useEffect(() => {
+    if (!isControlled) return;
+    const parsed = parsePhone(valueProp, regionCodeRef.current || defaultCountry);
+    setRegionCode(parsed.region);
+    setNational(parsed.national);
+  }, [isControlled, valueProp, defaultCountry]);
 
-  // Standalone path: push local edits to the consumer (form path syncs via FieldRenderer).
-  // onChange is read from a ref so callback-identity churn cannot re-emit (SB-T2-10).
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
+  const standaloneSyncedRef = useRef(serialized);
   useEffect(() => {
     if (resolvedForm && name) return;
-    if (phoneNumber === standaloneSyncedRef.current) return;
-    standaloneSyncedRef.current = phoneNumber;
-    onChangeRef.current?.(phoneNumber);
-  }, [phoneNumber, resolvedForm, name]);
+    if (serialized === standaloneSyncedRef.current) return;
+    standaloneSyncedRef.current = serialized;
+    onChangeRef.current?.(serialized);
+  }, [serialized, resolvedForm, name]);
 
-  // Only reset phoneNumber when the user explicitly changes the country after mount.
-  // The initial value is already set by useState, so skip the first run to avoid
-  // overwriting a phone number synced from form defaultValues.
-  useEffect(() => {
-    if (!regionCodeMountedRef.current) {
-      regionCodeMountedRef.current = true;
-      return;
+  useLayoutEffect(() => {
+    if (pendingCaretDigits.current == null) return;
+    const node = areaRef.current as unknown as {
+      setSelectionRange?: (a: number, b: number) => void;
+    };
+    const host =
+      node && typeof node.setSelectionRange === "function"
+        ? node
+        : typeof document !== "undefined" && document.activeElement instanceof HTMLInputElement
+          ? document.activeElement
+          : null;
+    if (host && typeof host.setSelectionRange === "function") {
+      const idx = caretIndexForDigitCount(display, pendingCaretDigits.current);
+      host.setSelectionRange(idx, idx);
     }
-    if (regionCode && dialCodes[regionCode]) {
-      setPhoneNumber(dialPrefix(regionCode));
+    pendingCaretDigits.current = null;
+  }, [display]);
+
+  const handlePhoneChange = (text: string) => {
+    if (disabled || readOnly) return;
+    const el =
+      typeof document !== "undefined" && document.activeElement instanceof HTMLInputElement
+        ? document.activeElement
+        : null;
+    const caret = el?.selectionStart ?? text.length;
+    pendingCaretDigits.current = digitsOnly(text.slice(0, caret)).length;
+    if (text.trim().startsWith("+")) {
+      const parsed = parsePhone(text, regionCode);
+      setRegionCode(parsed.region);
+      setNational(parsed.national);
+      return;
     }
-  }, [regionCode]);
+    const next = digitsOnly(text).slice(0, Math.max(4, 15 - dialOf(regionCode).length));
+    setNational(next);
+  };
 
-  // Render skeleton placeholder
-  if (skeleton) {
-    return (
-      <InputParts size={size || knobProps.sizeToken}>
-        {label && <Skeleton variant="text" width="30%" height={14} />}
-        <Skeleton variant="rounded" width="100%" height={knobProps.sizeToken} />
-      </InputParts>
-    );
+  const handleRegionChange = (next: string) => {
+    if (!next || !dialCodes[next] || next === regionCode) return;
+    setRegionCode(next);
+  };
+
+  if (isWeb) {
+    ensureCompositeFocusRing();
+    ensurePhoneInputCss();
   }
 
   const renderPhoneRow = (hasError?: boolean) => (
-    // LC-40: forward `disabled` so the Box renders the washed disabled chrome.
-    <InputParts.Box disabled={disabled}>
+    <InputParts.Box
+      disabled={disabled}
+      data-testid="phone-box"
+      {...(isWeb
+        ? {
+            className: inTableCell ? "mp-phone-input" : "mp-phone-input mp-composite-ring-deep",
+          }
+        : undefined)}
+    >
       <InputParts.Section>
-        <View data-focus-skip {...(readOnly ? { pointerEvents: "none" as const } : undefined)}>
+        <View
+          data-focus-skip
+          flexDirection="row"
+          alignItems="stretch"
+          flexGrow={0}
+          flexShrink={0}
+          {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+        >
           <Combobox
             options={countryOptions}
             value={regionCode}
-            onValueChange={(val) => setRegionCode(typeof val === "string" ? val : (val[0] ?? ""))}
+            onChange={(val) => handleRegionChange(typeof val === "string" ? val : (val[0] ?? ""))}
             searchPlaceholder={t("Search countries...")}
             emptyMessage={t("No countries found.")}
-            popoverWidth={280}
-            tabIndex={-1}
-            // LC-40 behavior gap: a disabled field must also inert the inner
-            // country picker (it stayed interactive on a disabled PhoneInput).
+            popoverWidth={320}
+            tabIndex={disabled || readOnly ? -1 : 0}
             disabled={disabled}
             aria-label={t("Country code")}
             trigger={(selected) => {
               const opt = Array.isArray(selected) ? selected[0] : selected;
+              const code = opt?.value ?? regionCode;
               return (
-                <InputParts.Button tabIndex={-1}>
-                  {opt && showFlags ? (
-                    <Text fontSize={20}>{countryCodeToFlag(opt.value)}</Text>
+                <XStack
+                  alignItems="center"
+                  gap="$1.5"
+                  paddingHorizontal="$2"
+                  height="100%"
+                  cursor={disabled ? "not-allowed" : "pointer"}
+                  hoverStyle={
+                    disabled ? undefined : { backgroundColor: formButtonColors.background.hover }
+                  }
+                >
+                  {showFlags ? (
+                    <Text fontSize={flagSize} lineHeight={flagSize + 4} userSelect="none">
+                      {countryCodeToFlag(code)}
+                    </Text>
                   ) : (
                     <InputParts.Icon color="$placeholderColor">
                       <GlobeIcon />
                     </InputParts.Icon>
                   )}
-                </InputParts.Button>
+                  <Text
+                    fontFamily={knobProps.body.fontFamily}
+                    fontWeight={knobProps.body.fontWeight}
+                    color={formCommonColors.muted}
+                    userSelect="none"
+                  >
+                    +{dialOf(code)}
+                  </Text>
+                  <CaretDownIcon size={caretSize} />
+                </XStack>
               );
             }}
           />
+          <View
+            width={1}
+            alignSelf="stretch"
+            marginVertical="$1.5"
+            backgroundColor={formCommonColors.divider}
+          />
         </View>
       </InputParts.Section>
       <InputParts.Section>
-        <FocusContext.Provider {...suppressBoxFocusRing}>
-          {/* @ts-expect-error Tamagui Input type widening */}
-          <InputParts.Area
-            id={id}
-            keyboardType="numeric"
-            value={phoneNumber}
-            onChangeText={handlePhoneChange}
-            placeholder={placeholder}
-            disabled={disabled}
-            focusStyle={areaFocusRing}
-            focusVisibleStyle={areaFocusRing}
-            {...(readOnly ? { readOnly: true } : {})}
-            aria-required={required || undefined}
-            aria-invalid={hasError || undefined}
-            aria-readonly={readOnly || undefined}
-            {...inputProps}
-          />
-        </FocusContext.Provider>
+        <InputParts.Area
+          ref={areaRef}
+          id={id}
+          data-testid="phone-input"
+          keyboardType="phone-pad"
+          autoComplete="tel"
+          inputMode="tel"
+          value={display}
+          onChangeText={handlePhoneChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          {...(readOnly ? { readOnly: true } : {})}
+          aria-required={required || undefined}
+          aria-invalid={hasError || undefined}
+          aria-readonly={readOnly || undefined}
+          {...(inputProps as ComponentProps<typeof InputParts.Area>)}
+        />
       </InputParts.Section>
     </InputParts.Box>
   );
 
+  if (skeleton) {
+    const controlH = getFieldHeight(sizeToken as any);
+    return (
+      <FieldLayout
+        id={id}
+        label={label}
+        labelProps={labelProps}
+        size={size}
+        knobProps={knobProps as any}
+        disabled={disabled}
+      >
+        <InputParts size={sizeToken}>
+          <InputParts.Box disabled>
+            <InputParts.Section>
+              <Skeleton
+                variant="rounded"
+                width={flagSize + 48}
+                height={Math.max(16, controlH - 12)}
+              />
+            </InputParts.Section>
+            <InputParts.Section>
+              <Skeleton variant="rounded" width="100%" height={Math.max(16, controlH - 12)} />
+            </InputParts.Section>
+          </InputParts.Box>
+        </InputParts>
+      </FieldLayout>
+    );
+  }
+
   if (!resolvedForm || !name) {
     return (
       <FieldLayout
@@ -332,10 +446,9 @@ export function PhoneInput<
         size={size}
         knobProps={knobProps as any}
         onBlur={onBlur}
-        // LC-40: see form renderer — FieldLayout carries dimWhole.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPhoneRow(!!errorProp)}</InputParts>
+        <InputParts size={sizeToken}>{renderPhoneRow(!!errorProp)}</InputParts>
       </FieldLayout>
     );
   }
@@ -352,8 +465,8 @@ export function PhoneInput<
       {(field) => (
         <PhoneInputFieldRenderer
           field={field}
-          phoneNumber={phoneNumber}
-          setPhoneNumber={setPhoneNumber}
+          serialized={serialized}
+          hydrate={hydrate}
           errorProp={errorProp}
           size={size as string | undefined}
           knobProps={knobProps as { sizeToken: string }}

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

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import {
+  caretIndexForDigitCount,
+  countryCodeToFlag,
+  detectRegion,
+  digitsOnly,
+  examplePlaceholder,
+  flagSizeForToken,
+  formatNational,
+  getCountryOptions,
+  parsePhone,
+  toE164,
+} from "./phone";
+
+describe("phone helpers", () => {
+  it("strips non-digits", () => {
+    expect(digitsOnly("+1 (512) 400-9021 x99")).toBe("1512400902199");
+  });
+
+  it("formats NANP as you type", () => {
+    expect(formatNational("US", "5")).toBe("5");
+    expect(formatNational("US", "512")).toBe("512");
+    expect(formatNational("US", "5124")).toBe("(512) 4");
+    expect(formatNational("US", "5124009021")).toBe("(512) 400-9021");
+  });
+
+  it("formats GB keeping a leading trunk zero", () => {
+    expect(formatNational("GB", "07400123456")).toBe("07400 123 456");
+  });
+
+  it("emits E.164 and drops a trunk zero", () => {
+    expect(toE164("US", "5124009021")).toBe("+15124009021");
+    expect(toE164("GB", "07400123456")).toBe("+447400123456");
+    expect(toE164("US", "")).toBe("");
+  });
+
+  it("detects country from an international paste; +1 keeps the hint", () => {
+    expect(detectRegion("+447400123456", "US")).toBe("GB");
+    expect(detectRegion("+3312345678", "US")).toBe("FR");
+    expect(detectRegion("+15124009021", "CA")).toBe("CA");
+    expect(detectRegion("+15124009021", "US")).toBe("US");
+    expect(detectRegion("5124009021", "GB")).toBe("GB");
+  });
+
+  it("parses stored E.164 without dropping the national number", () => {
+    expect(parsePhone("+447123456789", "US")).toEqual({
+      region: "GB",
+      national: "7123456789",
+    });
+    expect(parsePhone("+15125551234", "US")).toEqual({
+      region: "US",
+      national: "5125551234",
+    });
+    expect(parsePhone("", "DE")).toEqual({ region: "DE", national: "" });
+  });
+
+  it("rebases the same national digits onto a new country (SB-M-214)", () => {
+    const national = parsePhone("+15125551234", "US").national;
+    expect(toE164("GB", national)).toBe("+445125551234");
+    expect(formatNational("GB", national)).toBe("5125 551 234");
+  });
+
+  it("scales the flag with the size token", () => {
+    expect(flagSizeForToken("$2")).toBeLessThan(flagSizeForToken("$4"));
+    expect(flagSizeForToken("$4")).toBeLessThan(flagSizeForToken("$6"));
+  });
+
+  it("builds searchable country options with names and dial codes", () => {
+    const options = getCountryOptions();
+    const us = options.find((o) => o.value === "US");
+    expect(us?.label).toContain("United States");
+    expect(us?.keywords).toContain("+1");
+    expect(countryCodeToFlag("US")).toBeTruthy();
+    expect(options[0]?.value).toBe("US");
+  });
+
+  it("example placeholder follows the national formatter", () => {
+    expect(examplePlaceholder("US")).toBe("(201) 555-0123");
+  });
+
+  it("maps a digit count back onto a formatted caret index", () => {
+    expect(caretIndexForDigitCount("(512) 400-9021", 3)).toBe(4);
+    expect(caretIndexForDigitCount("(512) 400-9021", 6)).toBe(9);
+  });
+});