mui-phone-input - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

base/index.js

@@ -0,1 +1,2 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
@@ -21,8 +22,17 @@ var t = {};
     var { slotProps } = _a, props = __rest(_a, ["slotProps"]);
-    const defaultInputProps = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.className) ? {} : { outline: "none", border: "none", paddingLeft: 5, width: "calc(100% - 30px)" };
-    const defaultRootProps = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _c === void 0 ? void 0 : _c.className) ? {} : { background: "white", color: "black", paddingLeft: 5 };
+    const defaultInputProps = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _b === void 0 ? void 0 : _b.className) ? {} : {
+        outline: "none",
+        border: "none",
+        paddingLeft: 5,
+        width: "calc(100% - 30px)"
+    };
+    const defaultRootProps = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _c === void 0 ? void 0 : _c.className) ? {} : {
+        background: "white",
+        color: "black",
+        paddingLeft: 5
+    };
     return (_jsx(BaseInput, Object.assign({ ref: ref }, props, { slotProps: Object.assign(Object.assign({}, slotProps), { root: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { style: Object.assign(Object.assign(Object.assign({}, defaultRootProps), (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.style), { alignItems: "center", display: "flex" }) }), input: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: Object.assign(Object.assign({}, defaultInputProps), (_e = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _e === void 0 ? void 0 : _e.style) }) }) })));
 });
 const PhoneInput = forwardRef((_a, ref) => {
-    var { value: initialValue = "", country = getDefaultISO2Code(), onlyCountries = [], excludeCountries = [], preferredCountries = [], onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "country", "onlyCountries", "excludeCountries", "preferredCountries", "onMount", "onInput", "onChange", "onKeyDown"]);
+    var { value: initialValue = "", country = getDefaultISO2Code(), disableParentheses = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "country", "disableParentheses", "onlyCountries", "excludeCountries", "preferredCountries", "onMount", "onInput", "onChange", "onKeyDown"]);
     const initiatedRef = useRef(false);
@@ -37,2 +47,3 @@ const [countryCode, setCountryCode] = useState(country);
         preferredCountries,
+        disableParentheses,
     });
@@ -39,0 +50,0 @@ const { onInput: onInputMaskHandler, onKeyDown: onKeyDownMaskHandler, } = useMask(pattern);

base/styles.js

@@ -0,3 +1,4 @@
+"use client";
 import { injectStyles, jsonToCss } from "react-phone-hooks/styles";
 import commonStyles from "react-phone-hooks/stylesheet.json";
 export const injectMergedStyles = () => injectStyles(jsonToCss(commonStyles));

base/types.d.ts

@@ -8,2 +8,3 @@ import { ChangeEvent, KeyboardEvent } from "react";
     country?: string;
+    disableParentheses?: boolean;
     onlyCountries?: string[];
@@ -10,0 +11,0 @@ excludeCountries?: string[];

base/types.js

@@ -0,1 +1,2 @@
+"use client";
 export {};

core/index.js

@@ -0,1 +1,2 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
@@ -19,3 +20,3 @@ var t = {};
 const PhoneInput = forwardRef((_a, forwardedRef) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, disableParentheses = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "disableParentheses", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
@@ -89,14 +90,17 @@ const inputRef = useRef(null);
                     transformOrigin: { vertical: "top", horizontal: "center" },
-                }, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const formattedNumber = getFormattedNumber(mask, mask);
-                                    const input = inputRef.current.querySelector("input");
-                                    input.value = formattedNumber;
-                                    setValue(formattedNumber);
-                                    setCountryCode(iso);
-                                    setQuery("");
-                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
-                                    nativeInputValueSetter.call(input, formattedNumber);
-                                    input.dispatchEvent(new Event("change", { bubbles: true }));
-                                    setTimeout(() => input.focus(), 100);
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+                }, style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
+                                const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+                                return (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                        const formattedNumber = getFormattedNumber(mask, mask);
+                                        const input = inputRef.current.querySelector("input");
+                                        input.value = formattedNumber;
+                                        setValue(formattedNumber);
+                                        setCountryCode(iso);
+                                        setQuery("");
+                                        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                        nativeInputValueSetter.call(input, formattedNumber);
+                                        input.dispatchEvent(new Event("change", { bubbles: true }));
+                                        setTimeout(() => input.focus(), 100);
+                                    }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask));
+                            }) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) }) }))
@@ -103,0 +107,0 @@ } }, muiInputProps))] }));

core/styles.js

@@ -0,1 +1,2 @@
+"use client";
 import { injectStyles, jsonToCss } from "react-phone-hooks/styles";
@@ -2,0 +3,0 @@ import commonStyles from "react-phone-hooks/stylesheet.json";

core/types.d.ts

@@ -13,2 +13,3 @@ import { ChangeEvent, KeyboardEvent } from "react";
     disableDropdown?: boolean;
+    disableParentheses?: boolean;
     onlyCountries?: string[];
@@ -15,0 +16,0 @@ excludeCountries?: string[];

core/types.js

@@ -0,1 +1,2 @@
+"use client";
 export {};

index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
@@ -21,3 +21,3 @@ var t = {};
 const PhoneInput = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = (0, react_phone_hooks_1.getDefaultISO2Code)(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = (0, react_phone_hooks_1.getDefaultISO2Code)(), disabled = false, enableSearch = false, disableDropdown = false, disableParentheses = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "disableParentheses", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
@@ -39,2 +39,3 @@ const inputRef = (0, react_1.useRef)(null);
         preferredCountries,
+        disableParentheses,
     });
@@ -88,14 +89,17 @@ const { onInput: onInputMaskHandler, onKeyDown: onKeyDownMaskHandler, } = (0, react_phone_hooks_1.useMask)(pattern);
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && ((0, jsx_runtime_1.jsx)(material_1.Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), (0, jsx_runtime_1.jsx)("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const formattedNumber = (0, react_phone_hooks_1.getFormattedNumber)(mask, mask);
-                                    const input = inputRef.current.querySelector("input");
-                                    input.value = formattedNumber;
-                                    setValue(formattedNumber);
-                                    setCountryCode(iso);
-                                    setQuery("");
-                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
-                                    nativeInputValueSetter.call(input, formattedNumber);
-                                    input.dispatchEvent(new Event("change", { bubbles: true }));
-                                    setTimeout(() => input.focus(), 100);
-                                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-select-item", children: [(0, jsx_runtime_1.jsx)("div", { className: `flag ${iso}` }), (0, jsx_runtime_1.jsxs)("div", { className: "label", children: [name, "\u00A0", (0, react_phone_hooks_1.displayFormat)(mask)] })] }) }, iso + mask))) : (0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: searchNotFound }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && ((0, jsx_runtime_1.jsx)(material_1.Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), (0, jsx_runtime_1.jsx)("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
+                                const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+                                return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                        const formattedNumber = (0, react_phone_hooks_1.getFormattedNumber)(mask, mask);
+                                        const input = inputRef.current.querySelector("input");
+                                        input.value = formattedNumber;
+                                        setValue(formattedNumber);
+                                        setCountryCode(iso);
+                                        setQuery("");
+                                        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                        nativeInputValueSetter.call(input, formattedNumber);
+                                        input.dispatchEvent(new Event("change", { bubbles: true }));
+                                        setTimeout(() => input.focus(), 100);
+                                    }, children: (0, jsx_runtime_1.jsxs)("div", { className: "mui-phone-input-select-item", children: [(0, jsx_runtime_1.jsx)("div", { className: `flag ${iso}` }), (0, jsx_runtime_1.jsxs)("div", { className: "label", children: [name, "\u00A0", (0, react_phone_hooks_1.displayFormat)(mask)] })] }) }, iso + mask));
+                            }) : (0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: searchNotFound }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: (0, jsx_runtime_1.jsx)("div", { className: `flag ${countryCode}` }) }) }))
@@ -102,0 +106,0 @@ } }, muiInputProps))] }));

index.js

@@ -0,1 +1,2 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
@@ -19,3 +20,3 @@ var t = {};
 const PhoneInput = forwardRef((_a, forwardedRef) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, disableParentheses = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "disableParentheses", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
@@ -37,2 +38,3 @@ const inputRef = useRef(null);
         preferredCountries,
+        disableParentheses,
     });
@@ -86,14 +88,17 @@ const { onInput: onInputMaskHandler, onKeyDown: onKeyDownMaskHandler, } = useMask(pattern);
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                    const formattedNumber = getFormattedNumber(mask, mask);
-                                    const input = inputRef.current.querySelector("input");
-                                    input.value = formattedNumber;
-                                    setValue(formattedNumber);
-                                    setCountryCode(iso);
-                                    setQuery("");
-                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
-                                    nativeInputValueSetter.call(input, formattedNumber);
-                                    input.dispatchEvent(new Event("change", { bubbles: true }));
-                                    setTimeout(() => input.focus(), 100);
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
+    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { open: open, variant: variant, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(TextField, { autoFocus: true, type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
+                                const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+                                return (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
+                                        const formattedNumber = getFormattedNumber(mask, mask);
+                                        const input = inputRef.current.querySelector("input");
+                                        input.value = formattedNumber;
+                                        setValue(formattedNumber);
+                                        setCountryCode(iso);
+                                        setQuery("");
+                                        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                        nativeInputValueSetter.call(input, formattedNumber);
+                                        input.dispatchEvent(new Event("change", { bubbles: true }));
+                                        setTimeout(() => input.focus(), 100);
+                                    }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask));
+                            }) : _jsx(MenuItem, { disabled: true, children: searchNotFound }) })] }) })), _jsx(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, InputProps: {
                     startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) }) }))
@@ -100,0 +105,0 @@ } }, muiInputProps))] }));

joy/index.js

@@ -0,1 +1,2 @@
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
@@ -19,3 +20,3 @@ var t = {};
 const PhoneInput = forwardRef((_a, forwardedRef) => {
-    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
+    var { value: initialValue = "", variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), disabled = false, enableSearch = false, disableDropdown = false, disableParentheses = false, onlyCountries = [], excludeCountries = [], preferredCountries = [], searchNotFound = "No country found", searchPlaceholder = "Search country", onMount: handleMount = () => null, onInput: handleInput = () => null, onChange: handleChange = () => null, onKeyDown: handleKeyDown = () => null } = _a, muiInputProps = __rest(_a, ["value", "variant", "searchVariant", "country", "disabled", "enableSearch", "disableDropdown", "disableParentheses", "onlyCountries", "excludeCountries", "preferredCountries", "searchNotFound", "searchPlaceholder", "onMount", "onInput", "onChange", "onKeyDown"]);
     searchVariant = searchVariant || variant;
@@ -37,2 +38,3 @@ const inputRef = useRef(null);
         preferredCountries,
+        disableParentheses,
     });
@@ -86,15 +88,18 @@ const { onInput: onInputMaskHandler, onKeyDown: onKeyDownMaskHandler, } = useMask(pattern);
     }, [countriesList, metadata, onMount, pattern, setValue, value]);
-    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { variant: variant, listboxOpen: open, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(Input, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (_jsx(Option, { style: { maxWidth }, value: iso + dial, onClick: () => {
-                                    const formattedNumber = getFormattedNumber(mask, mask);
-                                    const input = inputRef.current.querySelector("input");
-                                    input.value = formattedNumber;
-                                    setValue(formattedNumber);
-                                    setCountryCode(iso);
-                                    setQuery("");
-                                    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
-                                    nativeInputValueSetter.call(input, formattedNumber);
-                                    input.dispatchEvent(new Event("change", { bubbles: true }));
-                                    setTimeout(() => input.focus(), 100);
-                                }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask))) : _jsx(Option, { value: "N/A", disabled: true, children: searchNotFound }) })] }) })), _jsx(Input, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, startDecorator: (_jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) })) }, muiInputProps))] }));
+    return (_jsxs("div", { className: "mui-phone-input-wrapper", ref: node => setMaxWidth((node === null || node === void 0 ? void 0 : node.offsetWidth) || 0), children: [(!disableDropdown && !disabled) && (_jsx(Select, { variant: variant, listboxOpen: open, value: selectValue, onClose: () => setOpen(searchRef.current), style: { position: "absolute", top: 0, left: 0, visibility: "hidden", width: "100%", zIndex: -1 }, children: _jsxs("div", { className: "mui-phone-input-search-wrapper", onKeyDown: (e) => e.stopPropagation(), children: [enableSearch && (_jsx(Input, { type: "search", value: query, variant: searchVariant, placeholder: searchPlaceholder, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), _jsx("div", { className: "mui-phone-input-search-list", children: countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
+                                const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
+                                return (_jsx(Option, { style: { maxWidth }, value: iso + dial, onClick: () => {
+                                        const formattedNumber = getFormattedNumber(mask, mask);
+                                        const input = inputRef.current.querySelector("input");
+                                        input.value = formattedNumber;
+                                        setValue(formattedNumber);
+                                        setCountryCode(iso);
+                                        setQuery("");
+                                        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
+                                        nativeInputValueSetter.call(input, formattedNumber);
+                                        input.dispatchEvent(new Event("change", { bubbles: true }));
+                                        setTimeout(() => input.focus(), 100);
+                                    }, children: _jsxs("div", { className: "mui-phone-input-select-item", children: [_jsx("div", { className: `flag ${iso}` }), _jsxs("div", { className: "label", children: [name, "\u00A0", displayFormat(mask)] })] }) }, iso + mask));
+                            }) : _jsx(Option, { value: "N/A", disabled: true, children: searchNotFound }) })] }) })), _jsx(Input, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, disabled: disabled, onChange: onChange, onKeyDown: onKeyDown, startDecorator: (_jsx("span", { style: { cursor: "pointer" }, onClick: () => setOpen(!open), children: _jsx("div", { className: `flag ${countryCode}` }) })) }, muiInputProps))] }));
 });
 export default PhoneInput;

joy/styles.js

@@ -0,1 +1,2 @@
+"use client";
 import { injectStyles, jsonToCss } from "react-phone-hooks/styles";
@@ -2,0 +3,0 @@ import commonStyles from "react-phone-hooks/stylesheet.json";

joy/types.d.ts

@@ -13,2 +13,3 @@ import { ChangeEvent, KeyboardEvent } from "react";
     disableDropdown?: boolean;
+    disableParentheses?: boolean;
     onlyCountries?: string[];
@@ -15,0 +16,0 @@ excludeCountries?: string[];

joy/types.js

@@ -0,1 +1,2 @@
+"use client";
 export {};

package.json

 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "name": "mui-phone-input",
@@ -50,3 +50,3 @@ "description": "Advanced, highly customizable phone input component for Material UI.",
   "dependencies": {
-    "react-phone-hooks": "^0.1.4"
+    "react-phone-hooks": "^0.1.5"
   },
@@ -53,0 +53,0 @@ "devDependencies": {

README.md

@@ -90,2 +90,3 @@ # MUI Phone Input <img src="https://github.com/typesnippet.png" align="right" height="64" />
 | disableDropdown    | Disables the manual country selection through the dropdown menu.                                                              | boolean                   |
+| disableParentheses | Disables parentheses from the input masks. Default enabled.                                                                   | boolean                   |
 | onlyCountries      | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`.                                          | string[]                  |
@@ -92,0 +93,0 @@ | excludeCountries   | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`.                        | string[]                  |

styles.cjs.js

@@ -1,2 +0,2 @@
-"use strict";
+"use client";
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -3,0 +3,0 @@ return (mod && mod.__esModule) ? mod : { "default": mod };

styles.js

@@ -0,1 +1,2 @@
+"use client";
 import { injectStyles, jsonToCss } from "react-phone-hooks/styles";
@@ -2,0 +3,0 @@ import commonStyles from "react-phone-hooks/stylesheet.json";

types.cjs.js

@@ -1,2 +0,2 @@
-"use strict";
+"use client";
 Object.defineProperty(exports, "__esModule", { value: true });

types.d.ts

@@ -13,2 +13,3 @@ import { ChangeEvent, KeyboardEvent } from "react";
     disableDropdown?: boolean;
+    disableParentheses?: boolean;
     onlyCountries?: string[];
@@ -15,0 +16,0 @@ excludeCountries?: string[];

types.js

@@ -0,1 +1,2 @@
+"use client";
 export {};

No alert changes

Improved metrics

Total package byte prevSize

55798

increased by3.35%

Lines of code

695

increased by5.62%

Number of lines in readme file

104

increased by0.97%

Dependency changes

• Updatedreact-phone-hooks@^0.1.5