From 298108ae63a5e05701e4b4de0f81d473d704710b Mon Sep 17 00:00:00 2001
From: Scott Thompson <145565743+scotttjob@users.noreply.github.com>
Date: Tue, 5 Nov 2024 11:37:10 -0400
Subject: [PATCH 01/17] exploring what our forms could look like without
 react-hook-form in the middle

---
 .../components/src/FormField/FormField.tsx    | 407 +++++++++++++-----
 .../src/FormField/FormFieldAffix.tsx          |   3 +-
 .../src/FormField/FormFieldDescription.tsx    |   6 +-
 .../src/FormField/FormFieldPostFix.tsx        |   8 +-
 .../src/FormField/FormFieldTypes.ts           |   5 +
 .../src/FormField/FormFieldWrapper.tsx        | 346 ++++++++++-----
 .../src/FormField/components/ClearAction.tsx  |   8 +-
 .../src/InputText/InputText.rebuilt.tsx       | 126 ++++++
 .../components/src/InputText/InputText.tsx    |   2 +-
 packages/components/src/InputText/index.ts    |   1 -
 packages/components/src/InputText/index.tsx   |  31 ++
 .../src/InputValidation/InputValidation.tsx   |   8 +-
 12 files changed, 725 insertions(+), 226 deletions(-)
 create mode 100644 packages/components/src/InputText/InputText.rebuilt.tsx
 delete mode 100644 packages/components/src/InputText/index.ts
 create mode 100644 packages/components/src/InputText/index.tsx

diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index 130b81ea54..bfb5942896 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -6,8 +6,15 @@ import React, {
   useId,
   useImperativeHandle,
 } from "react";
-import { useController, useForm, useFormContext } from "react-hook-form";
-import { FormFieldProps } from "./FormFieldTypes";
+import {
+  FieldValues,
+  RegisterOptions,
+  UseFormSetValue,
+  useController,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import { FieldActionsRef, FormFieldProps } from "./FormFieldTypes";
 import styles from "./FormField.module.css";
 import { FormFieldWrapper } from "./FormFieldWrapper";
 import { FormFieldPostFix } from "./FormFieldPostFix";
@@ -26,70 +33,34 @@ type FormFieldInternalProps = FormFieldProps & {
   readonly id: string;
 };
 
-// eslint-disable-next-line max-statements
-function FormFieldInternal(props: FormFieldInternalProps) {
-  const {
-    actionsRef,
-    autocomplete = true,
-    children,
-    defaultValue,
-    description,
-    disabled,
-    id,
-    inputRef,
-    inline,
-    keyboard,
-    max,
-    maxLength,
-    min,
-    name: nameProp,
-    readonly,
-    rows,
-    loading,
-    type = "text",
-    validations,
-    value,
-    onChange,
-    onEnter,
-    onFocus,
-    onBlur,
-    onValidation,
-    onKeyUp,
-    clearable = "never",
-    autofocus,
-  } = props;
+export function useAtlantisReactForm({
+  actionsRef,
+  name,
+  defaultValue,
+  value,
+  validations,
+  inputRef,
+}: {
+  actionsRef?: React.RefObject<FieldActionsRef>;
+  name: string;
+  defaultValue?: string | Date;
+  value?: string | Date | number;
+  validations?: RegisterOptions;
+  inputRef?: React.RefObject<
+    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+  >;
+}) {
   const formContext = useFormContext();
   // If there isn't a Form Context being provided, get a form for this field.
   const { control, setValue, watch } =
     formContext ?? useForm({ mode: "onTouched" });
-
-  const descriptionIdentifier = `descriptionUUID--${id}`;
-  /**
-   * Generate a name if one is not supplied, this is the name
-   * that will be used for react-hook-form and not neccessarily
-   * attached to the DOM
-   */
-  const name = nameProp ? nameProp : `generatedName--${id}`;
-
-  useEffect(() => {
-    if (value != undefined) {
-      setValue(name, value);
-    }
-  }, [value, watch(name)]);
-
   useImperativeHandle(actionsRef, () => ({
     setValue: newValue => {
       setValue(name, newValue, { shouldValidate: true });
     },
   }));
-
   const {
-    field: {
-      onChange: onControllerChange,
-      onBlur: onControllerBlur,
-      ref: fieldRef,
-      ...rest
-    },
+    field: { onChange, onBlur, ref: fieldRef, ...rest },
     fieldState: { error },
   } = useController({
     name,
@@ -98,8 +69,90 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     defaultValue: value ?? defaultValue ?? "",
   });
 
-  const errorMessage = error?.message || "";
-  useEffect(() => handleValidation(errorMessage), [errorMessage]);
+  useEffect(() => {
+    if (value != undefined) {
+      setValue(name, value);
+    }
+  }, [value, watch(name)]);
+
+  const inputRefs = mergeRefs([inputRef, fieldRef]);
+
+  return {
+    inputRefs,
+    rest,
+    setValue,
+    errorMessage: error?.message || "",
+    onControllerChange: onChange,
+    onControllerBlur: onBlur,
+  };
+}
+
+export function useAtlantisFormFieldName({
+  id,
+  nameProp,
+}: {
+  id: string;
+  nameProp?: string;
+}) {
+  /**
+   * Generate a name if one is not supplied, this is the name
+   * that will be used for react-hook-form and not neccessarily
+   * attached to the DOM
+   */
+  const name = nameProp ? nameProp : `generatedName--${id}`;
+
+  return { name };
+}
+
+export function useAtlantisFormField({
+  id,
+  nameProp,
+  name,
+  rest,
+  description,
+  disabled,
+  readonly,
+  keyboard,
+  autofocus,
+  handleChange,
+  handleBlur,
+  handleFocus,
+  inline,
+  validations,
+  handleKeyDown,
+  handleValidation,
+  errorMessage,
+}: {
+  id: string;
+  nameProp?: string;
+  name: string;
+  actionsRef?: React.RefObject<FieldActionsRef>;
+  rest: object;
+  description?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  keyboard?: string;
+  errorMessage: string;
+  autofocus?: boolean;
+  validations: boolean;
+  handleChange: (
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  handleBlur: () => void;
+  handleFocus: (
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  inline?: boolean;
+  handleKeyDown: (
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  handleValidation: (message: string) => void;
+}) {
+  const descriptionIdentifier = `descriptionUUID--${id}`;
 
   const fieldProps = {
     ...rest,
@@ -108,7 +161,13 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     name: (validations || nameProp) && name,
     disabled: disabled,
     readOnly: readonly,
-    inputMode: keyboard,
+    inputMode: keyboard as
+      | "text"
+      | "none"
+      | "tel"
+      | "url"
+      | "email"
+      | "numeric",
     onChange: handleChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
@@ -122,53 +181,45 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     autoFocus: autofocus,
     onKeyDown: handleKeyDown,
   };
-  const inputRefs = mergeRefs([inputRef, fieldRef]);
-
-  return (
-    <FormFieldWrapper
-      {...props}
-      value={rest.value}
-      error={errorMessage}
-      identifier={id}
-      descriptionIdentifier={descriptionIdentifier}
-      clearable={clearable}
-      onClear={handleClear}
-    >
-      {renderField()}
-    </FormFieldWrapper>
-  );
+  useEffect(() => handleValidation(errorMessage), [errorMessage]);
 
-  function renderField() {
-    switch (type) {
-      case "select":
-        return (
-          <>
-            <select {...fieldProps}>{children}</select>
-            <FormFieldPostFix variation="select" />
-          </>
-        );
-      case "textarea":
-        return <textarea {...textFieldProps} rows={rows} ref={inputRefs} />;
-      default:
-        return (
-          <>
-            <input
-              {...textFieldProps}
-              autoComplete={setAutocomplete(autocomplete)}
-              type={type}
-              maxLength={maxLength}
-              max={max}
-              min={min}
-              ref={inputRefs}
-              onKeyUp={onKeyUp}
-            />
-            {loading && <FormFieldPostFix variation="spinner" />}
-            {children}
-          </>
-        );
-    }
-  }
+  return { textFieldProps, fieldProps, descriptionIdentifier };
+}
 
+export function useAtlantisFormFieldActions({
+  name,
+  onChange,
+  inputRef,
+  onControllerChange,
+  onControllerBlur,
+  onEnter,
+  readonly,
+  type,
+  setValue,
+  onFocus,
+  onBlur,
+  onValidation,
+}: {
+  name: string;
+  onChange?:
+    | ((
+        newValue: string | number | boolean | Date,
+        event?: ChangeEvent<
+          HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+        >,
+      ) => void)
+    | undefined;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  onControllerChange: (...event: unknown[]) => void;
+  onControllerBlur: () => void;
+  onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
+  readonly?: boolean;
+  type: string;
+  setValue: UseFormSetValue<FieldValues>;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  onValidation?: ((message: string) => void) | undefined;
+}) {
   function handleClear() {
     handleBlur();
     setValue(name, "", { shouldValidate: true });
@@ -224,6 +275,154 @@ function FormFieldInternal(props: FormFieldInternalProps) {
   function handleValidation(message: string) {
     onValidation && onValidation(message);
   }
+
+  return {
+    handleClear,
+    handleChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    handleValidation,
+  };
+}
+
+// eslint-disable-next-line max-statements
+function FormFieldInternal(props: FormFieldInternalProps) {
+  const {
+    actionsRef,
+    autocomplete = true,
+    children,
+    defaultValue,
+    description,
+    disabled,
+    id,
+    inputRef,
+    inline,
+    keyboard,
+    max,
+    maxLength,
+    min,
+    name: nameProp,
+    readonly,
+    rows,
+    loading,
+    type = "text",
+    validations,
+    value,
+    onChange,
+    onEnter,
+    onFocus,
+    onBlur,
+    onValidation,
+    onKeyUp,
+    clearable = "never",
+    autofocus,
+  } = props;
+
+  const { name } = useAtlantisFormFieldName({ id, nameProp });
+
+  const {
+    errorMessage,
+    inputRefs,
+    rest,
+    setValue,
+    onControllerBlur,
+    onControllerChange,
+  } = useAtlantisReactForm({
+    actionsRef,
+    name,
+    defaultValue,
+    value,
+    validations,
+    inputRef,
+  });
+  const {
+    handleValidation,
+    handleBlur,
+    handleChange,
+    handleClear,
+    handleFocus,
+    handleKeyDown,
+  } = useAtlantisFormFieldActions({
+    onChange,
+    onEnter,
+    readonly,
+    type,
+    onFocus,
+    setValue,
+    onBlur,
+    onValidation,
+    onControllerBlur,
+    onControllerChange,
+    name,
+  });
+
+  const { textFieldProps, fieldProps, descriptionIdentifier } =
+    useAtlantisFormField({
+      id,
+      nameProp,
+      actionsRef,
+      rest,
+      name,
+      description,
+      validations: !!validations,
+      disabled,
+      readonly,
+      keyboard,
+      autofocus,
+      handleChange,
+      handleBlur,
+      handleFocus,
+      inline,
+      errorMessage,
+      handleValidation,
+      handleKeyDown,
+    });
+
+  return (
+    <FormFieldWrapper
+      {...props}
+      value={rest.value}
+      error={errorMessage}
+      identifier={id}
+      descriptionIdentifier={descriptionIdentifier}
+      clearable={clearable}
+      onClear={handleClear}
+    >
+      {renderField()}
+    </FormFieldWrapper>
+  );
+
+  function renderField() {
+    switch (type) {
+      case "select":
+        return (
+          <>
+            <select {...fieldProps}>{children}</select>
+            <FormFieldPostFix variation="select" />
+          </>
+        );
+      case "textarea":
+        return <textarea {...textFieldProps} rows={rows} ref={inputRefs} />;
+      default:
+        return (
+          <>
+            <input
+              {...textFieldProps}
+              autoComplete={setAutocomplete(autocomplete)}
+              type={type}
+              maxLength={maxLength}
+              max={max}
+              min={min}
+              ref={inputRefs}
+              onKeyUp={onKeyUp}
+            />
+            {loading && <FormFieldPostFix variation="spinner" />}
+            {children}
+          </>
+        );
+    }
+  }
 }
 
 function setAutocomplete(
diff --git a/packages/components/src/FormField/FormFieldAffix.tsx b/packages/components/src/FormField/FormFieldAffix.tsx
index 1196f5dd78..19f29eafdb 100644
--- a/packages/components/src/FormField/FormFieldAffix.tsx
+++ b/packages/components/src/FormField/FormFieldAffix.tsx
@@ -19,6 +19,7 @@ export function AffixLabel({
   const affixLabelClass = classnames(styles.affixLabel, {
     [styles.suffix]: variation === "suffix",
   });
+  if (!label) return null;
 
   return (
     <div ref={labelRef} className={affixLabelClass}>
@@ -44,7 +45,7 @@ export function AffixIcon({
 
   const iconSize = size === "small" ? "small" : "base";
 
-  if (!icon) return <></>;
+  if (!icon) return null;
 
   return (
     <div className={affixIconClass}>
diff --git a/packages/components/src/FormField/FormFieldDescription.tsx b/packages/components/src/FormField/FormFieldDescription.tsx
index 906f8d78d5..812f18c325 100644
--- a/packages/components/src/FormField/FormFieldDescription.tsx
+++ b/packages/components/src/FormField/FormFieldDescription.tsx
@@ -4,13 +4,17 @@ import { Text } from "../Text";
 
 interface FormFieldDescriptionProps {
   readonly id: string;
-  readonly description: string;
+  readonly description?: string;
+  readonly visible?: boolean;
 }
 
 export function FormFieldDescription({
   id,
   description,
+  visible = true,
 }: FormFieldDescriptionProps) {
+  if (!visible) return null;
+
   return (
     <div id={id} className={styles.description}>
       <Text size="small" variation="subdued">
diff --git a/packages/components/src/FormField/FormFieldPostFix.tsx b/packages/components/src/FormField/FormFieldPostFix.tsx
index 190642cccf..231403ecfd 100644
--- a/packages/components/src/FormField/FormFieldPostFix.tsx
+++ b/packages/components/src/FormField/FormFieldPostFix.tsx
@@ -5,9 +5,15 @@ import { Spinner } from "../Spinner";
 
 interface FormFieldPostFixProps {
   readonly variation: "select" | "spinner";
+  readonly visible?: boolean;
 }
 
-export function FormFieldPostFix({ variation }: FormFieldPostFixProps) {
+export function FormFieldPostFix({
+  variation,
+  visible = true,
+}: FormFieldPostFixProps) {
+  if (!visible) return null;
+
   return (
     <span className={styles.postfix}>
       {variation === "select" ? (
diff --git a/packages/components/src/FormField/FormFieldTypes.ts b/packages/components/src/FormField/FormFieldTypes.ts
index bd34c3e557..2c5d9903a0 100644
--- a/packages/components/src/FormField/FormFieldTypes.ts
+++ b/packages/components/src/FormField/FormFieldTypes.ts
@@ -123,6 +123,11 @@ export interface CommonFormFieldProps {
    * set it to `always`.
    */
   readonly clearable?: Clearable;
+
+  /**
+   * Which version of the Field to use
+   */
+  version?: 1;
 }
 
 export interface FormFieldProps extends CommonFormFieldProps {
diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx
index e65a3e606c..76211823cf 100644
--- a/packages/components/src/FormField/FormFieldWrapper.tsx
+++ b/packages/components/src/FormField/FormFieldWrapper.tsx
@@ -1,5 +1,6 @@
 import React, {
   PropsWithChildren,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -19,7 +20,7 @@ import { useFormFieldFocus } from "./hooks/useFormFieldFocus";
 import { useIsSafari } from "./hooks/useIsSafari";
 import { InputValidation } from "../InputValidation";
 
-interface FormFieldWrapperProps extends FormFieldProps {
+export interface FormFieldWrapperProps extends FormFieldProps {
   readonly error: string;
   readonly identifier: string;
   readonly descriptionIdentifier: string;
@@ -27,7 +28,7 @@ interface FormFieldWrapperProps extends FormFieldProps {
   readonly onClear: () => void;
 }
 
-interface LabelPadding {
+export interface LabelPadding {
   paddingLeft: number | string | undefined;
   paddingRight: number | string | undefined;
 }
@@ -57,6 +58,110 @@ export function FormFieldWrapper({
   toolbarVisibility = "while-editing",
   wrapperRef,
 }: PropsWithChildren<FormFieldWrapperProps>) {
+  const prefixRef = useRef() as RefObject<HTMLDivElement>;
+  const suffixRef = useRef() as RefObject<HTMLDivElement>;
+
+  const { wrapperClasses, containerClasses, wrapperInlineStyle, labelStyle } =
+    useFormFieldWrapperStyles({
+      align,
+      max,
+      maxLength,
+      prefixWidth: prefixRef?.current?.offsetWidth ?? 0,
+      suffixWidth: suffixRef?.current?.offsetWidth ?? 0,
+      placeholder,
+      value,
+      invalid,
+      error,
+      type,
+      disabled,
+      inline,
+      size,
+    });
+
+  const { focused } = useFormFieldFocus({ wrapperRef });
+
+  const showClear = useShowClear({
+    clearable,
+    multiline: type === "textarea",
+    focused,
+    hasValue: Boolean(value),
+    disabled,
+  });
+
+  const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } =
+    useToolbar({
+      focused,
+      toolbar,
+      toolbarVisibility,
+    });
+
+  return (
+    <div className={containerClasses}>
+      <div
+        className={wrapperClasses}
+        style={wrapperInlineStyle}
+        data-testid="Form-Field-Wrapper"
+        ref={wrapperRef}
+      >
+        <FormFieldInputHorizontalWrapper>
+          <AffixIcon {...prefix} size={size} />
+          <FormFieldInputWrapperStyles>
+            <FormFieldLabel
+              placeholder={placeholder}
+              identifier={identifier}
+              style={
+                prefixRef?.current || suffixRef?.current
+                  ? labelStyle
+                  : undefined
+              }
+            />
+            <AffixLabel {...prefix} labelRef={prefixRef} />
+
+            <FormFieldWrapperMain>{children}</FormFieldWrapperMain>
+
+            <AffixLabel {...suffix} labelRef={suffixRef} variation="suffix" />
+          </FormFieldInputWrapperStyles>
+          <ClearAction onClick={onClear} visible={showClear} />
+          <AffixIcon {...suffix} variation="suffix" size={size} />
+        </FormFieldInputHorizontalWrapper>
+        <FormFieldWrapperToolbar
+          toolbarVisibility={toolbarVisibility}
+          isToolbarVisible={isToolbarVisible}
+          toolbarAnimationEnd={toolbarAnimationEnd}
+          toolbarAnimationStart={toolbarAnimationStart}
+          toolbar={toolbar}
+        />
+      </div>
+      <FormFieldDescription
+        visible={!!description && !inline}
+        id={descriptionIdentifier}
+        description={description}
+      />
+      <InputValidation message={error} visible={!!error && !inline} />
+    </div>
+  );
+}
+export interface FormFieldWrapperHookProps extends FormFieldProps {
+  error: string;
+  suffixWidth: number;
+  prefixWidth: number;
+}
+
+export function useFormFieldWrapperStyles({
+  size,
+  align,
+  placeholder,
+  value,
+  invalid,
+  error,
+  max,
+  prefixWidth,
+  suffixWidth,
+  maxLength,
+  type,
+  disabled,
+  inline,
+}: FormFieldWrapperHookProps) {
   const isSafari = useIsSafari();
   const wrapperClasses = classnames(
     styles.wrapper,
@@ -87,134 +192,145 @@ export function FormFieldWrapper({
     ["--formField-maxLength" as string]: maxLength || max,
   };
 
-  const prefixRef = useRef() as RefObject<HTMLDivElement>;
-  const suffixRef = useRef() as RefObject<HTMLDivElement>;
-
   const [labelStyle, setLabelStyle] = useState<LabelPadding>({
     paddingLeft: undefined,
     paddingRight: undefined,
   });
 
   useEffect(() => {
-    setLabelStyle(getAffixPaddding);
+    setLabelStyle(
+      getAffixPaddding({
+        value,
+        type,
+        prefixWidth,
+        suffixWidth,
+      }),
+    );
   }, [value]);
 
-  const { focused } = useFormFieldFocus({ wrapperRef });
+  return {
+    inputStyle: styles.input,
+    wrapperClasses,
+    containerClasses,
+    wrapperInlineStyle,
+    labelStyle,
+    setLabelStyle,
+  };
+}
 
-  const showClear = useShowClear({
-    clearable,
-    multiline: type === "textarea",
-    focused,
-    hasValue: Boolean(value),
-    disabled,
-  });
+export interface GetAffixProps extends FormFieldProps {
+  prefixWidth: number;
+  suffixWidth: number;
+}
 
-  const { isToolbarVisible, toolbarAnimationEnd, toolbarAnimationStart } =
-    useToolbar({
-      focused,
-      toolbar,
-      toolbarVisibility,
-    });
+export function getAffixPaddding({
+  value,
+  type,
+  prefixWidth,
+  suffixWidth,
+}: GetAffixProps) {
+  const hasValue = value !== "";
+  const newPadding: LabelPadding = {
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  };
 
-  return (
-    <div className={containerClasses}>
-      <div
-        className={wrapperClasses}
-        style={wrapperInlineStyle}
-        data-testid="Form-Field-Wrapper"
-        ref={wrapperRef}
-      >
-        <div className={styles.horizontalWrapper}>
-          {prefix?.icon && <AffixIcon {...prefix} size={size} />}
-          <div className={styles.inputWrapper}>
-            {placeholder && (
-              <label
-                className={styles.label}
-                htmlFor={identifier}
-                style={
-                  prefixRef?.current || suffixRef?.current
-                    ? labelStyle
-                    : undefined
-                }
-              >
-                {placeholder}
-              </label>
-            )}
-
-            {prefix?.label && <AffixLabel {...prefix} labelRef={prefixRef} />}
-
-            <div className={styles.childrenWrapper} tabIndex={-1}>
-              {children}
-            </div>
-
-            {suffix?.label && (
-              <AffixLabel {...suffix} labelRef={suffixRef} variation="suffix" />
-            )}
-          </div>
-          {showClear && <ClearAction onClick={onClear} />}
-          {suffix?.icon && (
-            <AffixIcon {...suffix} variation="suffix" size={size} />
-          )}
-        </div>
-        <AnimatePresence
-          initial={toolbarVisibility === "always" ? false : true}
-        >
-          {isToolbarVisible && (
-            <motion.div
-              key="toolbar"
-              initial={toolbarAnimationEnd}
-              animate={toolbarAnimationStart}
-              exit={toolbarAnimationEnd}
-              transition={{
-                duration: tokens["timing-base"] / 1000,
-                ease: "easeInOut",
-              }}
-              tabIndex={-1}
-            >
-              <div
-                className={styles.toolbar}
-                data-testid="ATL-InputText-Toolbar"
-              >
-                {toolbar}
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-      {description && !inline && (
-        <FormFieldDescription
-          id={descriptionIdentifier}
-          description={description}
-        />
-      )}
-      {error && !inline && <InputValidation message={error} />}
-    </div>
-  );
+  // Naively assume that if the the type is tel, it is the InputPhoneNumber
+  if (type === "tel") return newPadding;
 
-  function getAffixPaddding() {
-    const hasValue = value !== "";
-    const newPadding: LabelPadding = {
-      paddingLeft: undefined,
-      paddingRight: undefined,
-    };
+  if (prefixWidth && !hasValue) {
+    newPadding.paddingLeft = offset(prefixWidth);
+  }
 
-    // Naively assume that if the the type is tel, it is the InputPhoneNumber
-    if (type === "tel") return newPadding;
+  if (suffixWidth && !hasValue) {
+    newPadding.paddingRight = offset(suffixWidth);
+  }
 
-    if (prefixRef?.current && !hasValue) {
-      const { offsetWidth } = prefixRef.current;
-      newPadding.paddingLeft = offset(offsetWidth);
-    }
+  function offset(width: number) {
+    return `calc(${width}px + var(--space-smallest)`;
+  }
 
-    if (suffixRef?.current && !hasValue) {
-      const { offsetWidth } = suffixRef.current;
-      newPadding.paddingRight = offset(offsetWidth);
-    }
+  return newPadding;
+}
 
-    function offset(width: number) {
-      return `calc(${width}px + var(--space-smallest)`;
-    }
+export function FormFieldInputHorizontalWrapper({
+  children,
+}: PropsWithChildren) {
+  return <div className={styles.horizontalWrapper}>{children}</div>;
+}
 
-    return newPadding;
-  }
+export function FormFieldInputWrapperStyles({
+  children,
+}: {
+  readonly children: React.ReactNode;
+}) {
+  return <div className={styles.inputWrapper}>{children}</div>;
+}
+
+export function FormFieldWrapperMain({
+  children,
+  tabIndex = -1,
+}: {
+  readonly children: React.ReactNode;
+  readonly tabIndex?: number;
+}) {
+  return (
+    <div className={styles.childrenWrapper} tabIndex={tabIndex}>
+      {children}
+    </div>
+  );
+}
+
+export function FormFieldLabel({
+  placeholder,
+  identifier,
+  style,
+}: {
+  readonly placeholder?: string;
+  readonly identifier?: string;
+  readonly style?: React.CSSProperties;
+}) {
+  if (!placeholder) return null;
+
+  return (
+    <label className={styles.label} htmlFor={identifier} style={style}>
+      {placeholder}
+    </label>
+  );
+}
+
+export function FormFieldWrapperToolbar({
+  toolbar,
+  isToolbarVisible,
+  toolbarAnimationEnd,
+  toolbarAnimationStart,
+  toolbarVisibility,
+}: {
+  readonly toolbarVisibility: string;
+  readonly isToolbarVisible: boolean;
+  readonly toolbarAnimationEnd: { opacity: number; height: number };
+  readonly toolbarAnimationStart: { opacity: number; height: string | number };
+  readonly toolbar: ReactNode;
+}) {
+  return (
+    <AnimatePresence initial={toolbarVisibility === "always" ? false : true}>
+      {isToolbarVisible && (
+        <motion.div
+          key="toolbar"
+          initial={toolbarAnimationEnd}
+          animate={toolbarAnimationStart}
+          exit={toolbarAnimationEnd}
+          transition={{
+            duration: tokens["timing-base"] / 1000,
+            ease: "easeInOut",
+          }}
+          tabIndex={-1}
+        >
+          <div className={styles.toolbar} data-testid="ATL-InputText-Toolbar">
+            {toolbar}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
 }
diff --git a/packages/components/src/FormField/components/ClearAction.tsx b/packages/components/src/FormField/components/ClearAction.tsx
index 1b0e9c9732..0826ab5630 100644
--- a/packages/components/src/FormField/components/ClearAction.tsx
+++ b/packages/components/src/FormField/components/ClearAction.tsx
@@ -7,9 +7,15 @@ interface ClearActionProps {
    * Click handler
    */
   readonly onClick: () => void;
+  readonly visible?: boolean;
 }
 
-export function ClearAction({ onClick }: ClearActionProps): JSX.Element {
+export function ClearAction({
+  onClick,
+  visible,
+}: ClearActionProps): React.ReactElement | null {
+  if (!visible) return null;
+
   return (
     <button
       className={styles.clearInput}
diff --git a/packages/components/src/InputText/InputText.rebuilt.tsx b/packages/components/src/InputText/InputText.rebuilt.tsx
new file mode 100644
index 0000000000..2aa953ea3a
--- /dev/null
+++ b/packages/components/src/InputText/InputText.rebuilt.tsx
@@ -0,0 +1,126 @@
+import React, { forwardRef, useEffect, useId } from "react";
+import { Clearable } from "@jobber/hooks";
+import {
+  FormFieldWrapper,
+  FormFieldWrapperHookProps,
+  useFormFieldWrapperStyles,
+} from "../FormField/FormFieldWrapper";
+import { FormFieldPostFix } from "../FormField/FormFieldPostFix";
+import {
+  AutocompleteTypes,
+  FormFieldTypes,
+  useAtlantisFormField,
+  useAtlantisFormFieldActions,
+  useAtlantisFormFieldName,
+} from "../FormField";
+
+export const InputTextSPAR = forwardRef(function InputTextInternal(
+  props: InputTextRebuiltProps,
+  inputRefs: React.Ref<HTMLInputElement>,
+) {
+  const legacyPropHelper = {
+    prefixWidth: 0,
+    suffixWidth: 0,
+    ...props,
+    version: 1,
+  };
+  const id = useId();
+
+  const [value, setValue] = React.useState(props.value || "");
+
+  useEffect(() => {
+    setValue(props.value || "");
+  }, [props.value]);
+
+  const { inputStyle } = useFormFieldWrapperStyles({
+    ...(legacyPropHelper as FormFieldWrapperHookProps),
+  });
+
+  const { name } = useAtlantisFormFieldName({
+    nameProp: props.name,
+    id: props.id || id,
+  });
+
+  const {
+    handleChange,
+    handleBlur,
+    handleFocus,
+    handleKeyDown,
+    handleValidation,
+  } = useAtlantisFormFieldActions({
+    name,
+    onChange: props.onChange as
+      | ((
+          newValue: string | number | boolean | Date,
+          event?:
+            | React.ChangeEvent<
+                HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+              >
+            | undefined,
+        ) => void)
+      | undefined,
+    onBlur: props.onBlur as (() => void) | undefined,
+    onFocus: props.onFocus as () => void,
+    onControllerBlur: () => ({}),
+    onControllerChange: () => ({}),
+    type: "text",
+    setValue,
+  });
+
+  const { fieldProps } = useAtlantisFormField({
+    id,
+    name,
+    rest: {},
+    validations: false,
+    handleChange,
+    handleBlur,
+    handleFocus,
+    handleKeyDown,
+    handleValidation,
+    errorMessage: "",
+  });
+
+  return (
+    <FormFieldWrapper
+      name={name}
+      error={props.error ?? ""}
+      identifier={id}
+      descriptionIdentifier={props["aria-describedby"] ?? ""}
+      clearable={props.clearable ?? "never"}
+      onClear={props.onClear ?? (() => ({}))}
+      type={props.type}
+      placeholder={props.placeholder}
+      value={value as string}
+    >
+      <>
+        <input
+          {...fieldProps}
+          name={name}
+          ref={inputRefs}
+          className={inputStyle}
+          value={value}
+          onChange={e => setValue(e.target.value)}
+        />
+        <FormFieldPostFix
+          variation="spinner"
+          visible={props.loading ?? false}
+        />
+        {props.children}
+      </>
+    </FormFieldWrapper>
+  );
+});
+
+export interface InputTextRebuiltProps
+  extends React.InputHTMLAttributes<never> {
+  readonly error?: string;
+  readonly identifier?: string;
+  readonly autocomplete?: boolean | AutocompleteTypes;
+  readonly loading?: boolean;
+  readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  readonly children?: React.ReactNode;
+  readonly clearable?: Clearable;
+  readonly onClear?: () => void;
+  readonly type?: FormFieldTypes;
+  readonly version: 2;
+}
diff --git a/packages/components/src/InputText/InputText.tsx b/packages/components/src/InputText/InputText.tsx
index 5ea65275a1..1448a48046 100644
--- a/packages/components/src/InputText/InputText.tsx
+++ b/packages/components/src/InputText/InputText.tsx
@@ -59,7 +59,7 @@ interface MultilineProps extends BaseProps {
   readonly rows?: number | RowRange;
 }
 
-type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
+export type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
 
 function InputTextInternal(
   props: InputTextPropOptions,
diff --git a/packages/components/src/InputText/index.ts b/packages/components/src/InputText/index.ts
deleted file mode 100644
index 5f1b5c6efb..0000000000
--- a/packages/components/src/InputText/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { InputText, InputTextRef } from "./InputText";
diff --git a/packages/components/src/InputText/index.tsx b/packages/components/src/InputText/index.tsx
new file mode 100644
index 0000000000..128fc4535c
--- /dev/null
+++ b/packages/components/src/InputText/index.tsx
@@ -0,0 +1,31 @@
+import React, { ForwardedRef } from "react";
+import {
+  InputText as InputTextLegacy,
+  InputTextPropOptions,
+  InputTextRef,
+} from "./InputText";
+import { InputTextRebuiltProps, InputTextSPAR } from "./InputText.rebuilt";
+
+type CombinedProps = InputTextPropOptions | InputTextRebuiltProps;
+
+export const InputText = React.forwardRef(function InputText(
+  props: CombinedProps,
+  ref,
+) {
+  if (props.version === 2) {
+    return (
+      <InputTextSPAR
+        {...(props as InputTextRebuiltProps)}
+        ref={ref as ForwardedRef<HTMLInputElement>}
+      />
+    );
+  }
+
+  return (
+    <InputTextLegacy
+      {...(props as InputTextPropOptions)}
+      ref={ref as ForwardedRef<InputTextRef>}
+    />
+  );
+});
+export { InputTextRef };
diff --git a/packages/components/src/InputValidation/InputValidation.tsx b/packages/components/src/InputValidation/InputValidation.tsx
index f4aa5ceda0..201cb89c62 100644
--- a/packages/components/src/InputValidation/InputValidation.tsx
+++ b/packages/components/src/InputValidation/InputValidation.tsx
@@ -9,15 +9,21 @@ interface InputValidationProps {
    * Validation message to be displayed
    */
   readonly message: string;
+  readonly visible?: boolean;
 }
 
-export function InputValidation({ message }: InputValidationProps) {
+export function InputValidation({
+  message,
+  visible = true,
+}: InputValidationProps) {
   const messages = [message];
   const variants = {
     slideOut: { y: "5%", opacity: 0 },
     slideIn: { y: 0, opacity: 1 },
   };
 
+  if (!visible) return null;
+
   return (
     <>
       {messages && messages.length > 0 && (

From 4fb91225ebefd6ec7763d87cd4625ca8e3061104 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 09:32:36 -0800
Subject: [PATCH 02/17] Pull FormField changes into reusable hooks

---
 .../src/FormField/FormField.test.tsx          |   2 +-
 .../components/src/FormField/FormField.tsx    | 278 +-----------------
 .../src/FormField/FormFieldWrapper.tsx        | 128 +-------
 .../FormField/hooks/useAtlantisFormField.ts   |  85 ++++++
 .../hooks/useAtlantisFormFieldActions.ts      | 105 +++++++
 .../hooks/useAtlantisFormFieldName.ts         |  16 +
 .../hooks/useAtlantisReactHookForm.ts         |  66 +++++
 .../hooks/useFormFieldWrapperStyles.ts        | 121 ++++++++
 packages/components/src/FormField/index.ts    |   9 +
 packages/components/src/utils/meta/meta.json  |   3 +-
 10 files changed, 413 insertions(+), 400 deletions(-)
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormField.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
 create mode 100644 packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
 create mode 100644 packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts

diff --git a/packages/components/src/FormField/FormField.test.tsx b/packages/components/src/FormField/FormField.test.tsx
index 8432f36560..ffd985066f 100644
--- a/packages/components/src/FormField/FormField.test.tsx
+++ b/packages/components/src/FormField/FormField.test.tsx
@@ -229,7 +229,7 @@ describe("FormField", () => {
     describe("with validation errors", () => {
       it("should trigger onValidation with error message", async () => {
         const validationHandler = jest.fn();
-        const validate = val => (val == "Bob" ? "message" : "foo");
+        const validate = (val: string) => (val == "Bob" ? "message" : "foo");
 
         const { getByLabelText } = render(
           <FormField
diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index bfb5942896..4e229e991c 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -1,24 +1,11 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  KeyboardEvent,
-  useEffect,
-  useId,
-  useImperativeHandle,
-} from "react";
-import {
-  FieldValues,
-  RegisterOptions,
-  UseFormSetValue,
-  useController,
-  useForm,
-  useFormContext,
-} from "react-hook-form";
-import { FieldActionsRef, FormFieldProps } from "./FormFieldTypes";
-import styles from "./FormField.module.css";
+import React, { useId } from "react";
+import { FormFieldProps } from "./FormFieldTypes";
 import { FormFieldWrapper } from "./FormFieldWrapper";
 import { FormFieldPostFix } from "./FormFieldPostFix";
-import { mergeRefs } from "../utils/mergeRefs";
+import { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
+import { useAtlantisFormField } from "./hooks/useAtlantisFormField";
+import { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
+import { useAtlantisReactForm } from "./hooks/useAtlantisReactHookForm";
 
 export function FormField(props: FormFieldProps) {
   // Warning: do not move useId into FormFieldInternal. This must be here to avoid
@@ -33,259 +20,6 @@ type FormFieldInternalProps = FormFieldProps & {
   readonly id: string;
 };
 
-export function useAtlantisReactForm({
-  actionsRef,
-  name,
-  defaultValue,
-  value,
-  validations,
-  inputRef,
-}: {
-  actionsRef?: React.RefObject<FieldActionsRef>;
-  name: string;
-  defaultValue?: string | Date;
-  value?: string | Date | number;
-  validations?: RegisterOptions;
-  inputRef?: React.RefObject<
-    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-  >;
-}) {
-  const formContext = useFormContext();
-  // If there isn't a Form Context being provided, get a form for this field.
-  const { control, setValue, watch } =
-    formContext ?? useForm({ mode: "onTouched" });
-  useImperativeHandle(actionsRef, () => ({
-    setValue: newValue => {
-      setValue(name, newValue, { shouldValidate: true });
-    },
-  }));
-  const {
-    field: { onChange, onBlur, ref: fieldRef, ...rest },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    rules: validations,
-    defaultValue: value ?? defaultValue ?? "",
-  });
-
-  useEffect(() => {
-    if (value != undefined) {
-      setValue(name, value);
-    }
-  }, [value, watch(name)]);
-
-  const inputRefs = mergeRefs([inputRef, fieldRef]);
-
-  return {
-    inputRefs,
-    rest,
-    setValue,
-    errorMessage: error?.message || "",
-    onControllerChange: onChange,
-    onControllerBlur: onBlur,
-  };
-}
-
-export function useAtlantisFormFieldName({
-  id,
-  nameProp,
-}: {
-  id: string;
-  nameProp?: string;
-}) {
-  /**
-   * Generate a name if one is not supplied, this is the name
-   * that will be used for react-hook-form and not neccessarily
-   * attached to the DOM
-   */
-  const name = nameProp ? nameProp : `generatedName--${id}`;
-
-  return { name };
-}
-
-export function useAtlantisFormField({
-  id,
-  nameProp,
-  name,
-  rest,
-  description,
-  disabled,
-  readonly,
-  keyboard,
-  autofocus,
-  handleChange,
-  handleBlur,
-  handleFocus,
-  inline,
-  validations,
-  handleKeyDown,
-  handleValidation,
-  errorMessage,
-}: {
-  id: string;
-  nameProp?: string;
-  name: string;
-  actionsRef?: React.RefObject<FieldActionsRef>;
-  rest: object;
-  description?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  keyboard?: string;
-  errorMessage: string;
-  autofocus?: boolean;
-  validations: boolean;
-  handleChange: (
-    event: ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => void;
-  handleBlur: () => void;
-  handleFocus: (
-    event: FocusEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => void;
-  inline?: boolean;
-  handleKeyDown: (
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-  handleValidation: (message: string) => void;
-}) {
-  const descriptionIdentifier = `descriptionUUID--${id}`;
-
-  const fieldProps = {
-    ...rest,
-    id,
-    className: styles.input,
-    name: (validations || nameProp) && name,
-    disabled: disabled,
-    readOnly: readonly,
-    inputMode: keyboard as
-      | "text"
-      | "none"
-      | "tel"
-      | "url"
-      | "email"
-      | "numeric",
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    autoFocus: autofocus,
-    ...(description &&
-      !inline && { "aria-describedby": descriptionIdentifier }),
-  };
-
-  const textFieldProps = {
-    ...fieldProps,
-    autoFocus: autofocus,
-    onKeyDown: handleKeyDown,
-  };
-  useEffect(() => handleValidation(errorMessage), [errorMessage]);
-
-  return { textFieldProps, fieldProps, descriptionIdentifier };
-}
-
-export function useAtlantisFormFieldActions({
-  name,
-  onChange,
-  inputRef,
-  onControllerChange,
-  onControllerBlur,
-  onEnter,
-  readonly,
-  type,
-  setValue,
-  onFocus,
-  onBlur,
-  onValidation,
-}: {
-  name: string;
-  onChange?:
-    | ((
-        newValue: string | number | boolean | Date,
-        event?: ChangeEvent<
-          HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-        >,
-      ) => void)
-    | undefined;
-  inputRef?: React.RefObject<HTMLInputElement>;
-  onControllerChange: (...event: unknown[]) => void;
-  onControllerBlur: () => void;
-  onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-  readonly?: boolean;
-  type: string;
-  setValue: UseFormSetValue<FieldValues>;
-  onFocus?: (() => void) | undefined;
-  onBlur?: (() => void) | undefined;
-  onValidation?: ((message: string) => void) | undefined;
-}) {
-  function handleClear() {
-    handleBlur();
-    setValue(name, "", { shouldValidate: true });
-    onChange && onChange("");
-    inputRef?.current?.focus();
-  }
-
-  function handleChange(
-    event: ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) {
-    let newValue: string | number;
-    newValue = event.currentTarget.value;
-
-    if (type === "number" && newValue.length > 0) {
-      newValue = parseFloat(newValue);
-    }
-
-    onChange && onChange(newValue, event);
-    onControllerChange(event);
-  }
-
-  function handleKeyDown(
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) {
-    if (!onEnter) return;
-    if (event.key !== "Enter") return;
-    if (event.shiftKey || event.ctrlKey) return;
-    event.preventDefault();
-    onEnter && onEnter(event);
-  }
-
-  function handleFocus(
-    event: FocusEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) {
-    const target = event.currentTarget;
-
-    if ((target as HTMLInputElement).select) {
-      setTimeout(() => readonly && (target as HTMLInputElement).select());
-    }
-
-    onFocus && onFocus();
-  }
-
-  function handleBlur() {
-    onBlur && onBlur();
-    onControllerBlur();
-  }
-
-  function handleValidation(message: string) {
-    onValidation && onValidation(message);
-  }
-
-  return {
-    handleClear,
-    handleChange,
-    handleKeyDown,
-    handleFocus,
-    handleBlur,
-    handleValidation,
-  };
-}
-
 // eslint-disable-next-line max-statements
 function FormFieldInternal(props: FormFieldInternalProps) {
   const {
diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx
index 76211823cf..e41f8b05a0 100644
--- a/packages/components/src/FormField/FormFieldWrapper.tsx
+++ b/packages/components/src/FormField/FormFieldWrapper.tsx
@@ -1,12 +1,4 @@
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import classnames from "classnames";
+import React, { PropsWithChildren, ReactNode, RefObject, useRef } from "react";
 import { Clearable, useShowClear } from "@jobber/hooks/useShowClear";
 import { AnimatePresence, motion } from "framer-motion";
 import { tokens } from "@jobber/design";
@@ -17,7 +9,7 @@ import { FormFieldDescription } from "./FormFieldDescription";
 import { ClearAction } from "./components/ClearAction";
 import { useToolbar } from "./hooks/useToolbar";
 import { useFormFieldFocus } from "./hooks/useFormFieldFocus";
-import { useIsSafari } from "./hooks/useIsSafari";
+import { useFormFieldWrapperStyles } from "./hooks/useFormFieldWrapperStyles";
 import { InputValidation } from "../InputValidation";
 
 export interface FormFieldWrapperProps extends FormFieldProps {
@@ -28,11 +20,6 @@ export interface FormFieldWrapperProps extends FormFieldProps {
   readonly onClear: () => void;
 }
 
-export interface LabelPadding {
-  paddingLeft: number | string | undefined;
-  paddingRight: number | string | undefined;
-}
-
 // eslint-disable-next-line max-statements
 export function FormFieldWrapper({
   align,
@@ -141,117 +128,6 @@ export function FormFieldWrapper({
     </div>
   );
 }
-export interface FormFieldWrapperHookProps extends FormFieldProps {
-  error: string;
-  suffixWidth: number;
-  prefixWidth: number;
-}
-
-export function useFormFieldWrapperStyles({
-  size,
-  align,
-  placeholder,
-  value,
-  invalid,
-  error,
-  max,
-  prefixWidth,
-  suffixWidth,
-  maxLength,
-  type,
-  disabled,
-  inline,
-}: FormFieldWrapperHookProps) {
-  const isSafari = useIsSafari();
-  const wrapperClasses = classnames(
-    styles.wrapper,
-    size && styles[size],
-    align && styles[align],
-    {
-      [styles.miniLabel]:
-        (placeholder && value !== "") ||
-        (placeholder && type === "select") ||
-        // Naively assume that if the the type is tel, it is the InputPhoneNumber
-        (placeholder && type === "tel"),
-      [styles.text]: type === "textarea" || type === "text",
-      [styles.textarea]: type === "textarea",
-      [styles.safari]: isSafari && type === "textarea",
-      [styles.select]: type === "select",
-      [styles.invalid]: invalid ?? error,
-      [styles.disabled]: disabled,
-      [styles.maxLength]: maxLength,
-      [styles.timeInputLabel]:
-        placeholder && type === "time" && placeholder && value === "",
-    },
-  );
-  const containerClasses = classnames(styles.container, {
-    [styles.inline]: inline,
-  });
-
-  const wrapperInlineStyle = {
-    ["--formField-maxLength" as string]: maxLength || max,
-  };
-
-  const [labelStyle, setLabelStyle] = useState<LabelPadding>({
-    paddingLeft: undefined,
-    paddingRight: undefined,
-  });
-
-  useEffect(() => {
-    setLabelStyle(
-      getAffixPaddding({
-        value,
-        type,
-        prefixWidth,
-        suffixWidth,
-      }),
-    );
-  }, [value]);
-
-  return {
-    inputStyle: styles.input,
-    wrapperClasses,
-    containerClasses,
-    wrapperInlineStyle,
-    labelStyle,
-    setLabelStyle,
-  };
-}
-
-export interface GetAffixProps extends FormFieldProps {
-  prefixWidth: number;
-  suffixWidth: number;
-}
-
-export function getAffixPaddding({
-  value,
-  type,
-  prefixWidth,
-  suffixWidth,
-}: GetAffixProps) {
-  const hasValue = value !== "";
-  const newPadding: LabelPadding = {
-    paddingLeft: undefined,
-    paddingRight: undefined,
-  };
-
-  // Naively assume that if the the type is tel, it is the InputPhoneNumber
-  if (type === "tel") return newPadding;
-
-  if (prefixWidth && !hasValue) {
-    newPadding.paddingLeft = offset(prefixWidth);
-  }
-
-  if (suffixWidth && !hasValue) {
-    newPadding.paddingRight = offset(suffixWidth);
-  }
-
-  function offset(width: number) {
-    return `calc(${width}px + var(--space-smallest)`;
-  }
-
-  return newPadding;
-}
 
 export function FormFieldInputHorizontalWrapper({
   children,
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormField.ts b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
new file mode 100644
index 0000000000..fb05723921
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
@@ -0,0 +1,85 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent, useEffect } from "react";
+import styles from "../FormField.module.css";
+import { FieldActionsRef } from "../FormFieldTypes";
+
+export function useAtlantisFormField({
+  id,
+  nameProp,
+  name,
+  rest,
+  description,
+  disabled,
+  readonly,
+  keyboard,
+  autofocus,
+  handleChange,
+  handleBlur,
+  handleFocus,
+  inline,
+  validations,
+  handleKeyDown,
+  handleValidation,
+  errorMessage,
+}: {
+  id: string;
+  nameProp?: string;
+  name: string;
+  actionsRef?: React.RefObject<FieldActionsRef>;
+  rest: object;
+  description?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  keyboard?: string;
+  errorMessage: string;
+  autofocus?: boolean;
+  validations: boolean;
+  handleChange: (
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  handleBlur: () => void;
+  handleFocus: (
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  inline?: boolean;
+  handleKeyDown: (
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  handleValidation: (message: string) => void;
+}) {
+  const descriptionIdentifier = `descriptionUUID--${id}`;
+
+  const fieldProps = {
+    ...rest,
+    id,
+    className: styles.input,
+    name: (validations || nameProp) && name,
+    disabled: disabled,
+    readOnly: readonly,
+    inputMode: keyboard as
+      | "text"
+      | "none"
+      | "tel"
+      | "url"
+      | "email"
+      | "numeric",
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    autoFocus: autofocus,
+    ...(description &&
+      !inline && { "aria-describedby": descriptionIdentifier }),
+  };
+
+  const textFieldProps = {
+    ...fieldProps,
+    autoFocus: autofocus,
+    onKeyDown: handleKeyDown,
+  };
+  useEffect(() => handleValidation(errorMessage), [errorMessage]);
+
+  return { textFieldProps, fieldProps, descriptionIdentifier };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
new file mode 100644
index 0000000000..ddc68c9ecd
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
@@ -0,0 +1,105 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
+import { FieldValues, UseFormSetValue } from "react-hook-form";
+
+/**
+ * Generates the actions for a form field. Combines the actions from the props of the form field with the actions from react-hook-form
+ */
+export function useAtlantisFormFieldActions({
+  name,
+  onChange,
+  inputRef,
+  onControllerChange,
+  onControllerBlur,
+  onEnter,
+  readonly,
+  type,
+  setValue,
+  onFocus,
+  onBlur,
+  onValidation,
+}: {
+  name: string;
+  onChange?:
+    | ((
+        newValue: string | number | boolean | Date,
+        event?: ChangeEvent<
+          HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+        >,
+      ) => void)
+    | undefined;
+  inputRef?: React.RefObject<HTMLInputElement>;
+  onControllerChange: (...event: unknown[]) => void;
+  onControllerBlur: () => void;
+  onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
+  readonly?: boolean;
+  type: string;
+  setValue: UseFormSetValue<FieldValues>;
+  onFocus?: (() => void) | undefined;
+  onBlur?: (() => void) | undefined;
+  onValidation?: ((message: string) => void) | undefined;
+}) {
+  function handleClear() {
+    handleBlur();
+    setValue(name, "", { shouldValidate: true });
+    onChange && onChange("");
+    inputRef?.current?.focus();
+  }
+
+  function handleChange(
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) {
+    let newValue: string | number;
+    newValue = event.currentTarget.value;
+
+    if (type === "number" && newValue.length > 0) {
+      newValue = parseFloat(newValue);
+    }
+
+    onChange && onChange(newValue, event);
+    onControllerChange(event);
+  }
+
+  function handleKeyDown(
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) {
+    if (!onEnter) return;
+    if (event.key !== "Enter") return;
+    if (event.shiftKey || event.ctrlKey) return;
+    event.preventDefault();
+    onEnter && onEnter(event);
+  }
+
+  function handleFocus(
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) {
+    const target = event.currentTarget;
+
+    if ((target as HTMLInputElement).select) {
+      setTimeout(() => readonly && (target as HTMLInputElement).select());
+    }
+
+    onFocus && onFocus();
+  }
+
+  function handleBlur() {
+    onBlur && onBlur();
+    onControllerBlur();
+  }
+
+  function handleValidation(message: string) {
+    onValidation && onValidation(message);
+  }
+
+  return {
+    handleClear,
+    handleChange,
+    handleKeyDown,
+    handleFocus,
+    handleBlur,
+    handleValidation,
+  };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts b/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
new file mode 100644
index 0000000000..8410d3d053
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisFormFieldName.ts
@@ -0,0 +1,16 @@
+export function useAtlantisFormFieldName({
+  id,
+  nameProp,
+}: {
+  id: string;
+  nameProp?: string;
+}) {
+  /**
+   * Generate a name if one is not supplied, this is the name
+   * that will be used for react-hook-form and not neccessarily
+   * attached to the DOM
+   */
+  const name = nameProp ? nameProp : `generatedName--${id}`;
+
+  return { name };
+}
diff --git a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
new file mode 100644
index 0000000000..d696a0c452
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
@@ -0,0 +1,66 @@
+import { useEffect, useImperativeHandle } from "react";
+import {
+  RegisterOptions,
+  useController,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import { mergeRefs } from "@jobber/components/utils/mergeRefs";
+import { FieldActionsRef } from "../FormFieldTypes";
+
+/**
+ * Hook used to manage the form state of a field through react-hook-form
+ */
+export function useAtlantisReactForm({
+  actionsRef,
+  name,
+  defaultValue,
+  value,
+  validations,
+  inputRef,
+}: {
+  actionsRef?: React.RefObject<FieldActionsRef>;
+  name: string;
+  defaultValue?: string | Date;
+  value?: string | Date | number;
+  validations?: RegisterOptions;
+  inputRef?: React.RefObject<
+    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+  >;
+}) {
+  const formContext = useFormContext();
+  // If there isn't a Form Context being provided, get a form for this field.
+  const { control, setValue, watch } =
+    formContext ?? useForm({ mode: "onTouched" });
+  useImperativeHandle(actionsRef, () => ({
+    setValue: newValue => {
+      setValue(name, newValue, { shouldValidate: true });
+    },
+  }));
+  const {
+    field: { onChange, onBlur, ref: fieldRef, ...rest },
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+    rules: validations,
+    defaultValue: value ?? defaultValue ?? "",
+  });
+
+  useEffect(() => {
+    if (value != undefined) {
+      setValue(name, value);
+    }
+  }, [value, watch(name)]);
+
+  const inputRefs = mergeRefs([inputRef, fieldRef]);
+
+  return {
+    inputRefs,
+    rest,
+    setValue,
+    errorMessage: error?.message || "",
+    onControllerChange: onChange,
+    onControllerBlur: onBlur,
+  };
+}
diff --git a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
new file mode 100644
index 0000000000..06066e28b4
--- /dev/null
+++ b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
@@ -0,0 +1,121 @@
+import classnames from "classnames";
+import { useEffect, useState } from "react";
+import { useIsSafari } from "./useIsSafari";
+import styles from "../FormField.module.css";
+import { FormFieldProps } from "../FormFieldTypes";
+
+export interface useFormFieldWrapperStylesProps extends FormFieldProps {
+  error: string;
+  suffixWidth: number;
+  prefixWidth: number;
+}
+export interface LabelPadding {
+  paddingLeft: number | string | undefined;
+  paddingRight: number | string | undefined;
+}
+
+export function useFormFieldWrapperStyles({
+  size,
+  align,
+  placeholder,
+  value,
+  invalid,
+  error,
+  max,
+  prefixWidth,
+  suffixWidth,
+  maxLength,
+  type,
+  disabled,
+  inline,
+}: useFormFieldWrapperStylesProps) {
+  const isSafari = useIsSafari();
+  const wrapperClasses = classnames(
+    styles.wrapper,
+    size && styles[size],
+    align && styles[align],
+    {
+      [styles.miniLabel]:
+        (placeholder && value !== "") ||
+        (placeholder && type === "select") ||
+        // Naively assume that if the the type is tel, it is the InputPhoneNumber
+        (placeholder && type === "tel"),
+      [styles.text]: type === "textarea" || type === "text",
+      [styles.textarea]: type === "textarea",
+      [styles.safari]: isSafari && type === "textarea",
+      [styles.select]: type === "select",
+      [styles.invalid]: invalid ?? error,
+      [styles.disabled]: disabled,
+      [styles.maxLength]: maxLength,
+      [styles.timeInputLabel]:
+        placeholder && type === "time" && placeholder && value === "",
+    },
+  );
+  const containerClasses = classnames(styles.container, {
+    [styles.inline]: inline,
+  });
+
+  const wrapperInlineStyle = {
+    ["--formField-maxLength" as string]: maxLength || max,
+  };
+
+  const [labelStyle, setLabelStyle] = useState<LabelPadding>({
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  });
+
+  useEffect(() => {
+    setLabelStyle(
+      getAffixPaddding({
+        value,
+        type,
+        prefixWidth,
+        suffixWidth,
+      }),
+    );
+  }, [value]);
+
+  return {
+    inputStyle: styles.input,
+    wrapperClasses,
+    containerClasses,
+    wrapperInlineStyle,
+    labelStyle,
+    setLabelStyle,
+  };
+}
+
+export interface GetAffixProps extends FormFieldProps {
+  prefixWidth: number;
+  suffixWidth: number;
+}
+
+export function getAffixPaddding({
+  value,
+  type,
+  prefixWidth,
+  suffixWidth,
+}: GetAffixProps) {
+  const hasValue = value !== "";
+  const newPadding: LabelPadding = {
+    paddingLeft: undefined,
+    paddingRight: undefined,
+  };
+
+  // Naively assume that if the the type is tel, it is the InputPhoneNumber
+  if (type === "tel") return newPadding;
+
+  if (prefixWidth && !hasValue) {
+    newPadding.paddingLeft = offset(prefixWidth);
+  }
+
+  if (suffixWidth && !hasValue) {
+    newPadding.paddingRight = offset(suffixWidth);
+  }
+
+  function offset(width: number) {
+    return `calc(${width}px + var(--space-smallest)`;
+  }
+
+  return newPadding;
+}
diff --git a/packages/components/src/FormField/index.ts b/packages/components/src/FormField/index.ts
index 24fed9f609..875af7a6a4 100644
--- a/packages/components/src/FormField/index.ts
+++ b/packages/components/src/FormField/index.ts
@@ -1,2 +1,11 @@
 export * from "./FormField";
 export * from "./FormFieldTypes";
+export { useAtlantisFormField } from "./hooks/useAtlantisFormField";
+export { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
+export { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
+export { useAtlantisReactForm } from "./hooks/useAtlantisReactHookForm";
+export { FormFieldWrapper } from "./FormFieldWrapper";
+export {
+  useFormFieldWrapperStyles,
+  useFormFieldWrapperStylesProps,
+} from "./hooks/useFormFieldWrapperStyles";
diff --git a/packages/components/src/utils/meta/meta.json b/packages/components/src/utils/meta/meta.json
index 105c2fd352..86f54bcf76 100644
--- a/packages/components/src/utils/meta/meta.json
+++ b/packages/components/src/utils/meta/meta.json
@@ -57,6 +57,7 @@
     "Footer",
     "Form",
     "FormField",
+    "FormFieldWrapper",
     "FormatDate",
     "FormatEmail",
     "FormatFile",
@@ -125,4 +126,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}
\ No newline at end of file

From 7c4b2fa37c6cacb9f34c62a89e6954863790fdd5 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 09:49:09 -0800
Subject: [PATCH 03/17] Undo adding of InputText.rebuilt

---
 .../src/InputText/InputText.rebuilt.tsx       | 126 ------------------
 .../components/src/InputText/InputText.tsx    |   2 +-
 packages/components/src/InputText/index.ts    |   1 +
 packages/components/src/InputText/index.tsx   |  31 -----
 4 files changed, 2 insertions(+), 158 deletions(-)
 delete mode 100644 packages/components/src/InputText/InputText.rebuilt.tsx
 create mode 100644 packages/components/src/InputText/index.ts
 delete mode 100644 packages/components/src/InputText/index.tsx

diff --git a/packages/components/src/InputText/InputText.rebuilt.tsx b/packages/components/src/InputText/InputText.rebuilt.tsx
deleted file mode 100644
index 2aa953ea3a..0000000000
--- a/packages/components/src/InputText/InputText.rebuilt.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { forwardRef, useEffect, useId } from "react";
-import { Clearable } from "@jobber/hooks";
-import {
-  FormFieldWrapper,
-  FormFieldWrapperHookProps,
-  useFormFieldWrapperStyles,
-} from "../FormField/FormFieldWrapper";
-import { FormFieldPostFix } from "../FormField/FormFieldPostFix";
-import {
-  AutocompleteTypes,
-  FormFieldTypes,
-  useAtlantisFormField,
-  useAtlantisFormFieldActions,
-  useAtlantisFormFieldName,
-} from "../FormField";
-
-export const InputTextSPAR = forwardRef(function InputTextInternal(
-  props: InputTextRebuiltProps,
-  inputRefs: React.Ref<HTMLInputElement>,
-) {
-  const legacyPropHelper = {
-    prefixWidth: 0,
-    suffixWidth: 0,
-    ...props,
-    version: 1,
-  };
-  const id = useId();
-
-  const [value, setValue] = React.useState(props.value || "");
-
-  useEffect(() => {
-    setValue(props.value || "");
-  }, [props.value]);
-
-  const { inputStyle } = useFormFieldWrapperStyles({
-    ...(legacyPropHelper as FormFieldWrapperHookProps),
-  });
-
-  const { name } = useAtlantisFormFieldName({
-    nameProp: props.name,
-    id: props.id || id,
-  });
-
-  const {
-    handleChange,
-    handleBlur,
-    handleFocus,
-    handleKeyDown,
-    handleValidation,
-  } = useAtlantisFormFieldActions({
-    name,
-    onChange: props.onChange as
-      | ((
-          newValue: string | number | boolean | Date,
-          event?:
-            | React.ChangeEvent<
-                HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-              >
-            | undefined,
-        ) => void)
-      | undefined,
-    onBlur: props.onBlur as (() => void) | undefined,
-    onFocus: props.onFocus as () => void,
-    onControllerBlur: () => ({}),
-    onControllerChange: () => ({}),
-    type: "text",
-    setValue,
-  });
-
-  const { fieldProps } = useAtlantisFormField({
-    id,
-    name,
-    rest: {},
-    validations: false,
-    handleChange,
-    handleBlur,
-    handleFocus,
-    handleKeyDown,
-    handleValidation,
-    errorMessage: "",
-  });
-
-  return (
-    <FormFieldWrapper
-      name={name}
-      error={props.error ?? ""}
-      identifier={id}
-      descriptionIdentifier={props["aria-describedby"] ?? ""}
-      clearable={props.clearable ?? "never"}
-      onClear={props.onClear ?? (() => ({}))}
-      type={props.type}
-      placeholder={props.placeholder}
-      value={value as string}
-    >
-      <>
-        <input
-          {...fieldProps}
-          name={name}
-          ref={inputRefs}
-          className={inputStyle}
-          value={value}
-          onChange={e => setValue(e.target.value)}
-        />
-        <FormFieldPostFix
-          variation="spinner"
-          visible={props.loading ?? false}
-        />
-        {props.children}
-      </>
-    </FormFieldWrapper>
-  );
-});
-
-export interface InputTextRebuiltProps
-  extends React.InputHTMLAttributes<never> {
-  readonly error?: string;
-  readonly identifier?: string;
-  readonly autocomplete?: boolean | AutocompleteTypes;
-  readonly loading?: boolean;
-  readonly onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  readonly children?: React.ReactNode;
-  readonly clearable?: Clearable;
-  readonly onClear?: () => void;
-  readonly type?: FormFieldTypes;
-  readonly version: 2;
-}
diff --git a/packages/components/src/InputText/InputText.tsx b/packages/components/src/InputText/InputText.tsx
index 1448a48046..5ea65275a1 100644
--- a/packages/components/src/InputText/InputText.tsx
+++ b/packages/components/src/InputText/InputText.tsx
@@ -59,7 +59,7 @@ interface MultilineProps extends BaseProps {
   readonly rows?: number | RowRange;
 }
 
-export type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
+type InputTextPropOptions = XOR<BaseProps, MultilineProps>;
 
 function InputTextInternal(
   props: InputTextPropOptions,
diff --git a/packages/components/src/InputText/index.ts b/packages/components/src/InputText/index.ts
new file mode 100644
index 0000000000..5f1b5c6efb
--- /dev/null
+++ b/packages/components/src/InputText/index.ts
@@ -0,0 +1 @@
+export { InputText, InputTextRef } from "./InputText";
diff --git a/packages/components/src/InputText/index.tsx b/packages/components/src/InputText/index.tsx
deleted file mode 100644
index 128fc4535c..0000000000
--- a/packages/components/src/InputText/index.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { ForwardedRef } from "react";
-import {
-  InputText as InputTextLegacy,
-  InputTextPropOptions,
-  InputTextRef,
-} from "./InputText";
-import { InputTextRebuiltProps, InputTextSPAR } from "./InputText.rebuilt";
-
-type CombinedProps = InputTextPropOptions | InputTextRebuiltProps;
-
-export const InputText = React.forwardRef(function InputText(
-  props: CombinedProps,
-  ref,
-) {
-  if (props.version === 2) {
-    return (
-      <InputTextSPAR
-        {...(props as InputTextRebuiltProps)}
-        ref={ref as ForwardedRef<HTMLInputElement>}
-      />
-    );
-  }
-
-  return (
-    <InputTextLegacy
-      {...(props as InputTextPropOptions)}
-      ref={ref as ForwardedRef<InputTextRef>}
-    />
-  );
-});
-export { InputTextRef };

From 464165a91eb95962aa8c027c076e7b627ce63028 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 09:53:08 -0800
Subject: [PATCH 04/17] Undo unneeded change to meta.json

---
 packages/components/src/utils/meta/meta.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/utils/meta/meta.json b/packages/components/src/utils/meta/meta.json
index 86f54bcf76..b0b6a9b0fa 100644
--- a/packages/components/src/utils/meta/meta.json
+++ b/packages/components/src/utils/meta/meta.json
@@ -126,4 +126,4 @@
     "Tooltip",
     "Typography"
   ]
-}
\ No newline at end of file
+}

From 384cfad3af11815fc69c4debcc399cd0cc9f7d1a Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 11:03:56 -0800
Subject: [PATCH 05/17] Fix eslint error

---
 packages/components/src/FormField/FormField.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index 4e229e991c..4077b60909 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -20,7 +20,6 @@ type FormFieldInternalProps = FormFieldProps & {
   readonly id: string;
 };
 
-// eslint-disable-next-line max-statements
 function FormFieldInternal(props: FormFieldInternalProps) {
   const {
     actionsRef,

From b93d5ccf7722b4c98c15fa85a6223e5a846f1e04 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 11:04:51 -0800
Subject: [PATCH 06/17] Fix eslint error

---
 packages/components/src/FormField/FormFieldWrapper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx
index e41f8b05a0..cf0652b871 100644
--- a/packages/components/src/FormField/FormFieldWrapper.tsx
+++ b/packages/components/src/FormField/FormFieldWrapper.tsx
@@ -20,7 +20,6 @@ export interface FormFieldWrapperProps extends FormFieldProps {
   readonly onClear: () => void;
 }
 
-// eslint-disable-next-line max-statements
 export function FormFieldWrapper({
   align,
   description,

From 636e553749111d2ae7afb51353aa92709e338621 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 11:38:11 -0800
Subject: [PATCH 07/17] Fix prefix / suffix offset calculation issue

---
 .../components/src/FormField/FormFieldWrapper.tsx  |  4 ++--
 .../FormField/hooks/useFormFieldWrapperStyles.ts   | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/FormField/FormFieldWrapper.tsx b/packages/components/src/FormField/FormFieldWrapper.tsx
index cf0652b871..60e9fc6d17 100644
--- a/packages/components/src/FormField/FormFieldWrapper.tsx
+++ b/packages/components/src/FormField/FormFieldWrapper.tsx
@@ -52,8 +52,8 @@ export function FormFieldWrapper({
       align,
       max,
       maxLength,
-      prefixWidth: prefixRef?.current?.offsetWidth ?? 0,
-      suffixWidth: suffixRef?.current?.offsetWidth ?? 0,
+      prefixRef,
+      suffixRef,
       placeholder,
       value,
       invalid,
diff --git a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
index 06066e28b4..c529152cb7 100644
--- a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
+++ b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
@@ -1,13 +1,13 @@
 import classnames from "classnames";
-import { useEffect, useState } from "react";
+import { RefObject, useEffect, useState } from "react";
 import { useIsSafari } from "./useIsSafari";
 import styles from "../FormField.module.css";
 import { FormFieldProps } from "../FormFieldTypes";
 
 export interface useFormFieldWrapperStylesProps extends FormFieldProps {
   error: string;
-  suffixWidth: number;
-  prefixWidth: number;
+  suffixRef: RefObject<HTMLDivElement>;
+  prefixRef: RefObject<HTMLDivElement>;
 }
 export interface LabelPadding {
   paddingLeft: number | string | undefined;
@@ -22,8 +22,8 @@ export function useFormFieldWrapperStyles({
   invalid,
   error,
   max,
-  prefixWidth,
-  suffixWidth,
+  prefixRef,
+  suffixRef,
   maxLength,
   type,
   disabled,
@@ -69,8 +69,8 @@ export function useFormFieldWrapperStyles({
       getAffixPaddding({
         value,
         type,
-        prefixWidth,
-        suffixWidth,
+        prefixWidth: prefixRef.current?.offsetWidth || 0,
+        suffixWidth: suffixRef.current?.offsetWidth || 0,
       }),
     );
   }, [value]);

From d2db62be537fe3cd8d66746fd3eaa1342273068e Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 11:45:54 -0800
Subject: [PATCH 08/17] Commit for doing comparisons

---
 docs/components/InputText/Web.stories.tsx | 67 +++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/docs/components/InputText/Web.stories.tsx b/docs/components/InputText/Web.stories.tsx
index 2fc5d3c972..5d32ece2b6 100644
--- a/docs/components/InputText/Web.stories.tsx
+++ b/docs/components/InputText/Web.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { InputText } from "@jobber/components/InputText";
 import { Button } from "@jobber/components/Button";
+import { Content } from "@jobber/components/Content";
 
 export default {
   title: "Components/Forms and Inputs/InputText/Web",
@@ -16,6 +17,69 @@ const BasicTemplate: ComponentStory<typeof InputText> = args => {
   return <InputText {...args} />;
 };
 
+const AffixTemplate: ComponentStory<typeof InputText> = args => {
+  return (
+    <Content>
+      <InputText
+        {...args}
+        placeholder="Prefix icon"
+        clearable="while-editing"
+        prefix={{ icon: "user" }}
+      />
+      <InputText
+        {...args}
+        clearable="while-editing"
+        placeholder="Suffix icon"
+        suffix={{ icon: "user" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Prefix label"
+        clearable="while-editing"
+        prefix={{ label: "$" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Suffix label"
+        clearable="while-editing"
+        suffix={{ label: "%" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Prefix icon and label"
+        prefix={{ icon: "user", label: "$" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Suffix icon and label"
+        clearable="while-editing"
+        suffix={{ icon: "user", label: "%" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Prefix / suffix icon "
+        prefix={{ icon: "user" }}
+        clearable="while-editing"
+        suffix={{ icon: "add" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Prefix / suffix label"
+        prefix={{ label: "$" }}
+        clearable="while-editing"
+        suffix={{ label: "%" }}
+      />
+      <InputText
+        {...args}
+        placeholder="Prefix / suffix icon and label"
+        prefix={{ icon: "user", label: "$" }}
+        clearable="while-editing"
+        suffix={{ icon: "add", label: "%" }}
+      />
+    </Content>
+  );
+};
+
 export const Basic = BasicTemplate.bind({});
 Basic.args = {
   name: "age",
@@ -71,3 +135,6 @@ Clearable.args = {
   name: "name",
   clearable: "always",
 };
+
+export const Comparison = AffixTemplate.bind({});
+Comparison.args = {};

From 6643db603a804552d6c46fbd4ed16e3f83509fbe Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 11:46:13 -0800
Subject: [PATCH 09/17] Revert "Commit for doing comparisons"

This reverts commit d2db62be537fe3cd8d66746fd3eaa1342273068e.
---
 docs/components/InputText/Web.stories.tsx | 67 -----------------------
 1 file changed, 67 deletions(-)

diff --git a/docs/components/InputText/Web.stories.tsx b/docs/components/InputText/Web.stories.tsx
index 5d32ece2b6..2fc5d3c972 100644
--- a/docs/components/InputText/Web.stories.tsx
+++ b/docs/components/InputText/Web.stories.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { InputText } from "@jobber/components/InputText";
 import { Button } from "@jobber/components/Button";
-import { Content } from "@jobber/components/Content";
 
 export default {
   title: "Components/Forms and Inputs/InputText/Web",
@@ -17,69 +16,6 @@ const BasicTemplate: ComponentStory<typeof InputText> = args => {
   return <InputText {...args} />;
 };
 
-const AffixTemplate: ComponentStory<typeof InputText> = args => {
-  return (
-    <Content>
-      <InputText
-        {...args}
-        placeholder="Prefix icon"
-        clearable="while-editing"
-        prefix={{ icon: "user" }}
-      />
-      <InputText
-        {...args}
-        clearable="while-editing"
-        placeholder="Suffix icon"
-        suffix={{ icon: "user" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Prefix label"
-        clearable="while-editing"
-        prefix={{ label: "$" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Suffix label"
-        clearable="while-editing"
-        suffix={{ label: "%" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Prefix icon and label"
-        prefix={{ icon: "user", label: "$" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Suffix icon and label"
-        clearable="while-editing"
-        suffix={{ icon: "user", label: "%" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Prefix / suffix icon "
-        prefix={{ icon: "user" }}
-        clearable="while-editing"
-        suffix={{ icon: "add" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Prefix / suffix label"
-        prefix={{ label: "$" }}
-        clearable="while-editing"
-        suffix={{ label: "%" }}
-      />
-      <InputText
-        {...args}
-        placeholder="Prefix / suffix icon and label"
-        prefix={{ icon: "user", label: "$" }}
-        clearable="while-editing"
-        suffix={{ icon: "add", label: "%" }}
-      />
-    </Content>
-  );
-};
-
 export const Basic = BasicTemplate.bind({});
 Basic.args = {
   name: "age",
@@ -135,6 +71,3 @@ Clearable.args = {
   name: "name",
   clearable: "always",
 };
-
-export const Comparison = AffixTemplate.bind({});
-Comparison.args = {};

From f154acc677c7746dc9ae48d877355fde1347f5ed Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 12:54:32 -0800
Subject: [PATCH 10/17] Cleaning up types in useAtlantisFormField

---
 .../components/src/FormField/FormField.tsx    |   9 +-
 .../src/FormField/FormFieldTypes.ts           |   9 ++
 .../FormField/hooks/useAtlantisFormField.ts   | 124 ++++++++++++------
 .../hooks/useAtlantisReactHookForm.ts         |  27 ++--
 4 files changed, 112 insertions(+), 57 deletions(-)

diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index 4077b60909..f0699dc3ae 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -57,7 +57,7 @@ function FormFieldInternal(props: FormFieldInternalProps) {
   const {
     errorMessage,
     inputRefs,
-    rest,
+    useControllerField,
     setValue,
     onControllerBlur,
     onControllerChange,
@@ -93,10 +93,9 @@ function FormFieldInternal(props: FormFieldInternalProps) {
   const { textFieldProps, fieldProps, descriptionIdentifier } =
     useAtlantisFormField({
       id,
-      nameProp,
-      actionsRef,
-      rest,
+      useControllerField,
       name,
+      nameProp,
       description,
       validations: !!validations,
       disabled,
@@ -115,7 +114,7 @@ function FormFieldInternal(props: FormFieldInternalProps) {
   return (
     <FormFieldWrapper
       {...props}
-      value={rest.value}
+      value={useControllerField.value}
       error={errorMessage}
       identifier={id}
       descriptionIdentifier={descriptionIdentifier}
diff --git a/packages/components/src/FormField/FormFieldTypes.ts b/packages/components/src/FormField/FormFieldTypes.ts
index 2c5d9903a0..02b19f06a8 100644
--- a/packages/components/src/FormField/FormFieldTypes.ts
+++ b/packages/components/src/FormField/FormFieldTypes.ts
@@ -14,6 +14,15 @@ export type FormFieldTypes =
   | "tel"
   | "email";
 
+export type KeyBoardTypes =
+  | "text"
+  | "none"
+  | "tel"
+  | "url"
+  | "email"
+  | "numeric"
+  | "decimal";
+
 export type AutocompleteTypes =
   | "one-time-code"
   | "address-line1"
diff --git a/packages/components/src/FormField/hooks/useAtlantisFormField.ts b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
index fb05723921..f3199c0ff0 100644
--- a/packages/components/src/FormField/hooks/useAtlantisFormField.ts
+++ b/packages/components/src/FormField/hooks/useAtlantisFormField.ts
@@ -1,12 +1,91 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent, useEffect } from "react";
+import { UseControllerReturn } from "react-hook-form";
 import styles from "../FormField.module.css";
-import { FieldActionsRef } from "../FormFieldTypes";
+import type { FormFieldProps, KeyBoardTypes } from "../FormFieldTypes";
 
+export interface useAtlantisFormFieldProps
+  extends Pick<
+    FormFieldProps,
+    "description" | "disabled" | "readonly" | "inline" | "autofocus"
+  > {
+  /**
+   * The html id for the field
+   */
+  readonly id: string;
+  /**
+   * The name for the html input field if one if provided by consumers of the component
+   */
+  readonly nameProp?: string;
+  /**
+   * The auto-generated name for the html input field if a nameProp is not provided
+   */
+  readonly name: string;
+  /**
+   * The ref used to access the FieldActions of the field
+   */
+  // readonly actionsRef?: React.RefObject<FieldActionsRef>;
+  /**
+   * The field returned from react-hook-form's useController
+   */
+  readonly useControllerField: Omit<
+    UseControllerReturn["field"],
+    "ref" | "onChange" | "onBlur"
+  >;
+
+  /**
+   * The keyboard type for the field. This is used to provide hints to the browser about the type of keyboard to display on mobile devices
+   */
+  readonly keyboard?: KeyBoardTypes;
+  /**
+   * The error message for the field
+   */
+  readonly errorMessage: string;
+
+  /**
+   * Determines if the field has validations
+   */
+  readonly validations: boolean;
+  /**
+   * Callback for when the field value changes
+   */
+  handleChange: (
+    event: ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+  /**
+   * Callback for when the field loses focus
+   */
+  handleBlur: () => void;
+  /**
+   * Callback for when the field gains focus
+   */
+  handleFocus: (
+    event: FocusEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >,
+  ) => void;
+
+  /**
+   * Callback for when keydown event is triggered on the field
+   */
+  handleKeyDown: (
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => void;
+  /**
+   * Callback that exposes the error message when the field is validated
+   */
+  handleValidation: (message: string) => void;
+}
+
+/**
+ * Provides the props for the html fields rendered by the FormField component
+ */
 export function useAtlantisFormField({
   id,
   nameProp,
   name,
-  rest,
+  useControllerField: useControllerField,
   description,
   disabled,
   readonly,
@@ -20,52 +99,17 @@ export function useAtlantisFormField({
   handleKeyDown,
   handleValidation,
   errorMessage,
-}: {
-  id: string;
-  nameProp?: string;
-  name: string;
-  actionsRef?: React.RefObject<FieldActionsRef>;
-  rest: object;
-  description?: string;
-  disabled?: boolean;
-  readonly?: boolean;
-  keyboard?: string;
-  errorMessage: string;
-  autofocus?: boolean;
-  validations: boolean;
-  handleChange: (
-    event: ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => void;
-  handleBlur: () => void;
-  handleFocus: (
-    event: FocusEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >,
-  ) => void;
-  inline?: boolean;
-  handleKeyDown: (
-    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => void;
-  handleValidation: (message: string) => void;
-}) {
+}: useAtlantisFormFieldProps) {
   const descriptionIdentifier = `descriptionUUID--${id}`;
 
   const fieldProps = {
-    ...rest,
+    ...useControllerField,
     id,
     className: styles.input,
     name: (validations || nameProp) && name,
     disabled: disabled,
     readOnly: readonly,
-    inputMode: keyboard as
-      | "text"
-      | "none"
-      | "tel"
-      | "url"
-      | "email"
-      | "numeric",
+    inputMode: keyboard,
     onChange: handleChange,
     onBlur: handleBlur,
     onFocus: handleFocus,
diff --git a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
index d696a0c452..232772e048 100644
--- a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
+++ b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
@@ -8,6 +8,17 @@ import {
 import { mergeRefs } from "@jobber/components/utils/mergeRefs";
 import { FieldActionsRef } from "../FormFieldTypes";
 
+interface useAtlantisReactFormProps {
+  actionsRef?: React.RefObject<FieldActionsRef>;
+  name: string;
+  defaultValue?: string | Date;
+  value?: string | Date | number;
+  validations?: RegisterOptions;
+  inputRef?: React.RefObject<
+    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+  >;
+}
+
 /**
  * Hook used to manage the form state of a field through react-hook-form
  */
@@ -18,16 +29,7 @@ export function useAtlantisReactForm({
   value,
   validations,
   inputRef,
-}: {
-  actionsRef?: React.RefObject<FieldActionsRef>;
-  name: string;
-  defaultValue?: string | Date;
-  value?: string | Date | number;
-  validations?: RegisterOptions;
-  inputRef?: React.RefObject<
-    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-  >;
-}) {
+}: useAtlantisReactFormProps) {
   const formContext = useFormContext();
   // If there isn't a Form Context being provided, get a form for this field.
   const { control, setValue, watch } =
@@ -38,7 +40,7 @@ export function useAtlantisReactForm({
     },
   }));
   const {
-    field: { onChange, onBlur, ref: fieldRef, ...rest },
+    field,
     fieldState: { error },
   } = useController({
     name,
@@ -46,6 +48,7 @@ export function useAtlantisReactForm({
     rules: validations,
     defaultValue: value ?? defaultValue ?? "",
   });
+  const { onChange, onBlur, ref: fieldRef, ...useControllerField } = field;
 
   useEffect(() => {
     if (value != undefined) {
@@ -57,7 +60,7 @@ export function useAtlantisReactForm({
 
   return {
     inputRefs,
-    rest,
+    useControllerField,
     setValue,
     errorMessage: error?.message || "",
     onControllerChange: onChange,

From 83843fe6234a4a1194246a9ff779fe33151c4381 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 12:59:00 -0800
Subject: [PATCH 11/17] Cleanup types in useAtlantisReactHookForm

---
 .../hooks/useAtlantisReactHookForm.ts         | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
index 232772e048..fede67045d 100644
--- a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
+++ b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
@@ -1,22 +1,14 @@
 import { useEffect, useImperativeHandle } from "react";
-import {
-  RegisterOptions,
-  useController,
-  useForm,
-  useFormContext,
-} from "react-hook-form";
+import { useController, useForm, useFormContext } from "react-hook-form";
 import { mergeRefs } from "@jobber/components/utils/mergeRefs";
-import { FieldActionsRef } from "../FormFieldTypes";
+import { FormFieldProps } from "../FormFieldTypes";
 
-interface useAtlantisReactFormProps {
-  actionsRef?: React.RefObject<FieldActionsRef>;
+interface useAtlantisReactFormProps
+  extends Pick<
+    FormFieldProps,
+    "actionsRef" | "defaultValue" | "value" | "validations" | "inputRef"
+  > {
   name: string;
-  defaultValue?: string | Date;
-  value?: string | Date | number;
-  validations?: RegisterOptions;
-  inputRef?: React.RefObject<
-    HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-  >;
 }
 
 /**

From 42ac4daa8e8aac5647b349d96cbef4cbcfa48e4b Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 13:25:34 -0800
Subject: [PATCH 12/17] Cleanup props in useAtlantisFormFieldActions

---
 .../hooks/useAtlantisFormFieldActions.ts      | 45 ++++++++++---------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
index ddc68c9ecd..620e30b37a 100644
--- a/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
+++ b/packages/components/src/FormField/hooks/useAtlantisFormFieldActions.ts
@@ -1,8 +1,29 @@
 import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
 import { FieldValues, UseFormSetValue } from "react-hook-form";
+import { FormFieldProps, FormFieldTypes } from "../FormFieldTypes";
+
+export interface useAtlantisFormFieldActionsProps
+  extends Pick<
+    FormFieldProps,
+    | "onChange"
+    | "inputRef"
+    | "onEnter"
+    | "readonly"
+    | "onFocus"
+    | "onBlur"
+    | "onValidation"
+    | "onEnter"
+  > {
+  readonly name: string;
+  readonly onControllerChange: (...event: unknown[]) => void;
+  readonly onControllerBlur: () => void;
+  readonly type: FormFieldTypes;
+  readonly setValue: UseFormSetValue<FieldValues>;
+}
 
 /**
- * Generates the actions for a form field. Combines the actions from the props of the form field with the actions from react-hook-form
+ * Combines the actions from the props of the FormField with the actions from react-hook-form. This is used to
+ * manage the form state of a field through react-hook-form while providing support for additional callbacks
  */
 export function useAtlantisFormFieldActions({
   name,
@@ -17,27 +38,7 @@ export function useAtlantisFormFieldActions({
   onFocus,
   onBlur,
   onValidation,
-}: {
-  name: string;
-  onChange?:
-    | ((
-        newValue: string | number | boolean | Date,
-        event?: ChangeEvent<
-          HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-        >,
-      ) => void)
-    | undefined;
-  inputRef?: React.RefObject<HTMLInputElement>;
-  onControllerChange: (...event: unknown[]) => void;
-  onControllerBlur: () => void;
-  onEnter?: ((event: React.KeyboardEvent) => void) | undefined;
-  readonly?: boolean;
-  type: string;
-  setValue: UseFormSetValue<FieldValues>;
-  onFocus?: (() => void) | undefined;
-  onBlur?: (() => void) | undefined;
-  onValidation?: ((message: string) => void) | undefined;
-}) {
+}: useAtlantisFormFieldActionsProps) {
   function handleClear() {
     handleBlur();
     setValue(name, "", { shouldValidate: true });

From 7b61b13432c75f24c74ea7f3ad327d1cfdb3274b Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Mon, 2 Dec 2024 13:26:50 -0800
Subject: [PATCH 13/17] Cleanup types in useFormFieldWrapperStyles

---
 .../hooks/useFormFieldWrapperStyles.ts        | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
index c529152cb7..598f0463b0 100644
--- a/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
+++ b/packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
@@ -4,16 +4,33 @@ import { useIsSafari } from "./useIsSafari";
 import styles from "../FormField.module.css";
 import { FormFieldProps } from "../FormFieldTypes";
 
-export interface useFormFieldWrapperStylesProps extends FormFieldProps {
-  error: string;
+export interface useFormFieldWrapperStylesProps
+  extends Pick<
+    FormFieldProps,
+    | "size"
+    | "align"
+    | "placeholder"
+    | "value"
+    | "invalid"
+    | "max"
+    | "maxLength"
+    | "type"
+    | "disabled"
+    | "inline"
+  > {
+  readonly error: string;
   suffixRef: RefObject<HTMLDivElement>;
   prefixRef: RefObject<HTMLDivElement>;
 }
+
 export interface LabelPadding {
   paddingLeft: number | string | undefined;
   paddingRight: number | string | undefined;
 }
 
+/**
+ * Hook for getting the correct styles for the FormField and its children
+ */
 export function useFormFieldWrapperStyles({
   size,
   align,

From 7d365c4cbcc3d1916832e726e6c660ac86b9c4ed Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Tue, 3 Dec 2024 08:49:50 -0800
Subject: [PATCH 14/17] Fix formfield not focusing when cleared. Added new test
 to prevent regressions

---
 .../src/FormField/FormField.test.tsx          | 37 ++++++++++++++++++-
 .../components/src/FormField/FormField.tsx    |  1 +
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/FormField/FormField.test.tsx b/packages/components/src/FormField/FormField.test.tsx
index ffd985066f..b5084f50fd 100644
--- a/packages/components/src/FormField/FormField.test.tsx
+++ b/packages/components/src/FormField/FormField.test.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { createRef } from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { FormField } from ".";
 import { Form } from "../Form/Form";
 
@@ -93,6 +94,23 @@ describe("FormField", () => {
     });
   });
 
+  it("should call onFocus and onBlur", async () => {
+    const focusHandler = jest.fn();
+    const blurHandler = jest.fn();
+    const { getByLabelText } = render(
+      <FormField
+        placeholder="foo"
+        onBlur={blurHandler}
+        onFocus={focusHandler}
+      />,
+    );
+
+    await userEvent.click(getByLabelText("foo"));
+    await userEvent.tab();
+    expect(focusHandler).toHaveBeenCalledTimes(1);
+    expect(blurHandler).toHaveBeenCalledTimes(1);
+  });
+
   describe("with a controlled value", () => {
     it("should set the value", () => {
       const value = "Look, some words!";
@@ -422,5 +440,22 @@ describe("FormField", () => {
       fireEvent.click(clearButton);
       expect(setValue).toHaveBeenCalledWith("");
     });
+
+    describe("when inputRef provided", () => {
+      it("should focus the input when the clear is used", async () => {
+        const mockRef = createRef<HTMLInputElement>();
+        const { getByRole, getByLabelText } = render(
+          <FormField
+            placeholder={"I am a placeholder"}
+            value={"I am a value"}
+            clearable="always"
+            inputRef={mockRef}
+          />,
+        );
+        const clearButton = getByLabelText("Clear input");
+        await userEvent.click(clearButton);
+        expect(getByRole("textbox")).toHaveFocus();
+      });
+    });
   });
 });
diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index f0699dc3ae..f99c72ea70 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -77,6 +77,7 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     handleFocus,
     handleKeyDown,
   } = useAtlantisFormFieldActions({
+    inputRef,
     onChange,
     onEnter,
     readonly,

From 64c0733eaef732b61fdae4a38b858058ef051382 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Tue, 3 Dec 2024 12:45:54 -0800
Subject: [PATCH 15/17] Rename useAtlantisReactForm to useAtlantisReactHookForm

---
 packages/components/src/FormField/FormField.tsx             | 4 ++--
 .../src/FormField/hooks/useAtlantisReactHookForm.ts         | 6 +++---
 packages/components/src/FormField/index.ts                  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/FormField/FormField.tsx b/packages/components/src/FormField/FormField.tsx
index f99c72ea70..8e325890b2 100644
--- a/packages/components/src/FormField/FormField.tsx
+++ b/packages/components/src/FormField/FormField.tsx
@@ -5,7 +5,7 @@ import { FormFieldPostFix } from "./FormFieldPostFix";
 import { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
 import { useAtlantisFormField } from "./hooks/useAtlantisFormField";
 import { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
-import { useAtlantisReactForm } from "./hooks/useAtlantisReactHookForm";
+import { useAtlantisReactHookForm } from "./hooks/useAtlantisReactHookForm";
 
 export function FormField(props: FormFieldProps) {
   // Warning: do not move useId into FormFieldInternal. This must be here to avoid
@@ -61,7 +61,7 @@ function FormFieldInternal(props: FormFieldInternalProps) {
     setValue,
     onControllerBlur,
     onControllerChange,
-  } = useAtlantisReactForm({
+  } = useAtlantisReactHookForm({
     actionsRef,
     name,
     defaultValue,
diff --git a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
index fede67045d..a0bbb37cf3 100644
--- a/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
+++ b/packages/components/src/FormField/hooks/useAtlantisReactHookForm.ts
@@ -3,7 +3,7 @@ import { useController, useForm, useFormContext } from "react-hook-form";
 import { mergeRefs } from "@jobber/components/utils/mergeRefs";
 import { FormFieldProps } from "../FormFieldTypes";
 
-interface useAtlantisReactFormProps
+interface useAtlantisReactHookFormProps
   extends Pick<
     FormFieldProps,
     "actionsRef" | "defaultValue" | "value" | "validations" | "inputRef"
@@ -14,14 +14,14 @@ interface useAtlantisReactFormProps
 /**
  * Hook used to manage the form state of a field through react-hook-form
  */
-export function useAtlantisReactForm({
+export function useAtlantisReactHookForm({
   actionsRef,
   name,
   defaultValue,
   value,
   validations,
   inputRef,
-}: useAtlantisReactFormProps) {
+}: useAtlantisReactHookFormProps) {
   const formContext = useFormContext();
   // If there isn't a Form Context being provided, get a form for this field.
   const { control, setValue, watch } =
diff --git a/packages/components/src/FormField/index.ts b/packages/components/src/FormField/index.ts
index 875af7a6a4..8cf3aa27d3 100644
--- a/packages/components/src/FormField/index.ts
+++ b/packages/components/src/FormField/index.ts
@@ -3,7 +3,7 @@ export * from "./FormFieldTypes";
 export { useAtlantisFormField } from "./hooks/useAtlantisFormField";
 export { useAtlantisFormFieldActions } from "./hooks/useAtlantisFormFieldActions";
 export { useAtlantisFormFieldName } from "./hooks/useAtlantisFormFieldName";
-export { useAtlantisReactForm } from "./hooks/useAtlantisReactHookForm";
+export { useAtlantisReactHookForm } from "./hooks/useAtlantisReactHookForm";
 export { FormFieldWrapper } from "./FormFieldWrapper";
 export {
   useFormFieldWrapperStyles,

From ffaab53a6e596a7e4ac2215711e98805526cbc11 Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Tue, 3 Dec 2024 13:30:43 -0800
Subject: [PATCH 16/17] Add example of using Visible prop of InputValidation
 Added test for testing the visible prop

---
 .../InputValidation/Web.stories.tsx           | 65 +++++++++++++------
 .../InputValidation/InputValidation.test.tsx  | 51 ++++-----------
 2 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/docs/components/InputValidation/Web.stories.tsx b/docs/components/InputValidation/Web.stories.tsx
index 17c71c2542..7352c5e450 100644
--- a/docs/components/InputValidation/Web.stories.tsx
+++ b/docs/components/InputValidation/Web.stories.tsx
@@ -3,6 +3,8 @@ import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { InputValidation } from "@jobber/components/InputValidation";
 import { InputText } from "@jobber/components/InputText";
 import { Text } from "@jobber/components/Text";
+import { Button } from "@jobber/components/Button";
+import { Content } from "@jobber/components/Content";
 
 export default {
   title: "Components/Forms and Inputs/InputValidation/Web",
@@ -15,30 +17,51 @@ export default {
 
 const BasicTemplate: ComponentStory<typeof InputValidation> = args => {
   const [validationMessages, setValidationMessages] = useState(args.message);
+  const [displayError, setDisplayError] = useState(true);
 
   return (
-    <>
-      <Text>
-        My name is
-        <InputText
-          validations={{
-            required: {
-              value: true,
-              message: "Please tell me your name",
-            },
-            pattern: {
-              value: /Jeff/,
-              message: "Have you considered a better name, like Jeff?",
-            },
-          }}
-          onValidation={message => setValidationMessages(message)}
-          size="small"
-          inline={true}
-          maxLength={4}
+    <Content>
+      <Content spacing="smallest">
+        <Text>
+          My name is
+          <InputText
+            validations={{
+              required: {
+                value: true,
+                message: "Please tell me your name",
+              },
+              pattern: {
+                value: /Jeff/,
+                message: "Have you considered a better name, like Jeff?",
+              },
+            }}
+            onValidation={message => setValidationMessages(message)}
+            size="small"
+            inline={true}
+            maxLength={4}
+          />
+        </Text>
+        <InputValidation
+          message={validationMessages}
+          visible={!!validationMessages}
         />
-      </Text>
-      {validationMessages && <InputValidation message={validationMessages} />}
-    </>
+      </Content>
+      <Content spacing="smallest">
+        <Text>
+          InputValidation can also be toggled using the visible prop
+          <InputText size="small" />
+        </Text>
+        <InputValidation
+          message="This error message can be toggled "
+          visible={displayError}
+        />
+        <Button
+          fullWidth={false}
+          onClick={() => setDisplayError(prev => !prev)}
+          label="Toggle Error"
+        />
+      </Content>
+    </Content>
   );
 };
 
diff --git a/packages/components/src/InputValidation/InputValidation.test.tsx b/packages/components/src/InputValidation/InputValidation.test.tsx
index ea728d7319..1a7add188a 100644
--- a/packages/components/src/InputValidation/InputValidation.test.tsx
+++ b/packages/components/src/InputValidation/InputValidation.test.tsx
@@ -1,42 +1,17 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import { InputValidation } from ".";
 
-it("renders the input validation messages", () => {
-  const { container } = render(<InputValidation message="I am an error" />);
-  expect(container).toMatchInlineSnapshot(`
-    <div>
-      <div
-        style="opacity: 0; transform: translateY(5%) translateZ(0);"
-      >
-        <div
-          aria-live="assertive"
-          class="message"
-          role="alert"
-          tabindex="0"
-        >
-          <svg
-            data-testid="alert"
-            style="fill: var(--color-icon); display: inline-block; vertical-align: middle; width: 16px; height: 16px;"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 7a1 1 0 0 0-1 1v5a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1Zm-1 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
-              style="fill: var(--color-critical);"
-            />
-            <path
-              d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
-              style="fill: var(--color-critical);"
-            />
-          </svg>
-          <p
-            class="base regular small critical"
-          >
-            I am an error
-          </p>
-        </div>
-      </div>
-    </div>
-  `);
+describe("InputValidation", () => {
+  it("renders the input validation messages", () => {
+    render(<InputValidation message="I am an error" />);
+    expect(screen.getByText("I am an error")).toBeInTheDocument();
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+  });
+
+  it("does not render the input validation messages when visible is false", () => {
+    render(<InputValidation message="I am an error" visible={false} />);
+    expect(screen.queryByText("I am an error")).not.toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
 });

From 6d4ace130120a195fd0c8160b1f1209c89982dff Mon Sep 17 00:00:00 2001
From: Michael Paradis <michael.p@getjobber.com>
Date: Tue, 3 Dec 2024 13:41:19 -0800
Subject: [PATCH 17/17] Update comment on version property in our
 FormFieldProps

---
 packages/components/src/FormField/FormFieldTypes.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/FormField/FormFieldTypes.ts b/packages/components/src/FormField/FormFieldTypes.ts
index 02b19f06a8..6477393281 100644
--- a/packages/components/src/FormField/FormFieldTypes.ts
+++ b/packages/components/src/FormField/FormFieldTypes.ts
@@ -134,7 +134,10 @@ export interface CommonFormFieldProps {
   readonly clearable?: Clearable;
 
   /**
-   * Which version of the Field to use
+   * Experimental:
+   * Determine which version of the FormField to use.
+   * Right now this isn't used but it will be used in the future
+   * to allow us to release new versions of our form inputs without breaking existing functionality
    */
   version?: 1;
 }