mui-tel-input 8.0.1 → 9.0.0

package/package.json

@@ -7,10 +7,11 @@
     "url": "https://github.com/viclafouch/mui-tel-input/issues"
   },
   "homepage": "https://viclafouch.github.io/mui-tel-input",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "files": [
     "dist"
   ],
+  "type": "module",
   "main": "./dist/mui-tel-input.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -39,7 +40,7 @@
   ],
   "scripts": {
     "build": "vite build",
-    "lint": "tsc && eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "npx tsc && eslint",
     "lint:fix": "npm run lint -- --fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -60,7 +61,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.0.0",
+    "@mui/material": "^7.0.0",
     "@types/react": "^18.0.0 || ^19.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -71,43 +72,42 @@
     }
   },
   "dependencies": {
-    "@types/node": "^22.13.7",
-    "libphonenumber-js": "^1.11.19"
+    "@types/node": "^22.14.1",
+    "libphonenumber-js": "^1.12.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
+    "@babel/core": "^7.26.10",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^6.4.6",
-    "@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",
+    "@mui/material": "^7.0.2",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@viclafouch/eslint-config-viclafouch": "4.16.0",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
+    "@viclafouch/eslint-config-viclafouch": "4.22.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "babel-loader": "^9.2.1",
-    "eslint": "^8.56.0",
+    "babel-loader": "^10.0.0",
+    "eslint": "^9.24.0",
     "husky": "^9.1.7",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.4.2",
+    "jsdom": "^26.1.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "standard-version": "^9.5.0",
-    "storybook": "^8.6.3",
-    "typescript": "^5.8.2",
-    "vite": "6.2.0",
+    "storybook": "^8.6.12",
+    "typescript": "^5.8.3",
+    "vite": "6.2.6",
     "vite-aliases": "^0.11.8",
     "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.7"
+    "vitest": "^3.1.1"
   }
 }

package/dist/components/Flag/Flag.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-import { MuiTelInputCountry } from '../../shared/constants/countries';
-export type FlagProps = {
-    isoCode: MuiTelInputCountry | null;
-    children: React.ReactNode;
-};
-export declare const flagContainerClass = "MuiTelInput-Flag";
-declare const Flag: ({ isoCode, children }: FlagProps) => import("react/jsx-runtime").JSX.Element;
-export default Flag;

package/dist/components/Flag/Flag.styled.d.ts

@@ -1,4 +0,0 @@
-declare const Styled: {
-    Flag: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-};
-export { Styled };

package/dist/components/FlagButton/FlagButton.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-import { MuiTelInputCountry } from '../../shared/constants/countries';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { GetFlagElement } from '../../index.types';
-export type FlagButtonProps = IconButtonProps & {
-    isoCode: MuiTelInputCountry | null;
-    forceCallingCode?: boolean;
-    isFlagsMenuOpened: boolean;
-    langOfCountryName?: string;
-    disableDropdown?: boolean;
-    getFlagElement: GetFlagElement;
-    unknownFlagElement: React.ReactNode;
-};
-export declare const flagButtonClass = "MuiTelInput-IconButton";
-declare const FlagButton: ({ disableDropdown, forceCallingCode, langOfCountryName, isFlagsMenuOpened, getFlagElement, unknownFlagElement, isoCode, className, ...iconButtonProps }: FlagButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default FlagButton;

package/dist/components/FlagButton/FlagButton.styled.d.ts

@@ -1,4 +0,0 @@
-declare const Styled: {
-    CallingCodeSplitted: import('@emotion/styled').StyledComponent<import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "children" | "className" | "classes" | "sx" | "variant" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-};
-export { Styled };

package/dist/components/FlagMenuItem/FlagMenuItem.d.ts

@@ -1,16 +0,0 @@
-import { default as React } from 'react';
-import { MuiTelInputCountry } from '../../shared/constants/countries';
-import { MenuItemProps } from '@mui/material/MenuItem';
-import { GetFlagElement } from '../../index.types';
-export type FlagMenuItemProps = MenuItemProps & {
-    isoCode: MuiTelInputCountry;
-    onSelectCountry: (isoCode: MuiTelInputCountry) => void;
-    countryName: string;
-    getFlagElement: GetFlagElement;
-};
-export declare const menuItemClass = "MuiTelInput-MenuItem";
-export declare const listItemIconFlagClass = "MuiTelInput-ListItemIcon-flag";
-export declare const listItemTextCountryClass = "MuiTelInput-ListItemText-country";
-export declare const callingCodeClass = "MuiTelInput-Typography-calling-code";
-declare const _default: React.MemoExoticComponent<({ isoCode, onSelectCountry, countryName, getFlagElement, ...restMenuItemProps }: FlagMenuItemProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/FlagMenuItem/FlagsMenuItem.styled.d.ts

@@ -1,5 +0,0 @@
-declare const Styled: {
-    ListItemIcon: import('@emotion/styled').StyledComponent<import('@mui/material').ListItemIconProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-    ListItemText: import('@emotion/styled').StyledComponent<import('@mui/material').ListItemTextProps<import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>, import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-};
-export { Styled };

package/dist/components/FlagsMenu/FlagsMenu.d.ts

@@ -1,17 +0,0 @@
-import { MuiTelInputContinent } from '../../shared/constants/continents';
-import { MuiTelInputCountry } from '../../shared/constants/countries';
-import { MenuProps } from '@mui/material/Menu';
-import { GetFlagElement } from '../../index.types';
-export type FlagsMenuProps = Partial<MenuProps> & {
-    isoCode: MuiTelInputCountry | null;
-    onlyCountries?: MuiTelInputCountry[];
-    excludedCountries?: MuiTelInputCountry[];
-    preferredCountries?: MuiTelInputCountry[];
-    langOfCountryName?: string;
-    continents?: MuiTelInputContinent[];
-    onSelectCountry: (isoCode: MuiTelInputCountry) => void;
-    getFlagElement: GetFlagElement;
-};
-export declare const menuClass = "MuiTelInput-Menu";
-declare const FlagsMenu: ({ anchorEl, isoCode, onSelectCountry, excludedCountries, onlyCountries, langOfCountryName, continents, preferredCountries, className, getFlagElement, ...restMenuProps }: FlagsMenuProps) => import("react/jsx-runtime").JSX.Element;
-export default FlagsMenu;

package/dist/index.types.d.ts

@@ -1,47 +0,0 @@
-import { NumberType } from 'libphonenumber-js';
-import { MuiTelInputContinent } from './shared/constants/continents';
-import { MuiTelInputCountry } from './shared/constants/countries';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { MenuProps } from '@mui/material/Menu';
-import { TextFieldProps } from '@mui/material/TextField';
-type BaseTextFieldProps = Omit<TextFieldProps, 'onChange' | 'select' | 'type' | 'multiline' | 'defaultValue' | 'inputProps' | 'InputProps'>;
-export type { MuiTelInputContinent, MuiTelInputCountry };
-export type MuiTelInputReason = 'country' | 'input' | 'blur';
-export type MuiTelInputFlagElement = React.ReactNode;
-export type GetFlagElement = (isoCode: MuiTelInputCountry, { countryName, isSelected, imgProps }: {
-    countryName: string;
-    isSelected: boolean;
-    imgProps: React.ComponentPropsWithRef<'img'>;
-}) => MuiTelInputFlagElement;
-export interface MuiTelInputInfo {
-    countryCode: MuiTelInputCountry | null;
-    countryCallingCode: string | null;
-    nationalNumber: string | null;
-    numberType: Exclude<NumberType, undefined> | null;
-    numberValue: string | null;
-    reason: MuiTelInputReason;
-}
-type ForceCallingCodeWithDefaultCountry = {
-    forceCallingCode: true;
-    defaultCountry: MuiTelInputCountry;
-} | {
-    forceCallingCode?: false | undefined;
-    defaultCountry?: MuiTelInputCountry;
-};
-export type MuiTelInputProps = BaseTextFieldProps & ForceCallingCodeWithDefaultCountry & {
-    excludedCountries?: MuiTelInputCountry[];
-    onlyCountries?: MuiTelInputCountry[];
-    preferredCountries?: MuiTelInputCountry[];
-    focusOnSelectCountry?: boolean;
-    disableDropdown?: boolean;
-    langOfCountryName?: string;
-    disableFormatting?: boolean;
-    continents?: MuiTelInputContinent[];
-    onChange?: (value: string, info: MuiTelInputInfo) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>, info: MuiTelInputInfo) => void;
-    value?: string | undefined;
-    MenuProps?: Partial<MenuProps>;
-    getFlagElement?: GetFlagElement;
-    unknownFlagElement?: MuiTelInputFlagElement;
-    FlagIconButtonProps?: Partial<IconButtonProps>;
-};

package/dist/shared/constants/continents.d.ts

@@ -1,7 +0,0 @@
-import { MuiTelInputCountry } from './countries';
-export type MuiTelInputContinent = 'EU' | 'AS' | 'NA' | 'SA' | 'OC' | 'AF';
-type Continents = {
-    [key in MuiTelInputContinent]: MuiTelInputCountry[];
-};
-export declare const CONTINENTS: Continents;
-export {};

package/dist/shared/constants/countries.d.ts

@@ -1,5 +0,0 @@
-import { MetadataJson } from 'libphonenumber-js';
-export declare const COUNTRIES: MetadataJson['countries'];
-export declare const ISO_CODES: import('libphonenumber-js').CountryCode[];
-export type MuiTelInputCountry = (typeof ISO_CODES)[number];
-export declare const DEFAULT_ISO_CODE: MuiTelInputCountry;

package/dist/shared/constants/flags.d.ts

@@ -1,6 +0,0 @@
-type Flags = {
-    AC: string;
-    TA: string;
-};
-export declare const FLAGS_SVG: Flags;
-export {};

package/dist/shared/constants/lang.d.ts

@@ -1 +0,0 @@
-export declare const DEFAULT_LANG = "en";

package/dist/shared/helpers/__tests__/array.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/shared/helpers/__tests__/country.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/shared/helpers/array.d.ts

@@ -1,2 +0,0 @@
-export declare function matchIsArray(value: unknown, filled?: boolean): value is unknown[];
-export declare function getFirstIntersection<T extends unknown[]>(arrayA: T, arrayB: T): T[number] | null;

package/dist/shared/helpers/country.d.ts

@@ -1,18 +0,0 @@
-import { MuiTelInputContinent } from '../constants/continents';
-import { MuiTelInputCountry } from '../constants/countries';
-type FilterCountriesOptions = {
-    onlyCountries?: readonly MuiTelInputCountry[];
-    excludedCountries?: readonly MuiTelInputCountry[];
-    preferredCountries?: readonly MuiTelInputCountry[];
-    continents?: readonly MuiTelInputContinent[];
-};
-export declare function getCallingCodeOfCountry(isoCode: MuiTelInputCountry): string;
-export declare function getValidCountry(country?: MuiTelInputCountry): MuiTelInputCountry;
-export declare function sortPreferredCountries(countries: readonly MuiTelInputCountry[], preferredCountries: readonly MuiTelInputCountry[]): readonly MuiTelInputCountry[];
-export declare function getCountriesOfContinents(continents: readonly MuiTelInputContinent[]): readonly MuiTelInputCountry[];
-export declare function getOnlyCountries(countries: readonly MuiTelInputCountry[], onlyCountries: readonly MuiTelInputCountry[]): readonly MuiTelInputCountry[];
-export declare function excludeCountries(countries: readonly MuiTelInputCountry[], excludedCountries?: readonly MuiTelInputCountry[]): readonly MuiTelInputCountry[];
-export declare function sortAlphabeticallyCountryCodes(countryCodes: readonly MuiTelInputCountry[], displayNames: Intl.DisplayNames): readonly MuiTelInputCountry[];
-export declare function filterCountries(countries: readonly MuiTelInputCountry[], displayNames: Intl.DisplayNames, options: FilterCountriesOptions): readonly MuiTelInputCountry[];
-export declare function matchContinentsIncludeCountry(continents: MuiTelInputContinent[], isoCode: MuiTelInputCountry): boolean;
-export {};

package/dist/shared/helpers/dom.d.ts

@@ -1 +0,0 @@
-export declare function putCursorAtEndOfInput(inputElement: HTMLInputElement): void;

package/dist/shared/helpers/flag.d.ts

@@ -1,14 +0,0 @@
-import { GetFlagElement, MuiTelInputCountry } from '../../index.types';
-export declare const flagImgClass = "MuiTelInput-FlagImg";
-export declare const getDefaultImgProps: ({ isoCode, countryName }: {
-    isoCode: MuiTelInputCountry;
-    countryName: string;
-}) => {
-    src: string;
-    loading: "lazy";
-    width: number;
-    alt: string;
-    className: string;
-};
-export declare const getDefaultFlagElement: GetFlagElement;
-export declare const defaultUnknownFlagElement: import("react/jsx-runtime").JSX.Element;

package/dist/shared/helpers/intl.d.ts

@@ -1 +0,0 @@
-export declare function getDisplayNames(lang?: string): Intl.DisplayNames;

package/dist/shared/helpers/log.d.ts

@@ -1 +0,0 @@
-export declare function log(...args: Parameters<Console['error']>): void;

package/dist/shared/helpers/object.d.ts

@@ -1,2 +0,0 @@
-export declare function matchIsObject(value: unknown): value is object;
-export declare const getKeys: <T>(object: T) => (keyof T)[];

package/dist/shared/helpers/ref.d.ts

@@ -1,2 +0,0 @@
-import { default as React } from 'react';
-export declare function refToRefs(refs: (React.Ref<unknown> | undefined)[]): (refInstance: unknown) => void;

package/dist/shared/helpers/string.d.ts

@@ -1 +0,0 @@
-export declare function removeOccurrence(text: string, part: string | RegExp): string;

package/dist/shared/helpers/valid-phone-number.d.ts

@@ -1,7 +0,0 @@
-import { MuiTelInputContinent } from 'index.types';
-import { MuiTelInputCountry } from '../constants/countries';
-export declare function matchIsValidTel(text: string, options?: {
-    excludedCountries?: MuiTelInputCountry[];
-    onlyCountries?: MuiTelInputCountry[];
-    continents?: MuiTelInputContinent[];
-}): boolean;

package/dist/shared/hooks/__tests__/useMissmatch.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/shared/hooks/useAnchor.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-import { MuiTelInputProps } from '../../index.types';
-type Options = Pick<MuiTelInputProps, 'disableDropdown' | 'disabled'>;
-export declare function useAnchor({ disabled, disableDropdown }: Options): {
-    anchorRef: React.RefObject<HTMLDivElement | null>;
-    anchorEl: HTMLDivElement | null;
-    openMenu: () => void;
-    closeMenu: () => void;
-};
-export {};

package/dist/shared/hooks/useEvents.d.ts

@@ -1,10 +0,0 @@
-import { TextFieldProps } from '@mui/material';
-type Options = Pick<TextFieldProps, 'onDoubleClick' | 'onCopy' | 'onFocus'> & {
-    inputRef: React.MutableRefObject<HTMLInputElement | null>;
-};
-export declare function useEvents({ onDoubleClick, onCopy, onFocus, inputRef }: Options): {
-    handleDoubleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    handleCopy: (event: React.ClipboardEvent<HTMLInputElement>) => void;
-    handleFocus: (event: React.FocusEvent<HTMLInputElement, Element>) => void;
-};
-export {};

package/dist/shared/hooks/useMissmatchProps.d.ts

@@ -1,2 +0,0 @@
-import { MuiTelInputProps } from '../../index.types';
-export declare function useMismatchProps(props: MuiTelInputProps): void;

package/dist/shared/hooks/usePhoneDigits.d.ts

@@ -1,34 +0,0 @@
-import { default as React } from 'react';
-import { MuiTelInputContinent } from '../constants/continents';
-import { MuiTelInputCountry } from '../constants/countries';
-import { MuiTelInputInfo, MuiTelInputReason } from '../../index.types';
-type UsePhoneDigitsParams = {
-    value: string;
-    onChange?: (value: string, info: MuiTelInputInfo) => void;
-    defaultCountry?: MuiTelInputCountry;
-    forceCallingCode: boolean;
-    disableFormatting: boolean;
-    excludedCountries?: MuiTelInputCountry[];
-    onlyCountries?: MuiTelInputCountry[];
-    continents?: MuiTelInputContinent[];
-};
-type State = {
-    inputValue: string;
-    isoCode: MuiTelInputCountry | null;
-};
-type GetInitialStateParams = {
-    defaultCountry?: MuiTelInputCountry;
-    initialValue: string;
-    forceCallingCode: boolean;
-    disableFormatting: boolean;
-};
-export declare function getInitialState(params: GetInitialStateParams): State;
-export default function usePhoneDigits({ value, onChange, defaultCountry, onlyCountries, excludedCountries, continents, disableFormatting, forceCallingCode }: UsePhoneDigitsParams): {
-    inputValue: string;
-    isoCode: import('libphonenumber-js').CountryCode | null;
-    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onCountryChange: (newCountry: MuiTelInputCountry) => void;
-    inputRef: React.RefObject<HTMLInputElement | null>;
-    buildInputInfo: (reason: MuiTelInputReason) => MuiTelInputInfo;
-};
-export {};

package/dist/testUtils/index.d.ts

@@ -1,11 +0,0 @@
-import { MuiTelInputCountry } from '../shared/constants/countries';
-export declare function getInputElement(): HTMLInputElement;
-export declare function getButtonElement(): HTMLButtonElement;
-export declare function expectButtonIsFlagOf(isoCode: MuiTelInputCountry): void;
-export declare function expectButtonNotIsFlagOf(isoCode: MuiTelInputCountry): void;
-export declare function expectButtonContainsCallingCode(callingCode: string): void;
-export declare function typeInInputElement(value: string): Promise<{
-    result: string;
-}>;
-export declare function selectCountry(isoCode: MuiTelInputCountry): void;
-export declare function closeFlagsMenu(): Promise<void>;