feat(core): rename searchBoxElement to formElement (#374)

BREAKING CHANGE
algolia · Nov 23, 2020 · 79c4985 · 79c4985
1 parent 98dfe4b
commit 79c4985
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;