envoc-form 4.1.0 → 4.3.0

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/hooks/index.d.ts

@@ -0,0 +1,2 @@
+import useFormValue from './useFormValue';
+export { useFormValue };

package/lib/hooks/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormValue = void 0;
+var useFormValue_1 = __importDefault(require("./useFormValue"));
+exports.useFormValue = useFormValue_1.default;

package/lib/hooks/useFormValue.d.ts

@@ -0,0 +1,2 @@
+import { FormBuilderProp } from 'Form/Form';
+export default function useFormValue<TForm extends object, TPropKey extends keyof TForm>(formBuilder: FormBuilderProp<TForm>, fieldName: TPropKey): readonly [TForm[TPropKey], (value: TForm[TPropKey]) => void];

package/lib/hooks/useFormValue.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var formik_1 = require("formik");
+function useFormValue(formBuilder, fieldName) {
+    var _a = (0, formik_1.useFormikContext)(), values = _a.values, setFieldValue = _a.setFieldValue;
+    var setValue = (0, react_1.useCallback)(function (value) { return setFieldValue(fieldName, value); }, [fieldName, setFieldValue]);
+    return [values[fieldName], setValue];
+}
+exports.default = useFormValue;

package/lib/index.d.ts

@@ -14,6 +14,10 @@ export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerG
 export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
 export { default as StringDateOnlyPickerGroup } from './DatePicker/StringDateOnlyPickerGroup';
 export type { StringDateOnlyPickerGroupProps } from './DatePicker/StringDateOnlyPickerGroup';
+export { default as DateTimePickerGroup } from './DateTimePicker/DateTimePickerGroup';
+export type { DateTimePickerGroupProps } from './DateTimePicker/DateTimePickerGroup';
+export { default as StringDateTimePickerGroup } from './DateTimePicker/StringDateTimePickerGroup';
+export type { StringDateTimePickerGroupProps } from './DateTimePicker/StringDateTimePickerGroup';
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
 export type { RenderComponent } from './Field/Field';
@@ -48,6 +52,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.StringDateTimePickerGroup = exports.DateTimePickerGroup = 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; } });
@@ -51,6 +51,11 @@ var StringDatePickerGroup_1 = require("./DatePicker/StringDatePickerGroup");
 Object.defineProperty(exports, "StringDatePickerGroup", { enumerable: true, get: function () { return __importDefault(StringDatePickerGroup_1).default; } });
 var StringDateOnlyPickerGroup_1 = require("./DatePicker/StringDateOnlyPickerGroup");
 Object.defineProperty(exports, "StringDateOnlyPickerGroup", { enumerable: true, get: function () { return __importDefault(StringDateOnlyPickerGroup_1).default; } });
+// DateTime
+var DateTimePickerGroup_1 = require("./DateTimePicker/DateTimePickerGroup");
+Object.defineProperty(exports, "DateTimePickerGroup", { enumerable: true, get: function () { return __importDefault(DateTimePickerGroup_1).default; } });
+var StringDateTimePickerGroup_1 = require("./DateTimePicker/StringDateTimePickerGroup");
+Object.defineProperty(exports, "StringDateTimePickerGroup", { enumerable: true, get: function () { return __importDefault(StringDateTimePickerGroup_1).default; } });
 // Field
 var Field_1 = require("./Field/Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return __importDefault(Field_1).default; } });
@@ -91,6 +96,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": "4.1.0",
+  "version": "4.3.0",
   "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": "^4.1.0",
+    "envoc-request": "^4.3.0",
     "lru-cache": "^6.0.0",
     "prop-types": "^15.7.2",
     "react-date-picker": "^8.2.0",
@@ -53,7 +53,8 @@
     "uuid": "^8.3.2",
     "@fortawesome/react-fontawesome": "~0.1.16",
     "@fortawesome/free-solid-svg-icons": "~5.15.4",
-    "@fortawesome/fontawesome-svg-core": "~1.2.36"
+    "@fortawesome/fontawesome-svg-core": "~1.2.36",
+    "react-datetime-picker": "~5.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",
@@ -84,7 +85,7 @@
     "react-router-dom": "^6.14.1",
     "react-scripts": "^4.0.3",
     "rimraf": "~3.0.2",
-    "sass": "^1.35.2",
+    "sass": "^1.75.0",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "webpack": "^5.45.0",

package/src/DatePicker/DatePickerGroup.tsx

@@ -32,6 +32,8 @@ export default function DatePickerGroup<T>({
   required,
   disabled,
   convert,
+  maxDate = new Date(9999, 11, 31),
+  minDate = new Date(1000, 0, 1),
   ...rest
 }: DatePickerGroupProps<T>) {
   const [displayDate, setDisplayDate] = useState<Date | null>(null);
@@ -60,15 +62,25 @@ export default function DatePickerGroup<T>({
       )}
       required={required}
       disabled={disabled}>
-      <DatePicker
-        {...rest}
-        className={classnames(
-          FormDefaults.cssClassPrefix + 'date-picker',
-          className
-        )}
-        value={displayDate}
-        onChange={handleChange}
-      />
+      <div
+        onBlur={() => {
+          // Manually trigger Formik's onBlur when the user clicks away from the date picker
+          input.onBlur();
+        }}>
+        <DatePicker
+          {...rest}
+          className={classnames(
+            FormDefaults.cssClassPrefix + 'date-picker',
+            className
+          )}
+          value={displayDate}
+          onChange={handleChange}
+          disabled={disabled}
+          required={required}
+          maxDate={maxDate}
+          minDate={minDate}
+        />
+      </div>
     </Group>
   );
 
@@ -106,6 +118,7 @@ export default function DatePickerGroup<T>({
 export function convertToTimeZoneInsensitiveISOString(date: Date): string {
   const year = new Intl.DateTimeFormat('en', { year: 'numeric' })
     .format(date)
+    .substring(0, 4)
     .padStart(4, '0');
   const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
     date

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

@@ -18,132 +18,134 @@ exports[`IconInputGroup has matching snapshot 1`] = `
       >
         Favorite Date
       </label>
-      <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
-      >
+      <div>
         <div
-          class="react-date-picker__wrapper"
+          class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
         >
           <div
-            class="react-date-picker__inputGroup"
-          >
-            <input
-              max="2023-09-23"
-              min="2022-06-22"
-              name="date"
-              style="visibility: hidden; position: absolute; z-index: -999;"
-              type="date"
-              value=""
-            />
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
-              data-input="true"
-              inputmode="numeric"
-              max="12"
-              min="1"
-              name="month"
-              placeholder="mm"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
-              data-input="true"
-              inputmode="numeric"
-              max="31"
-              min="1"
-              name="day"
-              placeholder="dd"
-              type="number"
-              value=""
-            />
-            <span
-              class="react-date-picker__inputGroup__divider"
-            >
-              /
-            </span>
-            <input
-              autocomplete="off"
-              class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
-              data-input="true"
-              inputmode="numeric"
-              max="2023"
-              min="2022"
-              name="year"
-              placeholder="yyyy"
-              step="1"
-              type="number"
-              value=""
-            />
-          </div>
-          <button
-            class="react-date-picker__clear-button react-date-picker__button"
-            type="button"
+            class="react-date-picker__wrapper"
           >
-            <svg
-              class="react-date-picker__clear-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="react-date-picker__inputGroup"
             >
-              <line
-                x1="4"
-                x2="15"
-                y1="4"
-                y2="15"
+              <input
+                max="2023-09-23"
+                min="2022-06-22"
+                name="date"
+                style="visibility: hidden; position: absolute; z-index: -999;"
+                type="date"
+                value=""
               />
-              <line
-                x1="15"
-                x2="4"
-                y1="4"
-                y2="15"
+              <input
+                autocomplete="off"
+                class="react-date-picker__inputGroup__input react-date-picker__inputGroup__month"
+                data-input="true"
+                inputmode="numeric"
+                max="12"
+                min="1"
+                name="month"
+                placeholder="mm"
+                type="number"
+                value=""
               />
-            </svg>
-          </button>
-          <button
-            class="react-date-picker__calendar-button react-date-picker__button"
-            type="button"
-          >
-            <svg
-              class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
-              height="19"
-              stroke="black"
-              stroke-width="2"
-              viewBox="0 0 19 19"
-              width="19"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <rect
-                fill="none"
-                height="15"
-                width="15"
-                x="2"
-                y="2"
-              />
-              <line
-                x1="6"
-                x2="6"
-                y1="0"
-                y2="4"
+              <span
+                class="react-date-picker__inputGroup__divider"
+              >
+                /
+              </span>
+              <input
+                autocomplete="off"
+                class="react-date-picker__inputGroup__input react-date-picker__inputGroup__day"
+                data-input="true"
+                inputmode="numeric"
+                max="31"
+                min="1"
+                name="day"
+                placeholder="dd"
+                type="number"
+                value=""
               />
-              <line
-                x1="13"
-                x2="13"
-                y1="0"
-                y2="4"
+              <span
+                class="react-date-picker__inputGroup__divider"
+              >
+                /
+              </span>
+              <input
+                autocomplete="off"
+                class="react-date-picker__inputGroup__input react-date-picker__inputGroup__year"
+                data-input="true"
+                inputmode="numeric"
+                max="2023"
+                min="2022"
+                name="year"
+                placeholder="yyyy"
+                step="1"
+                type="number"
+                value=""
               />
-            </svg>
-          </button>
+            </div>
+            <button
+              class="react-date-picker__clear-button react-date-picker__button"
+              type="button"
+            >
+              <svg
+                class="react-date-picker__clear-button__icon react-date-picker__button__icon"
+                height="19"
+                stroke="black"
+                stroke-width="2"
+                viewBox="0 0 19 19"
+                width="19"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <line
+                  x1="4"
+                  x2="15"
+                  y1="4"
+                  y2="15"
+                />
+                <line
+                  x1="15"
+                  x2="4"
+                  y1="4"
+                  y2="15"
+                />
+              </svg>
+            </button>
+            <button
+              class="react-date-picker__calendar-button react-date-picker__button"
+              type="button"
+            >
+              <svg
+                class="react-date-picker__calendar-button__icon react-date-picker__button__icon"
+                height="19"
+                stroke="black"
+                stroke-width="2"
+                viewBox="0 0 19 19"
+                width="19"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  fill="none"
+                  height="15"
+                  width="15"
+                  x="2"
+                  y="2"
+                />
+                <line
+                  x1="6"
+                  x2="6"
+                  y1="0"
+                  y2="4"
+                />
+                <line
+                  x1="13"
+                  x2="13"
+                  y1="0"
+                  y2="4"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>