@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/PhoneInput/index.cjs

@@ -34,30 +34,44 @@ var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_utils = require("../../shared/utils.cjs");
 var import_InputParts = require("../../InputParts/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
+var import_tableCellContext = require("../../shared/tableCellContext.cjs");
 var import_Combobox = require("../Combobox/index.cjs");
 var import_dialCodes = require("./dialCodes.cjs");
+var import_phone = require("./phone.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const suppressBoxFocusRing = {
-  focused: false,
-  setFocused: _val => {}
-};
-function countryCodeToFlag(countryCode) {
-  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;
+}
+.mp-phone-input [data-testid="combobox-trigger"]:focus,
+.mp-phone-input [data-testid="combobox-trigger"]:focus-visible {
+  outline: none !important;
 }
-function dialPrefix(regionCode) {
-  return `+${import_dialCodes.dialCodes[regionCode] ?? 1} `;
+.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;
+}`;
+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);
 }
-const countryOptions = import_dialCodes.regionCodes.map(code => ({
-  value: code,
-  label: `${countryCodeToFlag(code)} ${code}  +${import_dialCodes.dialCodes[code]}`,
-  keywords: `+${import_dialCodes.dialCodes[code]} ${code}`
-}));
 function PhoneInputFieldRenderer({
   field,
-  phoneNumber,
-  setPhoneNumber,
+  serialized,
+  hydrate,
   errorProp,
   size,
   knobProps,
@@ -73,24 +87,25 @@ function PhoneInputFieldRenderer({
   const lastSyncedRef = (0, import_react2.useRef)("");
   const didInitRef = (0, import_react2.useRef)(false);
   (0, import_react2.useEffect)(() => {
-    const fieldValue = field.state.value;
-    if (fieldValue && fieldValue !== lastSyncedRef.current) {
-      setPhoneNumber(fieldValue);
+    const fieldValue = field.state.value ?? "";
+    if (fieldValue !== lastSyncedRef.current) {
       lastSyncedRef.current = fieldValue;
+      hydrate(fieldValue);
     }
-  }, [field.state.value, setPhoneNumber]);
+  }, [field.state.value, hydrate]);
   (0, import_react2.useEffect)(() => {
     if (!didInitRef.current) {
       didInitRef.current = true;
-      const fieldValue = field.state.value;
-      lastSyncedRef.current = fieldValue || phoneNumber;
+      const fieldValue = field.state.value ?? "";
+      lastSyncedRef.current = fieldValue;
+      if (fieldValue) hydrate(fieldValue);
       return;
     }
-    if (phoneNumber !== lastSyncedRef.current) {
-      lastSyncedRef.current = phoneNumber;
-      field.handleChange(phoneNumber);
+    if (serialized !== lastSyncedRef.current) {
+      lastSyncedRef.current = serialized;
+      field.handleChange(serialized);
     }
-  }, [field, phoneNumber]);
+  }, [field, serialized, hydrate]);
   const resolvedError = (0, import_utils.getFieldError)(field, errorProp);
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
     id,
@@ -116,7 +131,7 @@ function PhoneInput(props) {
     inputProps,
     defaultCountry = "US",
     showFlags = true,
-    placeholder = (0, import_t.t)("Phone number"),
+    placeholder: placeholderProp,
     mode,
     name,
     preserveValue,
@@ -131,6 +146,7 @@ function PhoneInput(props) {
     size,
     onBlur,
     onChange,
+    value: valueProp,
     skeleton,
     compact,
     id: idProp,
@@ -139,7 +155,6 @@ function PhoneInput(props) {
   const {
     resolvedForm,
     knobProps,
-    control,
     id
   } = (0, import_utils.useFormField)({
     form,
@@ -147,111 +162,191 @@ function PhoneInput(props) {
     compact
   });
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  const areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
-  const [regionCode, setRegionCode] = (0, import_react2.useState)(defaultCountry);
-  const [phoneNumber, setPhoneNumber] = (0, import_react2.useState)(() => {
-    if (typeof defaultValue === "string" && defaultValue) return defaultValue;
-    return dialPrefix(defaultCountry);
-  });
-  const regionCodeMountedRef = (0, import_react2.useRef)(false);
-  const standaloneSyncedRef = (0, import_react2.useRef)(phoneNumber);
-  const handlePhoneChange = text => {
-    const filtered = text.replace(/[^0-9+\-() ]/g, "");
-    setPhoneNumber(filtered);
-  };
+  const inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  const countryOptions = (0, import_react2.useMemo)(() => (0, import_phone.getCountryOptions)(), []);
+  const sizeToken = size || knobProps.sizeToken;
+  const flagSize = (0, import_phone.flagSizeForToken)(sizeToken);
+  const caretSize = (0, import_phone.caretSizeForToken)(sizeToken);
+  const seed = typeof valueProp === "string" ? valueProp : typeof defaultValue === "string" ? defaultValue : "";
+  const initial = (0, import_phone.parsePhone)(seed, defaultCountry);
+  const [regionCode, setRegionCode] = (0, import_react2.useState)(initial.region);
+  const [national, setNational] = (0, import_react2.useState)(initial.national);
+  const serialized = (0, import_phone.toE164)(regionCode, national);
+  const display = (0, import_phone.formatNational)(regionCode, national);
+  const placeholder = placeholderProp ?? (0, import_phone.examplePlaceholder)(regionCode);
+  const areaRef = (0, import_react2.useRef)(null);
+  const pendingCaretDigits = (0, import_react2.useRef)(null);
+  const regionCodeRef = (0, import_react2.useRef)(regionCode);
+  regionCodeRef.current = regionCode;
+  const hydrate = (0, import_react2.useCallback)(raw => {
+    const parsed = (0, import_phone.parsePhone)(raw, regionCodeRef.current || defaultCountry);
+    setRegionCode(parsed.region);
+    setNational(parsed.national);
+  }, [defaultCountry]);
+  const isControlled = typeof valueProp === "string";
+  (0, import_react2.useEffect)(() => {
+    if (!isControlled) return;
+    const parsed = (0, import_phone.parsePhone)(valueProp, regionCodeRef.current || defaultCountry);
+    setRegionCode(parsed.region);
+    setNational(parsed.national);
+  }, [isControlled, valueProp, defaultCountry]);
   const onChangeRef = (0, import_react2.useRef)(onChange);
   onChangeRef.current = onChange;
+  const standaloneSyncedRef = (0, import_react2.useRef)(serialized);
   (0, import_react2.useEffect)(() => {
     if (resolvedForm && name) return;
-    if (phoneNumber === standaloneSyncedRef.current) return;
-    standaloneSyncedRef.current = phoneNumber;
-    onChangeRef.current?.(phoneNumber);
-  }, [phoneNumber, resolvedForm, name]);
-  (0, import_react2.useEffect)(() => {
-    if (!regionCodeMountedRef.current) {
-      regionCodeMountedRef.current = true;
-      return;
+    if (serialized === standaloneSyncedRef.current) return;
+    standaloneSyncedRef.current = serialized;
+    onChangeRef.current?.(serialized);
+  }, [serialized, resolvedForm, name]);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (pendingCaretDigits.current == null) return;
+    const node = areaRef.current;
+    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 = (0, import_phone.caretIndexForDigitCount)(display, pendingCaretDigits.current);
+      host.setSelectionRange(idx, idx);
     }
-    if (regionCode && import_dialCodes.dialCodes[regionCode]) {
-      setPhoneNumber(dialPrefix(regionCode));
+    pendingCaretDigits.current = null;
+  }, [display]);
+  const handlePhoneChange = text => {
+    if (disabled || readOnly) return;
+    const el = typeof document !== "undefined" && document.activeElement instanceof HTMLInputElement ? document.activeElement : null;
+    const caret = el?.selectionStart ?? text.length;
+    pendingCaretDigits.current = (0, import_phone.digitsOnly)(text.slice(0, caret)).length;
+    if (text.trim().startsWith("+")) {
+      const parsed = (0, import_phone.parsePhone)(text, regionCode);
+      setRegionCode(parsed.region);
+      setNational(parsed.national);
+      return;
     }
-  }, [regionCode]);
-  if (skeleton) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
-      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "text",
-        width: "30%",
-        height: 14
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-        variant: "rounded",
-        width: "100%",
-        height: knobProps.sizeToken
-      })]
-    });
+    const next = (0, import_phone.digitsOnly)(text).slice(0, Math.max(4, 15 - (0, import_phone.dialOf)(regionCode).length));
+    setNational(next);
+  };
+  const handleRegionChange = next => {
+    if (!next || !import_dialCodes.dialCodes[next] || next === regionCode) return;
+    setRegionCode(next);
+  };
+  if (import_tamagui.isWeb) {
+    (0, import_theme.ensureCompositeFocusRing)();
+    ensurePhoneInputCss();
   }
-  const renderPhoneRow = hasError =>
-  // LC-40: forward `disabled` so the Box renders the washed disabled chrome.
-  /* @__PURE__ */
-  (0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+  const renderPhoneRow = hasError => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
     disabled,
+    "data-testid": "phone-box",
+    ...(import_tamagui.isWeb ? {
+      className: inTableCell ? "mp-phone-input" : "mp-phone-input mp-composite-ring-deep"
+    } : void 0),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.View, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.View, {
         "data-focus-skip": true,
+        flexDirection: "row",
+        alignItems: "stretch",
+        flexGrow: 0,
+        flexShrink: 0,
         ...(readOnly ? {
           pointerEvents: "none"
         } : void 0),
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Combobox.Combobox, {
           options: countryOptions,
           value: regionCode,
-          onValueChange: val => setRegionCode(typeof val === "string" ? val : val[0] ?? ""),
+          onChange: val => handleRegionChange(typeof val === "string" ? val : val[0] ?? ""),
           searchPlaceholder: (0, import_t.t)("Search countries..."),
           emptyMessage: (0, import_t.t)("No countries found."),
-          popoverWidth: 280,
-          tabIndex: -1,
+          popoverWidth: 320,
+          tabIndex: disabled || readOnly ? -1 : 0,
           disabled,
           "aria-label": (0, import_t.t)("Country code"),
           trigger: selected => {
             const opt = Array.isArray(selected) ? selected[0] : selected;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
-              tabIndex: -1,
-              children: opt && showFlags ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-                fontSize: 20,
-                children: countryCodeToFlag(opt.value)
+            const code = opt?.value ?? regionCode;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+              alignItems: "center",
+              gap: "$1.5",
+              paddingHorizontal: "$2",
+              height: "100%",
+              cursor: disabled ? "not-allowed" : "pointer",
+              hoverStyle: disabled ? void 0 : {
+                backgroundColor: import_colorRamps.formButtonColors.background.hover
+              },
+              children: [showFlags ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+                fontSize: flagSize,
+                lineHeight: flagSize + 4,
+                userSelect: "none",
+                children: (0, import_phone.countryCodeToFlag)(code)
               }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
                 color: "$placeholderColor",
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GlobeIcon, {})
-              })
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.Text, {
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                color: import_colorRamps.formCommonColors.muted,
+                userSelect: "none",
+                children: ["+", (0, import_phone.dialOf)(code)]
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+                size: caretSize
+              })]
             });
           }
-        })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.View, {
+          width: 1,
+          alignSelf: "stretch",
+          marginVertical: "$1.5",
+          backgroundColor: import_colorRamps.formCommonColors.divider
+        })]
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.FocusContext.Provider, {
-        ...suppressBoxFocusRing,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-          id,
-          keyboardType: "numeric",
-          value: phoneNumber,
-          onChangeText: handlePhoneChange,
-          placeholder,
-          disabled,
-          focusStyle: areaFocusRing,
-          focusVisibleStyle: areaFocusRing,
-          ...(readOnly ? {
-            readOnly: true
-          } : {}),
-          "aria-required": required || void 0,
-          "aria-invalid": hasError || void 0,
-          "aria-readonly": readOnly || void 0,
-          ...inputProps
-        })
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+        ref: areaRef,
+        id,
+        "data-testid": "phone-input",
+        keyboardType: "phone-pad",
+        autoComplete: "tel",
+        inputMode: "tel",
+        value: display,
+        onChangeText: handlePhoneChange,
+        placeholder,
+        disabled,
+        ...(readOnly ? {
+          readOnly: true
+        } : {}),
+        "aria-required": required || void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-readonly": readOnly || void 0,
+        ...inputProps
       })
     })]
   });
+  if (skeleton) {
+    const controlH = (0, import_utils.getFieldHeight)(sizeToken);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      size,
+      knobProps,
+      disabled,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: sizeToken,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+          disabled: true,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              variant: "rounded",
+              width: flagSize + 48,
+              height: Math.max(16, controlH - 12)
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              variant: "rounded",
+              width: "100%",
+              height: Math.max(16, controlH - 12)
+            })
+          })]
+        })
+      })
+    });
+  }
   if (!resolvedForm || !name) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
       id,
@@ -265,7 +360,7 @@ function PhoneInput(props) {
       onBlur,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
+        size: sizeToken,
         children: renderPhoneRow(!!errorProp)
       })
     });
@@ -279,8 +374,8 @@ function PhoneInput(props) {
     validators: resolvedValidators,
     children: field => /* @__PURE__ */(0, import_jsx_runtime.jsx)(PhoneInputFieldRenderer, {
       field,
-      phoneNumber,
-      setPhoneNumber,
+      serialized,
+      hydrate,
       errorProp,
       size,
       knobProps,