@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -0,0 +1 @@
+export{default,OptionSheet}from"./OptionSheet.js";

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

@@ -1,569 +1 @@
-"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
+import{countryFlagEmoji as e,formatPhoneAsTyped as o,getPhoneCountries as n,isSupportedCountry as t,isValidNationalNumber as i,maxNationalNumberLength as l,splitPhoneNumber as r}from"@webority/mobile-core";import{PHONE_COUNTRY_NAMES as a}from"@webority/mobile-core/phone/countries";import{forwardRef as s,useCallback as c,useEffect as d,useImperativeHandle as u,useMemo as b,useRef as m,useState as p}from"react";import{Pressable as f,StyleSheet as g,Text as h,TextInput as y,View as N}from"react-native";import{useControllableState as C}from"../../hooks/index.js";import{fontFor as S,useTheme as v}from"../../theme/index.js";import{resolveHaptic as I,triggerHaptic as x}from"../../utils/index.js";import{FieldBase as L,FieldLabel as E,FieldMessage as T,RequiredPlaceholder as F,resolveFieldSize as A,resolveFieldTextStyle as z}from"../FieldBase/index.js";import{Chevron as O}from"../FieldBase/Chevron.js";import{useFloatingLabel as P}from"../FieldBase/useFloatingLabel.js";import{OptionSheet as D}from"../OptionSheet/OptionSheet.js";import{jsx as w,jsxs as j}from"react/jsx-runtime";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"}];export const ALL_CALLING_CODES=n().map(e=>({iso:e.iso,code:e.callingCode,label:a[e.iso]??e.iso})).sort((e,o)=>e.label.localeCompare(o.label));const digitsOnly=e=>e.replace(/[^0-9]/g,"");export const formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;export const parseE164=(e,o,n)=>{const t=e.replace(/[^0-9]/g,"");if(!t)return null;const i=r(`+${t}`);let l=i?.callingCode,a=i?.nationalNumber??"";if(!l){const e=Array.from(new Set(o.map(e=>e.code))).sort((e,o)=>o.length-e.length);if(l=e.find(e=>t.startsWith(e)),!l)return null;a=t.slice(l.length)}const s=o.filter(e=>e.code===l),c=s.find(e=>e.iso===n)?.iso??s.find(e=>e.iso===i?.country)?.iso??i?.country??s[0]?.iso??"";return{callingCode:l,nationalNumber:a,iso:c}};const planOf=e=>t(e)?e:null;export const PhoneNumberInput=s((n,t)=>{const{value:a,defaultValue:s,onChange:g,e164:S,onChangeE164:B,returnKeyType:$,submitBehavior:V,onSubmitEditing:_,blurOnSubmit:U,onComplete:W,onValidityChange:k,countries:G=ALL_CALLING_CODES,popularCountries:R,popularCountriesTitle:M="Popular",allCountriesTitle:q="All countries",hiddenCountries:K,showFlag:Y=!0,renderFlag:H,renderCountry:J,countrySearchPlaceholder:Q,showAlphabetIndex:X,defaultIso:Z="IN",validation:ee="any",maxLength:oe,formatAsYouType:ne=!0,countryLocked:te=!1,label:ie,labelMode:le="top",labelStyle:re,placeholder:ae="Phone number",helperText:se,error:ce,invalidMessage:de,required:ue,disabled:be=!1,size:me="md",variant:pe,borderRadius:fe,countrySheetTitle:ge="Country code",haptic:he,accessibilityLabel:ye,countryAccessibilityLabel:Ne,onFocus:Ce,onBlur:Se,style:ve,testID:Ie}=n,xe=v(),Le=b(()=>buildStyles(xe),[xe]),Ee=m(null),Te=b(()=>K?.length?G.filter(e=>!K.includes(e.iso)):G,[G,K]),Fe=b(()=>{if(!R?.length)return;const e=R.map(e=>Te.find(o=>o.iso===e)).filter(e=>void 0!==e);return e.length?[{title:M,options:e},{title:q,options:Te}]:void 0},[R,M,q,Te]),Ae=c((o,n,t)=>{if(!o)return null;if(H)return H(o);if(!Y)return null;const i=e(o.iso);return i?w(h,{style:[Le.flag,{fontSize:n}],testID:t,children:i}):null},[H,Y,Le.flag]),ze=c(e=>{const o=planOf(e),n=o?l(o,!1===ee?"any":ee):Number.POSITIVE_INFINITY;return oe?Math.min(n,oe):n},[oe,ee]),Oe=c((e,o)=>e.slice(0,ze(o)),[ze]),Pe=c((e,o)=>{const n=planOf(o)??void 0,t=r(e,n);if(!t)return null;const i=t.country??o,l=G.find(e=>e.iso===i);return{callingCode:l?.code??t.callingCode,nationalNumber:Oe(t.nationalNumber,i),iso:l?.iso??i}},[G,Oe]),De=b(()=>{const e=Te.find(e=>e.iso===Z)??Te[0]??G[0],o={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof s?Pe(s,o.iso)??o:s??o},[G,Te,Z,s,Pe]),we=c(e=>{if(!1===ee)return e.nationalNumber.length>0;const o=planOf(e.iso);return o?i(e.nationalNumber,o,ee):e.nationalNumber.length>0},[ee]),[je,Be]=p(De.iso),$e=b(()=>{if(void 0===S)return;const e=S?parseE164(S,G,je):null;if(e)return{...e,nationalNumber:Oe(e.nationalNumber,e.iso)};const o=G.find(e=>e.iso===je);return{callingCode:o?.code??De.callingCode,nationalNumber:"",iso:je}},[S,G,je,De.callingCode,Oe]),Ve=c(e=>{Be(e.iso),g?.(e),B?.(e.nationalNumber?formatE164(e):"",{country:G.find(o=>o.iso===e.iso),national:e.nationalNumber,valid:we(e)})},[g,B,G,we]),[_e,Ue]=C({value:a??$e,defaultValue:De,onChange:Ve}),[We,ke]=p(!1),Ge=c(()=>{be||Ee.current?.focus()},[be]),[Re,Me]=p(!1),[qe,Ke]=p(!1),[Ye,He]=p(!1),Je=m(!1);d(()=>{Ye||(Je.current=!1)},[Ye]);const Qe=A(xe,me),Xe=z(xe,{disabled:be}),Ze=pe??xe.components.field?.defaultVariant??"outlined",eo="underline"===Ze,oo=fe??xe.components.phoneNumberInput?.borderRadius,no=xe.spacing.md,[to,io]=p(0),lo=to+no+1+no,ro=_e.nationalNumber.length>0,ao=ue&&!ie&&!ro&&ae.length>0,so=We||ro,co=Boolean(ie)&&"float"===le&&to>0,uo=P({label:ie,enabled:co,floated:so,required:ue,variant:Ze,sizeTokens:Qe,leadingOffset:lo,paddingLeft:eo?0:Qe.paddingHorizontal,color:xe.colors.field.label,style:re}),bo=b(()=>G.find(e=>e.iso===_e.iso),[G,_e.iso]),mo=planOf(_e.iso),po=ne&&mo?o(_e.nationalNumber,mo):_e.nationalNumber,fo=ze(_e.iso),go=0===_e.nationalNumber.length||Re||!Number.isFinite(fo)?void 0:po.length+Math.max(0,fo-_e.nationalNumber.length),ho=we(_e);d(()=>{ro||Ke(!1)},[ro]);const yo=mo?l(mo,!1===ee?"any":ee):Number.POSITIVE_INFINITY,No=_e.nationalNumber.length>=yo,Co=ce??(!1!==ee&&!1!==de&&ro&&!ho&&(qe||No)?de||("mobile"===ee?"Enter a valid mobile number":"Enter a valid number"):void 0),So=m(ho),vo=m(_e);vo.current=_e,d(()=>{So.current!==ho&&(So.current=ho,k?.(ho),ho&&W?.(formatE164(vo.current)))},[ho,W,k]);const Io=c(e=>{if(e.includes("+")){const o=Pe(e,_e.iso);if(o&&!te&&Te.some(e=>e.iso===o.iso))return void Ue(o);if(o&&o.iso===_e.iso)return void Ue(o)}Ue({..._e,nationalNumber:Oe(digitsOnly(e),_e.iso)})},[Te,te,_e,Pe,Oe,Ue]),xo=c(e=>{const o=e;Ue({callingCode:o.code,iso:o.iso,nationalNumber:Oe(_e.nationalNumber,o.iso)}),He(!1);const n=I(he,"selection");n&&x(n)},[_e,he,Oe,Ue]);u(t,()=>({focus:()=>Ee.current?.focus(),blur:()=>Ee.current?.blur(),clear:()=>Ue({...vo.current,nationalNumber:""}),isFocused:()=>Ee.current?.isFocused()??!1,getValue:()=>vo.current,getE164:()=>formatE164(vo.current),getFormatted:()=>{const e=vo.current,n=planOf(e.iso);return n?o(e.nationalNumber,n):e.nationalNumber},isValid:()=>we(vo.current),getCountry:()=>G.find(e=>e.iso===vo.current.iso)}),[G,we,Ue]);const Lo=be||te,Eo=w(L,{size:me,variant:Ze,borderRadius:oo,topNotch:uo.topNotch,focused:We,disabled:be,error:Boolean(Co),filled:ro,onPress:Ge,pressFeedback:!1,leadingDivider:!0,paddingLeft:eo?0:void 0,leading:j(f,{onPress:()=>{Lo||(Je.current=!0,He(!0))},disabled:Lo,accessibilityRole:"button",accessibilityLabel:Ne??`Country code, currently +${_e.callingCode}`,accessibilityState:{disabled:Lo},hitSlop:6,onLayout:e=>{const{width:o}=e.nativeEvent.layout;io(e=>e===o?e:o)},style:Le.codeTrigger,testID:Ie?`${Ie}-code`:void 0,children:[Ae(bo,Qe.fontSize,Ie?`${Ie}-flag`:void 0),w(h,{style:[Le.codeText,{color:Xe.color,fontSize:Qe.fontSize}],children:`+${_e.callingCode}`}),te?null:w(O,{color:be?xe.colors.field.iconDisabled:xe.colors.field.icon,size:Qe.iconSize,open:Ye})]}),children:j(N,{style:Le.inputWrap,children:[w(y,{ref:Ee,value:po,maxLength:go,onChangeText:Io,returnKeyType:$,submitBehavior:V,onSubmitEditing:_,blurOnSubmit:U,onSelectionChange:e=>{const{start:o,end:n}=e.nativeEvent.selection;Me(o!==n)},onFocus:()=>{ke(!0),Ce?.()},onBlur:()=>{ke(!1),ro&&!Je.current&&Ke(!0),Se?.()},editable:!be,placeholder:co&&!so||ao?void 0:ae,placeholderTextColor:Xe.placeholderColor,accessibilityLabel:ye??ie??ae,selectionColor:xe.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[Le.input,{color:Xe.color,fontSize:Qe.fontSize,...Xe.weightStyle,paddingLeft:eo?0:void 0}],testID:Ie?`${Ie}-input`:void 0}),ao?w(F,{text:ae,color:Xe.placeholderColor,fontSize:Qe.fontSize,weightStyle:Xe.weightStyle}):null]})});return j(N,{style:ve,testID:Ie,children:[ie&&"top"===le?w(E,{size:me,required:ue,children:ie}):null,j(N,{style:Le.fieldWrapper,children:[Eo,uo.node]}),w(T,{size:me,error:Boolean(Co),text:Co??se}),w(D,{open:Ye,onClose:()=>He(!1),title:ge,options:Te,sections:Fe,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Ae(e,xe.typography.fontSize.lg),renderOption:J?(e,o)=>J(e,{selected:o.selected}):void 0,isSelected:e=>e===bo?.iso,onSelect:xo,searchable:Te.length>8,searchPlaceholder:Q,alphabetIndex:X??Te.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>g.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...S(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});export default PhoneNumberInput;

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

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