@availity/phone 2.2.6 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+# [3.0.0](https://github.com/Availity/availity-react/compare/@availity/phone@2.2.6...@availity/phone@3.0.0) (2026-06-12)
+
+### Dependency Updates
+
+* `@availity/form` updated to version `2.2.6`
+
+* feat(phone)!: migrate to ESM exports and vitest ([8542c94](https://github.com/Availity/availity-react/commit/8542c94d7322c8ec81baa1fc332cb1265d53bdcf))
+
+
+### BREAKING CHANGES
+
+* Package now uses ESM exports field. CJS require() is no longer supported.
+
+
+
 ## [2.2.6](https://github.com/Availity/availity-react/compare/@availity/phone@2.2.5...@availity/phone@2.2.6) (2025-12-03)
 
 

package/README.md

@@ -1,5 +1,11 @@
 # @availity/phone
 
+## ⚠️ Deprecated
+
+This package is deprecated and no longer actively maintained. Future updates are not guaranteed. We recommend migrating to [`@availity/element`](https://availity.github.io/element).
+
+---
+
 > Availity Phone component using Formik and Yup
 
 [![Version](https://img.shields.io/npm/v/@availity/phone.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/phone)

package/dist/index.js

@@ -0,0 +1,90 @@
+// src/Phone.jsx
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { Field } from "@availity/form";
+import { useFormikContext } from "formik";
+import { AsYouType } from "libphonenumber-js";
+import { Row, Col } from "reactstrap";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Phone = ({
+  name,
+  label,
+  country = "US",
+  showExtension = false,
+  extProps,
+  phoneColProps,
+  formatInitialValue,
+  ...restPhoneProps
+}) => {
+  const { setFieldValue, setFieldTouched, values } = useFormikContext();
+  let ext = null;
+  if (showExtension) {
+    const { name: name2, label: label2, extColProps, ...restExtProps } = extProps;
+    ext = /* @__PURE__ */ jsx(Col, { ...extColProps, children: /* @__PURE__ */ jsx(Field, { name: name2, label: label2, ...restExtProps }) });
+  }
+  const asYouFormat = (phoneString) => {
+    const asYouType = new AsYouType(country);
+    asYouType.input(phoneString);
+    return asYouType.formattedOutput;
+  };
+  useEffect(() => {
+    if (formatInitialValue) {
+      setFieldValue(name, asYouFormat(values[name]), false);
+    }
+  }, []);
+  const formatPhoneOnBlur = ({ target: { value } }) => {
+    setFieldValue(name, asYouFormat(value), true);
+    setFieldTouched(name, true, true);
+  };
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Col, { xs: showExtension ? 10 : 12, ...phoneColProps, children: /* @__PURE__ */ jsx(Field, { name, label, onBlur: formatPhoneOnBlur, ...restPhoneProps }) }),
+    ext
+  ] });
+};
+Phone.propTypes = {
+  /** Identifies the field and matches the validation schema. */
+  name: PropTypes.string.isRequired,
+  /** Used to pass props to the extension field when it is enabled. */
+  extProps: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    /** Used to control props on `<Col />` for the extension field, if needed. The extension column has no default size value, so it's default will effectively be size: { 12 - phoneColSize } unless otherwise specified. */
+    extColProps: PropTypes.object
+  }),
+  /** Displays a Reactstrap `<Label />` for the field. */
+  label: PropTypes.string,
+  /** Enable the phone extension field. */
+  showExtension: PropTypes.bool,
+  /** Default country for parsing national numbers. [This is the two letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2). */
+  country: PropTypes.string,
+  /** Used to control props on the `<Col />` for the phone field, if needed. The phone column defaults to xs: { size: 12 } when not rendering an extension field, and defaults to xs: { size: 10 } when rendering an extension field. */
+  phoneColProps: PropTypes.object,
+  /** When true, when the field is first rendered, it will trigger the formatter to update the value. */
+  formatInitialValue: PropTypes.bool
+};
+var Phone_default = Phone;
+
+// src/validatePhone.js
+import { addMethod, string } from "yup";
+import { AsYouType as AsYouType2 } from "libphonenumber-js";
+function validatePhone(msg, strict = false, country = "US") {
+  return this.test({
+    name: "validatePhone",
+    exclusive: true,
+    message: msg || "This field is invalid.",
+    test(phoneValue) {
+      if (!phoneValue) return true;
+      const asYouType = new AsYouType2(country);
+      asYouType.input(phoneValue);
+      if (strict) {
+        return asYouType.getNumber() && asYouType.getNumber().isValid();
+      }
+      return asYouType.getNumber() && asYouType.getNumber().isPossible();
+    }
+  });
+}
+addMethod(string, "validatePhone", validatePhone);
+export {
+  Phone_default as Phone,
+  validatePhone
+};

package/index.js

@@ -1,2 +1,2 @@
-export { default as Phone } from './src/Phone';
-export { default as validatePhone } from './src/validatePhone';
+export { default as Phone } from './src/Phone.jsx';
+export { default as validatePhone } from './src/validatePhone.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/phone",
-  "version": "2.2.6",
+  "version": "3.0.0",
   "description": "Availity Phone component using Formik and Yup",
   "keywords": [
     "availity",
@@ -17,27 +17,30 @@
     "directory": "packages/phone"
   },
   "license": "MIT",
+  "type": "module",
   "author": "Christopher Havekost <Christopher.Havekost@availity.com>",
-  "main": "index.js",
-  "types": "index.d.ts",
   "scripts": {
+    "build": "tsup index.js --format esm --clean --dts",
+    "dev": "tsup index.js --format esm --watch --dts",
+    "clean": "rm -rf dist",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.12.6",
+    "libphonenumber-js": "^1.13.6",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@availity/form": "1.10.6",
-    "formik": "^2.4.6",
+    "@availity/form": "2.0.0",
+    "formik": "^2.4.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reactstrap": "^8.10.1",
+    "tsup": "^8.5.1",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "@availity/form": "1.10.6",
+    "@availity/form": "2.0.0",
     "formik": "^2.4.6",
     "react": "^18.0.0",
     "reactstrap": "^8.10.1",
@@ -45,5 +48,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "exports": {
+    ".": {
+      "source": "./index.js",
+      "import": {
+        "types": "./index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
   }
 }

package/project.json

@@ -4,10 +4,15 @@
   "projectType": "library",
   "targets": {
     "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/phone"],
+      "executor": "nx:run-commands",
       "options": {
-        "jestConfig": "packages/phone/jest.config.js"
+        "command": "vitest run --project=phone",
+        "cwd": "."
+      },
+      "configurations": {
+        "ci": {
+          "command": "vitest run --project=phone --coverage"
+        }
       }
     },
     "version": {
@@ -16,7 +21,8 @@
         "preset": "angular",
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
         "tagPrefix": "{projectName}@",
-        "baseBranch": "master"
+        "baseBranch": "master",
+        "trackDeps": true
       }
     },
     "lint": {
@@ -33,6 +39,12 @@
         "hasTypeAwareRules": true,
         "cacheStrategy": "metadata"
       }
+    },
+    "build": {
+      "command": "tsup index.js --format esm",
+      "options": {
+        "cwd": "packages/phone"
+      }
     }
   }
 }

package/tests/Phone.test.jsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import * as yup from 'yup';
+import '../src/validatePhone';
+import { render, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { Form } from '@availity/form';
+import { Phone } from '../index.js';
+
+const phoneProps = {
+  name: 'test_phone',
+  id: 'test_phone',
+  title: 'Please enter number in the following format: 201-555-0123',
+  label: 'AvPhone',
+  // showExtension: true,
+  phoneColProps: {
+    xs: { size: 9 },
+  },
+  extProps: {
+    name: 'test-ext',
+    id: 'test-ext',
+    label: 'Ext.',
+    extColProps: {
+      xs: { size: 3 },
+    },
+  },
+};
+
+const renderPhone = (props, strictValidation = false, initialPhoneValue = '201') => {
+  const Component = () => (
+    <Form
+      initialValues={{
+        test_phone: initialPhoneValue,
+      }}
+      onSubmit={() => {}}
+      validationSchema={yup.object().shape({
+        test_phone: yup.string().validatePhone('This field is invalid', strictValidation),
+      })}
+    >
+      <Phone name="test_phone" {...props} />
+    </Form>
+  );
+  return render(<Component />);
+};
+
+describe('Phone', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('Should render extension field', async () => {
+    const { getByText } = renderPhone({
+      ...phoneProps,
+      showExtension: true,
+    });
+
+    await expect(getByText('Ext.')).toBeDefined();
+  });
+
+  test('Should format valid phone number when it initializes', async () => {
+    const { getByDisplayValue } = renderPhone({ ...phoneProps, formatInitialValue: true }, false, '2015550123');
+
+    await expect(getByDisplayValue('(201) 555-0123')).toBeDefined();
+  });
+
+  test('Should format valid phone number', async () => {
+    const { getByDisplayValue } = renderPhone(phoneProps);
+    const testPhoneInput = getByDisplayValue('201');
+
+    // Set value
+    await fireEvent.change(testPhoneInput, {
+      target: {
+        name: 'test_phone',
+        value: '2015550123',
+      },
+    });
+
+    // Formatter runs onBlur for screen reader friendliness
+    await fireEvent.blur(testPhoneInput);
+
+    await expect(getByDisplayValue('(201) 555-0123')).toBeDefined();
+  });
+
+  test('Should format partial phone number', async () => {
+    const { getByDisplayValue } = renderPhone(phoneProps);
+    const testPhoneInput = getByDisplayValue('201');
+
+    await fireEvent.change(testPhoneInput, {
+      target: {
+        name: 'test_phone',
+        value: '20155501',
+      },
+    });
+
+    await fireEvent.blur(testPhoneInput);
+
+    await expect(getByDisplayValue('(201) 555-01')).toBeDefined();
+  });
+
+  test('Should not format invalid phone number', async () => {
+    const { getByDisplayValue } = renderPhone(phoneProps);
+    const testPhoneInput = getByDisplayValue('201');
+
+    await fireEvent.change(testPhoneInput, {
+      target: {
+        name: 'test_phone',
+        value: '22233344445',
+      },
+    });
+
+    await fireEvent.blur(testPhoneInput);
+
+    await expect(getByDisplayValue('22233344445')).toBeDefined();
+  });
+
+  test('Should render error message with strict validation', async () => {
+    const { getByDisplayValue, getByText } = renderPhone(phoneProps, true);
+    const testPhoneInput = getByDisplayValue('201');
+
+    await fireEvent.change(testPhoneInput, {
+      target: {
+        name: 'test_phone',
+        value: '2223334444',
+      },
+    });
+
+    await fireEvent.blur(testPhoneInput);
+
+    await waitFor(() => {
+      expect(testPhoneInput.className).toContain('is-touched');
+      expect(testPhoneInput.className).toContain('is-invalid');
+      expect(getByDisplayValue('(222) 333-4444')).toBeDefined();
+      expect(getByText('This field is invalid')).toBeDefined();
+    });
+  });
+
+  test('Should not render error message with default lax validation', async () => {
+    const { getByDisplayValue } = renderPhone(phoneProps);
+    const testPhoneInput = getByDisplayValue('201');
+
+    await fireEvent.change(testPhoneInput, {
+      target: {
+        name: 'test_phone',
+        value: '2223334444',
+      },
+    });
+
+    await fireEvent.blur(testPhoneInput);
+
+    await waitFor(() => {
+      expect(testPhoneInput.className).toContain('is-touched');
+      expect(testPhoneInput.className).toContain('av-valid');
+      expect(getByDisplayValue('(222) 333-4444')).toBeDefined();
+    });
+  });
+});

package/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineProject } from 'vitest/config';
+
+export default defineProject({
+  test: {
+    name: 'phone',
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['../../vitest.setup.ts'],
+    include: ['src/**/*.test.{ts,tsx,js,jsx}', 'tests/**/*.test.{ts,tsx,js,jsx}'],
+    env: { TZ: 'UTC' },
+    server: {
+      deps: {
+        inline: [/lodash/, /@availity\/yup/],
+      },
+    },
+  },
+});

package/jest.config.js

@@ -1,7 +0,0 @@
-const global = require('../../jest/global-config');
-
-module.exports = {
-  ...global,
-  displayName: 'phone',
-  coverageDirectory: '../../coverage/phone',
-};

package/tsconfig.spec.json

@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
-    "types": ["jest", "node", "@testing-library/jest-dom"],
-    "allowJs": true
-  },
-  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
-}