@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/module/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,569 @@
+"use strict";
+
+import { countryFlagEmoji, formatPhoneAsTyped, isSupportedCountry, isValidNationalNumber, maxNationalNumberLength, splitPhoneNumber } from '@webority/mobile-core';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { FieldBase, FieldLabel, FieldMessage, RequiredPlaceholder, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/index.js";
+import { Chevron } from "../FieldBase/Chevron.js";
+import { useFloatingLabel } from "../FieldBase/useFloatingLabel.js";
+import { OptionSheet } from "../OptionSheet/OptionSheet.js";
+
+/** How the label sits: static above the box, or floating up from inside it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A deliberately short default list: the countries the fleet actually ships to.
+ * Consumers needing the full set build it from `getPhoneCountries()` and
+ * `PHONE_COUNTRY_NAMES` in mobile-core (see the showcase); shipping 245 entries
+ * by default is weight almost nobody uses.
+ */
+export const DEFAULT_CALLING_CODES = [{
+  iso: 'IN',
+  code: '91',
+  label: 'India'
+}, {
+  iso: 'AE',
+  code: '971',
+  label: 'United Arab Emirates'
+}, {
+  iso: 'GB',
+  code: '44',
+  label: 'United Kingdom'
+}, {
+  iso: 'US',
+  code: '1',
+  label: 'United States'
+}, {
+  iso: 'CA',
+  code: '1',
+  label: 'Canada'
+}, {
+  iso: 'AU',
+  code: '61',
+  label: 'Australia'
+}, {
+  iso: 'SG',
+  code: '65',
+  label: 'Singapore'
+}, {
+  iso: 'SA',
+  code: '966',
+  label: 'Saudi Arabia'
+}];
+
+/**
+ * What counts as a valid number. `'any'` is the country's numbering plan as
+ * libphonenumber knows it (a fixed line passes). `'mobile'` also rejects fixed
+ * lines: in India a 10-digit number starting with 1 to 5 is a real landline
+ * and no OTP will ever reach it. `false` turns validation off; `isValid()` then
+ * only asks whether a number was typed.
+ */
+
+/** What a `ref` on the field can do, beyond the TextInput basics. */
+
+const digitsOnly = raw => raw.replace(/[^0-9]/g, '');
+
+/** `+<code><national>`, presentational only; the value stays structured. */
+export const formatE164 = value => `+${value.callingCode}${value.nationalNumber}`;
+
+/** The ISO as a numbering plan libphonenumber knows, or null for a code it does not. */
+const planOf = iso => isSupportedCountry(iso) ? iso : null;
+
+/**
+ * Country calling code + national number, kept as a structured value rather than
+ * one string. A single free-text phone field is where "+91", "0091", "091" and
+ * "9876543210" all arrive for the same number and the backend has to guess.
+ *
+ * Validation, formatting and the digit ceiling all come from the country's
+ * numbering plan via mobile-core (libphonenumber), not from a length table: a
+ * 9-digit Indian number is incomplete, a 10-digit one starting with 5 is a
+ * landline, and `validation="mobile"` tells the two apart.
+ */
+export const PhoneNumberInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    onComplete,
+    onValidityChange,
+    countries = DEFAULT_CALLING_CODES,
+    popularCountries,
+    popularCountriesTitle = 'Popular',
+    allCountriesTitle = 'All countries',
+    hiddenCountries,
+    showFlag = true,
+    renderFlag,
+    renderCountry,
+    countrySearchPlaceholder,
+    showAlphabetIndex,
+    defaultIso = 'IN',
+    validation = 'any',
+    maxLength,
+    formatAsYouType = true,
+    countryLocked = false,
+    label,
+    labelMode = 'top',
+    labelStyle,
+    placeholder = 'Phone number',
+    helperText,
+    error,
+    invalidMessage,
+    required,
+    disabled = false,
+    size = 'md',
+    variant,
+    borderRadius: borderRadiusProp,
+    countrySheetTitle = 'Country code',
+    haptic,
+    accessibilityLabel,
+    countryAccessibilityLabel,
+    onFocus,
+    onBlur,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const inputRef = useRef(null);
+
+  // What the picker offers and a paste may switch to. `countries` (the full
+  // list) still resolves a value's entry, so a hidden country set through
+  // `defaultValue` shows its code rather than a wrong one.
+  const visibleCountries = useMemo(() => hiddenCountries?.length ? countries.filter(c => !hiddenCountries.includes(c.iso)) : countries, [countries, hiddenCountries]);
+  const sections = useMemo(() => {
+    if (!popularCountries?.length) {
+      return undefined;
+    }
+    const popular = popularCountries.map(iso => visibleCountries.find(c => c.iso === iso)).filter(c => c !== undefined);
+    return popular.length ? [{
+      title: popularCountriesTitle,
+      options: popular
+    }, {
+      title: allCountriesTitle,
+      options: visibleCountries
+    }] : undefined;
+  }, [popularCountries, popularCountriesTitle, allCountriesTitle, visibleCountries]);
+
+  // The flag: the caller's renderer, else the emoji the ISO spells, else nothing.
+  const flagOf = useCallback((country, fontSize, flagTestID) => {
+    if (!country) {
+      return null;
+    }
+    if (renderFlag) {
+      return renderFlag(country);
+    }
+    if (!showFlag) {
+      return null;
+    }
+    const emoji = countryFlagEmoji(country.iso);
+    return emoji ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.flag, {
+        fontSize
+      }],
+      testID: flagTestID,
+      children: emoji
+    }) : null;
+  }, [renderFlag, showFlag, styles.flag]);
+
+  // Digits the field keeps for a country: where a subscriber's number ends
+  // under the validation kind (mobile alone, or mobile and fixed line), then
+  // the caller's hard stop if it is lower. A country the plan does not know
+  // has no cap.
+  const digitCapFor = useCallback(iso => {
+    const plan = planOf(iso);
+    const byCountry = plan ? maxNationalNumberLength(plan, validation === false ? 'any' : validation) : Number.POSITIVE_INFINITY;
+    return maxLength ? Math.min(byCountry, maxLength) : byCountry;
+  }, [maxLength, validation]);
+  const limit = useCallback((digits, iso) => digits.slice(0, digitCapFor(iso)), [digitCapFor]);
+
+  // A string carrying its own `+` prefix names its country; a bare one
+  // resolves through `fallbackIso`. The list's entry wins for the calling
+  // code so a shared code (+1) shows the entry the app named.
+  const fromString = useCallback((input, fallbackIso) => {
+    const fallback = planOf(fallbackIso) ?? undefined;
+    const parts = splitPhoneNumber(input, fallback);
+    if (!parts) {
+      return null;
+    }
+    const iso = parts.country ?? fallbackIso;
+    const entry = countries.find(c => c.iso === iso);
+    return {
+      callingCode: entry?.code ?? parts.callingCode,
+      nationalNumber: limit(parts.nationalNumber, iso),
+      iso: entry?.iso ?? iso
+    };
+  }, [countries, limit]);
+  const initial = useMemo(() => {
+    const start = visibleCountries.find(c => c.iso === defaultIso) ?? visibleCountries[0] ?? countries[0];
+    const empty = {
+      callingCode: start?.code ?? '91',
+      nationalNumber: '',
+      iso: start?.iso ?? 'IN'
+    };
+    if (typeof defaultValue === 'string') {
+      return fromString(defaultValue, empty.iso) ?? empty;
+    }
+    return defaultValue ?? empty;
+  }, [countries, visibleCountries, defaultIso, defaultValue, fromString]);
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: initial,
+    onChange
+  });
+  const [focused, setFocused] = useState(false);
+  // A tap anywhere on the box (padding, gap) focuses the input, not only a
+  // tap on its text. The country trigger in the leading slot keeps its own
+  // press: it is the deeper responder.
+  const focusInput = useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  }, [disabled]);
+  // A range is selected (select all, a drag): what comes next replaces it.
+  const [rangeSelected, setRangeSelected] = useState(false);
+  // The user has left the field with digits in it: the built-in invalid
+  // message may show from here on, until the field is cleared.
+  const [touched, setTouched] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  // Presenting the country sheet blurs the TextInput. A ref, set in the press
+  // handler before the sheet state commits, tells that blur apart from the
+  // user leaving the field, so the message does not appear behind the picker.
+  const openingSheetRef = useRef(false);
+  useEffect(() => {
+    if (!sheetOpen) {
+      openingSheetRef.current = false;
+    }
+  }, [sheetOpen]);
+  // The country-code chevron is the field family's, at the size's icon size,
+  // in the field icon ink (a 10px text glyph used to sit here, far too small).
+  const sizeTokens = resolveFieldSize(theme, size);
+  // Same inks, size ladder and slot rules as Input: field text and placeholder
+  // colours, the hairline after the leading slot, underline text flush with the
+  // rule, the field caret, label above and message below at the family's gaps.
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  // Resolve the variant the way FieldBase does, rather than reading the raw
+  // prop: a theme setting `field.defaultVariant` with no `variant` passed left
+  // `isUnderline` false while FieldBase drew an underline, so the flush-text
+  // rule never applied.
+  const resolvedVariant = variant ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const isUnderline = resolvedVariant === 'underline';
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.phoneNumberInput?.borderRadius;
+
+  // FieldBase lays the row out as leading | divider | content with its own
+  // `columnGap` (theme.spacing.md unless a `gap` is passed, which this
+  // component does not). The label rests over the number, so it starts past
+  // the whole leading run: the country trigger, both gaps and the 1px divider.
+  const slotGap = theme.spacing.md;
+  const [codeWidth, setCodeWidth] = useState(0);
+  const leadingOffset = codeWidth + slotGap + 1 + slotGap;
+  const hasNumber = current.nationalNumber.length > 0;
+  // Required with no label: the marker rides after the placeholder and
+  // leaves with it once digits are typed (see Input).
+  const requiredPlaceholder = required && !label && !hasNumber && placeholder.length > 0;
+  const floated = focused || hasNumber;
+  // Only float once the country trigger has been measured: at width 0 the
+  // resting label would land on the divider for a frame and then jump.
+  const showFloatingLabel = Boolean(label) && labelMode === 'float' && codeWidth > 0;
+  const floating = useFloatingLabel({
+    label,
+    enabled: showFloatingLabel,
+    floated,
+    required,
+    variant: resolvedVariant,
+    sizeTokens,
+    leadingOffset,
+    paddingLeft: isUnderline ? 0 : sizeTokens.paddingHorizontal,
+    color: theme.colors.field.label,
+    style: labelStyle
+  });
+  const selected = useMemo(() => countries.find(c => c.iso === current.iso), [countries, current.iso]);
+  const plan = planOf(current.iso);
+  // Display only: the value keeps the digits. A country the plan does not
+  // know (a custom list entry) shows the digits as typed.
+  const displayText = formatAsYouType && plan ? formatPhoneAsTyped(current.nationalNumber, plan) : current.nationalNumber;
+
+  // The OS refuses the keystroke past the cap, so an extra digit never shows
+  // and then vanishes. The native limit counts characters, separators
+  // included, so it is the text on screen plus the digits still to come:
+  // exact for every grouping, since a separator the next digit brings arrives
+  // through `value`, which the native limit does not filter, and the limit is
+  // recomputed on that render. The limit is dropped while the field is empty
+  // or a range is selected, so a pasted "+91 98765 43210" lands whole and
+  // resolves its country whether the field was empty or the old number was
+  // selected to be replaced (the OS counts a paste against the limit before
+  // this component sees it; the JavaScript cap still trims the digits after).
+  // Pasting with the caret in the middle of existing digits is cut at the limit.
+  const digitCap = digitCapFor(current.iso);
+  const nativeMaxLength = current.nationalNumber.length === 0 || rangeSelected || !Number.isFinite(digitCap) ? undefined : displayText.length + Math.max(0, digitCap - current.nationalNumber.length);
+  const isValidValue = useCallback(v => {
+    if (validation === false) {
+      return v.nationalNumber.length > 0;
+    }
+    const p = planOf(v.iso);
+    // Nothing to validate against: only a typed number can be "valid".
+    return p ? isValidNationalNumber(v.nationalNumber, p, validation) : v.nationalNumber.length > 0;
+  }, [validation]);
+  const valid = isValidValue(current);
+
+  // A cleared field earns the typing grace again.
+  useEffect(() => {
+    if (!hasNumber) {
+      setTouched(false);
+    }
+  }, [hasNumber]);
+
+  // The built-in invalid message. "Full length" is the country's own number
+  // length, not the caller's `maxLength`: an app's tighter stop is not the
+  // user's mistake. A country the plan does not know never reaches it.
+  const countryCap = plan ? maxNationalNumberLength(plan, validation === false ? 'any' : validation) : Number.POSITIVE_INFINITY;
+  const atFullLength = current.nationalNumber.length >= countryCap;
+  const showInvalid = validation !== false && invalidMessage !== false && hasNumber && !valid && (touched || atFullLength);
+  const defaultInvalidMessage = validation === 'mobile' ? 'Enter a valid mobile number' : 'Enter a valid number';
+  const effectiveError = error ?? (showInvalid ? invalidMessage || defaultInvalidMessage : undefined);
+
+  // Validity is reported on the flip, not on mount: a form that mounts an
+  // empty field already knows it is invalid, and `onComplete` is the moment
+  // the number BECOMES valid, whether it got there by typing or by the
+  // parent setting a controlled value.
+  const validRef = useRef(valid);
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  useEffect(() => {
+    if (validRef.current === valid) {
+      return;
+    }
+    validRef.current = valid;
+    onValidityChange?.(valid);
+    if (valid) {
+      onComplete?.(formatE164(currentRef.current));
+    }
+  }, [valid, onComplete, onValidityChange]);
+  const handleChangeText = useCallback(raw => {
+    // A pasted "+91 98765 43210" names its own country; switch to it when
+    // it is one the field offers, keeping the digits.
+    if (raw.includes('+')) {
+      const parsed = fromString(raw, current.iso);
+      if (parsed && !countryLocked && visibleCountries.some(c => c.iso === parsed.iso)) {
+        setCurrent(parsed);
+        return;
+      }
+      if (parsed && parsed.iso === current.iso) {
+        setCurrent(parsed);
+        return;
+      }
+    }
+    setCurrent({
+      ...current,
+      nationalNumber: limit(digitsOnly(raw), current.iso)
+    });
+  }, [visibleCountries, countryLocked, current, fromString, limit, setCurrent]);
+  const pickCountry = useCallback(option => {
+    const country = option;
+    // Keep the typed digits: changing country should not discard the number,
+    // though the new plan's ceiling may shorten it.
+    setCurrent({
+      callingCode: country.code,
+      iso: country.iso,
+      nationalNumber: limit(current.nationalNumber, country.iso)
+    });
+    setSheetOpen(false);
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+  }, [current, haptic, limit, setCurrent]);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => setCurrent({
+      ...currentRef.current,
+      nationalNumber: ''
+    }),
+    isFocused: () => inputRef.current?.isFocused() ?? false,
+    getValue: () => currentRef.current,
+    getE164: () => formatE164(currentRef.current),
+    getFormatted: () => {
+      const v = currentRef.current;
+      const p = planOf(v.iso);
+      return p ? formatPhoneAsTyped(v.nationalNumber, p) : v.nationalNumber;
+    },
+    isValid: () => isValidValue(currentRef.current),
+    getCountry: () => countries.find(c => c.iso === currentRef.current.iso)
+  }), [countries, isValidValue, setCurrent]);
+  const triggerDisabled = disabled || countryLocked;
+  const field = /*#__PURE__*/_jsx(FieldBase, {
+    size: size,
+    variant: resolvedVariant,
+    borderRadius: borderRadiusOverride,
+    topNotch: floating.topNotch,
+    focused: focused,
+    disabled: disabled,
+    error: Boolean(effectiveError),
+    filled: hasNumber,
+    onPress: focusInput,
+    pressFeedback: false,
+    leadingDivider: true,
+    paddingLeft: isUnderline ? 0 : undefined,
+    leading: /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => {
+        if (triggerDisabled) {
+          return;
+        }
+        openingSheetRef.current = true;
+        setSheetOpen(true);
+      },
+      disabled: triggerDisabled,
+      accessibilityRole: "button",
+      accessibilityLabel: countryAccessibilityLabel ?? `Country code, currently +${current.callingCode}`,
+      accessibilityState: {
+        disabled: triggerDisabled
+      },
+      hitSlop: 6,
+      onLayout: e => {
+        const {
+          width
+        } = e.nativeEvent.layout;
+        setCodeWidth(prev => prev === width ? prev : width);
+      },
+      style: styles.codeTrigger,
+      testID: testID ? `${testID}-code` : undefined,
+      children: [flagOf(selected, sizeTokens.fontSize, testID ? `${testID}-flag` : undefined), /*#__PURE__*/_jsx(Text, {
+        style: [styles.codeText, {
+          color: fieldText.color,
+          fontSize: sizeTokens.fontSize
+        }],
+        children: `+${current.callingCode}`
+      }), countryLocked ? null : /*#__PURE__*/_jsx(Chevron, {
+        color: disabled ? theme.colors.field.iconDisabled : theme.colors.field.icon,
+        size: sizeTokens.iconSize,
+        open: sheetOpen
+      })]
+    }),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.inputWrap,
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
+        value: displayText,
+        maxLength: nativeMaxLength,
+        onChangeText: handleChangeText,
+        onSelectionChange: e => {
+          const {
+            start,
+            end
+          } = e.nativeEvent.selection;
+          setRangeSelected(start !== end);
+        },
+        onFocus: () => {
+          setFocused(true);
+          onFocus?.();
+        },
+        onBlur: () => {
+          setFocused(false);
+          if (hasNumber && !openingSheetRef.current) {
+            setTouched(true);
+          }
+          onBlur?.();
+        },
+        editable: !disabled,
+        placeholder: showFloatingLabel && !floated ? undefined : requiredPlaceholder ? undefined : placeholder,
+        placeholderTextColor: fieldText.placeholderColor,
+        accessibilityLabel: accessibilityLabel ?? label ?? placeholder,
+        selectionColor: theme.colors.field.caret,
+        keyboardType: "phone-pad",
+        textContentType: "telephoneNumber",
+        autoComplete: "tel",
+        style: [styles.input, {
+          color: fieldText.color,
+          fontSize: sizeTokens.fontSize,
+          ...fieldText.weightStyle,
+          paddingLeft: isUnderline ? 0 : undefined
+        }],
+        testID: testID ? `${testID}-input` : undefined
+      }), requiredPlaceholder ? /*#__PURE__*/_jsx(RequiredPlaceholder, {
+        text: placeholder,
+        color: fieldText.placeholderColor,
+        fontSize: sizeTokens.fontSize,
+        weightStyle: fieldText.weightStyle
+      }) : null]
+    })
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    testID: testID,
+    children: [label && labelMode === 'top' ? /*#__PURE__*/_jsx(FieldLabel, {
+      size: size,
+      required: required,
+      children: label
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: styles.fieldWrapper,
+      children: [field, floating.node]
+    }), /*#__PURE__*/_jsx(FieldMessage, {
+      size: size,
+      error: Boolean(effectiveError),
+      text: effectiveError ?? helperText
+    }), /*#__PURE__*/_jsx(OptionSheet, {
+      open: sheetOpen,
+      onClose: () => setSheetOpen(false),
+      title: countrySheetTitle,
+      options: visibleCountries,
+      sections: sections,
+      labelOf: o => `${o.label} (+${o.code})`,
+      getValue: o => o.iso,
+      disabledOf: () => false,
+      descriptionOf: () => undefined,
+      iconOf: o => flagOf(o, theme.typography.fontSize.lg),
+      renderOption: renderCountry ? (o, state) => renderCountry(o, {
+        selected: state.selected
+      }) : undefined,
+      isSelected: v => v === selected?.iso,
+      onSelect: pickCountry,
+      searchable: visibleCountries.length > 8,
+      searchPlaceholder: countrySearchPlaceholder,
+      alphabetIndex: showAlphabetIndex ?? visibleCountries.length > 20
+    })]
+  });
+});
+PhoneNumberInput.displayName = 'PhoneNumberInput';
+const buildStyles = theme => StyleSheet.create({
+  fieldWrapper: {
+    position: 'relative',
+    overflow: 'visible'
+  },
+  codeTrigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2
+  },
+  flag: {
+    includeFontPadding: false,
+    marginRight: 4
+  },
+  // Digits are left-to-right in every script. In a right-to-left app the row
+  // itself mirrors (React Native swaps left and right for the layout), but
+  // the calling code and the number are pinned LTR so "+91" and the grouped
+  // digits never come out bidi-reordered.
+  codeText: {
+    ...fontFor(theme, 'semibold'),
+    fontWeight: '600',
+    includeFontPadding: false,
+    writingDirection: 'ltr'
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false,
+    writingDirection: 'ltr'
+  },
+  inputWrap: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center'
+  }
+});
+export default PhoneNumberInput;
+//# sourceMappingURL=PhoneNumberInput.js.map

package/lib/module/components/PhoneNumberInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { DEFAULT_CALLING_CODES, default, formatE164, PhoneNumberInput } from "./PhoneNumberInput.js";
+//# sourceMappingURL=index.js.map