envoc-form 5.0.3 → 5.0.6

package/src/Input/CheckboxInputGroup.tsx

@@ -0,0 +1,78 @@
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import CheckboxGroup from './CheckboxGroup';
+import { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+
+export interface CheckboxInputGroupProps
+  extends Omit<
+    InputGroupProps<boolean | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {
+  labelOnLeft?: boolean;
+}
+
+function CheckboxInputGroup(
+  {
+    input,
+    meta,
+    disabled,
+    label,
+    required,
+    helpText,
+    className,
+    labelOnLeft,
+    ...rest
+  }: CheckboxInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  return (
+    <CheckboxGroup
+      input={input}
+      meta={meta}
+      disabled={disabled}
+      required={required}
+      label={label}
+      helpText={helpText}
+      labelOnLeft={labelOnLeft}
+      className={clsx(
+        className,
+        FormDefaults.cssClassPrefix + 'checkbox-group',
+        { 'label-on-left': labelOnLeft },
+        { 'label-on-right': !labelOnLeft }
+      )}>
+      <input
+        {...rest}
+        type="checkbox"
+        aria-invalid={!!meta.error}
+        aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
+        className={clsx(
+          className,
+          FormDefaults.cssClassPrefix + 'checkbox-group'
+        )}
+        checked={input.value === true}
+        onChange={(e) => {
+          input.onChange(e.target.checked);
+        }}
+        disabled={disabled}
+        required={required}
+        onBlur={input.onBlur}
+        id={input.id}
+        name={input.name}
+        ref={ref}
+      />
+    </CheckboxGroup>
+  );
+}
+
+/** Standard checkbox input. Value defaults to `undefined` with no user input and no initial values.
+ *
+ *  If the user should be required to decide yes / no before submission, consider using `BooleanSelectGroup`.
+ *
+ *  If the user should be required to check the box before submission, use the `required` prop.
+ */
+const CheckboxInputGroupWithRef = React.forwardRef(
+  CheckboxInputGroup
+) as React.ComponentType<CheckboxInputGroupProps>;
+
+export default CheckboxInputGroupWithRef;

package/src/Input/IconInputGroup.tsx

@@ -1,54 +1,54 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroupWithRef, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-// TODO: make className tailwind-able instead of css. make it typeof string ????
-// or should we just give a div a className and let each project decide? (this seems to be the patern)
-export interface IconInputGroupProps
-  extends Omit<
-    InputGroupProps<string | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
-  /** Icon to display on the input group. */
-  icon: React.ReactNode;
-  /** Text to display after the input group to give more information to the user. */
-  helpText?: string;
-}
-
-function IconInputGroup(
-  { icon, className, ...rest }: IconInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const { input } = rest;
-
-  return (
-    <>
-      <InputGroupWithRef
-        icon={icon}
-        ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'icon-input-group'
-        )}
-        value={input.value ?? ''}
-        onChange={(e) => {
-          if (!e.target.value) {
-            input.onChange(undefined);
-          } else {
-            input.onChange(e.target.value);
-          }
-        }}
-        {...rest}
-      />
-    </>
-  );
-}
-
-/** Input group with an icon. */
-const IconInputGroupWithRef = React.forwardRef(
-  IconInputGroup
-) as React.ComponentType<IconInputGroupProps>;
-
-export default IconInputGroupWithRef;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import InputGroupWithRef, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+
+// TODO: make className tailwind-able instead of css. make it typeof string ????
+// or should we just give a div a className and let each project decide? (this seems to be the patern)
+export interface IconInputGroupProps
+  extends Omit<
+    InputGroupProps<string | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {
+  type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  /** Icon to display on the input group. */
+  icon: React.ReactNode;
+  /** Text to display after the input group to give more information to the user. */
+  helpText?: string;
+}
+
+function IconInputGroup(
+  { icon, className, ...rest }: IconInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const { input } = rest;
+
+  return (
+    <>
+      <InputGroupWithRef
+        icon={icon}
+        ref={ref}
+        className={clsx(
+          className,
+          FormDefaults.cssClassPrefix + 'icon-input-group'
+        )}
+        value={input.value ?? ''}
+        onChange={(e) => {
+          if (!e.target.value) {
+            input.onChange(undefined);
+          } else {
+            input.onChange(e.target.value);
+          }
+        }}
+        {...rest}
+      />
+    </>
+  );
+}
+
+/** Input group with an icon. */
+const IconInputGroupWithRef = React.forwardRef(
+  IconInputGroup
+) as React.ComponentType<IconInputGroupProps>;
+
+export default IconInputGroupWithRef;

package/src/Input/InputGroup.tsx

@@ -1,72 +1,66 @@
-import React, { ChangeEventHandler, LegacyRef } from 'react';
-import classNames from 'classnames';
-import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import { FormDefaults } from '../FormDefaults';
-import Group, { GroupProps } from '../Group';
-
-export interface InputGroupProps<TValue>
-  extends InjectedFieldProps<TValue>,
-    Omit<
-      React.HTMLProps<HTMLInputElement>,
-      | keyof InjectedFieldProps<any>
-      | 'children'
-      | 'className'
-      | 'label'
-      | 'value'
-    >,
-    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  value: string | number | null | undefined;
-  icon?: React.ReactNode;
-}
-
-function InputGroup<TValue>(
-  {
-    input,
-    meta,
-    label,
-    helpText,
-    className,
-    required,
-    disabled,
-    onChange,
-    value,
-    icon,
-    ...rest
-  }: InputGroupProps<TValue>,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  return (
-    <Group
-      input={input}
-      meta={meta}
-      required={required}
-      disabled={disabled}
-      label={label}
-      helpText={helpText}
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'input-group'
-      )}>
-      {icon}
-      <input
-        {...input}
-        {...rest}
-        aria-invalid={!!meta.error}
-        aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
-        value={value ?? ''}
-        onChange={onChange}
-        ref={ref}
-        className={classNames(
-          className,
-          FormDefaults.cssClassPrefix + 'input-group'
-        )}
-      />
-    </Group>
-  );
-}
-
-/** Generic controlled `<input/>` wrapped by a `<Group/>` */
-const InputGroupWithRef = React.forwardRef(InputGroup) as typeof InputGroup;
-
-export default InputGroupWithRef;
+import React, { ChangeEventHandler, LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import { InjectedFieldProps } from '../Field/InjectedFieldProps';
+import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
+
+export interface InputGroupProps<TValue>
+  extends InjectedFieldProps<TValue>,
+    Omit<
+      React.HTMLProps<HTMLInputElement>,
+      | keyof InjectedFieldProps<any>
+      | 'children'
+      | 'className'
+      | 'label'
+      | 'value'
+    >,
+    Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  value: string | number | null | undefined;
+  icon?: React.ReactNode;
+}
+
+function InputGroup<TValue>(
+  {
+    input,
+    meta,
+    label,
+    helpText,
+    className,
+    required,
+    disabled,
+    onChange,
+    value,
+    icon,
+    ...rest
+  }: InputGroupProps<TValue>,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  return (
+    <Group
+      input={input}
+      meta={meta}
+      required={required}
+      disabled={disabled}
+      label={label}
+      helpText={helpText}
+      className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}>
+      {icon}
+      <input
+        {...input}
+        {...rest}
+        aria-invalid={!!meta.error}
+        aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
+        value={value ?? ''}
+        onChange={onChange}
+        ref={ref}
+        className={clsx(className, FormDefaults.cssClassPrefix + 'input-group')}
+      />
+    </Group>
+  );
+}
+
+/** Generic controlled `<input/>` wrapped by a `<Group/>` */
+const InputGroupWithRef = React.forwardRef(InputGroup) as typeof InputGroup;
+
+export default InputGroupWithRef;

package/src/Input/MoneyInputGroup.tsx

@@ -1,50 +1,47 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface MoneyInputGroupProps
-  extends Omit<
-    InputGroupProps<number | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  /** Custom parsing function when the value changes. */
-  parseFunc?: typeof parseInt | typeof parseFloat;
-}
-
-function MoneyInputGroup(
-  { parseFunc, className, ...rest }: MoneyInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const effectiveParse = parseFunc ?? parseFloat;
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      step={0.01}
-      min={0}
-      {...rest}
-      type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'money-group'
-      )}
-      value={input.value || ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(effectiveParse(e.target.value));
-        }
-      }}
-    />
-  );
-}
-
-/** Input group for inputting money. */
-const MoneyInputGroupWithRef = React.forwardRef(
-  MoneyInputGroup
-) as React.FunctionComponent<MoneyInputGroupProps>;
-
-export default MoneyInputGroupWithRef;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+
+export interface MoneyInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {
+  /** Custom parsing function when the value changes. */
+  parseFunc?: typeof parseInt | typeof parseFloat;
+}
+
+function MoneyInputGroup(
+  { parseFunc, className, ...rest }: MoneyInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const effectiveParse = parseFunc ?? parseFloat;
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      step={0.01}
+      min={0}
+      {...rest}
+      type="number"
+      className={clsx(className, FormDefaults.cssClassPrefix + 'money-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+/** Input group for inputting money. */
+const MoneyInputGroupWithRef = React.forwardRef(
+  MoneyInputGroup
+) as React.FunctionComponent<MoneyInputGroupProps>;
+
+export default MoneyInputGroupWithRef;

package/src/Input/NumberInputGroup.tsx

@@ -1,48 +1,45 @@
-import React, { LegacyRef } from 'react';
-import classNames from 'classnames';
-import InputGroup, { InputGroupProps } from './InputGroup';
-import { FormDefaults } from '../FormDefaults';
-
-export interface NumberInputGroupProps
-  extends Omit<
-    InputGroupProps<number | undefined | null>,
-    'onChange' | 'type' | 'value'
-  > {
-  /** Custom parsing function when the value changes. */
-  parseFunc?: typeof parseInt | typeof parseFloat;
-}
-
-function NumberInputGroup(
-  { parseFunc, className, ...rest }: NumberInputGroupProps,
-  ref: LegacyRef<HTMLInputElement>
-) {
-  const effectiveParse = parseFunc ?? parseFloat;
-  const { input } = rest;
-
-  return (
-    <InputGroup
-      ref={ref}
-      {...rest}
-      type="number"
-      className={classNames(
-        className,
-        FormDefaults.cssClassPrefix + 'number-group'
-      )}
-      value={input.value || ''}
-      onChange={(e) => {
-        if (!e.target.value) {
-          input.onChange(undefined);
-        } else {
-          input.onChange(effectiveParse(e.target.value));
-        }
-      }}
-    />
-  );
-}
-
-/** Standard number input group. By default allows for float values. */
-const NumberInputGroupWithRef = React.forwardRef(
-  NumberInputGroup
-) as React.ComponentType<NumberInputGroupProps>;
-
-export default NumberInputGroupWithRef;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+import InputGroup, { InputGroupProps } from './InputGroup';
+import { FormDefaults } from '../FormDefaults';
+
+export interface NumberInputGroupProps
+  extends Omit<
+    InputGroupProps<number | undefined | null>,
+    'onChange' | 'type' | 'value'
+  > {
+  /** Custom parsing function when the value changes. */
+  parseFunc?: typeof parseInt | typeof parseFloat;
+}
+
+function NumberInputGroup(
+  { parseFunc, className, ...rest }: NumberInputGroupProps,
+  ref: LegacyRef<HTMLInputElement>
+) {
+  const effectiveParse = parseFunc ?? parseFloat;
+  const { input } = rest;
+
+  return (
+    <InputGroup
+      ref={ref}
+      {...rest}
+      type="number"
+      className={clsx(className, FormDefaults.cssClassPrefix + 'number-group')}
+      value={input.value || ''}
+      onChange={(e) => {
+        if (!e.target.value) {
+          input.onChange(undefined);
+        } else {
+          input.onChange(effectiveParse(e.target.value));
+        }
+      }}
+    />
+  );
+}
+
+/** Standard number input group. By default allows for float values. */
+const NumberInputGroupWithRef = React.forwardRef(
+  NumberInputGroup
+) as React.ComponentType<NumberInputGroupProps>;
+
+export default NumberInputGroupWithRef;

package/src/Input/PhoneNumberInputGroup.tsx

@@ -1,45 +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;
+import React, { LegacyRef } from 'react';
+import { clsx } from 'clsx';
+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={clsx(
+        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;