envoc-form 4.1.0 → 5.0.2

package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap

@@ -95,28 +95,26 @@ exports[`AddressInput has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container css-dlobye-Component"
+            class="react-select__value-container css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-3-placeholder"
             >
               State
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-3-listbox"
                 aria-describedby="react-select-3-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-3-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -135,11 +133,11 @@ exports[`AddressInput has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"

package/src/Input/PhoneNumberInputGroup.tsx

@@ -0,0 +1,45 @@
+import React, { LegacyRef } from 'react';
+import classNames from 'classnames';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+import { phoneNumber } from '../Normalization/normalizers';
+
+export interface PhoneNumberInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {}
+function PhoneNumberInputGroup(
+  { className, ...rest }: PhoneNumberInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+  return (
+    <InputGroup
+      ref={ref}
+      autoComplete="tel-national"
+      {...rest}
+      type="text"
+      className={classNames(
+        className,
+        FormDefaults.cssClassPrefix + 'phone-number-group'
+      )}
+      value={input.value ?? ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(phoneNumber(e.target.value));
+        }
+      }}
+    />
+  );
+}
+/**A standard phone number input. Will display to the user in `+XXX XXX-XXX-XXXX` format as the number is being inputted.
+ * The data will get sent in the same format as displayed. Uses `normalizers.phoneNumber`.
+ * @default autoComplete="tel-national"
+ */
+const PhoneNumberInputGroupWithRef = React.forwardRef(
+  PhoneNumberInputGroup
+) as React.ComponentType<PhoneNumberInputGroupProps>;
+export default PhoneNumberInputGroupWithRef;

package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import FormTestBase from '../../__Tests__/FormTestBase';
+import PhoneNumberInputGroup from '../PhoneNumberInputGroup';
+
+describe('PhoneNumberInputGroup', () => {
+  it('renders without crashing', () => {
+    render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+  });
+  it('has matching snapshot', () => {
+    const renderResult = render(
+      <FormTestBase>
+        {({ Field }) => (
+          <Field
+            name="phoneNumber"
+            Component={PhoneNumberInputGroup}
+            label="Phone Number"
+            className="something-here"
+          />
+        )}
+      </FormTestBase>
+    );
+    expect(renderResult.asFragment()).toMatchSnapshot();
+  });
+});

package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PhoneNumberInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="something-here envoc-form-phone-number-group envoc-form-input-group envoc-form-group"
+    >
+      <div
+        id="phonenumber-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="phoneNumber"
+      >
+        Phone Number
+      </label>
+      <input
+        aria-invalid="false"
+        autocomplete="tel-national"
+        class="something-here envoc-form-phone-number-group envoc-form-input-group"
+        id="phoneNumber"
+        name="phoneNumber"
+        type="text"
+        value=""
+      />
+    </div>
+  </form>
+</DocumentFragment>
+`;

package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap

@@ -32,28 +32,26 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container css-dlobye-Component"
+            class="react-select__value-container css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-3-placeholder"
             >
               Select...
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-3-listbox"
                 aria-describedby="react-select-3-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-3-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -72,11 +70,11 @@ exports[`BooleanSelectGroup has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"

package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap

@@ -32,28 +32,26 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container react-select__value-container--is-multi css-dlobye-Component"
+            class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-5-placeholder"
             >
               Select...
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-5-listbox"
                 aria-describedby="react-select-5-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-5-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -72,11 +70,11 @@ exports[`MultiNumberSelectGroup has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"
@@ -131,28 +129,26 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container css-dlobye-Component"
+            class="react-select__value-container css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-3-placeholder"
             >
               Select...
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-3-listbox"
                 aria-describedby="react-select-3-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-3-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -171,11 +167,11 @@ exports[`SingleNumberSelectGroup has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"

package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap

@@ -32,28 +32,26 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container react-select__value-container--is-multi css-dlobye-Component"
+            class="react-select__value-container react-select__value-container--is-multi css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-5-placeholder"
             >
               Select...
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-5-listbox"
                 aria-describedby="react-select-5-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-5-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -72,11 +70,11 @@ exports[`MultiStringSelectGroup has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"
@@ -131,28 +129,26 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
           class="css-1f43avz-a11yText-A11yText"
         />
         <div
-          class="react-select__control css-1s2u09g-control"
+          class="react-select__control css-13cymwt-control"
         >
           <div
-            class="react-select__value-container css-dlobye-Component"
+            class="react-select__value-container css-16674sh-Component"
           >
             <div
-              class="react-select__placeholder css-14el2xx-placeholder"
+              class="react-select__placeholder css-1jqq78o-placeholder"
               id="react-select-3-placeholder"
             >
               Select...
             </div>
             <div
-              class="react-select__input-container css-1u4kn00-Component"
+              class="react-select__input-container css-d9r47t-Component"
               data-value=""
             >
               <input
                 aria-autocomplete="list"
-                aria-controls="react-select-3-listbox"
                 aria-describedby="react-select-3-placeholder"
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-owns="react-select-3-listbox"
                 autocapitalize="none"
                 autocomplete="off"
                 autocorrect="off"
@@ -171,11 +167,11 @@ exports[`SingleStringSelectGroup has matching snapshot 1`] = `
             class="react-select__indicators css-ny0e4k-Component"
           >
             <span
-              class="react-select__indicator-separator css-1okebmr-indicatorSeparator"
+              class="react-select__indicator-separator css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class="react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer"
+              class="react-select__indicator react-select__dropdown-indicator css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"

package/src/index.ts

@@ -92,6 +92,9 @@ export type { MoneyInputGroupProps } from './Input/MoneyInputGroup';
 export { default as NumberInputGroup } from './Input/NumberInputGroup';
 export type { NumberInputGroupProps } from './Input/NumberInputGroup';
 
+export { default as PhoneNumberInputGroup } from './Input/PhoneNumberInputGroup';
+export type { PhoneNumberInputGroupProps } from './Input/PhoneNumberInputGroup';
+
 export { default as StringInputGroup } from './Input/StringInputGroup';
 export type { StringInputGroupProps } from './Input/StringInputGroup';
 

package/src/utils/objectToFormData.test.tsx

@@ -10,7 +10,7 @@ const options = {
 const formDataAppend = global.FormData.prototype.append;
 
 beforeEach(() => {
-  global.FormData.prototype.append = jest.fn(formDataAppend);
+  global.FormData.prototype.append = jest.fn(formDataAppend) as any;
 });
 
 describe('Object To Form Data', () => {