wip

src/components/input/autocomplete/index.js

@@ -0,0 +1,30 @@
+import React from "react"
+import Drop from "@/components/drops/drop"
+import Options from "./options"
+import useAutocomplete from "./useAutocomplete"
+
+const Autocomplete = ({ value, autocompleteProps, tagretRef }) => {
+  const { autocompleteOpen, suggestions } = useAutocomplete({ value, autocompleteProps })
+
+  return (
+    autocompleteOpen &&
+    tagretRef?.current && (
+      <Drop
+        width={60}
+        target={tagretRef.current}
+        align={{ top: "bottom", left: "left" }}
+        animation
+        background="inputBg"
+        margin={[1, 0, 0]}
+        round={1}
+        close={() => {}}
+        onClickOutside={() => {}}
+        onEsc={() => {}}
+      >
+        <Options suggestions={suggestions} />
+      </Drop>
+    )
+  )
+}
+
+export default Autocomplete

src/components/input/autocomplete/options.js

@@ -0,0 +1,16 @@
+import React from "react"
+import { StyledOption } from "./styled"
+
+const Options = ({ suggestions = [] } = {}) => {
+  return (
+    <ul id="autocomplete-list" role="listbox">
+      {suggestions.map(({ value, label }) => (
+        <StyledOption key={value} role="option">
+          {label}
+        </StyledOption>
+      ))}
+    </ul>
+  )
+}
+
+export default Options

src/components/input/autocomplete/styled.js

@@ -0,0 +1,11 @@
+import styled from "styled-components"
+
+export const StyledOption = styled.li`
+  &:hover {
+    background-color: red;
+  }
+
+  &:focus {
+    background-color: red;
+  }
+`

src/components/input/autocomplete/useAutocomplete.js

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react"
+
+const useAutocomplete = ({ value, autocompleteProps = {} } = {}) => {
+  const [autocompleteOpen, setAutocompleteOpen] = useState()
+  const { suggestions = [] } = autocompleteProps || {}
+
+  useEffect(() => {
+    if (suggestions.length) {
+      setAutocompleteOpen(!!value.length)
+    }
+  }, [suggestions, value, setAutocompleteOpen])
+
+  return { autocompleteOpen, suggestions }
+}
+
+export default useAutocomplete

src/components/input/input.js

@@ -1,10 +1,8 @@
-import React, { useRef } from "react"
+import React, { useRef, useMemo } from "react"
 import Flex from "@/components/templates/flex"
 import { TextMicro } from "@/components/typography"
-import Drop from "@/components/drops/drop"
 import { Input, LabelText } from "./styled"
-import { useEffect } from "react"
-import { useState } from "react"
+import Autocomplete from "./autocomplete"
 
 const Error = ({ error }) => {
   const errorMessage = error === true ? "invalid" : error
@@ -16,18 +14,6 @@ const Error = ({ error }) => {
   )
 }
 
-const Suggestions = ({ suggestions = [] } = {}) => {
-  return (
-    <ul role="listbox">
-      {suggestions.map(({ value, label }) => (
-        <li key={value} role="option">
-          {label}
-        </li>
-      ))}
-    </ul>
-  )
-}
-
 export const TextInput = ({
   error,
   disabled,
@@ -51,14 +37,17 @@ export const TextInput = ({
   ...props
 }) => {
   const inputContainerRef = useRef()
-  const [autocompleteOpen, setAutocompleteOpen] = useState()
-  const { suggestions = [] } = autocompleteProps || {}
 
-  useEffect(() => {
-    if (suggestions.length) {
-      setAutocompleteOpen(!!value.length)
-    }
-  }, [suggestions, value, setAutocompleteOpen])
+  const autocompleteInputProps = useMemo(
+    () =>
+      autocompleteProps
+        ? {
+            "aria-autocomplete": "list",
+            "aria-controls": "autocomplete-list",
+          }
+        : {},
+    []
+  )
 
   return (
     <Flex gap={0.5} column className={className} {...containerStyles} as="label">
@@ -85,6 +74,7 @@ export const TextInput = ({
           ref={inputRef}
           error={error}
           hasValue={!!value}
+          {...autocompleteInputProps}
           {...props}
         />
 
@@ -97,22 +87,11 @@ export const TextInput = ({
       </Flex>
       {typeof hint === "string" ? <TextMicro color="textLite">{hint}</TextMicro> : !!hint && hint}
       {!hideErrorMessage ? <Error error={error} /> : null}
-      {autocompleteOpen && inputContainerRef?.current && (
-        <Drop
-          width={60}
-          target={inputContainerRef.current}
-          align={{ top: "bottom", left: "left" }}
-          animation
-          background="inputBg"
-          margin={[1, 0, 0]}
-          round={1}
-          close={() => {}}
-          onClickOutside={() => {}}
-          onEsc={() => {}}
-        >
-          <Suggestions suggestions={suggestions} />
-        </Drop>
-      )}
+      <Autocomplete
+        value={value}
+        autocompleteProps={autocompleteProps}
+        tagretRef={inputContainerRef}
+      />
     </Flex>
   )
 }

src/components/input/input.stories.js

@@ -16,7 +16,11 @@ export const Basic = args => <TextInput {...args} />
 export const WithAutocomplete = () => {
   const [value, setValue] = useState("")
   const autocompleteProps = {
-    suggestions: [{ value: "one", label: "one" }],
+    suggestions: [
+      { value: "one", label: "one" },
+      { value: "two", label: "two" },
+      { value: "three", label: "three" },
+    ],
   }
 
   return (