mui-phone-input - npm Package Compare versions

Comparing version 0.1.0-alpha to 0.1.0

index.cjs.js

@@ -77,9 +77,9 @@ "use strict";
     }, [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: [(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, { type: "search", value: query, variant: searchVariant, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), 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 selectedOption = iso + dial;
-                                if (selectValue === selectedOption)
-                                    return;
-                                setCountryCode(selectedOption.slice(0, 2));
-                                setValue((0, react_phone_hooks_1.getFormattedNumber)(mask, mask));
-                            }, 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.TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, 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 && ((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, { 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 selectedOption = iso + dial;
+                                    if (selectValue === selectedOption)
+                                        return;
+                                    setCountryCode(selectedOption.slice(0, 2));
+                                    setValue((0, react_phone_hooks_1.getFormattedNumber)(mask, mask));
+                                }, 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, 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}` }) }) }))
@@ -86,0 +86,0 @@ } }, muiInputProps))] }));

index.js

@@ -75,9 +75,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     }, [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: [_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, { type: "search", value: query, variant: searchVariant, className: "mui-phone-input-search", onChange: (e) => setQuery(e.target.value), onBlur: () => searchRef.current = false, onFocus: () => searchRef.current = true })), countriesList.map(([iso, name, dial, mask]) => (_jsx(MenuItem, { disableRipple: true, value: iso + dial, style: { maxWidth }, selected: selectValue === iso + dial, onClick: () => {
-                                const selectedOption = iso + dial;
-                                if (selectValue === selectedOption)
-                                    return;
-                                setCountryCode(selectedOption.slice(0, 2));
-                                setValue(getFormattedNumber(mask, mask));
-                            }, 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(TextField, Object.assign({ ref: ref, type: "tel", value: value, variant: variant, onInput: onInput, 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 && (_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, { 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 selectedOption = iso + dial;
+                                    if (selectValue === selectedOption)
+                                        return;
+                                    setCountryCode(selectedOption.slice(0, 2));
+                                    setValue(getFormattedNumber(mask, mask));
+                                }, 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, 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}` }) }) }))
@@ -84,0 +84,0 @@ } }, muiInputProps))] }));

package.json

 {
-  "version": "0.1.0-alpha",
+  "version": "0.1.0",
   "name": "mui-phone-input",
@@ -26,27 +26,6 @@ "description": "Advanced, highly customizable phone input component for Material UI.",
   },
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs.js",
-      "types": {
-        "default": "./index.d.ts"
-      }
-    },
-    "./types": {
-      "import": "./types.js",
-      "require": "./types.cjs.js",
-      "types": {
-        "default": "./types.d.ts"
-      }
-    },
-    "./styles": {
-      "import": "./styles.js",
-      "require": "./styles.cjs.js",
-      "types": {
-        "default": "./styles.d.ts"
-      }
-    },
-    "./package.json": "./package.json"
-  },
   "files": [
+    "joy",
+    "base",
+    "core",
     "index*",
@@ -62,3 +41,3 @@ "types*",
     "build": "tsc --module commonjs && npm run rename -- cjs && tsc --declaration",
-    "prebuild": "rm -r resources index* types* styles* || true",
+    "prebuild": "rm -r joy base core resources index* types* styles* || true",
     "postpack": "tsx scripts/prepare-package.ts",
@@ -78,2 +57,3 @@ "test": "jest --config jestconfig.json",
     "@material-ui/core": "^4.0.0",
+    "@mui/base": "^5.0.0-beta.29",
     "@mui/joy": "^5.0.0-beta.18",
@@ -80,0 +60,0 @@ "@mui/material": "^5.0.0",

README.md

 # MUI Phone Input <img src="https://github.com/typesnippet.png" align="right" height="64" />
 
 [![npm](https://img.shields.io/npm/v/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
-[![mui](https://img.shields.io/badge/Mui%204%20%7C%20Mui%205%20%7C%20Joy-blue)](https://mui.com/)
+[![distro](https://img.shields.io/badge/distro-core%20|%20material%20|%20base%20|%20joy-blue)](https://mui.com/)
 [![types](https://img.shields.io/npm/types/mui-phone-input)](https://www.npmjs.com/package/mui-phone-input)
@@ -9,3 +9,3 @@ [![License](https://img.shields.io/npm/l/mui-phone-input)](https://github.com/typesnippet/mui-phone-input/blob/master/LICENSE)
 
-Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [@material-ui/core](https://v4.mui.com/), [@mui/material](https://mui.com/), [@mui/base](https://mui.com/base-ui/getting-started/), [@mui/system](https://mui.com/system/getting-started/) and [@mui/joy](https://mui.com/joy-ui/getting-started/) distributions. It provides built-in support for area codes and strict validation.
+Advanced phone input component for Material UI that leverages the [react-phone-hooks](https://www.npmjs.com/package/react-phone-hooks) supporting all countries. The package is compatible with [@material-ui/core](https://v4.mui.com/), [@mui/material](https://mui.com/), [@mui/base](https://mui.com/base-ui/getting-started/) and [@mui/joy](https://mui.com/joy-ui/getting-started/) distributions. It provides built-in support for area codes and strict validation.
 
@@ -63,3 +63,3 @@ ## Value
     </form>
-  );
+  )
 }
@@ -66,0 +66,0 @@

resources/stylesheet.json

@@ -23,3 +23,9 @@ {
     "width": "calc(100% - 20px)"
+  },
+  ".mui-phone-input-search-wrapper .mui-phone-input-search-list": {
+    "top": "56px",
+    "overflow": "auto",
+    "position": "sticky",
+    "max-height": "400px"
   }
 }

types.d.ts

 import { ChangeEvent, KeyboardEvent } from "react";
 import types from "react-phone-hooks/types";
-import { TextFieldProps as Mui5TextFieldProps } from "@mui/material/TextField";
-import { TextFieldProps as Mui4TextFieldProps } from "@material-ui/core/TextField";
+import { TextFieldProps } from "@mui/material/TextField";
 export type PhoneNumber = types.PhoneNumber;
-export interface PhoneInputProps extends Omit<Mui5TextFieldProps & Mui4TextFieldProps, "onChange"> {
+export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     value?: PhoneNumber | string;
-    variant?: "outlined" | "filled" | "standard";
-    searchVariant?: "outlined" | "filled" | "standard";
+    searchVariant?: TextFieldProps["variant"];
     country?: string;
@@ -11,0 +9,0 @@ enableSearch?: boolean;

No alert changes

Improved metrics

Total package byte prevSize

48735

increased by86.87%

Number of package files

31

increased by138.46%

Lines of code

602

increased by138.89%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes