@webority/mobile-ui 0.0.39 → 0.2.0

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"OptionSheet",{enumerable:!0,get:function(){return _OptionSheet.OptionSheet}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _OptionSheet.default}});var _OptionSheet=_interopRequireWildcard(require("./OptionSheet.js"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,u)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(u,t,i):u[t]=e[t]);return u})(e,t)}

package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1,574 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.formatE164 = exports.default = exports.PhoneNumberInput = exports.DEFAULT_CALLING_CODES = void 0;
-var _mobileCore = require("@webority/mobile-core");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _index4 = require("../FieldBase/index.js");
-var _Chevron = require("../FieldBase/Chevron.js");
-var _useFloatingLabel = require("../FieldBase/useFloatingLabel.js");
-var _OptionSheet = require("../OptionSheet/OptionSheet.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/** How the label sits: static above the box, or floating up from inside it. */
-
-/**
- * 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.
- */
-const DEFAULT_CALLING_CODES = exports.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. */
-const formatE164 = value => `+${value.callingCode}${value.nationalNumber}`;
-
-/** The ISO as a numbering plan libphonenumber knows, or null for a code it does not. */
-exports.formatE164 = formatE164;
-const planOf = iso => (0, _mobileCore.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.
- */
-const PhoneNumberInput = exports.PhoneNumberInput = /*#__PURE__*/(0, _react.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 = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const inputRef = (0, _react.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 = (0, _react.useMemo)(() => hiddenCountries?.length ? countries.filter(c => !hiddenCountries.includes(c.iso)) : countries, [countries, hiddenCountries]);
-  const sections = (0, _react.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 = (0, _react.useCallback)((country, fontSize, flagTestID) => {
-    if (!country) {
-      return null;
-    }
-    if (renderFlag) {
-      return renderFlag(country);
-    }
-    if (!showFlag) {
-      return null;
-    }
-    const emoji = (0, _mobileCore.countryFlagEmoji)(country.iso);
-    return emoji ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = (0, _react.useCallback)(iso => {
-    const plan = planOf(iso);
-    const byCountry = plan ? (0, _mobileCore.maxNationalNumberLength)(plan, validation === false ? 'any' : validation) : Number.POSITIVE_INFINITY;
-    return maxLength ? Math.min(byCountry, maxLength) : byCountry;
-  }, [maxLength, validation]);
-  const limit = (0, _react.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 = (0, _react.useCallback)((input, fallbackIso) => {
-    const fallback = planOf(fallbackIso) ?? undefined;
-    const parts = (0, _mobileCore.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 = (0, _react.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] = (0, _index.useControllableState)({
-    value,
-    defaultValue: initial,
-    onChange
-  });
-  const [focused, setFocused] = (0, _react.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 = (0, _react.useCallback)(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  // A range is selected (select all, a drag): what comes next replaces it.
-  const [rangeSelected, setRangeSelected] = (0, _react.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] = (0, _react.useState)(false);
-  const [sheetOpen, setSheetOpen] = (0, _react.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 = (0, _react.useRef)(false);
-  (0, _react.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 = (0, _index4.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 = (0, _index4.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] = (0, _react.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 = (0, _useFloatingLabel.useFloatingLabel)({
-    label,
-    enabled: showFloatingLabel,
-    floated,
-    required,
-    variant: resolvedVariant,
-    sizeTokens,
-    leadingOffset,
-    paddingLeft: isUnderline ? 0 : sizeTokens.paddingHorizontal,
-    color: theme.colors.field.label,
-    style: labelStyle
-  });
-  const selected = (0, _react.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 ? (0, _mobileCore.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 = (0, _react.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 ? (0, _mobileCore.isValidNationalNumber)(v.nationalNumber, p, validation) : v.nationalNumber.length > 0;
-  }, [validation]);
-  const valid = isValidValue(current);
-
-  // A cleared field earns the typing grace again.
-  (0, _react.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 ? (0, _mobileCore.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 = (0, _react.useRef)(valid);
-  const currentRef = (0, _react.useRef)(current);
-  currentRef.current = current;
-  (0, _react.useEffect)(() => {
-    if (validRef.current === valid) {
-      return;
-    }
-    validRef.current = valid;
-    onValidityChange?.(valid);
-    if (valid) {
-      onComplete?.(formatE164(currentRef.current));
-    }
-  }, [valid, onComplete, onValidityChange]);
-  const handleChangeText = (0, _react.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 = (0, _react.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 = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.triggerHaptic)(h);
-    }
-  }, [current, haptic, limit, setCurrent]);
-  (0, _react.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 ? (0, _mobileCore.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__*/(0, _jsxRuntime.jsx)(_index4.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.codeText, {
-          color: fieldText.color,
-          fontSize: sizeTokens.fontSize
-        }],
-        children: `+${current.callingCode}`
-      }), countryLocked ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chevron.Chevron, {
-        color: disabled ? theme.colors.field.iconDisabled : theme.colors.field.icon,
-        size: sizeTokens.iconSize,
-        open: sheetOpen
-      })]
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inputWrap,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_index4.RequiredPlaceholder, {
-        text: placeholder,
-        color: fieldText.placeholderColor,
-        fontSize: sizeTokens.fontSize,
-        weightStyle: fieldText.weightStyle
-      }) : null]
-    })
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: style,
-    testID: testID,
-    children: [label && labelMode === 'top' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FieldLabel, {
-      size: size,
-      required: required,
-      children: label
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.fieldWrapper,
-      children: [field, floating.node]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.FieldMessage, {
-      size: size,
-      error: Boolean(effectiveError),
-      text: effectiveError ?? helperText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.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 => _reactNative.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: {
-    ...(0, _index2.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'
-  }
-});
-var _default = exports.default = PhoneNumberInput;
-//# sourceMappingURL=PhoneNumberInput.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.parseE164=exports.formatE164=exports.default=exports.PhoneNumberInput=exports.DEFAULT_CALLING_CODES=exports.ALL_CALLING_CODES=void 0;var _mobileCore=require("@webority/mobile-core"),_countries=require("@webority/mobile-core/phone/countries"),_react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../FieldBase/index.js"),_Chevron=require("../FieldBase/Chevron.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_CALLING_CODES=exports.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"}],ALL_CALLING_CODES=exports.ALL_CALLING_CODES=(0,_mobileCore.getPhoneCountries)().map(e=>({iso:e.iso,code:e.callingCode,label:_countries.PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label)),digitsOnly=e=>e.replace(/[^0-9]/g,""),formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;exports.formatE164=formatE164;const parseE164=(e,t,i)=>{const o=e.replace(/[^0-9]/g,"");if(!o)return null;const n=(0,_mobileCore.splitPhoneNumber)(`+${o}`);let r=n?.callingCode,l=n?.nationalNumber??"";if(!r){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(r=e.find(e=>o.startsWith(e)),!r)return null;l=o.slice(r.length)}const a=t.filter(e=>e.code===r),s=a.find(e=>e.iso===i)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:r,nationalNumber:l,iso:s}};exports.parseE164=parseE164;const planOf=e=>(0,_mobileCore.isSupportedCountry)(e)?e:null,PhoneNumberInput=exports.PhoneNumberInput=(0,_react.forwardRef)((e,t)=>{const{value:i,defaultValue:o,onChange:n,e164:r,onChangeE164:l,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onComplete:d,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:f="Popular",allCountriesTitle:_="All countries",hiddenCountries:g,showFlag:h=!0,renderFlag:x,renderCountry:C,countrySearchPlaceholder:N,showAlphabetIndex:y,defaultIso:S="IN",validation:v="any",maxLength:L,formatAsYouType:E=!0,countryLocked:I=!1,label:j,labelMode:O="top",labelStyle:F,placeholder:T="Phone number",helperText:A,error:P,invalidMessage:R,required:D,disabled:z=!1,size:w="md",variant:q,borderRadius:k,countrySheetTitle:M="Country code",haptic:V,accessibilityLabel:B,countryAccessibilityLabel:$,onFocus:G,onBlur:U,style:W,testID:H}=e,Y=(0,_index2.useTheme)(),K=(0,_react.useMemo)(()=>buildStyles(Y),[Y]),J=(0,_react.useRef)(null),Q=(0,_react.useMemo)(()=>g?.length?m.filter(e=>!g.includes(e.iso)):m,[m,g]),X=(0,_react.useMemo)(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:f,options:e},{title:_,options:Q}]:void 0},[p,f,_,Q]),Z=(0,_react.useCallback)((e,t,i)=>{if(!e)return null;if(x)return x(e);if(!h)return null;const o=(0,_mobileCore.countryFlagEmoji)(e.iso);return o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.flag,{fontSize:t}],testID:i,children:o}):null},[x,h,K.flag]),ee=(0,_react.useCallback)(e=>{const t=planOf(e),i=t?(0,_mobileCore.maxNationalNumberLength)(t,!1===v?"any":v):Number.POSITIVE_INFINITY;return L?Math.min(i,L):i},[L,v]),te=(0,_react.useCallback)((e,t)=>e.slice(0,ee(t)),[ee]),ie=(0,_react.useCallback)((e,t)=>{const i=planOf(t)??void 0,o=(0,_mobileCore.splitPhoneNumber)(e,i);if(!o)return null;const n=o.country??t,r=m.find(e=>e.iso===n);return{callingCode:r?.code??o.callingCode,nationalNumber:te(o.nationalNumber,n),iso:r?.iso??n}},[m,te]),oe=(0,_react.useMemo)(()=>{const e=Q.find(e=>e.iso===S)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof o?ie(o,t.iso)??t:o??t},[m,Q,S,o,ie]),ne=(0,_react.useCallback)(e=>{if(!1===v)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?(0,_mobileCore.isValidNationalNumber)(e.nationalNumber,t,v):e.nationalNumber.length>0},[v]),[re,le]=(0,_react.useState)(oe.iso),ae=(0,_react.useMemo)(()=>{if(void 0===r)return;const e=r?parseE164(r,m,re):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===re);return{callingCode:t?.code??oe.callingCode,nationalNumber:"",iso:re}},[r,m,re,oe.callingCode,te]),se=(0,_react.useCallback)(e=>{le(e.iso),n?.(e),l?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,l,m,ne]),[ue,ce]=(0,_index.useControllableState)({value:i??ae,defaultValue:oe,onChange:se}),[de,be]=(0,_react.useState)(!1),me=(0,_react.useCallback)(()=>{z||J.current?.focus()},[z]),[pe,fe]=(0,_react.useState)(!1),[_e,ge]=(0,_react.useState)(!1),[he,xe]=(0,_react.useState)(!1),Ce=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{he||(Ce.current=!1)},[he]);const Ne=(0,_index4.resolveFieldSize)(Y,w),ye=(0,_index4.resolveFieldTextStyle)(Y,{disabled:z}),Se=q??Y.components.field?.defaultVariant??"outlined",ve="underline"===Se,Le=k??Y.components.phoneNumberInput?.borderRadius,Ee=Y.spacing.md,[Ie,je]=(0,_react.useState)(0),Oe=Ie+Ee+1+Ee,Fe=ue.nationalNumber.length>0,Te=D&&!j&&!Fe&&T.length>0,Ae=de||Fe,Pe=Boolean(j)&&"float"===O&&Ie>0,Re=(0,_useFloatingLabel.useFloatingLabel)({label:j,enabled:Pe,floated:Ae,required:D,variant:Se,sizeTokens:Ne,leadingOffset:Oe,paddingLeft:ve?0:Ne.paddingHorizontal,color:Y.colors.field.label,style:F}),De=(0,_react.useMemo)(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),ze=planOf(ue.iso),we=E&&ze?(0,_mobileCore.formatPhoneAsTyped)(ue.nationalNumber,ze):ue.nationalNumber,qe=ee(ue.iso),ke=0===ue.nationalNumber.length||pe||!Number.isFinite(qe)?void 0:we.length+Math.max(0,qe-ue.nationalNumber.length),Me=ne(ue);(0,_react.useEffect)(()=>{Fe||ge(!1)},[Fe]);const Ve=ze?(0,_mobileCore.maxNationalNumberLength)(ze,!1===v?"any":v):Number.POSITIVE_INFINITY,Be=ue.nationalNumber.length>=Ve,$e=P??(!1!==v&&!1!==R&&Fe&&!Me&&(_e||Be)?R||("mobile"===v?"Enter a valid mobile number":"Enter a valid number"):void 0),Ge=(0,_react.useRef)(Me),Ue=(0,_react.useRef)(ue);Ue.current=ue,(0,_react.useEffect)(()=>{Ge.current!==Me&&(Ge.current=Me,b?.(Me),Me&&d?.(formatE164(Ue.current)))},[Me,d,b]);const We=(0,_react.useCallback)(e=>{if(e.includes("+")){const t=ie(e,ue.iso);if(t&&!I&&Q.some(e=>e.iso===t.iso))return void ce(t);if(t&&t.iso===ue.iso)return void ce(t)}ce({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,I,ue,ie,te,ce]),He=(0,_react.useCallback)(e=>{const t=e;ce({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),xe(!1);const i=(0,_index3.resolveHaptic)(V,"selection");i&&(0,_index3.triggerHaptic)(i)},[ue,V,te,ce]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>ce({...Ue.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ue.current,getE164:()=>formatE164(Ue.current),getFormatted:()=>{const e=Ue.current,t=planOf(e.iso);return t?(0,_mobileCore.formatPhoneAsTyped)(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ue.current),getCountry:()=>m.find(e=>e.iso===Ue.current.iso)}),[m,ne,ce]);const Ye=z||I,Ke=(0,_jsxRuntime.jsx)(_index4.FieldBase,{size:w,variant:Se,borderRadius:Le,topNotch:Re.topNotch,focused:de,disabled:z,error:Boolean($e),filled:Fe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:ve?0:void 0,leading:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{Ye||(Ce.current=!0,xe(!0))},disabled:Ye,accessibilityRole:"button",accessibilityLabel:$??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Ye},hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;je(e=>e===t?e:t)},style:K.codeTrigger,testID:H?`${H}-code`:void 0,children:[Z(De,Ne.fontSize,H?`${H}-flag`:void 0),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.codeText,{color:ye.color,fontSize:Ne.fontSize}],children:`+${ue.callingCode}`}),I?null:(0,_jsxRuntime.jsx)(_Chevron.Chevron,{color:z?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Ne.iconSize,open:he})]}),children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:J,value:we,maxLength:ke,onChangeText:We,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onSelectionChange:e=>{const{start:t,end:i}=e.nativeEvent.selection;fe(t!==i)},onFocus:()=>{be(!0),G?.()},onBlur:()=>{be(!1),Fe&&!Ce.current&&ge(!0),U?.()},editable:!z,placeholder:Pe&&!Ae||Te?void 0:T,placeholderTextColor:ye.placeholderColor,accessibilityLabel:B??j??T,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:ye.color,fontSize:Ne.fontSize,...ye.weightStyle,paddingLeft:ve?0:void 0}],testID:H?`${H}-input`:void 0}),Te?(0,_jsxRuntime.jsx)(_index4.RequiredPlaceholder,{text:T,color:ye.placeholderColor,fontSize:Ne.fontSize,weightStyle:ye.weightStyle}):null]})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W,testID:H,children:[j&&"top"===O?(0,_jsxRuntime.jsx)(_index4.FieldLabel,{size:w,required:D,children:j}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.fieldWrapper,children:[Ke,Re.node]}),(0,_jsxRuntime.jsx)(_index4.FieldMessage,{size:w,error:Boolean($e),text:$e??A}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:he,onClose:()=>xe(!1),title:M,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===De?.iso,onSelect:He,searchable:Q.length>8,searchPlaceholder:N,alphabetIndex:y??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>_reactNative.StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...(0,_index2.fontFor)(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});var _default=exports.default=PhoneNumberInput;

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

@@ -1,32 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "DEFAULT_CALLING_CODES", {
-  enumerable: true,
-  get: function () {
-    return _PhoneNumberInput.DEFAULT_CALLING_CODES;
-  }
-});
-Object.defineProperty(exports, "PhoneNumberInput", {
-  enumerable: true,
-  get: function () {
-    return _PhoneNumberInput.PhoneNumberInput;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _PhoneNumberInput.default;
-  }
-});
-Object.defineProperty(exports, "formatE164", {
-  enumerable: true,
-  get: function () {
-    return _PhoneNumberInput.formatE164;
-  }
-});
-var _PhoneNumberInput = _interopRequireWildcard(require("./PhoneNumberInput.js"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ALL_CALLING_CODES",{enumerable:!0,get:function(){return _PhoneNumberInput.ALL_CALLING_CODES}}),Object.defineProperty(exports,"DEFAULT_CALLING_CODES",{enumerable:!0,get:function(){return _PhoneNumberInput.DEFAULT_CALLING_CODES}}),Object.defineProperty(exports,"PhoneNumberInput",{enumerable:!0,get:function(){return _PhoneNumberInput.PhoneNumberInput}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _PhoneNumberInput.default}}),Object.defineProperty(exports,"formatE164",{enumerable:!0,get:function(){return _PhoneNumberInput.formatE164}}),Object.defineProperty(exports,"parseE164",{enumerable:!0,get:function(){return _PhoneNumberInput.parseE164}});var _PhoneNumberInput=_interopRequireWildcard(require("./PhoneNumberInput.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var u,o,p={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return p;if(u=r?n:t){if(u.has(e))return u.get(e);u.set(e,p)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(u=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?u(p,r,o):p[r]=e[r]);return p})(e,r)}