envoc-form 4.0.1-0 → 4.0.1-3

package/lib/Field/StandAloneInput.js

@@ -0,0 +1,75 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var uuid = __importStar(require("uuid"));
+function StandAloneInput(props) {
+    var Component = props.Component, value = props.value, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["Component", "value", "onChange", "disabled"]);
+    var handleChange = function (arg) {
+        if (!disabled) {
+            onChange(arg);
+        }
+    };
+    var Wrapped = Component;
+    var idRef = (0, react_1.useRef)(uuid.v4());
+    var input = {
+        id: idRef.current,
+        name: idRef.current,
+        value: value,
+        onChange: handleChange,
+        onBlur: function () { },
+    };
+    var meta = {
+        warning: undefined,
+        value: value,
+        touched: false,
+        initialTouched: false,
+    };
+    return (0, jsx_runtime_1.jsx)(Wrapped, __assign({}, rest, { disabled: disabled, input: input, meta: meta }));
+}
+exports.default = StandAloneInput;

package/lib/Group.d.ts

@@ -6,7 +6,7 @@ export interface GroupProps extends InjectedFieldProps<any> {
     /** simple text label before the input */
     label?: string;
     /** simple helper text after the input*/
-    helpText?: string;
+    helpText?: string | React.ReactNode;
     disabled?: boolean;
 }
 /** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */

package/lib/Input/StringInputGroup.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InputGroupProps } from './InputGroup';
 export interface StringInputGroupProps extends Omit<InputGroupProps<string | undefined>, 'onChange' | 'type' | 'value'> {
-    type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+    type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url' | 'password' | 'textarea';
 }
 declare const StringInputGroupWithRef: React.ComponentType<StringInputGroupProps>;
 export default StringInputGroupWithRef;

package/lib/TextArea/TextAreaGroup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { GroupProps } from '../Group';
+export interface TextAreaGroupProps extends InjectedFieldProps<string | undefined>, Omit<React.HTMLProps<HTMLTextAreaElement>, keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+    icon?: React.ReactNode;
+}
+declare const TextAreaGroupWithRef: React.ComponentType<TextAreaGroupProps>;
+export default TextAreaGroupWithRef;

package/lib/TextArea/TextAreaGroup.js

@@ -0,0 +1,38 @@
+"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 Group_1 = __importDefault(require("../Group"));
+/** generic controlled <textarea/> wrapped by a Group */
+function TextAreaGroup(_a, ref) {
+    var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "icon"]);
+    return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: (0, classnames_1.default)(className, 'text-area-group') }, { children: [icon, (0, jsx_runtime_1.jsx)("textarea", __assign({}, input, rest, { value: input.value, onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: (0, classnames_1.default)(className, 'text-area-group') }))] })));
+}
+var TextAreaGroupWithRef = react_1.default.forwardRef(TextAreaGroup);
+exports.default = TextAreaGroupWithRef;

package/lib/Validation/validators.d.ts

@@ -1,7 +1,7 @@
 import { ValidationFunction } from './ValidationFunction';
 export declare const required: (value: any) => "Required" | undefined;
 export declare const length: (len: number) => (value: string | number | undefined) => string | undefined;
-export declare const integer: (val: string | undefined) => "Must be a whole number" | undefined;
+export declare const integer: (val: string | number | undefined) => "Must be a whole number" | undefined;
 export declare const maxLength: (len: number) => (value: string | number | undefined) => string | undefined;
 export declare const maxCount: (count: number) => (value: {
     isDeleted?: boolean;

package/lib/Validation/validators.js

@@ -21,7 +21,7 @@ var integer = function (val) {
     if (!val) {
         return undefined;
     }
-    if (!Number.isInteger(parseFloat(val))) {
+    if (!Number.isInteger(typeof val === 'number' ? val : parseFloat(val))) {
         return 'Must be a whole number';
     }
 };

package/lib/index.d.ts

@@ -6,13 +6,23 @@ export { default as ConfirmBaseForm } from './ConfirmBaseForm/ConfirmBaseForm';
 export type { ConfirmBaseFormProps } from './ConfirmBaseForm/ConfirmBaseForm';
 export { default as ConfirmDeleteForm } from './ConfirmDeleteForm/ConfirmDeleteForm';
 export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteForm';
-export { default as DatePickerInput } from './DatePickerInput/DatePickerInput';
-export type { DatePickerInputProps, DateOnly } from './DatePickerInput/DatePickerInput';
+export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
+export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
+export { default as DateOnlyDatePickerGroup } from './DatePicker/DateOnlyDatePickerGroup';
+export type { DateOnly, DateOnlyDatePickerGroupProps, } from './DatePicker/DateOnlyDatePickerGroup';
+export { default as StringDatePickerGroup } from './DatePicker/StringDatePickerGroup';
+export type { StringDatePickerGroupProps } from './DatePicker/StringDatePickerGroup';
 export { default as Field } from './Field/Field';
 export type { FieldProps } from './Field/Field';
+export type { RenderComponent } from './Field/Field';
+export type { RenderComponentProps } from './Field/Field';
 export { default as FieldErrorScrollTarget } from './Field/FieldErrorScrollTarget';
 export { FieldNameContext } from './Field/FieldNameContext';
 export type { InjectedFieldProps } from './Field/InjectedFieldProps';
+export { default as StandAloneInput } from './Field/StandAloneInput';
+export type { StandAloneInputProps } from './Field/StandAloneInput';
 export { default as useStandardField } from './Field/useStandardField';
 export type { useStandardFieldProps } from './Field/useStandardField';
 export { default as FieldArray } from './FieldArray/FieldArray';
@@ -25,6 +35,8 @@ export { ServerErrorContext } from './Form/ServerErrorContext';
 export type { ServerErrorContextProps, ServerErrors, } from './Form/ServerErrorContext';
 export { default as FormActions } from './FormActions';
 export type { FormActionsProps as FormActionsProps } from './FormActions';
+export { default as StandardFormActions } from './StandardFormActions';
+export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
 export { default as Group } from './Group';
 export type { GroupProps as GroupProps } from './Group';
 export { default as IconInputGroup } from './Input/IconInputGroup';
@@ -40,13 +52,16 @@ export type { StringInputGroupProps } from './Input/StringInputGroup';
 export type { NormalizationFunction } from './Normalization/NormalizationFunction';
 export * as normalizers from './Normalization/normalizers';
 export { default as SelectGroup } from './Select/SelectGroup';
-export type { SelectGroupProps } from './Select/SelectGroup';
+export type { SelectGroupProps, SelectOption } from './Select/SelectGroup';
 export { BooleanSelectGroup } from './Select/BooleanSelectGroup';
 export type { BooleanSelectGroupProps } from './Select/BooleanSelectGroup';
 export { MultiNumberSelectGroup, SingleNumberSelectGroup, } from './Select/NumberSelectGroup';
-export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps } from './Select/NumberSelectGroup';
+export type { MultiNumberSelectGroupProps, SingleNumberSelectGroupProps, } from './Select/NumberSelectGroup';
+export type { SelectGroupPropsHelper } from './Select/SelectGroupPropsHelper';
 export { MultiStringSelectGroup, SingleStringSelectGroup, } from './Select/StringSelectGroup';
-export type { MultiStringSelectGroupProps, SingleStringSelectGroupProps } from './Select/StringSelectGroup';
+export type { MultiStringSelectGroupProps, SingleStringSelectGroupProps, } from './Select/StringSelectGroup';
+export { default as TextAreaGroup } from './TextArea/TextAreaGroup';
+export type { TextAreaGroupProps } from './TextArea/TextAreaGroup';
 export { default as objectContainsNonSerializableProperty } from './utils/objectContainsNonSerializableProperty';
 export { default as serialize } from './utils/objectToFormData';
 export type { ObjectToFormDataCfgProps } from './utils/objectToFormData';

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.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.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.DatePickerInput = 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.NumberInputGroup = exports.MoneyInputGroup = exports.InputGroup = exports.IconInputGroup = exports.Group = exports.StandardFormActions = exports.FormActions = exports.ServerErrorContext = exports.Form = exports.FileGroup = exports.FieldArray = exports.useStandardField = exports.StandAloneInput = exports.FieldNameContext = exports.FieldErrorScrollTarget = exports.Field = exports.StringDatePickerGroup = exports.DateOnlyDatePickerGroup = 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; } });
@@ -43,8 +43,14 @@ Object.defineProperty(exports, "ConfirmBaseForm", { enumerable: true, get: funct
 var ConfirmDeleteForm_1 = require("./ConfirmDeleteForm/ConfirmDeleteForm");
 Object.defineProperty(exports, "ConfirmDeleteForm", { enumerable: true, get: function () { return __importDefault(ConfirmDeleteForm_1).default; } });
 // Date
-var DatePickerInput_1 = require("./DatePickerInput/DatePickerInput");
-Object.defineProperty(exports, "DatePickerInput", { enumerable: true, get: function () { return __importDefault(DatePickerInput_1).default; } });
+var DatePickerGroup_1 = require("./DatePicker/DatePickerGroup");
+Object.defineProperty(exports, "DatePickerGroup", { enumerable: true, get: function () { return __importDefault(DatePickerGroup_1).default; } });
+var DatePickerGroup_2 = require("./DatePicker/DatePickerGroup");
+Object.defineProperty(exports, "convertToTimeZoneInsensitiveISOString", { enumerable: true, get: function () { return DatePickerGroup_2.convertToTimeZoneInsensitiveISOString; } });
+var DateOnlyDatePickerGroup_1 = require("./DatePicker/DateOnlyDatePickerGroup");
+Object.defineProperty(exports, "DateOnlyDatePickerGroup", { enumerable: true, get: function () { return __importDefault(DateOnlyDatePickerGroup_1).default; } });
+var StringDatePickerGroup_1 = require("./DatePicker/StringDatePickerGroup");
+Object.defineProperty(exports, "StringDatePickerGroup", { enumerable: true, get: function () { return __importDefault(StringDatePickerGroup_1).default; } });
 // Field
 var Field_1 = require("./Field/Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return __importDefault(Field_1).default; } });
@@ -52,6 +58,8 @@ var FieldErrorScrollTarget_1 = require("./Field/FieldErrorScrollTarget");
 Object.defineProperty(exports, "FieldErrorScrollTarget", { enumerable: true, get: function () { return __importDefault(FieldErrorScrollTarget_1).default; } });
 var FieldNameContext_1 = require("./Field/FieldNameContext");
 Object.defineProperty(exports, "FieldNameContext", { enumerable: true, get: function () { return FieldNameContext_1.FieldNameContext; } });
+var StandAloneInput_1 = require("./Field/StandAloneInput");
+Object.defineProperty(exports, "StandAloneInput", { enumerable: true, get: function () { return __importDefault(StandAloneInput_1).default; } });
 var useStandardField_1 = require("./Field/useStandardField");
 Object.defineProperty(exports, "useStandardField", { enumerable: true, get: function () { return __importDefault(useStandardField_1).default; } });
 // Field Array
@@ -67,6 +75,8 @@ var ServerErrorContext_1 = require("./Form/ServerErrorContext");
 Object.defineProperty(exports, "ServerErrorContext", { enumerable: true, get: function () { return ServerErrorContext_1.ServerErrorContext; } });
 var FormActions_1 = require("./FormActions");
 Object.defineProperty(exports, "FormActions", { enumerable: true, get: function () { return __importDefault(FormActions_1).default; } });
+var StandardFormActions_1 = require("./StandardFormActions");
+Object.defineProperty(exports, "StandardFormActions", { enumerable: true, get: function () { return __importDefault(StandardFormActions_1).default; } });
 // Input
 var Group_1 = require("./Group");
 Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return __importDefault(Group_1).default; } });
@@ -92,6 +102,9 @@ Object.defineProperty(exports, "SingleNumberSelectGroup", { enumerable: true, ge
 var StringSelectGroup_1 = require("./Select/StringSelectGroup");
 Object.defineProperty(exports, "MultiStringSelectGroup", { enumerable: true, get: function () { return StringSelectGroup_1.MultiStringSelectGroup; } });
 Object.defineProperty(exports, "SingleStringSelectGroup", { enumerable: true, get: function () { return StringSelectGroup_1.SingleStringSelectGroup; } });
+// Text Area
+var TextAreaGroup_1 = require("./TextArea/TextAreaGroup");
+Object.defineProperty(exports, "TextAreaGroup", { enumerable: true, get: function () { return __importDefault(TextAreaGroup_1).default; } });
 // Utils
 var objectContainsNonSerializableProperty_1 = require("./utils/objectContainsNonSerializableProperty");
 Object.defineProperty(exports, "objectContainsNonSerializableProperty", { enumerable: true, get: function () { return __importDefault(objectContainsNonSerializableProperty_1).default; } });

package/package.json

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

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

@@ -19,6 +19,7 @@ exports[`AddressInput has matching snapshot 1`] = `
       </label>
       <input
         class="string-group input-group"
+        id="normalAddressInput.address1"
         name="normalAddressInput.address1"
         placeholder="Address, Line 1"
         value=""
@@ -38,6 +39,7 @@ exports[`AddressInput has matching snapshot 1`] = `
       </label>
       <input
         class="string-group input-group"
+        id="normalAddressInput.address2"
         name="normalAddressInput.address2"
         placeholder="Address, Line 2"
         value=""
@@ -57,6 +59,7 @@ exports[`AddressInput has matching snapshot 1`] = `
       </label>
       <input
         class="string-group input-group"
+        id="normalAddressInput.city"
         name="normalAddressInput.city"
         placeholder="City"
         value=""
@@ -165,6 +168,7 @@ exports[`AddressInput has matching snapshot 1`] = `
       </label>
       <input
         class="string-group input-group"
+        id="normalAddressInput.zipCode"
         name="normalAddressInput.zipCode"
         placeholder="Zip"
         value=""

package/src/DatePicker/DateOnlyDatePickerGroup.tsx

@@ -0,0 +1,24 @@
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface DateOnly {
+  year?: number;
+  month?: number;
+  day?: number;
+}
+
+export interface DateOnlyDatePickerGroupProps
+  extends DatePickerHelper<DateOnly | undefined> {}
+export default function DateOnlyDatePickerGroup(
+  props: DateOnlyDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return {
+    year: arg.getFullYear(),
+    month: arg.getMonth() + 1,
+    day: arg.getDate(),
+  };
+}

package/src/{DatePickerInput/DatePickerInput.test.tsx → DatePicker/DatePicker.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import DatePickerInput from './DatePickerInput';
+import DateOnlyDatePickerGroup from './DateOnlyDatePickerGroup';
 import FormTestBase from '../__Tests__/FormTestBase';
 
 //hack so the datepicker internals don't complain about this not existing in the context of jest
@@ -13,7 +13,7 @@ describe('IconInputGroup', () => {
         {({ Field }) => (
           <Field
             name="favoriteDate"
-            Component={DatePickerInput}
+            Component={DateOnlyDatePickerGroup}
             label="Favorite Date"
             monthPlaceholder="mm"
             dayPlaceholder="dd"
@@ -32,7 +32,7 @@ describe('IconInputGroup', () => {
         {({ Field }) => (
           <Field
             name="favoriteDate"
-            Component={DatePickerInput}
+            Component={DateOnlyDatePickerGroup}
             label="Favorite Date"
             monthPlaceholder="mm"
             dayPlaceholder="dd"

package/src/DatePicker/DatePickerGroup.tsx

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import DatePicker, { DatePickerProps } from 'react-date-picker/dist/entry.nostyle';
+import classnames from 'classnames';
+import parseISO from 'date-fns/parseISO';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import Group, { GroupProps } from '../Group';
+
+// Docs for react-date-picker https://www.npmjs.com/package/react-date-picker
+
+export interface DatePickerGroupProps<T>
+  extends InjectedFieldProps<T | undefined>,
+    Omit<
+      DatePickerProps,
+      keyof InjectedFieldProps<T> | 'name' | 'value' | 'className'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<T> | 'children'> {
+  convert: (arg: Date) => T;
+}
+
+export default function DatePickerGroup<T>({
+  input,
+  meta,
+  label,
+  helpText,
+  className,
+  disabled,
+  convert,
+  ...rest
+}: DatePickerGroupProps<T>) {
+  const [displayDate, setDisplayDate] = useState<Date | null>(null);
+
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      label={label}
+      helpText={helpText}
+      className={classnames(className, 'date-picker')}
+      disabled={disabled}>
+      <DatePicker
+        {...rest}
+        className={classnames('date-picker', className)}
+        value={displayDate}
+        onChange={handleChange}
+      />
+    </Group>
+  );
+
+  function handleChange(e: Date | Date[] | string | undefined) {
+    const { onChange } = input;
+    if (onChange === null) {
+      return;
+    }
+
+    if (!e) {
+      onChange(undefined);
+      setDisplayDate(null);
+      return;
+    } else if (typeof e === 'string') {
+      const parsedValue = parseISO(e.toString().split('T')[0]);
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else if (e instanceof Date) {
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    } else {
+      // e is instanceof Date[]
+      const parsedValue = parseISO(
+        convertToTimeZoneInsensitiveISOString(e[0]).split('T')[0]
+      );
+      setDisplayDate(parsedValue);
+      onChange(convert(parsedValue));
+    }
+  }
+}
+
+export function convertToTimeZoneInsensitiveISOString(date: Date): string {
+  const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
+  const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(
+    date
+  );
+  const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+  return `${year}-${month}-${day}T00:00:00.000Z`;
+}

package/src/DatePicker/DatePickerHelper.ts

@@ -0,0 +1,4 @@
+import { DatePickerGroupProps } from './DatePickerGroup';
+
+export interface DatePickerHelper<T>
+  extends Omit<DatePickerGroupProps<T>, 'convert'> {}

package/src/DatePicker/StringDatePickerGroup.tsx

@@ -0,0 +1,14 @@
+import DatePickerGroup from './DatePickerGroup';
+import { DatePickerHelper } from './DatePickerHelper';
+
+export interface StringDatePickerGroupProps
+  extends DatePickerHelper<string | undefined> {}
+export default function StringDatePickerGroup(
+  props: StringDatePickerGroupProps
+) {
+  return <DatePickerGroup {...props} convert={convertToDateOnly} />;
+}
+
+function convertToDateOnly(arg: Date) {
+  return arg.toISOString();
+}

package/src/Field/Field.tsx

@@ -9,13 +9,16 @@ import { ValidationFunction } from '../Validation/ValidationFunction';
 // so, we assume the actual TRenderComponent has no generic arguments
 // instead, any concrete TRenderComponent can utilize a TRenderComponent<TValue> as needed
 
-type RenderComponent<TValue, TRenderComponent extends ElementType> = Partial<
-  ComponentProps<TRenderComponent>
-> extends Partial<InjectedFieldProps<TValue>>
+export type RenderComponent<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue>
+>
   ? TRenderComponent
   : never;
 
-type RenderComponentProps<
+export type RenderComponentProps<
   TValue,
   TRenderComponent extends ElementType
 > = Partial<ComponentProps<TRenderComponent>> extends Partial<
@@ -79,7 +82,7 @@ function Field<
 
   return (
     <FieldNameContext.Provider value={input.name}>
-      <Wrapped {...rest} ref={ref} id={id} input={input} meta={meta} />
+      <Wrapped {...rest} ref={ref} id={input.id} input={input} meta={meta} />
     </FieldNameContext.Provider>
   );
 }

package/src/Field/StandAloneInput.tsx

@@ -0,0 +1,51 @@
+import { ElementType, useRef } from 'react';
+import * as uuid from 'uuid';
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+import { RenderComponent, RenderComponentProps } from './Field';
+import { InjectedFieldProps } from './InjectedFieldProps';
+
+export type StandAloneInputProps<
+  TValue,
+  TRenderComponent extends ElementType
+> = {
+  Component: RenderComponent<TValue, TRenderComponent>;
+  value: TValue;
+  onChange: (arg: TValue) => void;
+} & Omit<
+  RenderComponentProps<TValue, TRenderComponent>,
+  | keyof InjectedFieldProps<TValue>
+  | 'value'
+  | 'onChange'
+  | 'normalize'
+  | 'validate'
+>;
+
+export default function StandAloneInput<TValue, TComponent extends ElementType>(
+  props: StandAloneInputProps<TValue, TComponent>
+) {
+  const { Component, value, onChange, disabled, ...rest } = props;
+  const handleChange = (arg: TValue) => {
+    if (!disabled) {
+      onChange(arg);
+    }
+  };
+  const Wrapped = Component as React.ComponentType<InjectedFieldProps<TValue>>;
+  const idRef = useRef(uuid.v4());
+  const input: CustomFieldInputProps<TValue> = {
+    id: idRef.current,
+    name: idRef.current,
+    value: value,
+    onChange: handleChange,
+    onBlur: () => {},
+  };
+
+  const meta: CustomFieldMetaProps<TValue> = {
+    warning: undefined,
+    value: value,
+    touched: false,
+    initialTouched: false,
+  };
+
+  return <Wrapped {...rest} disabled={disabled} input={input} meta={meta} />;
+}

package/src/File/__snapshots__/FileGroup.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`FileGroup has matching snapshot 1`] = `
       </label>
       <input
         class="file-group"
+        id="profileImage"
         name="profileImage"
         type="file"
         value=""

package/src/Group.tsx

@@ -11,7 +11,7 @@ export interface GroupProps extends InjectedFieldProps<any> {
   label?: string;
 
   /** simple helper text after the input*/
-  helpText?: string;
+  helpText?: string | React.ReactNode;
 
   disabled?: boolean;
 }

package/src/Input/StringInputGroup.tsx

@@ -7,7 +7,15 @@ export interface StringInputGroupProps
     InputGroupProps<string | undefined>,
     'onChange' | 'type' | 'value'
   > {
-  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  type?:
+    | 'color'
+    | 'email'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | 'password'
+    | 'textarea';
 }
 
 function StringInputGroup(

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

@@ -20,6 +20,7 @@ exports[`IconInputGroup has matching snapshot 1`] = `
       </span>
       <input
         class="icon-input-group input-group"
+        id="nameWithIcon"
         name="nameWithIcon"
         value=""
       />

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

@@ -19,6 +19,7 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
       </label>
       <input
         class="something-here money-group input-group"
+        id="yearlySalaryUSD"
         min="0"
         name="yearlySalaryUSD"
         step="0.01"

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

@@ -19,6 +19,7 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
       </label>
       <input
         class="number-group input-group"
+        id="numberOfArms"
         name="numberOfArms"
         type="number"
         value=""

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

@@ -19,6 +19,7 @@ exports[`StringInputGroup has matching snapshot 1`] = `
       </label>
       <input
         class="string-group input-group"
+        id="name"
         name="name"
         value=""
       />