mui-tel-input 8.0.0 → 8.0.1

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { MuiTelInputContinent, MuiTelInputCountry, MuiTelInputFlagElement, MuiTelInputInfo, MuiTelInputProps, MuiTelInputReason } from './index.types';
+export { AsYouType, getNumberType } from 'libphonenumber-js';
+export type { MuiTelInputContinent, MuiTelInputCountry, MuiTelInputFlagElement, MuiTelInputInfo, MuiTelInputProps, MuiTelInputReason };
+export { matchIsValidTel } from './shared/helpers/valid-phone-number';
+export declare const textFieldClass = "MuiTelInput-TextField";
+declare const MuiTelInput: (props: MuiTelInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const classes: {
+    readonly textField: "MuiTelInput-TextField";
+    readonly flagContainer: "MuiTelInput-Flag";
+    readonly flagImg: "MuiTelInput-FlagImg";
+    readonly flagButton: "MuiTelInput-IconButton";
+    readonly menu: "MuiTelInput-Menu";
+    readonly menuItem: "MuiTelInput-MenuItem";
+    readonly listItemIconFlag: "MuiTelInput-ListItemIcon-flag";
+    readonly listItemTextCountry: "MuiTelInput-ListItemText-country";
+    readonly callingCode: "MuiTelInput-Typography-calling-code";
+};
+export { MuiTelInput };

package/dist/mui-tel-input.es.js

@@ -1,5 +1,5 @@
 import { jsx as v, jsxs as U, Fragment as Pe } from "react/jsx-runtime";
-import g from "react";
+import m from "react";
 import hn from "react-dom";
 import { styled as z } from "@mui/material/styles";
 import Dt from "@mui/material/IconButton";
@@ -383,7 +383,7 @@ const Rn = {
   className: o,
   ...u
 }) => {
-  const $ = g.useMemo(() => Te(t), [t]), l = /* @__PURE__ */ v(xe, { isoCode: a, children: a ? d(a, {
+  const $ = m.useMemo(() => Te(t), [t]), l = /* @__PURE__ */ v(xe, { isoCode: a, children: a ? d(a, {
     countryName: $.of(a) || "",
     isSelected: !0,
     imgProps: St({
@@ -465,7 +465,7 @@ const Rn = {
       )
     ]
   }
-), kn = g.memo(Ln), Bn = [], Gn = [], jn = [], Un = [], Re = "MuiTelInput-Menu", Wn = ({
+), kn = m.memo(Ln), Bn = [], Gn = [], jn = [], Un = [], Re = "MuiTelInput-Menu", Wn = ({
   anchorEl: e,
   isoCode: n,
   onSelectCountry: t,
@@ -478,7 +478,7 @@ const Rn = {
   getFlagElement: $,
   ...l
 }) => {
-  const h = g.useMemo(() => Te(i), [i]), f = Tn(In, h, {
+  const h = m.useMemo(() => Te(i), [i]), f = Tn(In, h, {
     onlyCountries: d,
     excludedCountries: r,
     continents: a,
@@ -523,7 +523,7 @@ function _e(e, n) {
   return e.replace(n, "");
 }
 function Hn({ disabled: e, disableDropdown: n }) {
-  const t = g.useRef(null), [r, d] = g.useState(null);
+  const t = m.useRef(null), [r, d] = m.useState(null);
   return {
     anchorRef: t,
     anchorEl: r,
@@ -574,7 +574,7 @@ function Yn(e) {
     continents: d,
     forceCallingCode: i
   } = e;
-  g.useEffect(() => {
+  m.useEffect(() => {
     if (t && r) {
       const a = En(
         t,
@@ -584,19 +584,19 @@ function Yn(e) {
         `[mui-tel-input] Not expected to have the country ${a} to be included in the 'onlyCountries' AND 'excludedCountries' props`
       );
     }
-  }, [t, r]), g.useEffect(() => {
+  }, [t, r]), m.useEffect(() => {
     n && r && r.includes(n) && L(
       `[mui-tel-input] Not expected to have the 'defaultCountry' (${n}) prop excluded by the 'excludedCountries' prop`
     );
-  }, [n, r]), g.useEffect(() => {
+  }, [n, r]), m.useEffect(() => {
     n && t && !t.includes(n) && L(
       `[mui-tel-input] Not expected to have a 'defaultCountry' prop (${n}) and a 'onlyCountries' prop but without included the 'defaultCountry' (${n})`
     );
-  }, [n, t]), g.useEffect(() => {
+  }, [n, t]), m.useEffect(() => {
     n && d && d.length > 0 && (d.some((o) => It[o].includes(n)) || L(
       `[mui-tel-input] Not expected to have a 'defaultCountry' prop (${n}) and a 'continents' prop that are not contain the country (${n})`
     ));
-  }, [n, d]), g.useEffect(() => {
+  }, [n, d]), m.useEffect(() => {
     i && !n && L(
       "[mui-tel-input] 'forceCallingCode' needs 'defaultCountry' defined. Will default to US."
     );
@@ -1177,8 +1177,8 @@ var vr = ";ext=", _ = function(n) {
   return "([".concat(C, "]{1,").concat(n, "})");
 };
 function je(e) {
-  var n = "20", t = "15", r = "9", d = "6", i = "[  \\t,]*", a = "[:\\.．]?[  \\t,-]*", o = "#?", u = "(?:e?xt(?:ensi(?:ó?|ó))?n?|ｅ?ｘｔｎ?|доб|anexo)", $ = "(?:[xｘ#＃~～]|int|ｉｎｔ)", l = "[- ]+", h = "[  \\t]*", f = "(?:,{2}|;)", c = vr + _(n), m = i + u + a + _(n) + o, N = i + $ + a + _(r) + o, y = l + _(d) + "#", F = h + f + a + _(t) + o, B = h + "(?:,)+" + a + _(r) + o;
-  return c + "|" + m + "|" + N + "|" + y + "|" + F + "|" + B;
+  var n = "20", t = "15", r = "9", d = "6", i = "[  \\t,]*", a = "[:\\.．]?[  \\t,-]*", o = "#?", u = "(?:e?xt(?:ensi(?:ó?|ó))?n?|ｅ?ｘｔｎ?|доб|anexo)", $ = "(?:[xｘ#＃~～]|int|ｉｎｔ)", l = "[- ]+", h = "[  \\t]*", f = "(?:,{2}|;)", c = vr + _(n), g = i + u + a + _(n) + o, N = i + $ + a + _(r) + o, y = l + _(d) + "#", F = h + f + a + _(t) + o, B = h + "(?:,)+" + a + _(r) + o;
+  return c + "|" + g + "|" + N + "|" + y + "|" + F + "|" + B;
 }
 var Cr = "[" + C + "]{" + Ot + "}", Nr = "[" + q + "]{0,1}(?:[" + I + "]*[" + C + "]){3,}[" + I + C + "]*", br = new RegExp("^[" + q + "]{0,1}(?:[" + I + "]*[" + C + "]){1,2}$", "i"), Pr = Nr + // Phone number extensions
 "(?:" + je() + ")?", Ar = new RegExp(
@@ -2010,16 +2010,16 @@ function bt(e, n, t) {
     var c = new Ye(l, $, t.metadata);
     return u && (c.country = u), f && (c.carrierCode = f), i && (c.ext = i), c.__countryCallingCodeSource = h, c;
   }
-  var m = (n.extended ? t.hasSelectedNumberingPlan() : u) ? T($, t.nationalNumberPattern()) : !1;
+  var g = (n.extended ? t.hasSelectedNumberingPlan() : u) ? T($, t.nationalNumberPattern()) : !1;
   return n.extended ? {
     country: u,
     countryCallingCode: l,
     carrierCode: f,
-    valid: m,
-    possible: m ? !0 : !!(n.extended === !0 && t.possibleLengths() && We($, t)),
+    valid: g,
+    possible: g ? !0 : !!(n.extended === !0 && t.possibleLengths() && We($, t)),
     phone: $,
     ext: i
-  } : m ? Ad(u, $, i) : {};
+  } : g ? Ad(u, $, i) : {};
 }
 function bd(e, n, t) {
   if (e) {
@@ -2713,8 +2713,8 @@ function Pt(e, n, t) {
         // matchedChars: ...
       } : void 0;
     case "[]":
-      for (var c = ge(n.args), m; !(m = c()).done; ) {
-        var N = m.value;
+      for (var c = ge(n.args), g; !(g = c()).done; ) {
+        var N = g.value;
         if (e[0] === N)
           return e.length === 1 ? {
             match: !0,
@@ -2937,8 +2937,8 @@ var At = "9", h1 = 15, g1 = Y(At, h1), m1 = /[- ]/, y1 = function() {
           international: i,
           nationalPrefix: a
         })) {
-          var m = f.replace(Ve, t.nationalPrefixFormattingRule());
-          if (Q(t.nationalPrefixFormattingRule()) === (a || "") + Q("$1") && (f = m, c = !0, a))
+          var g = f.replace(Ve, t.nationalPrefixFormattingRule());
+          if (Q(t.nationalPrefixFormattingRule()) === (a || "") + Q("$1") && (f = g, c = !0, a))
             for (var N = a.length; N > 0; )
               f = f.replace(/\d/, A), N--;
         }
@@ -3640,14 +3640,14 @@ function t0({
   disableFormatting: a,
   forceCallingCode: o
 }) {
-  const u = g.useRef(
+  const u = m.useRef(
     t || null
-  ), $ = g.useRef(new R(t)), l = g.useRef(null), [h, f] = g.useState(t), [c, m] = g.useState(() => ft({
+  ), $ = m.useRef(new R(t)), l = m.useRef(null), [h, f] = m.useState(t), [c, g] = m.useState(() => ft({
     initialValue: e,
     defaultCountry: t,
     disableFormatting: a,
     forceCallingCode: o
-  })), [N, y] = g.useState(e), F = (s) => ({
+  })), [N, y] = m.useState(e), F = (s) => ({
     countryCallingCode: $.current.getCallingCode() || null,
     countryCode: $.current.getCountry() || null,
     nationalNumber: $.current.getNationalNumber(),
@@ -3672,19 +3672,19 @@ function t0({
         countryCode: null,
         countryCallingCode: null,
         nationalNumber: null
-      }), y(b), m({
+      }), y(b), g({
         isoCode: null,
         inputValue: b
       });
     else {
       const P = a ? b : M;
-      n?.(P, w), y(P), m({
+      n?.(P, w), y(P), g({
         isoCode: E,
         inputValue: P
       });
     }
   };
-  g.useEffect(() => {
+  m.useEffect(() => {
     if (e !== N) {
       y(e);
       const s = ft({
@@ -3693,7 +3693,7 @@ function t0({
         forceCallingCode: o,
         disableFormatting: a
       });
-      u.current = s.isoCode, m(s);
+      u.current = s.isoCode, g(s);
     }
   }, [
     e,
@@ -3701,7 +3701,7 @@ function t0({
     t,
     o,
     a
-  ]), g.useEffect(() => {
+  ]), m.useEffect(() => {
     if (t !== h) {
       f(t), $.current = new R(t);
       const { inputValue: s, isoCode: x } = ft({
@@ -3710,7 +3710,7 @@ function t0({
         forceCallingCode: o,
         disableFormatting: a
       });
-      y(s), $.current.input(s), u.current = $.current.getCountry() || null, n?.(s, F("country")), m({
+      y(s), $.current.input(s), u.current = $.current.getCountry() || null, n?.(s, F("country")), g({
         inputValue: s,
         isoCode: x
       });
@@ -3736,7 +3736,7 @@ function t0({
       ...F("country"),
       // Some country have the same calling code, so we choose what the user has selected
       countryCode: s
-    }), u.current = s, y(b), m({
+    }), u.current = s, y(b), g({
       isoCode: s,
       inputValue: b
     });
@@ -3771,129 +3771,128 @@ function g0(e, n) {
   }
   return V1(e);
 }
-const nn = "MuiTelInput-TextField", m0 = g.forwardRef(
-  (e, n) => {
-    const {
-      forceCallingCode: t = !1,
-      onlyCountries: r,
-      excludedCountries: d,
-      defaultCountry: i,
-      onDoubleClick: a,
-      onFocus: o,
-      onCopy: u,
-      onBlur: $,
-      value: l = "",
-      slotProps: h,
-      inputRef: f,
-      disabled: c,
-      onChange: m,
-      disableDropdown: N,
-      disableFormatting: y = !1,
-      focusOnSelectCountry: F,
-      langOfCountryName: B,
-      continents: G,
-      preferredCountries: dt,
-      MenuProps: it,
-      className: at,
-      getFlagElement: V = Mn,
-      unknownFlagElement: s = Dn,
-      FlagIconButtonProps: x,
-      ...M
-    } = e, j = t ? Sn(i) : i;
-    Yn(e);
-    const {
-      onInputChange: E,
-      onCountryChange: b,
-      inputRef: w,
-      isoCode: P,
-      inputValue: Ft,
-      buildInputInfo: rn
-    } = t0({
-      forceCallingCode: t,
-      defaultCountry: j,
-      value: l ?? "",
-      onChange: m,
-      excludedCountries: d,
-      onlyCountries: r,
-      disableFormatting: y,
-      continents: G
-    }), { openMenu: dn, anchorEl: wt, anchorRef: an, closeMenu: Mt } = Hn({
-      disabled: c,
-      disableDropdown: N
-    }), { handleDoubleClick: on, handleCopy: un, handleFocus: $n } = Zn({
-      onDoubleClick: a,
-      onCopy: u,
-      onFocus: o,
-      inputRef: w
-    }), ln = (ot) => {
-      hn.flushSync(() => {
-        Mt(), b(ot);
-      }), F && w.current && w.current.focus();
-    }, sn = (ot) => {
-      $?.(ot, rn("blur"));
-    }, fn = P ? `+${K(P)}` : "", cn = t ? (
-      // We removed the isoCode but no necessarily the space after
-      _e(Ft, fn).trimStart()
-    ) : Ft;
-    return /* @__PURE__ */ U(Pe, { children: [
-      /* @__PURE__ */ v(
-        Nn,
-        {
-          type: "tel",
-          disabled: c,
-          value: cn,
-          ref: Bt([n, an]),
-          onDoubleClick: on,
-          inputRef: Bt([w, f]),
-          className: `${nn} ${at || ""}`,
-          onChange: E,
-          onBlur: sn,
-          onFocus: $n,
-          slotProps: {
-            htmlInput: {
-              onCopy: un,
-              ...h?.htmlInput
-            },
-            input: {
-              startAdornment: /* @__PURE__ */ v(Cn, { position: "start", sx: { flexShrink: 0 }, children: /* @__PURE__ */ v(
-                _n,
-                {
-                  isFlagsMenuOpened: !!wt,
-                  isoCode: P,
-                  forceCallingCode: t,
-                  onClick: dn,
-                  disabled: c,
-                  getFlagElement: V,
-                  unknownFlagElement: s,
-                  disableDropdown: !!N,
-                  ...x
-                }
-              ) }),
-              ...h?.input
-            }
+const nn = "MuiTelInput-TextField", m0 = (e) => {
+  const {
+    forceCallingCode: n = !1,
+    onlyCountries: t,
+    excludedCountries: r,
+    defaultCountry: d,
+    onDoubleClick: i,
+    onFocus: a,
+    onCopy: o,
+    onBlur: u,
+    value: $ = "",
+    ref: l,
+    slotProps: h,
+    inputRef: f,
+    disabled: c,
+    onChange: g,
+    disableDropdown: N,
+    disableFormatting: y = !1,
+    focusOnSelectCountry: F,
+    langOfCountryName: B,
+    continents: G,
+    preferredCountries: dt,
+    MenuProps: it,
+    className: at,
+    getFlagElement: V = Mn,
+    unknownFlagElement: s = Dn,
+    FlagIconButtonProps: x,
+    ...M
+  } = e, j = n ? Sn(d) : d;
+  Yn(e);
+  const {
+    onInputChange: E,
+    onCountryChange: b,
+    inputRef: w,
+    isoCode: P,
+    inputValue: Ft,
+    buildInputInfo: rn
+  } = t0({
+    forceCallingCode: n,
+    defaultCountry: j,
+    value: $ ?? "",
+    onChange: g,
+    excludedCountries: r,
+    onlyCountries: t,
+    disableFormatting: y,
+    continents: G
+  }), { openMenu: dn, anchorEl: wt, anchorRef: an, closeMenu: Mt } = Hn({
+    disabled: c,
+    disableDropdown: N
+  }), { handleDoubleClick: on, handleCopy: un, handleFocus: $n } = Zn({
+    onDoubleClick: i,
+    onCopy: o,
+    onFocus: a,
+    inputRef: w
+  }), ln = (ot) => {
+    hn.flushSync(() => {
+      Mt(), b(ot);
+    }), F && w.current && w.current.focus();
+  }, sn = (ot) => {
+    u?.(ot, rn("blur"));
+  }, fn = P ? `+${K(P)}` : "", cn = n ? (
+    // We removed the isoCode but no necessarily the space after
+    _e(Ft, fn).trimStart()
+  ) : Ft;
+  return /* @__PURE__ */ U(Pe, { children: [
+    /* @__PURE__ */ v(
+      Nn,
+      {
+        type: "tel",
+        disabled: c,
+        value: cn,
+        ref: Bt([l, an]),
+        onDoubleClick: on,
+        inputRef: Bt([w, f]),
+        className: `${nn} ${at || ""}`,
+        onChange: E,
+        onBlur: sn,
+        onFocus: $n,
+        slotProps: {
+          htmlInput: {
+            onCopy: un,
+            ...h?.htmlInput
           },
-          ...M
-        }
-      ),
-      N ? null : /* @__PURE__ */ v(
-        Wn,
-        {
-          onlyCountries: r,
-          excludedCountries: d,
-          continents: G,
-          anchorEl: wt,
-          isoCode: P,
-          preferredCountries: dt,
-          onClose: Mt,
-          langOfCountryName: B,
-          onSelectCountry: ln,
-          getFlagElement: V,
-          ...it
-        }
-      )
-    ] });
-  }
-), y0 = {
+          input: {
+            startAdornment: /* @__PURE__ */ v(Cn, { position: "start", sx: { flexShrink: 0 }, children: /* @__PURE__ */ v(
+              _n,
+              {
+                isFlagsMenuOpened: !!wt,
+                isoCode: P,
+                forceCallingCode: n,
+                onClick: dn,
+                disabled: c,
+                getFlagElement: V,
+                unknownFlagElement: s,
+                disableDropdown: !!N,
+                ...x
+              }
+            ) }),
+            ...h?.input
+          }
+        },
+        ...M
+      }
+    ),
+    N ? null : /* @__PURE__ */ v(
+      Wn,
+      {
+        onlyCountries: t,
+        excludedCountries: r,
+        continents: G,
+        anchorEl: wt,
+        isoCode: P,
+        preferredCountries: dt,
+        onClose: Mt,
+        langOfCountryName: B,
+        onSelectCountry: ln,
+        getFlagElement: V,
+        ...it
+      }
+    )
+  ] });
+}, y0 = {
   textField: nn,
   flagContainer: Ie,
   flagImg: Et,

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/viclafouch/mui-tel-input/issues"
   },
   "homepage": "https://viclafouch.github.io/mui-tel-input",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "files": [
     "dist"
   ],
@@ -79,13 +79,13 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@mui/material": "^6.4.6",
-    "@storybook/addon-actions": "^8.6.2",
-    "@storybook/addon-essentials": "^8.6.2",
-    "@storybook/addon-interactions": "^8.6.2",
-    "@storybook/addon-links": "^8.6.2",
-    "@storybook/react": "^8.6.2",
-    "@storybook/react-vite": "^8.6.2",
-    "@storybook/test": "^8.6.2",
+    "@storybook/addon-actions": "^8.6.3",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
+    "@storybook/addon-links": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -97,17 +97,17 @@
     "babel-loader": "^9.2.1",
     "eslint": "^8.56.0",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "standard-version": "^9.5.0",
-    "storybook": "^8.6.2",
+    "storybook": "^8.6.3",
     "typescript": "^5.8.2",
     "vite": "6.2.0",
     "vite-aliases": "^0.11.8",
-    "vite-plugin-dts": "^4.5.1",
+    "vite-plugin-dts": "^4.5.3",
     "vitest": "^3.0.7"
   }
 }