envoc-form 5.0.2 → 5.0.5

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

@@ -1,152 +1,152 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IconInputGroup has matching snapshot 1`] = `
-<DocumentFragment>
-  <form
-    action="#"
-    class="envoc-form-form"
-  >
-    <div
-      class="envoc-form-date-picker envoc-form-group"
-    >
-      <div
-        id="favoritedate-error-scroll-target"
-        style="display: none;"
-      />
-      <label
-        for="favoriteDate"
-      >
-        Favorite Date
-      </label>
-      <div
-        class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
-      >
-        <div
-          class="react-date-picker__wrapper"
-        >
-          <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"
-          >
-            <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>
-  </form>
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconInputGroup has matching snapshot 1`] = `
+<DocumentFragment>
+  <form
+    action="#"
+    class="envoc-form-form"
+  >
+    <div
+      class="envoc-form-date-picker envoc-form-group"
+    >
+      <div
+        id="favoritedate-error-scroll-target"
+        style="display: none;"
+      />
+      <label
+        for="favoriteDate"
+      >
+        Favorite Date
+      </label>
+      <div
+        class="react-date-picker react-date-picker--closed react-date-picker--enabled envoc-form-date-picker"
+      >
+        <div
+          class="react-date-picker__wrapper"
+        >
+          <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"
+          >
+            <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>
+  </form>
+</DocumentFragment>
+`;

package/src/Field/CustomFieldInputProps.ts

@@ -1,10 +1,10 @@
-export interface CustomFieldInputProps<TValue> {
-  id: string;
-  name: string;
-  value: TValue;
-  // we want to be more strict than formik is for setting the value
-  onChange: (newValue: TValue) => void;
-
-  // we don't want controlled vs uncontrolled components to behave oddly
-  onBlur: () => void;
-}
+export interface CustomFieldInputProps<TValue> {
+  id: string;
+  name: string;
+  value: TValue;
+  // we want to be more strict than formik is for setting the value
+  onChange: (newValue: TValue) => void;
+
+  // we don't want controlled vs uncontrolled components to behave oddly
+  onBlur: () => void;
+}

package/src/Field/CustomFieldMetaProps.ts

@@ -1,5 +1,5 @@
-import { FieldMetaProps } from 'formik';
-
-export interface CustomFieldMetaProps<TValue> extends FieldMetaProps<TValue> {
-  warning: string | undefined;
-}
+import { FieldMetaProps } from 'formik';
+
+export interface CustomFieldMetaProps<TValue> extends FieldMetaProps<TValue> {
+  warning: string | undefined;
+}

package/src/Field/Field.tsx

@@ -1,113 +1,113 @@
-import React, { ComponentProps, ElementType, LegacyRef } from 'react';
-import { FieldNameContext } from './FieldNameContext';
-import { InjectedFieldProps } from './InjectedFieldProps';
-import useStandardFormInput from './useStandardField';
-import { NormalizationFunction } from '../Normalization/NormalizationFunction';
-import { ValidationFunction } from '../Validation/ValidationFunction';
-import { required as requiredValidator } from '../Validation/validators';
-
-// we attempted to support generic components but failed
-// so, we assume the actual TRenderComponent has no generic arguments
-// instead, any concrete TRenderComponent can utilize a TRenderComponent<TValue> as needed
-
-export type RenderComponent<
-  TValue,
-  TRenderComponent extends ElementType
-> = Partial<ComponentProps<TRenderComponent>> extends Partial<
-  InjectedFieldProps<TValue | undefined | null>
->
-  ? TRenderComponent
-  : never;
-
-export type RenderComponentProps<
-  TValue,
-  TRenderComponent extends ElementType
-> = Partial<ComponentProps<TRenderComponent>> extends Partial<
-  InjectedFieldProps<TValue | undefined | null>
->
-  ? ComponentProps<TRenderComponent>
-  : never;
-
-/** A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable */
-export type FieldProps<
-  TForm extends object,
-  TProp extends keyof TForm,
-  TRenderComponent extends ElementType
-> = {
-  /** Name of the field. Used on submission. */
-  name: TProp; // somewhat duplicated from useStandardFormInputProps but better for autocomplete
-  /** Component to be rendered. Usually this is a type of input group e.g. `<StringInputGroup/>` */
-  Component: RenderComponent<TForm[TProp], TRenderComponent>;
-  /** Id of the field. */
-  id?: string;
-  /** Whether the field should be disabled. */
-  disabled?: boolean;
-  /** Client side validation functions */
-  validate?:
-    | ValidationFunction<TForm[TProp]>
-    | ValidationFunction<TForm[TProp]>[];
-  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
-  normalize?: NormalizationFunction<TForm[TProp]>;
-} & Omit<
-  RenderComponentProps<TForm[TProp], TRenderComponent>,
-  keyof InjectedFieldProps<TForm[TProp]>
->;
-
-/**
- * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
- * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
- */
-function Field<
-  TForm extends object,
-  TProp extends keyof TForm,
-  TRenderComponent extends ElementType
->(
-  {
-    name,
-    Component,
-    id,
-    disabled,
-    validate,
-    normalize,
-    ...rest
-  }: FieldProps<TForm, TProp, TRenderComponent>,
-  ref: LegacyRef<any>
-) {
-  const [input, meta] = useStandardFormInput<TForm[TProp]>({
-    name: String(name),
-    id: id,
-    disabled: disabled,
-    validate: validate,
-    normalize: normalize,
-  });
-
-  const isRequired =
-    rest?.required !== undefined
-      ? rest.required
-      : validate === requiredValidator ||
-        (Array.isArray(validate) && validate.includes(requiredValidator));
-
-  // a bit of a hack so JSX is happy with us
-  const Wrapped = Component as React.ComponentType<
-    InjectedFieldProps<TForm[TProp]>
-  >;
-
-  return (
-    <FieldNameContext.Provider value={input.name}>
-      <Wrapped
-        {...rest}
-        ref={ref}
-        id={input.id}
-        input={input}
-        meta={meta}
-        required={isRequired}
-        disabled={disabled}
-      />
-    </FieldNameContext.Provider>
-  );
-}
-
-// hack to get forwarded refs to work
-const FieldWithRef = React.forwardRef(Field as any);
-
-export default FieldWithRef as typeof Field;
+import React, { ComponentProps, ElementType, LegacyRef } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+import { InjectedFieldProps } from './InjectedFieldProps';
+import useStandardFormInput from './useStandardField';
+import { NormalizationFunction } from '../Normalization/NormalizationFunction';
+import { ValidationFunction } from '../Validation/ValidationFunction';
+import { required as requiredValidator } from '../Validation/validators';
+
+// we attempted to support generic components but failed
+// so, we assume the actual TRenderComponent has no generic arguments
+// instead, any concrete TRenderComponent can utilize a TRenderComponent<TValue> as needed
+
+export type RenderComponent<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue | undefined | null>
+>
+  ? TRenderComponent
+  : never;
+
+export type RenderComponentProps<
+  TValue,
+  TRenderComponent extends ElementType
+> = Partial<ComponentProps<TRenderComponent>> extends Partial<
+  InjectedFieldProps<TValue | undefined | null>
+>
+  ? ComponentProps<TRenderComponent>
+  : never;
+
+/** A specific Field instance to be rendered by the given TRenderComponent or by whatever default is reasonable */
+export type FieldProps<
+  TForm extends object,
+  TProp extends keyof TForm,
+  TRenderComponent extends ElementType
+> = {
+  /** Name of the field. Used on submission. */
+  name: TProp; // somewhat duplicated from useStandardFormInputProps but better for autocomplete
+  /** Component to be rendered. Usually this is a type of input group e.g. `<StringInputGroup/>` */
+  Component: RenderComponent<TForm[TProp], TRenderComponent>;
+  /** Id of the field. */
+  id?: string;
+  /** Whether the field should be disabled. */
+  disabled?: boolean;
+  /** Client side validation functions */
+  validate?:
+    | ValidationFunction<TForm[TProp]>
+    | ValidationFunction<TForm[TProp]>[];
+  /** Function to modify the field value without making the form dirty. (e.g. phone number) */
+  normalize?: NormalizationFunction<TForm[TProp]>;
+} & Omit<
+  RenderComponentProps<TForm[TProp], TRenderComponent>,
+  keyof InjectedFieldProps<TForm[TProp]>
+>;
+
+/**
+ * Renders whatever Component is passed - injecting the formik values needed to finish wiring up that individual field.
+ * Should no Component be used then the default will be provided by the default lookup based on typeof(TForm[TProp])
+ */
+function Field<
+  TForm extends object,
+  TProp extends keyof TForm,
+  TRenderComponent extends ElementType
+>(
+  {
+    name,
+    Component,
+    id,
+    disabled,
+    validate,
+    normalize,
+    ...rest
+  }: FieldProps<TForm, TProp, TRenderComponent>,
+  ref: LegacyRef<any>
+) {
+  const [input, meta] = useStandardFormInput<TForm[TProp]>({
+    name: String(name),
+    id: id,
+    disabled: disabled,
+    validate: validate,
+    normalize: normalize,
+  });
+
+  const isRequired =
+    rest?.required !== undefined
+      ? rest.required
+      : validate === requiredValidator ||
+        (Array.isArray(validate) && validate.includes(requiredValidator));
+
+  // a bit of a hack so JSX is happy with us
+  const Wrapped = Component as React.ComponentType<
+    InjectedFieldProps<TForm[TProp]>
+  >;
+
+  return (
+    <FieldNameContext.Provider value={input.name}>
+      <Wrapped
+        {...rest}
+        ref={ref}
+        id={input.id}
+        input={input}
+        meta={meta}
+        required={isRequired}
+        disabled={disabled}
+      />
+    </FieldNameContext.Provider>
+  );
+}
+
+// hack to get forwarded refs to work
+const FieldWithRef = React.forwardRef(Field as any);
+
+export default FieldWithRef as typeof Field;

package/src/Field/FieldErrorScrollTarget.tsx

@@ -1,12 +1,12 @@
-import { useContext } from 'react';
-import { FieldNameContext } from './FieldNameContext';
-
-/** Hidden `<div/>` that acts as an anchor to scroll to when a form error occurs. */
-export default function FieldErrorScrollTarget() {
-  const name = useContext(FieldNameContext);
-  if (!name) {
-    return null;
-  }
-  const divId = `${name.toLowerCase()}-error-scroll-target`;
-  return <div id={divId} style={{ display: 'none' }} />;
-}
+import { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+
+/** Hidden `<div/>` that acts as an anchor to scroll to when a form error occurs. */
+export default function FieldErrorScrollTarget() {
+  const name = useContext(FieldNameContext);
+  if (!name) {
+    return null;
+  }
+  const divId = `${name.toLowerCase()}-error-scroll-target`;
+  return <div id={divId} style={{ display: 'none' }} />;
+}

package/src/Field/FieldNameContext.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-
-/** provides the full, qualified name of the current field name - including nested fields, path/dot delimited */
-export const FieldNameContext = React.createContext<string | undefined>(
-  undefined
-);
+import React from 'react';
+
+/** provides the full, qualified name of the current field name - including nested fields, path/dot delimited */
+export const FieldNameContext = React.createContext<string | undefined>(
+  undefined
+);

package/src/Field/FieldSection.tsx

@@ -1,18 +1,18 @@
-import React, { useContext } from 'react';
-import { FieldNameContext } from './FieldNameContext';
-
-interface FieldSectionProps {
-  children: React.ReactNode;
-  name: string;
-}
-
-export default function FieldSection({ children, name }: FieldSectionProps) {
-  const parentContext = useContext(FieldNameContext);
-  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
-
-  return (
-    <FieldNameContext.Provider value={effectiveValue}>
-      {children}
-    </FieldNameContext.Provider>
-  );
-}
+import React, { useContext } from 'react';
+import { FieldNameContext } from './FieldNameContext';
+
+interface FieldSectionProps {
+  children: React.ReactNode;
+  name: string;
+}
+
+export default function FieldSection({ children, name }: FieldSectionProps) {
+  const parentContext = useContext(FieldNameContext);
+  const effectiveValue = parentContext ? `${parentContext}.${name}` : name;
+
+  return (
+    <FieldNameContext.Provider value={effectiveValue}>
+      {children}
+    </FieldNameContext.Provider>
+  );
+}

package/src/Field/InjectedFieldProps.ts

@@ -1,8 +1,8 @@
-import { CustomFieldInputProps } from './CustomFieldInputProps';
-import { CustomFieldMetaProps } from './CustomFieldMetaProps';
-
-/** Defines what is injected by a Field wrapper of some TRenderComponent */
-export interface InjectedFieldProps<TValue> {
-  input: CustomFieldInputProps<TValue>;
-  meta: CustomFieldMetaProps<TValue>;
-}
+import { CustomFieldInputProps } from './CustomFieldInputProps';
+import { CustomFieldMetaProps } from './CustomFieldMetaProps';
+
+/** Defines what is injected by a Field wrapper of some TRenderComponent */
+export interface InjectedFieldProps<TValue> {
+  input: CustomFieldInputProps<TValue>;
+  meta: CustomFieldMetaProps<TValue>;
+}