From 79c49854b0ff18a2c28b47e0173e819af7a6112c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Mon, 23 Nov 2020 11:54:47 +0100
Subject: [PATCH] feat(core): rename `searchBoxElement` to `formElement` (#374)

BREAKING CHANGE
---
 packages/autocomplete-core/src/getPropGetters.ts |  2 +-
 packages/autocomplete-core/src/types/getters.ts  |  4 ++--
 packages/autocomplete-js/src/autocomplete.ts     |  2 +-
 packages/website/docs/creating-a-renderer.md     | 10 +++++-----
 packages/website/docs/prop-getters.md            |  6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
index 89563939a..e21ee7552 100644
--- a/packages/autocomplete-core/src/getPropGetters.ts
+++ b/packages/autocomplete-core/src/getPropGetters.ts
@@ -49,7 +49,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
         }
 
         const isTargetWithinAutocomplete = [
-          getterProps.searchBoxElement,
+          getterProps.formElement,
           getterProps.panelElement,
         ].some((contextNode) => {
           return (
diff --git a/packages/autocomplete-core/src/types/getters.ts b/packages/autocomplete-core/src/types/getters.ts
index f03405dc9..ae55e42c7 100644
--- a/packages/autocomplete-core/src/types/getters.ts
+++ b/packages/autocomplete-core/src/types/getters.ts
@@ -18,9 +18,9 @@ export interface AutocompleteAccessibilityGetters<
 
 export type GetEnvironmentProps = (props: {
   [key: string]: unknown;
-  searchBoxElement: HTMLElement;
-  panelElement: HTMLElement;
+  formElement: HTMLElement;
   inputElement: HTMLInputElement;
+  panelElement: HTMLElement;
 }) => {
   onTouchStart(event: TouchEvent): void;
   onTouchMove(event: TouchEvent): void;
diff --git a/packages/autocomplete-js/src/autocomplete.ts b/packages/autocomplete-js/src/autocomplete.ts
index 013063cb8..a2f365fb0 100644
--- a/packages/autocomplete-js/src/autocomplete.ts
+++ b/packages/autocomplete-js/src/autocomplete.ts
@@ -68,7 +68,7 @@ export function autocomplete<TItem>({
 
   runEffect(() => {
     const environmentProps = autocomplete.getEnvironmentProps({
-      searchBoxElement: form,
+      formElement: form,
       panelElement: panel,
       inputElement: input,
     });
diff --git a/packages/website/docs/creating-a-renderer.md b/packages/website/docs/creating-a-renderer.md
index 306a43c87..ad6fa6e49 100644
--- a/packages/website/docs/creating-a-renderer.md
+++ b/packages/website/docs/creating-a-renderer.md
@@ -267,18 +267,18 @@ function Autocomplete() {
   // ...
 
   const inputRef = React.useRef(null);
-  const searchBoxRef = React.useRef(null);
+  const formRef = React.useRef(null);
   const panelRef = React.useRef(null);
 
   const { getEnvironmentProps } = autocomplete;
 
   React.useEffect(() => {
-    if (!(searchBoxRef.current && panelRef.current && inputRef.current)) {
+    if (!(formRef.current && panelRef.current && inputRef.current)) {
       return;
     }
 
     const { onTouchStart, onTouchMove } = getEnvironmentProps({
-      searchBoxElement: searchBoxRef.current,
+      formElement: formRef.current,
       panelElement: panelRef.current,
       inputElement: inputRef.current,
     });
@@ -290,12 +290,12 @@ function Autocomplete() {
       window.removeEventListener('touchstart', onTouchStart);
       window.removeEventListener('touchmove', onTouchMove);
     };
-  }, [getEnvironmentProps, searchBoxRef, panelRef, inputRef]);
+  }, [getEnvironmentProps, formRef, panelRef, inputRef]);
 
   return (
     <div className="aa-Autocomplete" {...autocomplete.getRootProps({})}>
       <form
-        ref={searchBoxRef}
+        ref={formRef}
         className="aa-Form"
         {...autocomplete.getFormProps({ inputElement: inputRef.current })}
       >
diff --git a/packages/website/docs/prop-getters.md b/packages/website/docs/prop-getters.md
index a8c0b1e76..6c818c501 100644
--- a/packages/website/docs/prop-getters.md
+++ b/packages/website/docs/prop-getters.md
@@ -9,14 +9,14 @@ The prop getters are functions that returns attributes and event handlers to cre
 
 Returns the props to attach to the [environment](#environment).
 
-You need to pass `searchBoxElement`, `panelElement` and `inputElement` so that the library creates the correct touch events for touch devices.
+You need to pass `formElement`, `panelElement` and `inputElement` so that the library creates the correct touch events for touch devices.
 
 ```ts
 type GetEnvironmentProps = (props: {
   [key: string]: unknown;
-  searchBoxElement: HTMLElement;
-  panelElement: HTMLElement;
+  formElement: HTMLElement;
   inputElement: HTMLInputElement;
+  panelElement: HTMLElement;
 }) => {
   onTouchStart(event: TouchEvent): void;
   onTouchMove(event: TouchEvent): void;