@superdispatch/phones 0.16.0-alpha.0 → 0.16.0-alpha.1

package/dist-src/v5/phone-field/PhoneField.js

@@ -1,149 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onBlur", "onFocus", "onChange"],
-    _excluded2 = ["label", "fullWidth", "helperText", "suspenseFallback"];
-import { TextField } from '@mui/material';
-import { v5 } from '@superdispatch/ui';
-import { forwardRef, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { usePhoneService } from "../phone-service/PhoneService.js";
-import { PhoneFieldMenu } from "./PhoneFieldMenu.js";
-import { PhoneFieldStartAdornment } from "./PhoneFieldStartAdornment.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  mergeRefs
-} = v5;
-
-function normalizeValue(value) {
-  return typeof value === 'string' ? value : '';
-}
-
-export var PhoneField = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    value: valueProp,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    onChange: _onChange
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var rootRef = useRef(null);
-  var inputRef = useRef(null);
-  var [menuAnchor, setMenuAnchor] = useState(null);
-  var phoneService = usePhoneService();
-  var createState = useCallback(value => _objectSpread({
-    value
-  }, phoneService.getInfo(value)), [phoneService]);
-  var value = useMemo(() => normalizeValue(valueProp), [valueProp]);
-  var [{
-    country,
-    nationalNumber
-  }, setValue] = useState(() => createState(value));
-  var placeholder = useMemo(() => phoneService.APN.getExample(country).getNumber('national'), [country, phoneService.APN]);
-
-  function handleChange(fn, nextCountry, nextNationalNumber) {
-    if (fn) {
-      var nextValue = phoneService.format(nextNationalNumber, {
-        country: nextCountry
-      });
-      setValue({
-        value: nextValue,
-        country: nextCountry,
-        nationalNumber: nextNationalNumber
-      });
-      fn(nextValue);
-    }
-  }
-
-  function handleChangeEvent(fn, _ref2) {
-    var {
-      target: {
-        value: nextValue
-      }
-    } = _ref2;
-
-    if (fn) {
-      handleChange(fn, country, phoneService.format(nextValue, {
-        country,
-        format: 'national'
-      }));
-    }
-  }
-
-  useEffect(() => {
-    setValue(prev => // Ignore `props.value` changes when they were performed from inside.
-    prev.value === value ? prev : createState(value));
-  }, [value, createState]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(PhoneFieldMenu, {
-      value: country,
-      anchorEl: menuAnchor,
-      onClose: () => {
-        setMenuAnchor(null);
-      },
-      onChange: nextRegion => {
-        handleChange(_onChange, nextRegion, nationalNumber);
-      }
-    }), /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({}, props), {}, {
-      type: "tel",
-      variant: "outlined",
-      autoComplete: "off",
-      value: nationalNumber,
-      placeholder: placeholder,
-      ref: mergeRefs(ref, rootRef),
-      inputRef: inputRef,
-      onBlur: event => {
-        handleChangeEvent(_onBlur, event);
-      },
-      onFocus: event => {
-        handleChangeEvent(_onFocus, event);
-      },
-      onChange: event => {
-        handleChangeEvent(_onChange, event);
-      },
-      InputProps: {
-        startAdornment: /*#__PURE__*/_jsx(PhoneFieldStartAdornment, {
-          country: country,
-          isExpanded: !!menuAnchor,
-          onClick: () => {
-            var _inputRef$current;
-
-            // `FocusTrap` inside of `Menu` will restore focus to
-            // the last focused element. We want to manually focus input
-            // to trick the `FocusTrap`.
-            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-            setMenuAnchor(rootRef.current);
-          }
-        })
-      }
-    }))]
-  });
-});
-if (process.env.NODE_ENV !== "production") PhoneField.displayName = "PhoneField";
-export var SuspendedPhoneField = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  var {
-    label,
-    fullWidth,
-    helperText,
-    suspenseFallback = /*#__PURE__*/_jsx(TextField, {
-      disabled: true,
-      label: label,
-      fullWidth: fullWidth,
-      helperText: helperText,
-      placeholder: "Loading\u2026"
-    })
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded2);
-
-  return /*#__PURE__*/_jsx(Suspense, {
-    fallback: suspenseFallback,
-    children: /*#__PURE__*/_jsx(PhoneField, _objectSpread(_objectSpread({}, props), {}, {
-      ref: ref,
-      label: label,
-      fullWidth: fullWidth,
-      helperText: helperText
-    }))
-  });
-});
-if (process.env.NODE_ENV !== "production") SuspendedPhoneField.displayName = "SuspendedPhoneField";

package/dist-src/v5/phone-field/PhoneFieldFlag.js

@@ -1,46 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["country", "alt", "className"];
-import { Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: {
-    minHeight: theme.spacing(2),
-    minWidth: theme.spacing(2.75)
-  }
-}), {
-  name: 'SD-PhoneFieldFlag'
-});
-export var PhoneFieldFlag = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    country,
-    alt = country,
-    className
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var styles = useStyles();
-
-  if (country === 'AC' || country === 'BQ' || country === 'EH' || country === 'TA') {
-    return /*#__PURE__*/_jsx(Typography, {
-      ref: ref,
-      variant: "h6",
-      align: "center",
-      component: "span",
-      color: "textSecondary",
-      className: clsx(styles.root, className),
-      children: country
-    });
-  }
-
-  return /*#__PURE__*/_jsx("img", _objectSpread(_objectSpread({}, props), {}, {
-    alt: alt,
-    ref: ref,
-    className: clsx(styles.root, className),
-    src: "https://cdn.jsdelivr.net/gh/madebybowtie/FlagKit@2.2/Assets/SVG/".concat(country, ".svg")
-  }));
-});
-if (process.env.NODE_ENV !== "production") PhoneFieldFlag.displayName = "PhoneFieldFlag";

package/dist-src/v5/phone-field/PhoneFieldMenu.js

@@ -1,40 +0,0 @@
-import { Divider, Menu } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { forwardRef } from 'react';
-import { listCountries } from "../country-code-metadata/CountryCodeMetadata.js";
-import { PhoneFieldMenuItem } from "./PhoneFieldMenuItem.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  paper: {
-    maxHeight: theme.spacing(30)
-  }
-}), {
-  name: 'SD-PhoneFieldMenu'
-});
-export var PhoneFieldMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    anchorEl,
-    value,
-    onClose,
-    onChange
-  } = _ref;
-  var styles = useStyles();
-  return /*#__PURE__*/_jsx(Menu, {
-    ref: ref,
-    open: !!anchorEl,
-    onClose: onClose,
-    anchorEl: anchorEl,
-    classes: {
-      paper: styles.paper
-    },
-    children: listCountries().map(country => [/*#__PURE__*/_jsx(PhoneFieldMenuItem, {
-      country: country,
-      selected: country === value,
-      onClick: () => {
-        onChange(country);
-        onClose();
-      }
-    }, country), country === 'NZ' && /*#__PURE__*/_jsx(Divider, {}, "divider")])
-  });
-});
-if (process.env.NODE_ENV !== "production") PhoneFieldMenu.displayName = "PhoneFieldMenu";

package/dist-src/v5/phone-field/PhoneFieldMenuItem.js

@@ -1,54 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["country", "classes"],
-    _excluded2 = ["flag"];
-import { MenuItem, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { forwardRef, useMemo } from 'react';
-import { formatCountry, getCountryCode } from "../country-code-metadata/CountryCodeMetadata.js";
-import { PhoneFieldFlag } from "./PhoneFieldFlag.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  dense: {},
-  gutters: {},
-  root: {},
-  selected: {},
-  disabled: {},
-  divider: {},
-  focusVisible: {},
-  flag: {
-    marginRight: theme.spacing(1)
-  }
-}), {
-  name: 'SD-PhoneFieldMenuItem'
-});
-export var PhoneFieldMenuItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    country,
-    classes
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var _useStyles = useStyles({
-    classes
-  }),
-      {
-    flag: flagClassName
-  } = _useStyles,
-      styles = _objectWithoutProperties(_useStyles, _excluded2);
-
-  var countryCode = useMemo(() => getCountryCode(country), [country]);
-  return /*#__PURE__*/_jsxs(MenuItem, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    classes: styles,
-    children: [/*#__PURE__*/_jsx(PhoneFieldFlag, {
-      country: country,
-      className: flagClassName
-    }), formatCountry(country), "\xA0", /*#__PURE__*/_jsx(Typography, {
-      color: "textSecondary",
-      children: countryCode
-    })]
-  }));
-});
-if (process.env.NODE_ENV !== "production") PhoneFieldMenuItem.displayName = "PhoneFieldMenuItem";

package/dist-src/v5/phone-field/PhoneFieldStartAdornment.js

@@ -1,62 +0,0 @@
-import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
-import { ButtonBase, InputAdornment, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import { v5 } from '@superdispatch/ui';
-import { forwardRef, useMemo } from 'react';
-import { formatCountry, getCountryCode } from "../country-code-metadata/CountryCodeMetadata.js";
-import { PhoneFieldFlag } from "./PhoneFieldFlag.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  Color
-} = v5;
-var useStyles = /*#__PURE__*/makeStyles(theme => ({
-  root: {
-    marginLeft: theme.spacing(-1),
-    marginRight: 0
-  },
-  button: {
-    color: Color.Blue300,
-    padding: theme.spacing(0.5, 0.5, 0.5, 1),
-    borderRadius: theme.spacing(0.5, 0, 0, 0.5),
-    '&:hover, &:focus': {
-      backgroundColor: Color.Blue50
-    }
-  }
-}), {
-  name: 'SD-PhoneFieldStartAdornment'
-});
-export var PhoneFieldStartAdornment = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    country,
-    onClick,
-    isExpanded
-  } = _ref;
-  var styles = useStyles();
-  var [title, countryCode] = useMemo(() => {
-    var code = "+".concat(getCountryCode(country));
-    return ["".concat(formatCountry(country), ": ").concat(code), code];
-  }, [country]);
-  return /*#__PURE__*/_jsx(InputAdornment, {
-    ref: ref,
-    position: "start",
-    className: styles.root,
-    children: /*#__PURE__*/_jsxs(ButtonBase, {
-      title: title,
-      onClick: onClick,
-      className: styles.button,
-      "aria-expanded": isExpanded,
-      children: [/*#__PURE__*/_jsx(PhoneFieldFlag, {
-        country: country
-      }), isExpanded ? /*#__PURE__*/_jsx(ArrowDropUp, {
-        htmlColor: Color.Dark200
-      }) : /*#__PURE__*/_jsx(ArrowDropDown, {
-        htmlColor: Color.Dark200
-      }), /*#__PURE__*/_jsx(Typography, {
-        color: "textPrimary",
-        children: countryCode
-      })]
-    })
-  });
-});
-if (process.env.NODE_ENV !== "production") PhoneFieldStartAdornment.displayName = "PhoneFieldStartAdornment";

package/dist-src/v5/phone-link/PhoneLink.js

@@ -1,56 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["phone", "country", "fallback", "format"],
-    _excluded2 = ["suspenseFallback"];
-import { Link } from '@mui/material';
-import { v5 } from '@superdispatch/ui';
-import { forwardRef, Suspense, useMemo } from 'react';
-import { usePhoneService } from "../phone-service/PhoneService.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-var {
-  renderChildren
-} = v5;
-export var PhoneLink = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var {
-    phone,
-    country,
-    fallback,
-    format = 'international'
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var service = usePhoneService();
-  var [text, href] = useMemo(() => {
-    if (service.checkPossibility(phone) !== 'is-possible') {
-      return [undefined, undefined];
-    }
-
-    return [service.format(phone, {
-      country,
-      format
-    }), service.format(phone, {
-      country,
-      format: 'rfc3966'
-    })];
-  }, [phone, country, format, service]);
-  return !href ? renderChildren(fallback) : /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
-    ref: ref,
-    href: href,
-    children: text
-  }));
-});
-if (process.env.NODE_ENV !== "production") PhoneLink.displayName = "PhoneLink";
-export var SuspendedPhoneLink = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  var {
-    suspenseFallback = null
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-
-  return /*#__PURE__*/_jsx(Suspense, {
-    fallback: suspenseFallback,
-    children: /*#__PURE__*/_jsx(PhoneLink, _objectSpread(_objectSpread({}, props), {}, {
-      ref: ref
-    }))
-  });
-});
-if (process.env.NODE_ENV !== "production") SuspendedPhoneLink.displayName = "SuspendedPhoneLink";

package/dist-src/v5/phone-service/PhoneService.js

@@ -1,185 +0,0 @@
-import { useMemo } from 'react';
-import { getAPN, loadAPN } from "../apn/APN.js";
-import { DEFAULT_COUNTRY, getCountryCode, toCountryISO } from "../country-code-metadata/CountryCodeMetadata.js";
-var PLUS_SIGN = '+';
-var NON_PHONE_SYMBOLS_PATTERN = /[^+\d]/g;
-var PHONE_PATTERN = /^\+?\d+/g;
-
-function getPrefix(country) {
-  return PLUS_SIGN + String(getCountryCode(toCountryISO(country)));
-}
-
-function trim(input) {
-  return typeof input == 'string' ? input.trim() : undefined;
-}
-
-function normalize(input) {
-  if (typeof input == 'string') {
-    var matches = input.replace(NON_PHONE_SYMBOLS_PATTERN, '').match(PHONE_PATTERN);
-    if (matches !== null && matches !== void 0 && matches[0]) return matches[0];
-  }
-
-  return '';
-}
-
-function normalizeNational(country, input) {
-  var phone = normalize(input);
-  var prefix = getPrefix(country);
-
-  if (phone.startsWith(PLUS_SIGN)) {
-    return phone.slice(prefix.length);
-  }
-
-  return phone;
-}
-
-export class PhoneService {
-  static load() {
-    return loadAPN().then(APN => new PhoneService(APN));
-  }
-
-  static checkPossibility(input) {
-    return this.load().then(phoneService => phoneService.checkPossibility(input));
-  }
-
-  static validate(input, rules) {
-    return this.load().then(phoneService => phoneService.validate(input, rules));
-  }
-
-  constructor(APN) {
-    this.APN = APN;
-  }
-
-  createAPN(phone, country) {
-    var asYouType = this.APN.getAsYouType(toCountryISO(country));
-    asYouType.reset(normalize(phone));
-    return asYouType.getPhoneNumber();
-  }
-
-  getJSON(phone, country) {
-    return this.createAPN(phone, country).toJSON();
-  }
-
-  checkPossibility(input) {
-    var phone = trim(input);
-
-    if (!phone) {
-      return 'unknown';
-    }
-
-    var apn = phone.startsWith(PLUS_SIGN) ? new this.APN(phone) : new this.APN(phone, DEFAULT_COUNTRY);
-    var {
-      valid,
-      possible,
-      possibility
-    } = apn.toJSON(); // Avoid false positive short phone numbers.
-
-    if (!valid && possible) {
-      return 'invalid-number';
-    }
-
-    return possibility;
-  }
-
-  validate(input) {
-    var {
-      required,
-      requiredMessage = 'This field is required',
-      invalidMessage = 'Invalid phone number',
-      tooLongMessage = 'Phone number is too long',
-      tooShortMessage = 'Phone number is too short'
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var phone = trim(input);
-
-    if (!phone) {
-      if (required) {
-        return requiredMessage;
-      }
-
-      return undefined;
-    }
-
-    switch (this.checkPossibility(phone)) {
-      case 'is-possible':
-        return undefined;
-
-      case 'too-long':
-        return tooLongMessage;
-
-      case 'too-short':
-        return tooShortMessage;
-    }
-
-    return invalidMessage;
-  }
-
-  getInfo(phone) {
-    var {
-      regionCode,
-      number: {
-        input,
-        national: nationalNumber
-      }
-    } = this.getJSON(phone);
-    var country = toCountryISO(regionCode);
-
-    if (!nationalNumber) {
-      nationalNumber = normalizeNational(country, input);
-    }
-
-    return {
-      country,
-      nationalNumber
-    };
-  }
-
-  format(input) {
-    var {
-      country,
-      format = 'e164',
-      fallback = ''
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var phone = normalize(input);
-
-    if (!phone) {
-      return fallback;
-    }
-
-    var apn = this.createAPN(phone, country);
-    var formatted = apn.getNumber(format);
-
-    if (!formatted) {
-      country = toCountryISO(apn.getRegionCode());
-      var nationalNumber = normalizeNational(country, phone);
-
-      if (format === 'national') {
-        return nationalNumber;
-      }
-
-      var prefix = '';
-      var separator = '';
-
-      if (format === 'rfc3966') {
-        prefix = 'tel:';
-        separator = '-';
-      }
-
-      if (format === 'international') {
-        separator = ' ';
-      }
-
-      formatted = prefix + getPrefix(country);
-
-      if (nationalNumber) {
-        formatted += separator + nationalNumber;
-      }
-    }
-
-    return formatted;
-  }
-
-}
-export function usePhoneService() {
-  var APN = getAPN();
-  return useMemo(() => new PhoneService(APN), [APN]);
-}

package/dist-src/v5/phone-text/PhoneText.js

@@ -1,34 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["suspenseFallback"];
-import { v5 } from '@superdispatch/ui';
-import { Suspense } from 'react';
-import { useFormattedPhoneNumber } from "../formatted-phone-number/FormattedPhoneNumber.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-var {
-  renderChildren
-} = v5;
-export function PhoneText(_ref) {
-  var {
-    phone,
-    country,
-    fallback,
-    format = 'international'
-  } = _ref;
-  var children = useFormattedPhoneNumber(phone, {
-    format,
-    country
-  });
-  return renderChildren(children || fallback);
-}
-export function SuspendedPhoneText(_ref2) {
-  var {
-    suspenseFallback = null
-  } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
-  return /*#__PURE__*/_jsx(Suspense, {
-    fallback: suspenseFallback,
-    children: /*#__PURE__*/_jsx(PhoneText, _objectSpread({}, props))
-  });
-}