@pingux/astro 2.208.4-alpha.0 → 2.209.0-alpha.0

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PhoneNumberFieldProps } from '../../types';
+declare const PhoneNumberField: React.ForwardRefExoticComponent<PhoneNumberFieldProps & React.RefAttributes<HTMLInputElement>>;
+export default PhoneNumberField;

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+var _trimStart = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim-start"));
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _react = _interopRequireWildcard(require("react"));
+var _i18n = require("@react-aria/i18n");
+var _countriesList = require("countries-list");
+var _uuid = require("uuid");
+var _ = require("../..");
+var _hooks = require("../../hooks");
+var _pendoID = require("../../utils/devUtils/constants/pendoID");
+var _react2 = require("@emotion/react");
+var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "labelMode", "onCountryChange", "status"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var displayName = 'PhoneNumberField';
+var validatePhoneNumber = function validatePhoneNumber(str) {
+  return /^$|^\+\d*$|^\d+$/.test(str);
+};
+var allCountries = (0, _entries["default"])(_countriesList.countries);
+var getCountry = function getCountry(key) {
+  return _countriesList.countries[key];
+};
+var primaryDial = function primaryDial(key) {
+  var _getCountry$phone$spl, _getCountry;
+  return (_getCountry$phone$spl = (_getCountry = getCountry(key)) === null || _getCountry === void 0 ? void 0 : _getCountry.phone.split(',')[0]) !== null && _getCountry$phone$spl !== void 0 ? _getCountry$phone$spl : '';
+};
+var toDialCode = function toDialCode(key) {
+  var dial = primaryDial(key);
+  return dial ? "+".concat(dial) : '';
+};
+var parsePaste = function parsePaste(raw) {
+  var _context;
+  var digitsOnly = raw.replace(/\D/g, '');
+  if ((0, _startsWith["default"])(_context = (0, _trimStart["default"])(raw).call(raw)).call(_context, '+')) {
+    var match = (0, _find["default"])(allCountries).call(allCountries, function (_ref) {
+      var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+        c = _ref2[1];
+      return (0, _startsWith["default"])(digitsOnly).call(digitsOnly, c.phone.split(',')[0]);
+    });
+    if (match) {
+      var dialLen = match[1].phone.split(',')[0].length;
+      return {
+        countryKey: match[0],
+        localNumber: (0, _slice["default"])(digitsOnly).call(digitsOnly, dialLen)
+      };
+    }
+  }
+  return {
+    countryKey: null,
+    localNumber: digitsOnly
+  };
+};
+var closedState = function closedState(selectedKey) {
+  var dialCode = selectedKey ? toDialCode(selectedKey) : '';
+  return {
+    isOpen: false,
+    inputValue: dialCode,
+    searchValue: dialCode,
+    items: allCountries
+  };
+};
+var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var countryValue = props.countryValue,
+    defaultCountryValue = props.defaultCountryValue,
+    helperText = props.helperText,
+    isReadOnly = props.isReadOnly,
+    labelMode = props.labelMode,
+    onCountryChange = props.onCountryChange,
+    status = props.status,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useField = (0, _hooks.useField)(_objectSpread({
+      status: status,
+      isReadOnly: isReadOnly,
+      labelMode: labelMode
+    }, others)),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
+  var onChange = fieldControlInputProps.onChange;
+  var inputRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var helperTextId = (0, _uuid.v4)();
+  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
+  var _useFilter = (0, _i18n.useFilter)({
+      sensitivity: 'base'
+    }),
+    contains = _useFilter.contains;
+  var _useState = (0, _react.useState)(function () {
+      var key = countryValue !== null && countryValue !== void 0 ? countryValue : defaultCountryValue;
+      if (key && getCountry(key)) {
+        var dialCode = toDialCode(key);
+        return {
+          inputValue: dialCode,
+          selectedKey: key,
+          searchValue: dialCode,
+          items: allCountries,
+          isOpen: false
+        };
+      }
+      return {
+        inputValue: '',
+        selectedKey: null,
+        searchValue: '',
+        items: allCountries,
+        isOpen: false
+      };
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    fieldState = _useState2[0],
+    setFieldState = _useState2[1];
+  var isControlledCountry = countryValue !== undefined;
+  var currentSelectedKey = isControlledCountry ? countryValue !== null && countryValue !== void 0 ? countryValue : null : fieldState.selectedKey;
+  var closedDisplayValue = isControlledCountry ? toDialCode(countryValue !== null && countryValue !== void 0 ? countryValue : '') : fieldState.inputValue;
+  var currentCountryInputValue = fieldState.isOpen ? fieldState.searchValue : closedDisplayValue;
+  var inputHandler = (0, _react.useCallback)(function (value) {
+    var search = value.toLowerCase();
+    var newItems = value ? (0, _filter["default"])(allCountries).call(allCountries, function (_ref3) {
+      var _context2;
+      var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+        c = _ref4[1];
+      var nameStr = (0, _concat["default"])(_context2 = "".concat(c.name)).call(_context2, c.name !== c["native"] ? " (".concat(c["native"], ")") : '');
+      var dialStr = "+".concat(c.phone.split(',')[0]).toLowerCase();
+      return contains(nameStr, value) || (0, _includes["default"])(dialStr).call(dialStr, search);
+    }) : allCountries;
+    setFieldState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        inputValue: value,
+        selectedKey: null,
+        searchValue: value,
+        items: newItems
+      });
+    });
+  }, [contains]);
+  var selectionHandler = (0, _react.useCallback)(function (key) {
+    if (!key) return;
+    var dialCode = toDialCode(key);
+    setFieldState({
+      inputValue: dialCode,
+      selectedKey: key,
+      searchValue: dialCode,
+      items: allCountries,
+      isOpen: false
+    });
+    if (onCountryChange) onCountryChange(key);
+  }, [onCountryChange]);
+  var onOpenChangeHandler = (0, _react.useCallback)(function (open) {
+    if (!open || isReadOnly) {
+      setFieldState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), closedState(prev.selectedKey));
+      });
+    } else {
+      setFieldState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: true,
+          items: allCountries
+        });
+      });
+    }
+  }, [isReadOnly]);
+  var handlePhoneChange = (0, _react.useCallback)(function (e) {
+    if (!onChange) return;
+    if (validatePhoneNumber(e.target.value)) {
+      onChange(e);
+    } else if (inputRef.current) {
+      inputRef.current.value = '';
+    }
+  }, [inputRef, onChange]);
+  var commitPaste = (0, _react.useCallback)(function (raw) {
+    if (!inputRef.current || !onChange) return;
+    var _parsePaste = parsePaste(raw),
+      countryKey = _parsePaste.countryKey,
+      localNumber = _parsePaste.localNumber;
+    if (countryKey) selectionHandler(countryKey);
+    inputRef.current.value = localNumber;
+    var event = {
+      target: inputRef.current,
+      currentTarget: inputRef.current
+    };
+    onChange(event);
+  }, [inputRef, onChange, selectionHandler]);
+  var handlePhonePaste = (0, _react.useCallback)(function (e) {
+    if (isReadOnly) return;
+    e.preventDefault();
+    commitPaste(e.clipboardData.getData('text'));
+  }, [isReadOnly, commitPaste]);
+  var handleComboBoxPaste = (0, _react.useCallback)(function (e) {
+    var _context3;
+    if (isReadOnly) return;
+    var raw = e.clipboardData.getData('text');
+    if (!(0, _startsWith["default"])(_context3 = (0, _trimStart["default"])(raw).call(raw)).call(_context3, '+')) return;
+    e.preventDefault();
+    commitPaste(raw);
+  }, [isReadOnly, commitPaste]);
+  var comboBoxWrapperSx = _objectSpread({
+    position: 'absolute',
+    zIndex: 1
+  }, fieldState.isOpen ? {
+    width: '100%'
+  } : {
+    transition: '0.2s width ease',
+    width: '110px'
+  });
+  var countryLabel = function countryLabel(c) {
+    var _context4, _context5;
+    return (0, _concat["default"])(_context4 = (0, _concat["default"])(_context5 = "".concat(c.name)).call(_context5, c.name !== c["native"] ? " (".concat(c["native"], ")") : '', " +")).call(_context4, c.phone.split(',')[0]);
+  };
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.input.fieldContainer"
+  }, (0, _pendoID.getPendoID)(displayName), fieldContainerProps), (0, _react2.jsx)(_.Label, fieldLabelProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    variant: "forms.input.fieldControlWrapper",
+    isRow: true
+  }, fieldControlWrapperProps, {
+    sx: {
+      position: 'relative'
+    }
+  }), (0, _react2.jsx)(_.ComboBoxField, {
+    width: "100%",
+    status: status,
+    isReadOnly: isReadOnly,
+    isOpen: fieldState.isOpen,
+    onOpenChange: onOpenChangeHandler,
+    wrapperProps: {
+      sx: comboBoxWrapperSx
+    },
+    controlProps: {
+      'aria-label': 'Country Picker',
+      onPaste: handleComboBoxPaste
+    },
+    containerProps: {
+      sx: {
+        '> label': {
+          mb: 0
+        }
+      }
+    },
+    scrollBoxProps: {
+      maxHeight: '215px',
+      sx: {
+        minWidth: '280px'
+      }
+    },
+    items: fieldState.items,
+    inputValue: currentCountryInputValue,
+    selectedKey: currentSelectedKey,
+    onInputChange: inputHandler,
+    onSelectionChange: selectionHandler,
+    menuTrigger: "focus",
+    isDisabled: fieldControlInputProps.disabled
+  }, function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item[0],
+      textValue: "+".concat(item[1].phone.split(',')[0])
+    }, countryLabel(item[1]));
+  }), (0, _react2.jsx)(_.Box, {
+    sx: {
+      ml: '110px',
+      width: '100%',
+      visibility: fieldState.isOpen ? 'hidden' : undefined
+    }
+  }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
+    ref: inputRef
+  }, fieldControlInputProps, {
+    "aria-describedby": [helperText && helperTextId, fieldControlInputProps['aria-describedby']].join(fieldControlInputProps['aria-describedby'] ? ' ' : '') || undefined,
+    onChange: handlePhoneChange,
+    onPaste: handlePhonePaste
+  })))), helperText && (0, _react2.jsx)(_.FieldHelperText, {
+    status: status,
+    id: helperTextId
+  }, helperText));
+});
+PhoneNumberField.displayName = displayName;
+var _default = exports["default"] = PhoneNumberField;

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as PhoneNumberFieldStories from './PhoneNumberField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={PhoneNumberFieldStories} isTemplate />
+
+# PhoneNumberField
+
+The PhoneNumberField component combines a country selector with a phone number input, providing a complete, form-ready solution for collecting international phone numbers. The country selector is an accessible combo box that filters all countries from the `countries-list` package, and the phone input validates that only numeric characters (with an optional leading `+`) are entered.
+
+### Required components
+
+This component requires the following dependency to be present in the project:
+
+- **`countries-list ^2.6.1`** — provides the full list of countries and their dial codes used to populate the country selector dropdown.
+
+The `ComboBoxField` component (from the Astro design system) is used internally for the country selector. No additional external setup is needed beyond having `countries-list` installed.
+
+### Accessibility
+
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus between the country selector trigger and the phone number input, following the page tab sequence.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Arrow Down / Arrow Up', description: 'When the country selector dropdown is open, moves focus through the list of countries.' },
+  { key: 'Enter', description: 'Selects the currently focused country in the dropdown and closes the selector.' },
+  { key: 'Escape', description: 'Closes the country selector dropdown without changing the selection.' },
+]} screenReaderRows={[
+  'The phone number input uses the **`aria-labelledby`** attribute to reference the field label ID, associating the visible label with the input.',
+  'The country selector combo box uses the **`aria-label`** attribute (value: `"Country Picker"`) to provide an accessible name for the combo box trigger, since its visible content is the dial code rather than a descriptive label.',
+  'The **`aria-invalid`** attribute is set on the phone input when the field has an error status.',
+]} />

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.stories.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithHelpHint = exports.Warning = exports.Success = exports.Required = exports.ReadOnly = exports.Error = exports.Disabled = exports.Default = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks");
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
+var _statusProp = require("../../utils/docUtils/statusProp");
+var _PhoneNumberField = _interopRequireDefault(require("./PhoneNumberField.mdx"));
+var _react2 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _default = exports["default"] = {
+  title: 'Form/PhoneNumberField',
+  component: _index.PhoneNumberField,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PhoneNumberField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _objectSpread(_objectSpread(_objectSpread({}, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes)
+};
+var Default = exports.Default = function Default(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number"
+  }, args));
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.phoneNumberField["default"]
+  }
+};
+var Controlled = exports.Controlled = function Controlled() {
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    countryValue = _useState4[0],
+    setCountryValue = _useState4[1];
+  return (0, _react2.jsx)(_index.PhoneNumberField, {
+    label: "Phone Number",
+    value: value,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    countryValue: countryValue,
+    onCountryChange: function onCountryChange(key) {
+      return setCountryValue(key);
+    }
+  });
+};
+var Disabled = exports.Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    isDisabled: true
+  }, args));
+};
+var ReadOnly = exports.ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    isReadOnly: true,
+    defaultCountryValue: "US",
+    value: "2025550177"
+  }, args));
+};
+var Required = exports.Required = function Required(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    isRequired: true
+  }, args));
+};
+var Error = exports.Error = function Error(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    status: "error",
+    helperText: "Please enter a valid phone number."
+  }, args));
+};
+var Warning = exports.Warning = function Warning(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    status: "warning",
+    helperText: "Double-check the country code."
+  }, args));
+};
+Warning.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
+var Success = exports.Success = function Success(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    status: "success",
+    helperText: "Phone number verified."
+  }, args));
+};
+var WithHelpHint = exports.WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
+    label: "Phone Number",
+    hintText: "Include country code for international numbers.",
+    helpHintProps: {
+      direction: 'right'
+    }
+  }, args));
+};

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.test.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmitTest");
+var _ = _interopRequireDefault(require("."));
+var _react3 = require("@emotion/react");
+var testId = 'test-phone-number-field';
+var testLabel = 'Test Label';
+var defaultProps = {
+  'data-testid': testId,
+  label: testLabel
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+(0, _universalFormSubmitTest.universalFieldComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
+  },
+  testValue: '+12345678',
+  testLabel: testLabel,
+  componentType: 'PhoneNumberField'
+});
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+test('default render has label, phone input, and country combobox', function () {
+  getComponent();
+  expect(_react2.screen.getByTestId(testId)).toBeInTheDocument();
+  expect(_react2.screen.getByText(testLabel)).toBeInstanceOf(HTMLLabelElement);
+  expect(_react2.screen.getByRole('textbox')).toBeInTheDocument();
+  expect(_react2.screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('typing a non-numeric character does not update phone input value', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: 'a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('typing a "+" character is accepted', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: '+'
+    }
+  });
+  expect(phoneInput).toHaveValue('+');
+});
+test('typing "+" followed by digits is valid', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: '+123'
+    }
+  });
+  expect(phoneInput).toHaveValue('+123');
+});
+test('typing "+" followed by a letter is not accepted', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: '+a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('pasting a string with spaces and dashes strips non-numeric characters and dial code', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  var pasteEvent = _react2.createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '+1 (800) 555-1234';
+      }
+    }
+  });
+  (0, _react2.fireEvent)(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('pasting a string without leading "+" strips all non-numeric characters', function () {
+  getComponent();
+  var phoneInput = _react2.screen.getByRole('textbox');
+  var pasteEvent = _react2.createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '800-555-1234';
+      }
+    }
+  });
+  (0, _react2.fireEvent)(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('onChange callback is called with a valid phone number change', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: '+12345678'
+    }
+  });
+  expect(onChange).toHaveBeenCalled();
+});
+test('onChange callback is not called when an invalid character is typed', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = _react2.screen.getByRole('textbox');
+  _react2.fireEvent.change(phoneInput, {
+    target: {
+      value: 'abc'
+    }
+  });
+  expect(onChange).not.toHaveBeenCalled();
+});
+test('isDisabled disables the phone input', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var phoneInput = _react2.screen.getByRole('textbox');
+  expect(phoneInput).toBeDisabled();
+});
+test('helperText renders FieldHelperText content', function () {
+  var helperText = 'Enter your phone number';
+  getComponent({
+    helperText: helperText
+  });
+  expect(_react2.screen.getByText(helperText)).toBeInTheDocument();
+});
+test('controlled countryValue sets initial selected country', function () {
+  getComponent({
+    countryValue: 'US'
+  });
+  var phoneInput = _react2.screen.getByRole('textbox');
+  expect(phoneInput).toBeInTheDocument();
+  // The combobox should be present and the phone input available
+  expect(_react2.screen.getByRole('combobox')).toBeInTheDocument();
+});

package/lib/cjs/components/PhoneNumberField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './PhoneNumberField';

package/lib/cjs/components/PhoneNumberField/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _PhoneNumberField["default"];
+  }
+});
+var _PhoneNumberField = _interopRequireDefault(require("./PhoneNumberField"));

package/lib/cjs/index.d.ts

@@ -148,6 +148,8 @@ export { default as PanelHeaderMenu } from './components/PanelHeader/controls/Pa
 export { default as PanelHeaderSwitchField } from './components/PanelHeader/controls/PanelHeaderSwitchField';
 export { default as PasswordField } from './components/PasswordField';
 export * from './components/PasswordField';
+export { default as PhoneNumberField } from './components/PhoneNumberField';
+export * from './components/PhoneNumberField';
 export { default as PopoverContainer } from './components/PopoverContainer';
 export * from './components/PopoverContainer';
 export { default as PopoverMenu } from './components/PopoverMenu';