@tcn/ui 0.10.0 → 0.11.0

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -1,428 +1,161 @@
+import React, { useLayoutEffect } from 'react';
+import PhoneInput from 'react-phone-number-input';
+import 'react-phone-number-input/style.css';
+import type { CountryCode } from 'libphonenumber-js';
 import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import { clsx } from 'clsx';
-import React, {
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  Children,
-  isValidElement,
-} from 'react';
-import { SlimButton } from '../../actions/index.js';
-import { Select } from '../select/select.js';
-import { MaskInput } from '../mask_input/mask_input.js';
-import {
-  CountryPhoneInformation,
-  countriesPhoneInformation,
-} from './countries_phone_information.js';
 import styles from './phone_number_input.module.css';
-import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
-import { Option, OptionProps } from '../options/option.js';
-import { SuggestionList } from '../suggestions/suggestion_list.js';
-import { stripNonNumericAfterCountryCode } from './utils.js';
-import { useForkRef } from '../../utils/index.js';
-
-const OBFUSCATED_CHARACTER = '•';
-
-function createObfuscatedMasks(masks: { mask: string; placeholder?: string }[]) {
-  return masks.map(m => ({
-    ...m,
-    placeholder: m.mask.replace(/[9a*]/g, OBFUSCATED_CHARACTER),
-  }));
-}
-
-const countryList = countriesPhoneInformation.map(i => ({
-  name: i.name,
-  selectedLabel: i.prefix,
-  optionLabel: `${i.prefix} (${i.code}) ${i.unicodeFlag}`,
-  value: i.code,
-  keywords: i.keywords,
-}));
-
-countryList.sort((a, b) => parseInt(a.value) - parseInt(b.value));
-
-const countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();
-const countryCodeMap: Map<string, CountryPhoneInformation> = new Map();
-countriesPhoneInformation.forEach(i => {
-  countryCodeMap.set(i.code, i);
-  if (countryPrefixMap.has(i.prefix)) {
-    countryPrefixMap.get(i.prefix)?.push(i);
-  } else {
-    countryPrefixMap.set(i.prefix, [i]);
-  }
-});
-
-function createCountryOptions(allowedCountryCodes?: string[]) {
-  if (allowedCountryCodes != null) {
-    const allowedMap: Record<string, boolean> = {};
-    allowedCountryCodes.forEach(c => {
-      allowedMap[c] = true;
-    });
-    return countryList
-      .filter(c => Boolean(allowedMap[c.value]))
-      .map(i => {
-        return (
-          <Option
-            key={i.value}
-            value={i.value}
-            label={i.selectedLabel}
-            keywords={i.keywords}
-          >
-            {i.optionLabel}
-          </Option>
-        );
-      });
-  } else {
-    return countryList.map(i => {
-      return (
-        <Option
-          key={i.value}
-          value={i.value}
-          label={i.selectedLabel}
-          keywords={i.keywords}
-        >
-          {i.optionLabel}
-        </Option>
-      );
-    });
-  }
-}
-
-function getCountryCodeFromValue(
-  value: string,
-  previousCountry: string,
-  defaultCountry: string
-) {
-  for (let x = 5; x > 1; x--) {
-    const prefix = value.slice(0, x);
-    const countriesInformation = countryPrefixMap.get(prefix);
-
-    if (countriesInformation != null) {
-      const countryInformation = countriesInformation.find(
-        c => c.code === previousCountry
-      );
-
-      if (countryInformation != null) {
-        return countryInformation;
-      } else {
-        return countriesInformation[0];
-      }
-    }
-  }
-
-  return (countryCodeMap.get(defaultCountry.toUpperCase()) ||
-    countryCodeMap.get('US')) as CountryPhoneInformation;
-}
+import { PhoneBookProvider, type PhoneContext } from './phone_number_context.js';
+import { PhoneNumberCountrySelectAdapter } from './phone_number_country_select_adapter.js';
+import { type OptionProps, Option } from '../options/option.js';
+import { PhoneNumberInputAdapter } from './phone_number_input_adapter.js';
+import { clsx } from 'clsx';
+import { SipInput } from './sip_input.js';
+import { defaultCountries } from './countries_phone_information.js';
 
 export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
-  name?: string;
-  autoComplete?: string;
+  allowSip?: boolean;
+  onChange: (value?: string) => void;
   defaultCountry?: string;
-  /**
-   * Callback fired when the phone number value changes.
-   * @param value - The phone number value with country prefix
-   * @param obfuscate - Whether the selected phone number is obfuscated (e.g., from a phone book entry marked as obfuscated)
-   */
-  onChange?: (value: string, obfuscate: boolean) => void;
-  countrySelectRef?: React.Ref<HTMLButtonElement>;
-  phoneNumberInputRef?: React.Ref<HTMLInputElement>;
-  disabled?: boolean;
-  disabledPhoneNumber?: boolean;
   allowedCountryCodes?: string[];
+  disabled?: boolean;
+  name?: string;
+  'aria-label'?: string;
+  autoFocus?: boolean;
+  placeholder?: string;
+  className?: string;
+  width?: string;
+  onCountryChange?: (country: CountryCode) => void;
+  limitMaxLength?: boolean;
+  ariaSelectLabel?: string;
+  ariaPhoneBookButtonLabel?: string;
   children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];
 }
 
-export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
-  {
-    value = '',
-    name,
-    autoComplete,
-    defaultCountry = 'US',
-    onChange,
-    countrySelectRef: countryRef,
-    phoneNumberInputRef: numberRef,
-    disabled = false,
-    disabledPhoneNumber = false,
-    allowedCountryCodes,
-    children,
-    ...props
-  }: PhoneNumberInputProps,
-  ref: React.Ref<HTMLElement>
-) {
-  const lastOutputValueRef = useRef(value);
-  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(
-    null
+export function PhoneNumberInput({
+  value = '',
+  allowSip = true,
+  onChange,
+  defaultCountry = 'US',
+  allowedCountryCodes: countries,
+  disabled,
+  name,
+  'aria-label': ariaLabel,
+  autoFocus,
+  placeholder,
+  onCountryChange,
+  limitMaxLength,
+  ariaSelectLabel,
+  ariaPhoneBookButtonLabel,
+  children,
+  ...props
+}: PhoneNumberInputProps) {
+  const [focusNumberInput, setFocusNumberInput] = React.useState<boolean>(false);
+  const isSip = value?.toLocaleLowerCase().startsWith('sip:') || false;
+  const [cachedNumber, setCachedNumber] = React.useState<string>(isSip ? '' : value);
+  const [sipAddress, setSipAddress] = React.useState<string>(
+    isSip ? value?.substring(4).trim() : ''
   );
-  const isPhoneBookOpen = phoneBookElement != null;
-  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);
-  const countryInformation = getCountryCodeFromValue(
-    value,
-    selectedCountry,
-    defaultCountry
+  const [country, setCountry] = React.useState<CountryCode | undefined>(
+    defaultCountry as CountryCode
   );
-  const [phoneNumber, setPhoneNumber] = useState(() => {
-    const phoneNumber = value.split(countryInformation.prefix)[1];
 
-    return phoneNumber == null ? '' : stripNonNumericAfterCountryCode(phoneNumber);
-  });
+  countries = countries || defaultCountries;
+
+  useLayoutEffect(() => {
+    if (isSip) {
+      setSipAddress(value?.substring(4).trim() || '');
+    }
+  }, [isSip, value]);
+
+  useLayoutEffect(() => {
+    if (focusNumberInput) {
+      setFocusNumberInput(false);
+    }
+  }, [focusNumberInput]);
 
   // Extract valid Option components from children
-  const phoneBookOptions = useMemo(() => {
-    return Children.toArray(children).filter(
+  const phoneBookOptions = React.useMemo(() => {
+    return React.Children.toArray(children).filter(
       (child): child is React.ReactElement<OptionProps> =>
-        isValidElement(child) && child.type === Option
+        React.isValidElement(child) && child.type === Option
     );
   }, [children]);
 
-  const showPhoneBook = phoneBookOptions.length > 0;
-  const [countryCode, setCountryCode] = useState(countryInformation.code);
-  const [currentMasks, setCurrentMasks] = useState([
-    ...countriesPhoneInformation[0].masks,
+  const phoneContext = React.useMemo<PhoneContext>(() => {
+    return {
+      value,
+      allowSip,
+      phoneBook: phoneBookOptions,
+      setValue: onChange,
+      ariaPhoneBookButtonLabel,
+      ariaSelectLabel,
+      disabled,
+      setCountry,
+      sipAddress,
+      setSipAddress,
+      cachedNumber,
+      setCachedNumber,
+      focusNumberInput,
+      setFocusNumberInput,
+    };
+  }, [
+    value,
+    allowSip,
+    phoneBookOptions,
+    onChange,
+    ariaPhoneBookButtonLabel,
+    ariaSelectLabel,
+    disabled,
+    sipAddress,
+    cachedNumber,
+    focusNumberInput,
   ]);
-  const [obfuscateValue, setObfuscateValue] = useState(false);
-  const [shouldFocusAfterClear, setShouldFocusAfterClear] = useState(false);
-  const internalInputRef = useRef<HTMLInputElement>(null);
-  const forkedInputRef = useForkRef(numberRef, internalInputRef);
-
-  const countryOptions = useMemo(() => {
-    return createCountryOptions(allowedCountryCodes);
-  }, [allowedCountryCodes]);
-
-  function changeCountry(countryCodeValue: string) {
-    const countryInformation = countryCodeMap.get(countryCodeValue);
-
-    if (countryInformation == null) {
-      return;
-    }
-
-    setCountryCode(countryInformation.code);
-    setCurrentMasks([...countryInformation.masks]);
-    setSelectedCountry(countryInformation.code);
 
-    if (phoneNumber == null) {
-      return;
-    }
-
-    const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;
-    lastOutputValueRef.current = value;
-    onChange && onChange(value, false);
-  }
-
-  useLayoutEffect(() => {
-    const countryInformation = getCountryCodeFromValue(
-      value,
-      selectedCountry,
-      defaultCountry
+  if (isSip) {
+    return (
+      <PhoneBookProvider value={phoneContext}>
+        <SipInput
+          onChange={onChange}
+          disabled={disabled}
+          name={name}
+          aria-label={ariaLabel}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          countries={countries as CountryCode[]}
+        />
+      </PhoneBookProvider>
     );
-    setCountryCode(countryInformation.code);
-    setCurrentMasks([...countryInformation.masks]);
-    setSelectedCountry(countryInformation.code);
-  }, [value, selectedCountry, defaultCountry]);
-
-  function transformValue(newPhoneNumber: string) {
-    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;
-    const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);
-    const outputValue = countryPrefix + lineNumber;
-
-    // Clear obfuscated state when user types manually
-    if (obfuscateValue) {
-      setObfuscateValue(false);
-    }
-
-    lastOutputValueRef.current = outputValue;
-    phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);
-    onChange && onChange(outputValue, false);
-  }
-
-  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {
-    if (isPhoneBookOpen) {
-      setPhoneBookElement(null);
-    } else {
-      setPhoneBookElement(e.currentTarget);
-    }
-  }
-
-  function closePhoneBook() {
-    setPhoneBookElement(null);
-  }
-
-  function handlePhoneBookOptionSelect(
-    value: string,
-    _label: string | undefined,
-    _isSuggestion: boolean,
-    obfuscate: boolean
-  ) {
-    // Update the phone number with the selected value
-    setObfuscateValue(obfuscate);
-    updatePhoneNumber(value, obfuscate);
-    closePhoneBook();
-  }
-
-  function preparePasteValue(value: string) {
-    if (value.startsWith('+')) {
-      const countryInformation = getCountryCodeFromValue(
-        value,
-        selectedCountry,
-        defaultCountry
-      );
-      setCountryCode(countryInformation.code);
-      setCurrentMasks([...countryInformation.masks]);
-
-      const phoneNumber = value.split(countryInformation.prefix)[1];
-      setPhoneNumber(phoneNumber);
-
-      return phoneNumber;
-    }
-
-    return value;
-  }
-
-  function handleObfuscatedInputChange(newValue: string) {
-    // When user types on a obfuscated input, clear the obfuscated state and start fresh
-    // The newValue will be the digits the user typed (mask filters to valid input)
-    setShouldFocusAfterClear(true);
-    setObfuscateValue(false);
-    setPhoneNumber(newValue);
-
-    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;
-    const lineNumber = stripNonNumericAfterCountryCode(newValue);
-    const outputValue = countryPrefix + lineNumber;
-    lastOutputValueRef.current = outputValue;
-    onChange && onChange(outputValue, false);
   }
 
-  const updatePhoneNumber = useCallback(
-    (value: string, obfuscate = false) => {
-      const oldValue = lastOutputValueRef.current;
-      const countryInformation = getCountryCodeFromValue(
-        value,
-        selectedCountry,
-        defaultCountry
-      );
-      const phoneNumber = value.split(countryInformation.prefix)[1];
-      setCountryCode(countryInformation.code);
-      setCurrentMasks([...countryInformation.masks]);
-      setSelectedCountry(countryInformation.code);
-
-      if (oldValue !== value) {
-        setPhoneNumber(phoneNumber);
-        onChange && onChange(value, obfuscate);
-      }
-    },
-    [defaultCountry, selectedCountry, onChange]
-  );
-
-  useLayoutEffect(() => {
-    updatePhoneNumber(value);
-  }, [value, updatePhoneNumber]);
-
-  // Focus the input after transitioning from obfuscated to normal mode
-  useLayoutEffect(() => {
-    if (shouldFocusAfterClear && !obfuscateValue && internalInputRef.current) {
-      internalInputRef.current.focus();
-      setShouldFocusAfterClear(false);
-    }
-  }, [shouldFocusAfterClear, obfuscateValue]);
-
   return (
-    <HStack
-      ref={ref}
-      className={clsx(styles['phone-number-input'], 'tcn-phone-number-input')}
-      height="auto"
-      {...props}
-    >
-      <Select
-        className={clsx(
-          styles['phone-number-input-select'],
-          'tcn-phone-number-input-select'
-        )}
-        ref={countryRef}
-        width="auto"
-        value={obfuscateValue ? '' : countryCode}
-        onChange={changeCountry}
-        disabled={disabled || obfuscateValue || disabledPhoneNumber}
-        data-is-disabled={disabled || obfuscateValue || disabledPhoneNumber}
-        data-is-obfuscated={obfuscateValue}
-        placeholder={obfuscateValue ? '––' : undefined}
-      >
-        {countryOptions}
-      </Select>
-      <HStack
-        width="flex"
-        className={clsx(
-          styles['phone-number-input-container'],
-          'tcn-phone-number-input-container'
-        )}
-      >
-        {obfuscateValue ? (
-          <MaskInput
-            key="obfuscated"
-            name={name}
-            autoComplete={autoComplete}
-            ref={forkedInputRef}
-            value=""
-            mask={createObfuscatedMasks(currentMasks)}
-            onChange={handleObfuscatedInputChange}
-            disabled={disabled || disabledPhoneNumber}
-            data-is-disabled={disabled || disabledPhoneNumber}
-            data-has-phone-book={showPhoneBook}
-            data-is-obfuscated={true}
-            className={clsx(
-              styles['phone-number-input'],
-              styles['phone-number-input-obfuscated'],
-              'tcn-phone-number-input'
-            )}
-            preparePasteValue={() => ''}
-            prepareCopyValue={() => ''}
-            prepareCutValue={() => ''}
-          />
-        ) : (
-          <MaskInput
-            key="normal"
-            name={name}
-            autoComplete={autoComplete}
-            ref={forkedInputRef}
-            value={phoneNumber}
-            mask={currentMasks}
-            onChange={transformValue}
-            disabled={disabled || disabledPhoneNumber}
-            data-is-disabled={disabled || disabledPhoneNumber}
-            data-has-phone-book={showPhoneBook}
-            data-is-obfuscated={false}
-            className={clsx(styles['phone-number-input'], 'tcn-phone-number-input')}
-            preparePasteValue={preparePasteValue}
-          />
-        )}
-      </HStack>
-      {showPhoneBook && (
-        <>
-          <SlimButton
-            disabled={disabled}
-            className={clsx(
-              styles['phone-number-input-phone-book'],
-              'tcn-phone-number-input-phone-book'
-            )}
-            onClick={togglePhoneBook}
-            size="md"
-          >
-            <NotebookIcon size="md" />
-          </SlimButton>
-
-          {isPhoneBookOpen && (
-            <SuggestionList
-              anchorElement={phoneBookElement}
-              onOptionSelect={handlePhoneBookOptionSelect}
-              onClose={closePhoneBook}
-              noSuggestionMessage="No phone numbers found"
-            >
-              {phoneBookOptions}
-            </SuggestionList>
+    <PhoneBookProvider value={phoneContext}>
+      <HStack {...props}>
+        <PhoneInput
+          value={value}
+          onChange={onChange}
+          defaultCountry={country}
+          country={country}
+          countries={countries as CountryCode[]}
+          countrySelectComponent={PhoneNumberCountrySelectAdapter}
+          inputComponent={PhoneNumberInputAdapter}
+          disabled={disabled}
+          name={name}
+          aria-label={ariaLabel}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          onCountryChange={onCountryChange}
+          limitMaxLength={limitMaxLength}
+          className={clsx(
+            styles['phone-number-input'],
+            'tcn-phone-number-input',
+            'tcn-input-group'
           )}
-        </>
-      )}
-    </HStack>
+          displayInitialValueAsLocalNumber
+          addInternationalOption={false}
+        />
+      </HStack>
+    </PhoneBookProvider>
   );
-});
+}

package/src/inputs/phone_number_input/phone_number_input_adapter.tsx

@@ -0,0 +1,123 @@
+import { NotebookIcon } from '@tcn/icons/notebook_icon.js';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';
+import { Button } from '../../actions/index.js';
+import { SuggestionList } from '../suggestions/suggestion_list.js';
+import { usePhoneContext } from './phone_number_context.js';
+import { getCountryFromValue } from './phone_number_country_select_adapter.js';
+import { Input } from '../input/input.js';
+import { useForkRef } from '../../utils/hooks/use_fork_ref.js';
+
+/**
+ * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)
+ * with react-phone-number-input's expectation (onChange: (event) => void).
+ */
+export const PhoneNumberInputAdapter = forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {
+  value = value.toString();
+  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(
+    null
+  );
+  const isPhoneBookOpen = phoneBookElement != null;
+  const internalInputRef = useRef<HTMLInputElement | null>(null);
+  const forkedRef = useForkRef(ref, internalInputRef);
+
+  const {
+    phoneBook: phoneBookOptions,
+    setValue,
+    ariaPhoneBookButtonLabel,
+    disabled,
+    setFocusNumberInput,
+    focusNumberInput,
+  } = usePhoneContext();
+
+  const showPhoneBook = phoneBookOptions.length > 0;
+
+  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {
+    if (isPhoneBookOpen) {
+      setPhoneBookElement(null);
+    } else {
+      setPhoneBookElement(e.currentTarget);
+    }
+  }
+
+  function closePhoneBook() {
+    setPhoneBookElement(null);
+  }
+
+  function handlePhoneBookOptionSelect(value: string) {
+    closePhoneBook();
+    setFocusNumberInput(true);
+    setValue(value);
+  }
+
+  const handleChange = useCallback(
+    (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {
+      if (!onChange) return;
+      const e =
+        event ??
+        ({
+          target: { value },
+          currentTarget: { value },
+        } as React.ChangeEvent<HTMLInputElement>);
+      onChange(e);
+    },
+    [onChange]
+  );
+
+  if (value.startsWith('+')) {
+    const country = getCountryFromValue(value);
+    const prefixLength = country?.prefix?.length || 0;
+    value = value.substring(prefixLength);
+  }
+
+  useLayoutEffect(() => {
+    const input = internalInputRef?.current;
+
+    if (input == null || !focusNumberInput) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      if (input.value.length > 0) {
+        input.select();
+      } else {
+        input.focus();
+      }
+    });
+  }, [focusNumberInput]);
+
+  return (
+    <>
+      <Input
+        ref={forkedRef}
+        value={value}
+        {...(rest as any)}
+        className={clsx(className, 'tcn-input-group-slot')}
+        onChange={handleChange}
+      />
+      {showPhoneBook && (
+        <Button
+          disabled={disabled}
+          className={clsx('tcn-input-group-slot', 'tcn-phone-number-phone-book')}
+          aria-label={ariaPhoneBookButtonLabel}
+          onClick={togglePhoneBook}
+          size="md"
+        >
+          <NotebookIcon size="md" />
+        </Button>
+      )}
+      <SuggestionList
+        open={isPhoneBookOpen}
+        anchorElement={phoneBookElement}
+        onOptionSelect={handlePhoneBookOptionSelect}
+        onClose={closePhoneBook}
+        noSuggestionMessage="No phone numbers found"
+      >
+        {phoneBookOptions}
+      </SuggestionList>
+    </>
+  );
+});