feat(js): introduce dropdownPlacement API (#314)

bundlesize.config.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.js",
-      "maxSize": "6.5 kB"
-    },
+      "maxSize": "7 kB"
+    }
   ]
 }

examples/js/app.js

@@ -13,6 +13,7 @@ const searchClient = algoliasearch(
 autocomplete({
   container: '#autocomplete',
   debug: true,
+  // dropdownPlacement: 'start',
   getSources() {
     return [
       {

examples/js/autocomplete.css

@@ -80,17 +80,15 @@
   z-index: 3;
 }
 
-.aa-Autocomplete {
-  width: 100%;
-}
-
 .aa-Dropdown {
   background-color: #fff;
   border: 1px solid rgba(150, 150, 150, 0.16);
   border-radius: 3px;
   box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
     0 8px 16px -4px rgba(35, 38, 59, 0.25);
   margin-top: 5px;
+  max-width: 480px;
+  position: absolute;
   width: 100%;
 }
 

examples/js/style.css

@@ -1,9 +1,10 @@
-body {
-  margin: 0;
-  padding: 0;
+* {
+  box-sizing: border-box;
 }
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  margin: 0;
+  padding: 0;
 }

packages/autocomplete-js/src/autocomplete.ts

@@ -7,6 +7,7 @@ import {
   PublicAutocompleteOptions as PublicAutocompleteCoreOptions,
 } from '@algolia/autocomplete-core';
 
+import { debounce } from './debounce';
 import { getHTMLElement } from './getHTMLElement';
 import { setProperties, setPropertiesWithoutEvents } from './setProperties';
 
@@ -57,6 +58,10 @@ export interface AutocompleteOptions<TItem>
     state: AutocompleteState<TItem>;
   }): void;
   getSources: GetSources<TItem>;
+  /**
+   * @default "input-wrapper-width"
+   */
+  dropdownPlacement: 'start' | 'end' | 'full-width' | 'input-wrapper-width';
 }
 
 export interface AutocompleteApi<TItem> extends AutocompleteSetters<TItem> {
@@ -70,9 +75,75 @@ export interface AutocompleteApi<TItem> extends AutocompleteSetters<TItem> {
   destroy(): void;
 }
 
+export function getDropdownPositionStyle({
+  dropdownPlacement,
+  container,
+  inputWrapper,
+  environment = window,
+}: Partial<AutocompleteOptions<any>> & {
+  container: HTMLElement;
+  inputWrapper: HTMLElement;
+}) {
+  const containerRect = container.getBoundingClientRect();
+  const top = containerRect.top + containerRect.height;
+
+  switch (dropdownPlacement) {
+    case 'start': {
+      return {
+        top,
+        left: containerRect.left,
+      };
+    }
+
+    case 'end': {
+      return {
+        top,
+        right:
+          environment.document.documentElement.clientWidth -
+          (containerRect.left + containerRect.width),
+      };
+    }
+
+    case 'full-width': {
+      return {
+        top,
+        left: 0,
+        right: 0,
+        // @TODO [IE support] IE doesn't support `"unset"`
+        // See https://caniuse.com/#feat=css-unset-value
+        width: 'unset',
+        maxWidth: 'unset',
+      };
+    }
+
+    case 'input-wrapper-width': {
+      const inputWrapperRect = inputWrapper.getBoundingClientRect();
+
+      return {
+        top,
+        left: inputWrapperRect.left,
+        right:
+          environment.document.documentElement.clientWidth -
+          (inputWrapperRect.left + inputWrapperRect.width),
+        // @TODO [IE support] IE doesn't support `"unset"`
+        // See https://caniuse.com/#feat=css-unset-value
+        width: 'unset',
+        maxWidth: 'unset',
+      };
+    }
+
+    default: {
+      throw new Error(
+        `The \`dropdownPlacement\` value "${dropdownPlacement}" is not valid.`
+      );
+    }
+  }
+}
+
 export function autocomplete<TItem>({
   container,
   render: renderDropdown = defaultRender,
+  dropdownPlacement = 'input-wrapper-width',
   ...props
 }: AutocompleteOptions<TItem>): AutocompleteApi<TItem> {
   const containerElement = getHTMLElement(container);
@@ -97,12 +168,32 @@ export function autocomplete<TItem>({
     ...props,
   });
 
+  function onResize() {
+    return debounce(() => {
+      if (!dropdown.hasAttribute('hidden')) {
+        setDropdownPosition();
+      }
+    }, 100);
+  }
+
+  function setDropdownPosition() {
+    setProperties(dropdown, {
+      style: getDropdownPositionStyle({
+        dropdownPlacement,
+        container: root,
+        inputWrapper,
+        environment: props.environment,
+      }),
+    });
+  }
+
   setProperties(window as any, {
     ...autocomplete.getEnvironmentProps({
       searchBoxElement: form,
       dropdownElement: dropdown,
       inputElement: input,
     }),
+    onResize,
   });
   setProperties(root, {
     ...autocomplete.getRootProps(),
@@ -239,8 +330,13 @@ export function autocomplete<TItem>({
   root.appendChild(dropdown);
   containerElement.appendChild(root);
 
+  setDropdownPosition();
+
   function destroy() {
     containerElement.innerHTML = '';
+    setProperties(window as any, {
+      onResize: null,
+    });
   }
 
   return {

packages/autocomplete-js/src/debounce.ts

@@ -0,0 +1,11 @@
+export function debounce(fn: Function, time: number) {
+  let timerId: ReturnType<typeof setTimeout> | undefined = undefined;
+
+  return function () {
+    if (timerId) {
+      clearTimeout(timerId);
+    }
+
+    timerId = setTimeout(fn(), time);
+  };
+}

packages/website/docs/autocomplete-js.md

@@ -13,10 +13,7 @@ This function creates a JavaScript autocomplete experience.
 
 ```js title="JavaScript"
 import algoliasearch from 'algoliasearch/lite';
-import {
-  autocomplete,
-  getAlgoliaHits,
-} from '@algolia/autocomplete-js';
+import { autocomplete, getAlgoliaHits } from '@algolia/autocomplete-js';
 
 const searchClient = algoliasearch(
   'latency',
@@ -63,6 +60,12 @@ import CreateAutocompleteProps from './partials/createAutocomplete-props.md'
 
 <CreateAutocompleteProps />
 
+### `dropdownPlacement`
+
+> `"start" | "end" | "full-width" | "input-wrapper-width" | defaults to `"input-wrapper-width"`
+
+The dropdown horizontal position.
+
 ### `render`
 
 > `(params: { root: HTMLElement, sections: HTMLElement[], state: AutocompleteState<TItem> }) => void`