@drawbridge/components 0.0.72 → 0.0.73

package/dist/input-phone.js

@@ -104,12 +104,18 @@ var InputPhone = ({
   (0, import_react.useEffect)(
     () => {
       if (value == null ? void 0 : value.country) return;
+      const detected = (0, import_phone.detectCountry)(value == null ? void 0 : value.number);
+      if (detected && countries.includes(detected)) {
+        setCountry(detected);
+        return;
+      }
+      ;
       const tags = [navigator.language, ...navigator.languages || []];
-      const detected = tags.map((tag) => {
+      const locale = tags.map((tag) => {
         var _a2, _b2;
         return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
       }).find((code) => code && countries.includes(code));
-      if (detected) setCountry(detected);
+      if (locale) setCountry(locale);
     },
     []
   );
@@ -221,9 +227,19 @@ var InputPhone = ({
                 ...{
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
-                  onChange: (val) => setNumber(val),
+                  onChange: (val) => {
+                    setNumber(val);
+                    const detected = (0, import_phone.detectCountry)(val);
+                    if (detected && countries.includes(detected)) setCountry(detected);
+                  },
                   style: inputPhoneStyle(style),
                   value: number,
+                  // country-mode pins the input to the selected calling code, so
+                  // detection can only follow countries SHARING that code (US/CA
+                  // on +1) — any other '+xx' the visitor types is discarded by the
+                  // library before it reaches onChange. Reaching every country
+                  // needs defaultCountry mode instead, which unpins the prefix but
+                  // changes the field to national-format display.
                   ...country && {
                     country,
                     international: true,

package/dist/input-phone.mjs

@@ -9,7 +9,7 @@ import {
 // components/input-phone.js
 import { useEffect, useState } from "react";
 import Input from "react-phone-number-input/input";
-import { isValid } from "@drawbridge/drawbridge-utils/phone";
+import { detectCountry, isValid } from "@drawbridge/drawbridge-utils/phone";
 import { jsx, jsxs } from "react/jsx-runtime";
 var isValidPhone = (number = "", country = "") => {
   const valid = isValid(number, country);
@@ -27,12 +27,18 @@ var InputPhone = ({
   useEffect(
     () => {
       if (value == null ? void 0 : value.country) return;
+      const detected = detectCountry(value == null ? void 0 : value.number);
+      if (detected && countries.includes(detected)) {
+        setCountry(detected);
+        return;
+      }
+      ;
       const tags = [navigator.language, ...navigator.languages || []];
-      const detected = tags.map((tag) => {
+      const locale = tags.map((tag) => {
         var _a2, _b2;
         return (_b2 = (_a2 = tag == null ? void 0 : tag.split("-")) == null ? void 0 : _a2[1]) == null ? void 0 : _b2.toUpperCase();
       }).find((code) => code && countries.includes(code));
-      if (detected) setCountry(detected);
+      if (locale) setCountry(locale);
     },
     []
   );
@@ -144,9 +150,19 @@ var InputPhone = ({
                 ...{
                   "aria-label": "Phone Number",
                   className: "input w-full border-none focus:outline-none focus:ring-0 focus:border-inherit",
-                  onChange: (val) => setNumber(val),
+                  onChange: (val) => {
+                    setNumber(val);
+                    const detected = detectCountry(val);
+                    if (detected && countries.includes(detected)) setCountry(detected);
+                  },
                   style: inputPhoneStyle(style),
                   value: number,
+                  // country-mode pins the input to the selected calling code, so
+                  // detection can only follow countries SHARING that code (US/CA
+                  // on +1) — any other '+xx' the visitor types is discarded by the
+                  // library before it reaches onChange. Reaching every country
+                  // needs defaultCountry mode instead, which unpins the prefix but
+                  // changes the field to national-format display.
                   ...country && {
                     country,
                     international: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawbridge/components",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "exports": {
     "./advertisement": {
       "types": "./types/advertisement.d.ts",
@@ -407,7 +407,7 @@
     "build": ". \"$HOME/.nvm/nvm.sh\" && nvm use && tsup && node --test && npm publish"
   },
   "peerDependencies": {
-    "@drawbridge/drawbridge-utils": ">=0.0.61",
+    "@drawbridge/drawbridge-utils": ">=0.0.118",
     "@drawbridge/shopify": ">=0.0.8",
     "next": ">=14",
     "react": ">=18"
@@ -415,7 +415,7 @@
   "devDependencies": {
     "@types/react": "18.0.0",
     "tsup": "8.5.1",
-    "@drawbridge/drawbridge-agents": "0.1.37"
+    "@drawbridge/drawbridge-agents": "0.1.40"
   },
   "dependencies": {
     "embla-carousel-fade": "8.6.0",