@techsio/ui-kit 0.3.2 → 0.4.0

package/dist/molecules/phone-input.js

@@ -0,0 +1,654 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, isSupportedCountry, parseIncompletePhoneNumber, parsePhoneNumberFromString } from "libphonenumber-js/max";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Input } from "../atoms/input.js";
+import { Label } from "../atoms/label.js";
+import { StatusText } from "../atoms/status-text.js";
+import { tv } from "../utils.js";
+import { Select } from "./select.js";
+const defaultNativeValidationMessage = "Enter a valid phone number.";
+const defaultPhoneInputCountries = [
+    {
+        value: "SK",
+        label: "Slovakia",
+        name: "Slovakia"
+    },
+    {
+        value: "CZ",
+        label: "Czechia",
+        name: "Czechia"
+    },
+    {
+        value: "HU",
+        label: "Hungary",
+        name: "Hungary"
+    },
+    {
+        value: "RO",
+        label: "Romania",
+        name: "Romania"
+    },
+    {
+        value: "PL",
+        label: "Poland",
+        name: "Poland"
+    },
+    {
+        value: "AT",
+        label: "Austria",
+        name: "Austria"
+    },
+    {
+        value: "DE",
+        label: "Germany",
+        name: "Germany"
+    }
+];
+const phoneInputVariants = tv({
+    slots: {
+        root: [
+            "relative flex w-full flex-col gap-phone-input-root"
+        ],
+        control: [
+            "form-control-base",
+            "relative flex w-full items-center overflow-hidden",
+            "text-phone-input-fg",
+            "hover:border-phone-input-border-hover hover:bg-phone-input-bg-hover",
+            "phone-input-focus",
+            "data-[disabled]:cursor-not-allowed",
+            "data-[disabled]:border-phone-input-border-disabled",
+            "data-[disabled]:bg-phone-input-bg-disabled",
+            "data-[disabled]:text-phone-input-fg-disabled",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-phone-input-border-danger data-[validation=error]:outline-phone-input-border-danger",
+            "data-[validation=error]:outline-(style:--default-ring-style) data-[validation=error]:outline-(length:--default-ring-width)",
+            "data-[validation=error]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=success]:border-(length:--border-width-validation)",
+            "data-[validation=success]:border-phone-input-border-success data-[validation=success]:outline-phone-input-border-success",
+            "data-[validation=success]:outline-(style:--default-ring-style) data-[validation=success]:outline-(length:--default-ring-width)",
+            "data-[validation=success]:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=warning]:border-(length:--border-width-validation)",
+            "data-[validation=warning]:border-phone-input-border-warning data-[validation=warning]:outline-phone-input-border-warning",
+            "data-[validation=warning]:outline-(style:--default-ring-style) data-[validation=warning]:outline-(length:--default-ring-width)",
+            "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        countrySelectRoot: [
+            "contents"
+        ],
+        countrySelectControl: [
+            "h-full w-auto shrink-0"
+        ],
+        countryTrigger: [
+            "shrink-0",
+            "bg-phone-input-trigger-bg-base",
+            "hover:bg-phone-input-trigger-bg-hover",
+            "border-(length:--border-phone-input-trigger)",
+            "focus-visible:outline-none",
+            "w-phone-input-trigger",
+            "focus-visible:bg-phone-input-trigger-bg-hover"
+        ],
+        countryValue: [
+            "flex items-center gap-phone-input-country-value"
+        ],
+        countryFlag: [
+            "inline-flex min-w-phone-input-country-flag items-center justify-center",
+            "rounded-phone-input-country-flag",
+            "font-medium text-phone-input-country-flag uppercase"
+        ],
+        countryCallingCode: [
+            "font-medium text-phone-input-country-calling-code"
+        ],
+        input: [
+            "min-w-0 flex-1 border-0",
+            "bg-phone-input-input-bg-base",
+            "text-phone-input-fg",
+            "placeholder:text-phone-input-placeholder",
+            "hover:bg-phone-input-input-bg-hover",
+            "focus:bg-phone-input-input-bg-focus",
+            "focus-visible:outline-none",
+            "disabled:text-phone-input-fg-disabled"
+        ],
+        itemContent: [
+            "flex min-w-0 items-center gap-phone-input-item"
+        ],
+        itemMeta: [
+            "shrink-0 text-phone-input-item-meta"
+        ]
+    },
+    variants: {
+        size: {
+            sm: {
+                control: "h-form-control-sm rounded-phone-input-sm text-phone-input-sm",
+                input: "text-phone-input-sm"
+            },
+            md: {
+                control: "h-form-control-md rounded-phone-input-md text-phone-input-md",
+                input: "text-phone-input-md"
+            },
+            lg: {
+                control: "h-form-control-lg rounded-phone-input-lg text-phone-input-lg",
+                input: "text-phone-input-lg"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const PhoneInputContext = /*#__PURE__*/ createContext(null);
+function usePhoneInputContext() {
+    const context = useContext(PhoneInputContext);
+    if (!context) throw new Error("PhoneInput components must be used within PhoneInput");
+    return context;
+}
+const PhoneInputItemContext = /*#__PURE__*/ createContext(null);
+function usePhoneInputItemContext() {
+    const context = useContext(PhoneInputItemContext);
+    if (!context) throw new Error("PhoneInput item components must be used within PhoneInput.Item");
+    return context;
+}
+function PhoneInput({ countries: countriesProp = defaultPhoneInputCountries, value, defaultValue = "", country, defaultCountry = "CZ", name, countryName, form, required = false, disabled = false, readOnly = false, nativeValidation = false, nativeValidationMessage = defaultNativeValidationMessage, validateStatus = "default", onValueChange, onCountryChange, size = "md", id: providedId, className, children, ref, ...props }) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const countries = useMemo(()=>normalizePhoneInputCountries(countriesProp.length > 0 ? countriesProp : defaultPhoneInputCountries), [
+        countriesProp
+    ]);
+    const fallbackCountry = resolveCountry(countries, getInitialCountry(value ?? defaultValue, defaultCountry, countries));
+    const [internalCountry, setInternalCountry] = useState(fallbackCountry);
+    const selectedCountry = resolveCountry(countries, country ?? internalCountry);
+    const selectedCountryItem = getCountryItem(countries, selectedCountry);
+    const previousControlledValueRef = useRef(value);
+    const [internalValue, setInternalValue] = useState(()=>formatPhoneInputValue(defaultValue, selectedCountry));
+    const isValueControlled = void 0 !== value;
+    const inputValue = isValueControlled ? formatPhoneInputValue(value, selectedCountry) : internalValue;
+    const details = useMemo(()=>getPhoneInputValueDetailsInternal(inputValue, selectedCountry, {
+            countries
+        }), [
+        countries,
+        inputValue,
+        selectedCountry
+    ]);
+    const nativeFormValue = details.isValid ? details.e164 : inputValue;
+    useEffect(()=>{
+        if (!isValueControlled || country || value === previousControlledValueRef.current) return;
+        previousControlledValueRef.current = value;
+        const nextCountry = getCountryFromValue(value ?? "", countries);
+        if (nextCountry && nextCountry !== internalCountry) setInternalCountry(nextCountry);
+    }, [
+        countries,
+        country,
+        internalCountry,
+        isValueControlled,
+        value
+    ]);
+    const setInputValue = (nextValue)=>{
+        const nextDetails = getPhoneInputValueDetailsInternal(nextValue, selectedCountry, {
+            countries,
+            syncCountryFromValue: true
+        });
+        const didChangeCountry = nextDetails.country !== selectedCountry;
+        if (!isValueControlled) setInternalValue(nextDetails.value);
+        if (didChangeCountry && !country) setInternalCountry(nextDetails.country);
+        if (didChangeCountry) onCountryChange?.({
+            ...nextDetails,
+            countryItem: getCountryItem(countries, nextDetails.country)
+        });
+        onValueChange?.(nextDetails);
+    };
+    const setCountryValue = (nextCountry)=>{
+        const nextCountryItem = getCountryItem(countries, nextCountry);
+        const nextDetails = getPhoneInputValueDetailsInternal(inputValue, nextCountry, {
+            countries
+        });
+        if (!country) setInternalCountry(nextCountry);
+        if (!isValueControlled) setInternalValue(nextDetails.value);
+        onCountryChange?.({
+            ...nextDetails,
+            countryItem: nextCountryItem
+        });
+        onValueChange?.(nextDetails);
+    };
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsxs(PhoneInputContext.Provider, {
+        value: {
+            countries,
+            selectedCountry,
+            selectedCountryItem,
+            setCountryValue,
+            countryName,
+            form,
+            size,
+            inputId: `${id}-input`,
+            inputValue,
+            setInputValue,
+            details,
+            disabled,
+            nativeValidation,
+            nativeValidationMessage,
+            readOnly,
+            required,
+            validateStatus
+        },
+        children: [
+            name && /*#__PURE__*/ jsx("input", {
+                disabled: disabled,
+                form: form,
+                name: name,
+                type: "hidden",
+                value: nativeFormValue
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: styles.root({
+                    className
+                }),
+                "data-disabled": disabled || void 0,
+                ref: ref,
+                ...props,
+                children: children
+            })
+        ]
+    });
+}
+PhoneInput.Label = function({ children, ...props }) {
+    const { disabled, inputId, required, size } = usePhoneInputContext();
+    return /*#__PURE__*/ jsx(Label, {
+        disabled: disabled,
+        htmlFor: inputId,
+        required: required,
+        size: size,
+        ...props,
+        children: children
+    });
+};
+PhoneInput.Control = function({ children, className, ref, ...props }) {
+    const { disabled, readOnly, size, validateStatus } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    const validationDataAttrs = "default" !== validateStatus ? {
+        "data-validation": validateStatus
+    } : {};
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.control({
+            className
+        }),
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        ref: ref,
+        ...validationDataAttrs,
+        ...props,
+        children: children
+    });
+};
+PhoneInput.CountrySelect = function({ children, className, closeOnSelect = true }) {
+    const { countries, countryName, disabled, form, readOnly, selectedCountry, setCountryValue, size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Select, {
+        className: styles.countrySelectRoot({
+            className
+        }),
+        closeOnSelect: closeOnSelect,
+        disabled: disabled,
+        form: form,
+        items: countries,
+        name: countryName,
+        onValueChange: (selectDetails)=>{
+            const nextCountry = selectDetails.value[0];
+            if (nextCountry && isSupportedCountry(nextCountry)) setCountryValue(nextCountry);
+        },
+        readOnly: readOnly,
+        size: size,
+        value: [
+            selectedCountry
+        ],
+        children: children
+    });
+};
+PhoneInput.CountryPicker = function({ className, selectProps, controlProps, triggerProps, positionerProps, contentProps }) {
+    const { countries } = usePhoneInputContext();
+    return /*#__PURE__*/ jsxs(PhoneInput.CountrySelect, {
+        ...selectProps,
+        className: selectProps?.className ?? className,
+        children: [
+            /*#__PURE__*/ jsx(PhoneInput.CountryControl, {
+                ...controlProps,
+                children: /*#__PURE__*/ jsx(PhoneInput.CountryTrigger, {
+                    ...triggerProps
+                })
+            }),
+            /*#__PURE__*/ jsx(PhoneInput.CountryPositioner, {
+                ...positionerProps,
+                children: /*#__PURE__*/ jsx(PhoneInput.CountryContent, {
+                    ...contentProps,
+                    children: countries.map((item)=>/*#__PURE__*/ jsxs(PhoneInput.CountryItem, {
+                            item: item,
+                            children: [
+                                /*#__PURE__*/ jsx(PhoneInput.CountryItemText, {}),
+                                /*#__PURE__*/ jsx(PhoneInput.CountryItemMeta, {})
+                            ]
+                        }, item.value))
+                })
+            })
+        ]
+    });
+};
+PhoneInput.CountryControl = function({ children, className, ref, ...props }) {
+    const { size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Select.Control, {
+        className: styles.countrySelectControl({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+PhoneInput.CountryTrigger = function({ children, className, ref, ...props }) {
+    const { selectedCountryItem, size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Select.Trigger, {
+        className: styles.countryTrigger({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs(PhoneInput.CountryValue, {
+            children: [
+                /*#__PURE__*/ jsx(PhoneInput.CountryFlag, {
+                    item: selectedCountryItem
+                }),
+                /*#__PURE__*/ jsx(PhoneInput.CountryCallingCode, {
+                    item: selectedCountryItem
+                })
+            ]
+        })
+    });
+};
+PhoneInput.CountryValue = function({ children, className, ref, ...props }) {
+    const { size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.countryValue({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children
+    });
+};
+PhoneInput.CountryFlag = function({ item, className, ref, ...props }) {
+    const { selectedCountryItem, size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.countryFlag({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: renderCountryFlag(item ?? selectedCountryItem)
+    });
+};
+PhoneInput.CountryCallingCode = function({ item, className, ref, ...props }) {
+    const { selectedCountryItem, size } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsxs("span", {
+        className: styles.countryCallingCode({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: [
+            "+",
+            getPhoneCountryCallingCode(item ?? selectedCountryItem)
+        ]
+    });
+};
+PhoneInput.Input = function({ className, onChange, placeholder = "Phone number", ref, ...props }) {
+    const { details, disabled, form, inputId, inputValue, nativeValidation, nativeValidationMessage, readOnly, required, setInputValue, size, validateStatus } = usePhoneInputContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    const inputRef = useRef(null);
+    const setInputRef = useCallback((node)=>{
+        inputRef.current = node;
+        assignRef(ref, node);
+    }, [
+        ref
+    ]);
+    useEffect(()=>{
+        const input = inputRef.current;
+        if (!input) return;
+        const hasInvalidValue = nativeValidation && "" !== inputValue.trim() && !details.isValid && !disabled && !readOnly;
+        input.setCustomValidity(hasInvalidValue ? nativeValidationMessage : "");
+    }, [
+        details.isValid,
+        disabled,
+        inputValue,
+        nativeValidation,
+        nativeValidationMessage,
+        readOnly
+    ]);
+    return /*#__PURE__*/ jsx(Input, {
+        ...props,
+        "aria-invalid": "error" === validateStatus || nativeValidation && "" !== inputValue.trim() && !details.isValid || void 0,
+        className: styles.input({
+            className
+        }),
+        disabled: disabled,
+        form: form,
+        id: inputId,
+        inputMode: "tel",
+        name: void 0,
+        onChange: (event)=>{
+            setInputValue(event.target.value);
+            onChange?.(event);
+        },
+        placeholder: placeholder,
+        readOnly: readOnly,
+        ref: setInputRef,
+        required: required,
+        size: size,
+        type: "tel",
+        value: inputValue
+    });
+};
+PhoneInput.CountryPositioner = function({ children, ...props }) {
+    return /*#__PURE__*/ jsx(Select.Positioner, {
+        ...props,
+        children: children
+    });
+};
+PhoneInput.CountryContent = function({ children, ...props }) {
+    return /*#__PURE__*/ jsx(Select.Content, {
+        ...props,
+        children: children
+    });
+};
+PhoneInput.CountryItem = function({ item, children, ...props }) {
+    return /*#__PURE__*/ jsx(PhoneInputItemContext.Provider, {
+        value: {
+            item
+        },
+        children: /*#__PURE__*/ jsx(Select.Item, {
+            item: item,
+            ...props,
+            children: children
+        })
+    });
+};
+PhoneInput.CountryItemText = function({ children, ...props }) {
+    const { size } = usePhoneInputContext();
+    const { item } = usePhoneInputItemContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx(Select.ItemText, {
+        ...props,
+        children: children ?? /*#__PURE__*/ jsxs("span", {
+            className: styles.itemContent(),
+            children: [
+                /*#__PURE__*/ jsx(PhoneInput.CountryFlag, {
+                    item: item
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "truncate",
+                    children: item.label
+                })
+            ]
+        })
+    });
+};
+PhoneInput.CountryItemMeta = function({ children, className, ref, ...props }) {
+    const { size } = usePhoneInputContext();
+    const { item } = usePhoneInputItemContext();
+    const styles = phoneInputVariants({
+        size
+    });
+    return /*#__PURE__*/ jsx("span", {
+        className: styles.itemMeta({
+            className
+        }),
+        ref: ref,
+        ...props,
+        children: children ?? `+${getPhoneCountryCallingCode(item)}`
+    });
+};
+PhoneInput.CountryItemIndicator = function({ ...props }) {
+    return /*#__PURE__*/ jsx(Select.ItemIndicator, {
+        ...props
+    });
+};
+PhoneInput.Positioner = PhoneInput.CountryPositioner;
+PhoneInput.Content = PhoneInput.CountryContent;
+PhoneInput.Item = PhoneInput.CountryItem;
+PhoneInput.ItemText = PhoneInput.CountryItemText;
+PhoneInput.ItemMeta = PhoneInput.CountryItemMeta;
+PhoneInput.ItemIndicator = PhoneInput.CountryItemIndicator;
+PhoneInput.StatusText = function({ status, showIcon, children, ...props }) {
+    const { size, validateStatus } = usePhoneInputContext();
+    return /*#__PURE__*/ jsx(StatusText, {
+        showIcon: showIcon,
+        size: size,
+        status: status ?? validateStatus,
+        ...props,
+        children: children
+    });
+};
+function formatPhoneInputValue(value, country) {
+    if (!value.trim()) return "";
+    const parsedNumber = parsePhoneNumberFromString(value, country);
+    if (parsedNumber?.country === country) return formatNationalSignificantPhoneValue(parsedNumber.nationalNumber, country);
+    if (parsedNumber?.country) return formatIncompletePhoneNumber(value, country);
+    return formatNationalSignificantPhoneValue(value, country);
+}
+function getPhoneInputValueDetails(value, country) {
+    return getPhoneInputValueDetailsInternal(value, country);
+}
+function getPhoneInputValueDetailsInternal(value, country, options = {}) {
+    const parsedValue = parsePhoneNumberFromString(value, country);
+    const valueCountry = parsedValue?.country;
+    const detailsCountry = options.syncCountryFromValue && valueCountry && isCountryAvailable(options.countries, valueCountry) ? valueCountry : country;
+    const formattedValue = formatPhoneInputValue(value, detailsCountry);
+    const formatter = new AsYouType(detailsCountry);
+    formatter.input(value);
+    const parsedNumber = parsePhoneNumberFromString(value, detailsCountry) ?? parsePhoneNumberFromString(formattedValue, detailsCountry);
+    const hasCountryMismatch = !!parsedNumber?.country && parsedNumber.country !== detailsCountry;
+    const detailsNumber = hasCountryMismatch ? void 0 : parsedNumber;
+    const formatterNumber = formatter.getNumber();
+    const isPossible = hasCountryMismatch ? false : detailsNumber?.isPossible() ?? formatter.isPossible();
+    const isValid = hasCountryMismatch ? false : detailsNumber?.isValid() ?? formatter.isValid();
+    return {
+        value: formattedValue,
+        e164: isValid ? detailsNumber?.number ?? formatter.getNumberValue() ?? "" : "",
+        country: detailsCountry,
+        callingCode: getPhoneCountryCallingCode(detailsCountry),
+        nationalNumber: hasCountryMismatch ? "" : detailsNumber?.nationalNumber.toString() ?? formatterNumber?.nationalNumber ?? "",
+        isPossible,
+        isValid
+    };
+}
+function normalizePhoneInputCountries(countries) {
+    return countries.map((item)=>{
+        const displayValue = getCountryDisplayValue(item);
+        if (item.displayValue === displayValue) return item;
+        return {
+            ...item,
+            displayValue
+        };
+    });
+}
+function getCountryDisplayValue(item) {
+    if (item.displayValue) return item.displayValue;
+    if (item.name) return item.name;
+    return "string" == typeof item.label ? item.label : item.value;
+}
+function isCountryAvailable(countries, country) {
+    if (!isSupportedCountry(country)) return false;
+    return !countries || countries.some((item)=>item.value === country && !item.disabled);
+}
+function getInitialCountry(value, defaultCountry, countries) {
+    const parsedCountry = getCountryFromValue(value, countries);
+    if (parsedCountry) return parsedCountry;
+    return defaultCountry;
+}
+function getCountryFromValue(value, countries) {
+    const parsedCountry = parsePhoneNumberFromString(value)?.country;
+    return parsedCountry && isCountryAvailable(countries, parsedCountry) ? parsedCountry : void 0;
+}
+function formatNationalSignificantPhoneValue(value, country) {
+    const callingCode = getPhoneCountryCallingCode(country);
+    const incompleteValue = parseIncompletePhoneNumber(value);
+    if (incompleteValue.startsWith("+")) {
+        if (incompleteValue.startsWith(`+${callingCode}`)) return stripCountryCallingCode(formatIncompletePhoneNumber(incompleteValue, country), callingCode);
+        return formatIncompletePhoneNumber(value, country);
+    }
+    return stripCountryCallingCode(formatIncompletePhoneNumber(`+${callingCode}${incompleteValue}`, country), callingCode);
+}
+function stripCountryCallingCode(value, callingCode) {
+    const prefix = `+${callingCode}`;
+    return value.startsWith(prefix) ? value.slice(prefix.length).trimStart() : value;
+}
+function resolveCountry(countries, country) {
+    const supportedCountry = isSupportedCountry(country) ? country : "SK";
+    if (isCountryAvailable(countries, supportedCountry)) return supportedCountry;
+    return countries.find((item)=>!item.disabled)?.value ?? "SK";
+}
+function getCountryItem(countries, country) {
+    return countries.find((item)=>item.value === country) ?? {
+        value: country,
+        label: country,
+        name: country
+    };
+}
+function assignRef(ref, value) {
+    if (!ref) return;
+    if ("function" == typeof ref) return void ref(value);
+    ref.current = value;
+}
+function getPhoneCountryCallingCode(country) {
+    const countryCode = "string" == typeof country ? country : country.value;
+    const callingCode = getCountryCallingCode(countryCode);
+    if ("string" != typeof country && country.callingCode === callingCode) return country.callingCode;
+    return callingCode;
+}
+function renderCountryFlag(item) {
+    return item.flag ?? item.value;
+}
+PhoneInput.displayName = "PhoneInput";
+export { PhoneInput, defaultPhoneInputCountries, formatPhoneInputValue, getPhoneInputValueDetails, phoneInputVariants, usePhoneInputContext };