@youngonesworks/ui 0.1.115 → 0.1.117

package/dist/components/phoneInput/PhoneInput.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PhoneInput } from './index';
+declare const meta: Meta<typeof PhoneInput>;
+export default meta;
+type Story = StoryObj<typeof PhoneInput>;
+export declare const Default: Story;
+export declare const UnitedStates: Story;
+export declare const Germany: Story;
+export declare const CustomMessages: Story;

package/dist/components/phoneInput/index.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { type TextInputProps } from '@components/textInput';
+interface PhoneInputProps extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
+    searchPlaceHolder: string;
+    defaultCountry?: string;
+    invalidMessage: string;
+    defaultValue?: string;
+    onChange: (value: string) => void;
+    ref?: RefObject<HTMLInputElement>;
+}
+export declare const PhoneInput: {
+    ({ placeholder, searchPlaceHolder, defaultCountry, invalidMessage, defaultValue, onChange, ref, ...rest }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, Ref } from 'react';
+import { type ComponentPropsWithoutRef, type Ref } from 'react';
 interface Option {
     value: string;
     label: string;

package/dist/hooks/phone/usePhoneNumber.d.ts

@@ -0,0 +1,13 @@
+import { type PhoneInvalidResult, type PhoneValidResult } from 'phone';
+interface PhoneOptions {
+    country?: string;
+    validateMobilePrefix?: boolean;
+    strictDetection?: boolean;
+}
+export declare function usePhoneNumber(): {
+    validatePhone: (phoneNumber: string, options?: PhoneOptions) => PhoneValidResult | PhoneInvalidResult;
+    stripCountryCode: (phoneNumber: string) => string;
+    getCountryCode: (phoneNumber: string) => string;
+    formatToInternational: (phoneNumber: string, options?: PhoneOptions) => string;
+};
+export {};

package/dist/hooks/phone/usePhoneNumberPrefix.d.ts

@@ -0,0 +1 @@
+export declare const usePhoneNumberPrefix: (defaultCountry: string) => import("country-list-with-dial-code-and-flag").Country[];

package/dist/index.cjs

@@ -35,6 +35,8 @@ const date_fns = __toESM(require("date-fns"));
 const date_fns_locale = __toESM(require("date-fns/locale"));
 const react_dom = __toESM(require("react-dom"));
 const react_tooltip = __toESM(require("react-tooltip"));
+const __hooks_phone_usePhoneNumber = __toESM(require("@hooks/phone/usePhoneNumber"));
+const __hooks_phone_usePhoneNumberPrefix = __toESM(require("@hooks/phone/usePhoneNumberPrefix"));
 const __tiptap_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
 const __tiptap_extension_underline = __toESM(require("@tiptap/extension-underline"));
 const __tiptap_react = __toESM(require("@tiptap/react"));
@@ -2471,9 +2473,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;
 		}
 	}, [
@@ -3078,6 +3078,216 @@ const UnorderedListItem = ({ children, actionItem, className, header = false,...
 	})]
 });
 
+//#endregion
+//#region src/components/phoneInput/index.tsx
+const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
+	const phoneNumberPrefixes = (0, __hooks_phone_usePhoneNumberPrefix.usePhoneNumberPrefix)(defaultCountry);
+	const [selectedCountry, setSelectedCountry] = (0, react.useState)(phoneNumberPrefixes.find((country) => country.code === defaultCountry) || null);
+	const [openDropdown, setOpenDropdown] = (0, react.useState)(false);
+	const [searchQuery, setSearchQuery] = (0, react.useState)("");
+	const [filteredCountries, setFilteredCountries] = (0, react.useState)(phoneNumberPrefixes);
+	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(-1);
+	const optionRefs = (0, react.useRef)([]);
+	const { refs, floatingStyles, context } = (0, __floating_ui_react.useFloating)({
+		open: openDropdown,
+		onOpenChange: (isOpen) => {
+			setOpenDropdown(isOpen);
+			if (isOpen) setHighlightedIndex(-1);
+		},
+		middleware: [
+			(0, __floating_ui_react.offset)(4),
+			(0, __floating_ui_react.flip)(),
+			(0, __floating_ui_react.shift)()
+		],
+		whileElementsMounted: __floating_ui_react.autoUpdate,
+		placement: "bottom-start"
+	});
+	const click = (0, __floating_ui_react.useClick)(context);
+	const dismiss = (0, __floating_ui_react.useDismiss)(context);
+	const role = (0, __floating_ui_react.useRole)(context, { role: "combobox" });
+	const { getReferenceProps, getFloatingProps } = (0, __floating_ui_react.useInteractions)([
+		click,
+		dismiss,
+		role
+	]);
+	const performSearch = (0, react.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]);
+	(0, react.useEffect)(() => {
+		const results = performSearch(searchQuery);
+		setFilteredCountries(results);
+		setHighlightedIndex(-1);
+	}, [searchQuery]);
+	(0, react.useEffect)(() => {
+		optionRefs.current = optionRefs.current.slice(0, filteredCountries.length);
+	}, [filteredCountries]);
+	(0, react.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;
+		}
+	};
+	(0, react.useImperativeHandle)(ref, () => ({
+		updateCountry: (countryCode) => {
+			const country = phoneNumberPrefixes.find((c) => c.dial_code === countryCode);
+			if (country) setSelectedCountry(country);
+		},
+		getSelectedCountry: () => selectedCountry
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center gap-1",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-xs font-medium",
+					children: selectedCountry?.dial_code
+				})
+			})
+		}), openDropdown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
+			context,
+			modal: false,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "p-2 border-b border-gray-100",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInput, {
+						placeholder: searchPlaceholder,
+						value: searchQuery,
+						onChange: (e) => setSearchQuery(e.target.value),
+						onKeyDown: handleKeyDown,
+						autoFocus: true,
+						"aria-label": "Search countries",
+						role: "searchbox"
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "max-h-[200px] overflow-auto p-1",
+					children: filteredCountries.length > 0 ? filteredCountries.map((country, index) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-base",
+								children: country.flag
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "flex-1 text-left truncate",
+								children: country.name
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xs font-medium text-gray-600",
+								children: country.dial_code
+							})
+						]
+					}, country.code + country.name + country.dial_code)) : /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useRef)(null);
+	const [phoneNumber, setPhoneNumber] = (0, react.useState)(defaultValue || "");
+	const { validatePhone, stripCountryCode, getCountryCode, formatToInternational } = (0, __hooks_phone_usePhoneNumber.usePhoneNumber)();
+	const countrySelectorRef = (0, react.useRef)(null);
+	const [error, setError] = (0, react.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__ */ (0, react_jsx_runtime.jsx)(TextInput, {
+		...rest,
+		value: phoneNumber,
+		onChange: handlePhoneNumberChange,
+		onBlur: handleBlur,
+		leftSection: /* @__PURE__ */ (0, react_jsx_runtime.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 }) => {
@@ -3409,6 +3619,7 @@ exports.NumberField = NumberField;
 exports.NumberedStepper = NumberedStepper;
 exports.PageUnavailable = PageUnavailable;
 exports.PasswordInput = PasswordInput;
+exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
 exports.ProfileMenu = ProfileMenu;
 exports.ProgressBar = ProgressBar;