@youngonesworks/ui 0.1.116 → 0.1.118

package/dist/index.d.ts

@@ -61,6 +61,7 @@ export { TruncatedText } from './components/truncatedText';
 export { UnorderedList } from './components/unorderedList';
 export { UnorderedListItem } from './components/unorderedListItem';
 export { UnstyledButton } from './components/unstyledButton';
+export { PhoneInput } from './components/phoneInput';
 export { ProfileMenu } from './components/profileMenu';
 export { type IWysiwygEditorImperativeHandle, WysiwygEditor } from './components/wysiwygEditor';
 export * from './theme';

package/dist/index.js

@@ -13,6 +13,8 @@ import { addMonths, format, setMonth } from "date-fns";
 import { enGB, fr, nl, nlBE } from "date-fns/locale";
 import { createPortal } from "react-dom";
 import { Tooltip as Tooltip$1 } from "react-tooltip";
+import phone from "phone";
+import CountryList from "country-list-with-dial-code-and-flag";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { Underline } from "@tiptap/extension-underline";
 import { EditorContent, useEditor } from "@tiptap/react";
@@ -2449,9 +2451,7 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
 			case "Enter":
 			case " ":
 				event.preventDefault();
-				if (focusedIndex >= 0 && filteredOptions[focusedIndex]) {
-					handleSelect(filteredOptions[focusedIndex].value);
-				}
+				if (focusedIndex >= 0 && filteredOptions[focusedIndex]) handleSelect(filteredOptions[focusedIndex].value);
 				break;
 		}
 	}, [
@@ -3056,6 +3056,269 @@ const UnorderedListItem = ({ children, actionItem, className, header = false,...
 	})]
 });
 
+//#endregion
+//#region src/hooks/phone/usePhoneNumber.ts
+function usePhoneNumber() {
+	/**
+	* Validates a phone number and returns parsing results
+	*/
+	const validatePhone = useCallback((phoneNumber, options) => phone(phoneNumber, options), []);
+	/**
+	* Strips the country code from a phone number
+	* Example: +85265698900 -> 65698900
+	*/
+	const stripCountryCode = useCallback((phoneNumber) => {
+		const result = phone(phoneNumber);
+		if (!result.isValid) return phoneNumber;
+		return result.phoneNumber.replace(result.countryCode, "");
+	}, []);
+	/**
+	* Returns the country code from a phone number
+	* Example: +85265698900 -> +852
+	*/
+	const getCountryCode = useCallback((phoneNumber) => {
+		const result = phone(phoneNumber);
+		if (!result.isValid) return phoneNumber;
+		return result.countryCode;
+	}, []);
+	/**
+	* Formats a phone number to international format with country code
+	* Example: 0648711212 (with country: 'NL') -> +31648711212
+	*/
+	const formatToInternational = useCallback((phoneNumber, options) => {
+		const result = phone(phoneNumber, options);
+		if (!result.isValid) return phoneNumber;
+		return result.phoneNumber;
+	}, []);
+	return {
+		validatePhone,
+		stripCountryCode,
+		getCountryCode,
+		formatToInternational
+	};
+}
+
+//#endregion
+//#region src/hooks/phone/usePhoneNumberPrefix.ts
+const usePhoneNumberPrefix = (defaultCountry) => {
+	const countryList = CountryList.getAll();
+	return countryList.filter((country) => country.dial_code).sort((a, b) => {
+		if (a?.code === defaultCountry) return -1;
+		if (b?.code === defaultCountry) return 1;
+		return a.name.localeCompare(b.name);
+	});
+};
+
+//#endregion
+//#region src/components/phoneInput/index.tsx
+const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
+	const phoneNumberPrefixes = usePhoneNumberPrefix(defaultCountry);
+	const [selectedCountry, setSelectedCountry] = useState(phoneNumberPrefixes.find((country) => country.code === defaultCountry) || null);
+	const [openDropdown, setOpenDropdown] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [filteredCountries, setFilteredCountries] = useState(phoneNumberPrefixes);
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const optionRefs = useRef([]);
+	const { refs, floatingStyles, context } = useFloating({
+		open: openDropdown,
+		onOpenChange: (isOpen) => {
+			setOpenDropdown(isOpen);
+			if (isOpen) setHighlightedIndex(-1);
+		},
+		middleware: [
+			offset(4),
+			flip(),
+			shift()
+		],
+		whileElementsMounted: autoUpdate,
+		placement: "bottom-start"
+	});
+	const click = useClick(context);
+	const dismiss = useDismiss(context);
+	const role = useRole(context, { role: "combobox" });
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		click,
+		dismiss,
+		role
+	]);
+	const performSearch = useCallback((query) => {
+		if (!query) return phoneNumberPrefixes;
+		const lowerQuery = query.toLowerCase();
+		return phoneNumberPrefixes.filter((country) => country.name.toLowerCase().includes(lowerQuery) || country.dial_code.toLowerCase().includes(lowerQuery) || country.code.toLowerCase().includes(lowerQuery));
+	}, [phoneNumberPrefixes]);
+	useEffect(() => {
+		const results = performSearch(searchQuery);
+		setFilteredCountries(results);
+		setHighlightedIndex(-1);
+	}, [searchQuery]);
+	useEffect(() => {
+		optionRefs.current = optionRefs.current.slice(0, filteredCountries.length);
+	}, [filteredCountries]);
+	useEffect(() => {
+		if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+			optionRefs.current[highlightedIndex]?.scrollIntoView({
+				behavior: "auto",
+				block: "nearest"
+			});
+		}
+	}, [highlightedIndex]);
+	const handleSelect = (country) => {
+		setSelectedCountry(country);
+		setOpenDropdown(false);
+	};
+	const handleKeyDown = (e) => {
+		if (filteredCountries.length === 0) return;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				setHighlightedIndex((prev) => prev < filteredCountries.length - 1 ? prev + 1 : 0);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredCountries.length - 1);
+				break;
+			case "Enter": {
+				e.preventDefault();
+				if (highlightedIndex >= 0) handleSelect(filteredCountries[highlightedIndex]);
+				break;
+			}
+			case "Escape":
+				e.preventDefault();
+				setOpenDropdown(false);
+				break;
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		updateCountry: (countryCode) => {
+			const country = phoneNumberPrefixes.find((c) => c.dial_code === countryCode);
+			if (country) setSelectedCountry(country);
+		},
+		getSelectedCountry: () => selectedCountry
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			ref: refs.setReference,
+			...getReferenceProps(),
+			className: cn("flex h-10 items-center justify-between px-2 text-sm transition-colors"),
+			"aria-haspopup": "listbox",
+			"aria-expanded": openDropdown,
+			"aria-label": `Country selector. Currently selected: ${selectedCountry?.name || "None"} ${selectedCountry?.dial_code || ""}`,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium",
+					children: selectedCountry?.dial_code
+				})
+			})
+		}), openDropdown && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context,
+			modal: false,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: refs.setFloating,
+				style: {
+					...floatingStyles,
+					width: "280px"
+				},
+				...getFloatingProps(),
+				role: "listbox",
+				"aria-label": "Country selection",
+				className: cn("z-[999] rounded-md border border-gray-200 bg-white shadow-lg", "overflow-hidden animate-in fade-in"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "p-2 border-b border-gray-100",
+					children: /* @__PURE__ */ jsx(TextInput, {
+						placeholder: searchPlaceholder,
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						onKeyDown: handleKeyDown,
+						autoFocus: true,
+						"aria-label": "Search countries",
+						role: "searchbox"
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "max-h-[200px] overflow-auto p-1",
+					children: filteredCountries.length > 0 ? filteredCountries.map((country, index) => /* @__PURE__ */ jsxs("button", {
+						ref: (el) => optionRefs.current[index] = el,
+						type: "button",
+						role: "option",
+						"aria-selected": selectedCountry?.code === country.code,
+						onClick: () => handleSelect(country),
+						className: cn("flex w-full items-center gap-3 rounded px-3 py-2 text-sm hover:bg-gray-50", selectedCountry?.code === country.code && "bg-gray-50", highlightedIndex === index && "bg-gray-50 border border-gray-100"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-base",
+								children: country.flag
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "flex-1 text-left truncate",
+								children: country.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-xs font-medium text-gray-600",
+								children: country.dial_code
+							})
+						]
+					}, country.code + country.name + country.dial_code)) : /* @__PURE__ */ jsx("div", {
+						className: "px-3 py-2 text-sm text-gray-500 text-center",
+						children: "No countries found"
+					})
+				})]
+			})
+		}) })]
+	});
+};
+const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", invalidMessage, defaultValue, onChange, ref,...rest }) => {
+	const inputRef = useRef(null);
+	const [phoneNumber, setPhoneNumber] = useState(defaultValue || "");
+	const { validatePhone, stripCountryCode, getCountryCode, formatToInternational } = usePhoneNumber();
+	const countrySelectorRef = useRef(null);
+	const [error, setError] = useState("");
+	const filterPhoneInput = (value) => value.replace(/[^0-9+()]/g, "");
+	const handlePhoneNumberChange = (e) => {
+		const filteredValue = filterPhoneInput(e.target.value);
+		if (error) setError("");
+		if (filteredValue.startsWith("+") && filteredValue.length > 1) {
+			const countryCode = getCountryCode(filteredValue);
+			if (countryCode) countrySelectorRef.current?.updateCountry(countryCode);
+			const strippedNumber = stripCountryCode(filteredValue);
+			setPhoneNumber(strippedNumber);
+			return;
+		} else setPhoneNumber(filteredValue);
+	};
+	const handleBlur = () => {
+		if (phoneNumber.trim()) {
+			const selectedCountry = countrySelectorRef.current?.getSelectedCountry();
+			const validationResult = validatePhone(phoneNumber, { country: selectedCountry?.code });
+			if (validationResult.isValid) {
+				const formattedNumber = formatToInternational(phoneNumber, { country: selectedCountry?.code });
+				const displayNumber = stripCountryCode(formattedNumber);
+				const fullNumber = selectedCountry?.dial_code + displayNumber;
+				setPhoneNumber(displayNumber);
+				onChange(fullNumber);
+			} else setError(invalidMessage);
+		}
+	};
+	return /* @__PURE__ */ jsx(TextInput, {
+		...rest,
+		value: phoneNumber,
+		onChange: handlePhoneNumberChange,
+		onBlur: handleBlur,
+		leftSection: /* @__PURE__ */ jsx(CountrySelector, {
+			ref: countrySelectorRef,
+			searchPlaceholder: searchPlaceHolder,
+			defaultCountry
+		}),
+		placeholder,
+		error,
+		ref: ref || inputRef,
+		"aria-label": "Phone number input",
+		inputMode: "tel",
+		autoComplete: "tel"
+	});
+};
+PhoneInput.displayName = "PhoneInput";
+
 //#endregion
 //#region src/components/profileMenu/index.tsx
 const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classNames }) => {
@@ -3355,5 +3618,5 @@ const setCSSVariable = (variable, value) => {
 };
 
 //#endregion
-export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, CSS_VARIABLE_KEYS, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants, getCSSVariable, setCSSVariable };
+export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, CSS_VARIABLE_KEYS, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, PhoneInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants, getCSSVariable, setCSSVariable };
 //# sourceMappingURL=index.js.map