envoc-form 5.0.1 → 5.0.2

package/README.md

@@ -2052,6 +2052,120 @@ ___
 packages/envoc-form/src/utils/objectToFormData.ts:20
 
 
+<a name="interfacesphonenumberinputgrouppropsmd"></a>
+
+[envoc-form](#readmemd) / [Exports](#modulesmd) / PhoneNumberInputGroupProps
+
+## Interface: PhoneNumberInputGroupProps
+
+### Hierarchy
+
+- `Omit`<[`InputGroupProps`](#interfacesinputgrouppropsmd)<`string` \| `undefined` \| ``null``\>, ``"onChange"`` \| ``"type"`` \| ``"value"``\>
+
+  ↳ **`PhoneNumberInputGroupProps`**
+
+### Table of contents
+
+#### Properties
+
+- [className](#classname)
+- [helpText](#helptext)
+- [icon](#icon)
+- [input](#input)
+- [label](#label)
+- [meta](#meta)
+
+### Properties
+
+#### className
+
+• `Optional` **className**: `string`
+
+Extra class names to apply.
+
+##### Inherited from
+
+Omit.className
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:8
+
+___
+
+#### helpText
+
+• `Optional` **helpText**: `ReactNode`
+
+Simple helper text after the input.
+
+##### Inherited from
+
+Omit.helpText
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:16
+
+___
+
+#### icon
+
+• `Optional` **icon**: `ReactNode`
+
+##### Inherited from
+
+Omit.icon
+
+##### Defined in
+
+packages/envoc-form/src/Input/InputGroup.tsx:20
+
+___
+
+#### input
+
+• **input**: `CustomFieldInputProps`<`undefined` \| ``null`` \| `string`\>
+
+##### Inherited from
+
+Omit.input
+
+##### Defined in
+
+packages/envoc-form/src/Field/InjectedFieldProps.ts:6
+
+___
+
+#### label
+
+• `Optional` **label**: `string`
+
+Simple text label before the input.
+
+##### Inherited from
+
+Omit.label
+
+##### Defined in
+
+packages/envoc-form/src/Group.tsx:13
+
+___
+
+#### meta
+
+• **meta**: `CustomFieldMetaProps`<`undefined` \| ``null`` \| `string`\>
+
+##### Inherited from
+
+Omit.meta
+
+##### Defined in
+
+packages/envoc-form/src/Field/InjectedFieldProps.ts:7
+
+
 <a name="interfacesselectgrouppropsmd"></a>
 
 [envoc-form](#readmemd) / [Exports](#modulesmd) / SelectGroupProps
@@ -3623,6 +3737,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
 - [NormalizationFunction](#interfacesnormalizationfunctionmd)
 - [NumberInputGroupProps](#interfacesnumberinputgrouppropsmd)
 - [ObjectToFormDataCfgProps](#interfacesobjecttoformdatacfgpropsmd)
+- [PhoneNumberInputGroupProps](#interfacesphonenumberinputgrouppropsmd)
 - [SelectGroupProps](#interfacesselectgrouppropsmd)
 - [SelectGroupPropsHelper](#interfacesselectgrouppropshelpermd)
 - [SelectOption](#interfacesselectoptionmd)
@@ -3659,6 +3774,7 @@ packages/envoc-form/src/Field/useStandardField.ts:18
 - [FormDefaults](#formdefaults)
 - [IconInputGroup](#iconinputgroup)
 - [NumberInputGroup](#numberinputgroup)
+- [PhoneNumberInputGroup](#phonenumberinputgroup)
 - [ServerErrorContext](#servererrorcontext)
 - [StringInputGroup](#stringinputgroup)
 - [TextAreaGroup](#textareagroup)
@@ -3912,6 +4028,25 @@ packages/envoc-form/src/Input/NumberInputGroup.tsx:44
 
 ___
 
+### PhoneNumberInputGroup
+
+• `Const` **PhoneNumberInputGroup**: `ComponentType`<[`PhoneNumberInputGroupProps`](#interfacesphonenumberinputgrouppropsmd)\>
+
+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`**
+
+```ts
+autoComplete="tel-national"
+```
+
+#### Defined in
+
+packages/envoc-form/src/Input/PhoneNumberInputGroup.tsx:42
+
+___
+
 ### ServerErrorContext
 
 • `Const` **ServerErrorContext**: `Context`<[`ServerErrorContextProps`](#interfacesservererrorcontextpropsmd)\>

package/es/Input/PhoneNumberInputGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface PhoneNumberInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | '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"
+ */
+declare const PhoneNumberInputGroupWithRef: React.ComponentType<PhoneNumberInputGroupProps>;
+export default PhoneNumberInputGroupWithRef;

package/es/Input/PhoneNumberInputGroup.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import classNames from 'classnames';
+import InputGroup from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+import { phoneNumber } from '../Normalization/normalizers';
+function PhoneNumberInputGroup(_a, ref) {
+    var _b;
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    var input = rest.input;
+    return (_jsx(InputGroup, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: classNames(className, FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (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"
+ */
+var PhoneNumberInputGroupWithRef = React.forwardRef(PhoneNumberInputGroup);
+export default PhoneNumberInputGroupWithRef;

package/es/index.d.ts

@@ -48,6 +48,8 @@ export { default as MoneyInputGroup } from './Input/MoneyInputGroup';
 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';
 export type { NormalizationFunction } from './Normalization/NormalizationFunction';

package/es/index.js

@@ -34,6 +34,7 @@ export { default as IconInputGroup } from './Input/IconInputGroup';
 export { default as InputGroup } from './Input/InputGroup';
 export { default as MoneyInputGroup } from './Input/MoneyInputGroup';
 export { default as NumberInputGroup } from './Input/NumberInputGroup';
+export { default as PhoneNumberInputGroup } from './Input/PhoneNumberInputGroup';
 export { default as StringInputGroup } from './Input/StringInputGroup';
 export * as normalizers from './Normalization/normalizers';
 // Select

package/lib/Input/PhoneNumberInputGroup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputGroupProps } from './InputGroup';
+export interface PhoneNumberInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | '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"
+ */
+declare const PhoneNumberInputGroupWithRef: React.ComponentType<PhoneNumberInputGroupProps>;
+export default PhoneNumberInputGroupWithRef;

package/lib/Input/PhoneNumberInputGroup.js

@@ -0,0 +1,52 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var InputGroup_1 = __importDefault(require("./InputGroup"));
+var FormDefaults_1 = require("../FormDefaults");
+var normalizers_1 = require("../Normalization/normalizers");
+function PhoneNumberInputGroup(_a, ref) {
+    var _b;
+    var className = _a.className, rest = __rest(_a, ["className"]);
+    var input = rest.input;
+    return ((0, jsx_runtime_1.jsx)(InputGroup_1.default, __assign({ ref: ref, autoComplete: "tel-national" }, rest, { type: "text", className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'phone-number-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+            if (!e.target.value) {
+                input.onChange(undefined);
+            }
+            else {
+                input.onChange((0, normalizers_1.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"
+ */
+var PhoneNumberInputGroupWithRef = react_1.default.forwardRef(PhoneNumberInputGroup);
+exports.default = PhoneNumberInputGroupWithRef;

package/lib/index.d.ts

@@ -48,6 +48,8 @@ export { default as MoneyInputGroup } from './Input/MoneyInputGroup';
 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';
 export type { NormalizationFunction } from './Normalization/NormalizationFunction';

package/lib/index.js

@@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
+exports.validators = exports.serialize = exports.objectContainsNonSerializableProperty = exports.TextAreaGroup = exports.SingleStringSelectGroup = exports.MultiStringSelectGroup = exports.SingleNumberSelectGroup = exports.MultiNumberSelectGroup = exports.BooleanSelectGroup = exports.SelectGroup = exports.normalizers = exports.StringInputGroup = exports.PhoneNumberInputGroup = exports.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.FormDefaults = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDateOnlyPickerGroup = exports.StringDatePickerGroup = exports.convertToTimeZoneInsensitiveISOString = exports.DatePickerGroup = exports.ConfirmDeleteForm = exports.ConfirmBaseForm = exports.SubmitFormButton = exports.AddressInput = void 0;
 // Address
 var AddressInput_1 = require("./AddressInput/AddressInput");
 Object.defineProperty(exports, "AddressInput", { enumerable: true, get: function () { return __importDefault(AddressInput_1).default; } });
@@ -91,6 +91,8 @@ var MoneyInputGroup_1 = require("./Input/MoneyInputGroup");
 Object.defineProperty(exports, "MoneyInputGroup", { enumerable: true, get: function () { return __importDefault(MoneyInputGroup_1).default; } });
 var NumberInputGroup_1 = require("./Input/NumberInputGroup");
 Object.defineProperty(exports, "NumberInputGroup", { enumerable: true, get: function () { return __importDefault(NumberInputGroup_1).default; } });
+var PhoneNumberInputGroup_1 = require("./Input/PhoneNumberInputGroup");
+Object.defineProperty(exports, "PhoneNumberInputGroup", { enumerable: true, get: function () { return __importDefault(PhoneNumberInputGroup_1).default; } });
 var StringInputGroup_1 = require("./Input/StringInputGroup");
 Object.defineProperty(exports, "StringInputGroup", { enumerable: true, get: function () { return __importDefault(StringInputGroup_1).default; } });
 exports.normalizers = __importStar(require("./Normalization/normalizers"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "envoc-form",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Envoc form components",
   "keywords": [
     "react-component",
@@ -38,7 +38,7 @@
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
-    "envoc-request": "^5.0.1",
+    "envoc-request": "^5.0.2",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",

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/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';