@availity/phone 1.1.21 → 1.1.22

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.1.22 (2021-09-28)
+
+**Note:** Version bump only for package @availity/phone
+
+
+
+
+
 ## 1.1.21 (2021-06-01)
 
 **Note:** Version bump only for package @availity/phone

package/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Phone } from './types/Phone';
+export * from './types/Phone';

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@availity/phone",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "description": "Availity Phone component using Formik and Yup",
   "main": "index.js",
+  "types": "index.d.ts",
   "keywords": [],
   "author": "Christopher Havekost <Christopher.Havekost@availity.com>",
   "license": "MIT",
@@ -14,19 +15,19 @@
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@availity/form": "^0.7.1",
     "formik": "^2.2.8",
-    "libphonenumber-js": "^1.9.18",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "reactstrap": "^8.9.0",
     "yup": "^0.30.0"
   },
   "peerDependencies": {
+    "@availity/form": "^0.7.0",
     "formik": "^2.0.1",
-    "libphonenumber-js": "^1.7.38",
     "react": ">=16.8.3",
     "reactstrap": "^8.4.1",
     "yup": "^0.28.1"
   },
-  "gitHead": "18ff8f4f0206e04a8b71cfc90d00ad65d2f200c6"
+  "gitHead": "cbd7f7edc581a61f6cc9258f00946d3098c51eef"
 }

package/src/Phone.js

@@ -5,15 +5,7 @@ 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 Phone = ({ name, label, country = 'US', showExtension = false, extProps, phoneColProps, ...restPhoneProps }) => {
   const { setFieldValue, setFieldTouched } = useFormikContext();
 
   let ext = null;
@@ -43,12 +35,7 @@ const Phone = ({
   return (
     <Row>
       <Col xs={showExtension ? 10 : 12} {...phoneColProps}>
-        <Field
-          name={name}
-          label={label}
-          onBlur={formatPhoneOnBlur}
-          {...restPhoneProps}
-        />
+        <Field name={name} label={label} onBlur={formatPhoneOnBlur} {...restPhoneProps} />
       </Col>
       {ext}
     </Row>

package/{typings → types}/Phone.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { FieldProps } from '@availity/form/typings/Field';
+import { FieldProps } from '@availity/form/types/Field';
 
 interface ExtensionProps extends FieldProps {
   name: string;
   id?: string;
   extColProps?: object;
 }
+
 export interface PhoneProps extends FieldProps {
   name: string;
   id?: string;
@@ -14,6 +15,6 @@ export interface PhoneProps extends FieldProps {
   extProps?: ExtensionProps;
 }
 
-declare const Phone: React.FunctionComponent<PhoneProps>;
+declare const Phone: React.FC<PhoneProps>;
 
 export default Phone;

package/tests/Phone.test.js

@@ -1,150 +0,0 @@
-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 '..';
-
-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) => {
-  const Component = () => (
-    <Form
-      initialValues={{
-        test_phone: '201',
-      }}
-      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', 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/typings/index.d.ts

@@ -1,3 +0,0 @@
-import Phone from './Phone';
-
-export default Phone;