@availity/phone 2.1.4 → 2.2.1

package/CHANGELOG.md

@@ -2,6 +2,48 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.2.1](https://github.com/Availity/availity-react/compare/@availity/phone@2.2.0...@availity/phone@2.2.1) (2024-08-22)
+
+
+
+# 1.0.0 (2024-08-22)
+
+
+### Bug Fixes
+
+* **phone:** remove yup.number validation method, remove async from test ([b346896](https://github.com/Availity/availity-react/commit/b346896414fc71c208be4f39cf6ac77412c5fea0))
+* **phone:** typings for PhoneProps and ExtensionProps should extend FieldProps ([cdd467b](https://github.com/Availity/availity-react/commit/cdd467b3158dead419c3bfa6f551e5badf6edf3c))
+* **phone:** update types ([30c7fc8](https://github.com/Availity/availity-react/commit/30c7fc885b1b91b04a5153fbf796e8c136692be4))
+* upgrade yup and update sb stories ([68aeafe](https://github.com/Availity/availity-react/commit/68aeafe4fd7d90d7c88dbb24636ba7770fe87aa3))
+
+
+* feat(phone)!: upgrade to yup 0.32.0 ([dadde41](https://github.com/Availity/availity-react/commit/dadde41e7535ee444a0737a7ba31d5467a34133f))
+
+
+### Features
+
+* **form:** add currency input ([fa9eea6](https://github.com/Availity/availity-react/commit/fa9eea6a3b3dd2ef741a0658c102e36c6db5288c))
+* move storybook, stories, and fix hmr ([2f65f71](https://github.com/Availity/availity-react/commit/2f65f71769d2d981e22700b87a09516833588f64))
+* **phone:** add types ([b5cf0e6](https://github.com/Availity/availity-react/commit/b5cf0e62871266cc2e5689258912b1ba533bceb5))
+* **phone:** initial commit for phone package ([76b7227](https://github.com/Availity/availity-react/commit/76b7227adee750265daa4e65486606d102a1e5c2))
+* **phone:** initial format value ([#1447](https://github.com/Availity/availity-react/issues/1447)) ([3398a65](https://github.com/Availity/availity-react/commit/3398a65973bc46152ccd302f14b458e0af4d59d1))
+
+
+### BREAKING CHANGES
+
+* must be using yup 0.32.0
+
+
+
+# [2.2.0](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.4...@availity/phone@2.2.0) (2024-08-01)
+
+
+### Features
+
+* **phone:** initial format value ([#1447](https://github.com/Availity/availity-react/issues/1447)) ([3398a65](https://github.com/Availity/availity-react/commit/3398a65973bc46152ccd302f14b458e0af4d59d1))
+
+
+
 ## [2.1.4](https://github.com/Availity/availity-react/compare/@availity/phone@2.1.3...@availity/phone@2.1.4) (2023-10-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/phone",
-  "version": "2.1.4",
+  "version": "2.2.1",
   "description": "Availity Phone component using Formik and Yup",
   "keywords": [
     "availity",
@@ -25,14 +25,14 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.44",
+    "libphonenumber-js": "^1.11.5",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@availity/form": "1.7.5",
-    "formik": "^2.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@availity/form": "1.9.2",
+    "formik": "^2.4.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "reactstrap": "^8.10.1",
     "yup": "^0.32.11"
   },

package/project.json

@@ -1,26 +1,28 @@
 {
-  "root": "packages/phone",
+  "name": "@availity/phone",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["coverage/phone"],
-      "options": { "jestConfig": "packages/phone/jest.config.js", "passWithNoTests": true }
+      "outputs": ["{workspaceRoot}/coverage/phone"],
+      "options": {
+        "jestConfig": "packages/phone/jest.config.js"
+      }
     },
     "version": {
       "executor": "@jscutlery/semver:version",
       "options": {
         "preset": "angular",
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
-        "tagPrefix": "@availity/{projectName}@",
+        "tagPrefix": "{projectName}@",
         "baseBranch": "master"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "eslintConfig": ".eslintrc.yaml",
-        "lintFilePatterns": ["packages/phone/**/*.{js,ts}"],
         "silent": false,
         "fix": false,
         "cache": true,

package/src/Phone.d.ts

@@ -13,6 +13,7 @@ export interface PhoneProps extends FieldProps {
   showExtension?: boolean;
   phoneColProps?: object;
   extProps?: ExtensionProps;
+  formatInitialValue?: boolean;
 }
 
 declare const Phone: (props: PhoneProps) => JSX.Element;

package/src/Phone.js

@@ -1,12 +1,21 @@
-import React from 'react';
+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';
 
-const Phone = ({ name, label, country = 'US', showExtension = false, extProps, phoneColProps, ...restPhoneProps }) => {
-  const { setFieldValue, setFieldTouched } = useFormikContext();
+const Phone = ({
+  name,
+  label,
+  country = 'US',
+  showExtension = false,
+  extProps,
+  phoneColProps,
+  formatInitialValue,
+  ...restPhoneProps
+}) => {
+  const { setFieldValue, setFieldTouched, values } = useFormikContext();
 
   let ext = null;
   if (showExtension) {
@@ -27,6 +36,13 @@ const Phone = ({ name, label, country = 'US', showExtension = false, extProps, p
     return asYouType.formattedOutput;
   };
 
+  useEffect(() => {
+    if (formatInitialValue) {
+      setFieldValue(name, asYouFormat(values[name]), false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const formatPhoneOnBlur = ({ target: { value } }) => {
     setFieldValue(name, asYouFormat(value), true);
     setFieldTouched(name, true, true);
@@ -60,6 +76,8 @@ Phone.propTypes = {
   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,
 };
 
 export default Phone;