Feat: Add scroll on autocomplete

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added 
+- Add scroll on Autocompleteinput
+
 ## [9.146.9] - 2023-06-07
 
 ## [9.146.8] - 2023-06-01
@@ -4189,4 +4192,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 [9.146.7]: https://github.com/vtex/styleguide/compare/v9.146.6...v9.146.7
 [9.146.6]: https://github.com/vtex/styleguide/compare/v9.146.5...v9.146.6
 [9.146.5]: https://github.com/vtex/styleguide/compare/v9.146.4...v9.146.5
-[9.146.4]: https://github.com/vtex/styleguide/compare/v9.146.3...v9.146.4
+[9.146.4]: https://github.com/vtex/styleguide/compare/v9.146.3...v9.146.4

react/components/AutocompleteInput/README.md

@@ -135,6 +135,99 @@ const UsersAutocomplete = () => {
 ;<UsersAutocomplete />
 ```
 
+#### Defined height with scroll
+
+```jsx
+import { uniq } from 'lodash'
+import { useState, useRef } from 'react'
+
+const allUsers = [
+  'Ana Clara',
+  'Ana Luiza',
+  'Carlos',
+  'Daniela',
+  'Beatriz',
+  'Bruno',
+  'Camila',
+  'Diego',
+  'Eduardo',
+  'Fernanda',
+  'Gabriel',
+  'Heloisa',
+  'Igor',
+  'Juliana',
+  'Kaique',
+  'Larissa',
+  'Marcos',
+  'Natália',
+  'Otávio',
+  'Patrícia',
+  'Renato',
+  'Sabrina',
+  'Thiago',
+  'Vanessa',
+  'Wagner',
+  'Xavier',
+  'Yasmin',
+  'Zeca',
+  'Adriana',
+  'Bernardo'
+];
+
+const UsersAutocomplete = () => {
+  const [term, setTerm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [lastSearched, setLastSearched] = useState([])
+  const timeoutRef = useRef(null)
+
+  const options = {
+    onSelect: (...args) => console.log('onSelect: ', ...args),
+    loading,
+    value: !term.length
+      ? []
+      : allUsers.filter(user =>
+          typeof user === 'string'
+            ? user.toLowerCase().includes(term.toLowerCase())
+            : user.label.toLowerCase().includes(term.toLowerCase())
+        ),
+    // --- This is what makes the Last Searched Terms work!
+    // This can be stored anywhere the dev wants. To be persistent, for example.
+    lastSearched: {
+      value: lastSearched,
+      label: 'Last searched users',
+      onChange: option =>
+        option && setLastSearched(uniq([...lastSearched, option])),
+    },
+    maxHeight: 300,
+  }
+
+  const input = {
+    onChange: term => {
+      if (term) {
+        setLoading(true)
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+        timeoutRef.current = setTimeout(() => {
+          setLoading(false)
+          setTerm(term)
+          timeoutRef.current = null
+        }, 1000)
+      } else {
+        setTerm(term)
+      }
+    },
+    onSearch: (...args) => console.log('onSearch:', ...args),
+    onClear: () => setTerm(''),
+    placeholder: 'Search user... (e.g.: Ana)',
+    value: term,
+  }
+  return <AutocompleteInput input={input} options={options} />
+}
+
+;<UsersAutocomplete />
+```
+
 #### Custom option rendering
 
 ```jsx

react/components/AutocompleteInput/autocomplete.css

@@ -0,0 +1,3 @@
+.scroll {
+  overflow: scroll;
+}

react/components/AutocompleteInput/index.tsx

@@ -9,6 +9,7 @@ import Option, {
   getTermFromOption,
 } from './Option'
 import SearchInput from './SearchInput'
+import styles from './autocomplete.css'
 
 const propTypes = {
   /** Input props. All HTMLInput props can be added too */
@@ -92,6 +93,11 @@ const propTypes = {
      * It can be a warning, an error, or a hint about the options.
      */
     customMessage: PropTypes.node,
+    /**
+     * Max height value for options dropdown.
+     * `fit-content` is the default value.
+     */
+    maxHeight: PropTypes.number,
   }).isRequired,
 }
 
@@ -124,6 +130,7 @@ const AutocompleteInput: React.FunctionComponent<AutocompleteInputProps> = ({
     icon,
     size,
     customMessage,
+    maxHeight = 'fit-content',
   },
 }) => {
   const [term, setTerm] = useState(value || '')
@@ -261,7 +268,7 @@ const AutocompleteInput: React.FunctionComponent<AutocompleteInputProps> = ({
   const errorStyle = error || Boolean(errorMessage)
 
   return (
-    <div ref={containerRef} className="flex flex-column w-100">
+    <div ref={containerRef} className={`flex flex-column w-100`}>
       <SearchInput
         {...inputProps}
         value={
@@ -280,7 +287,9 @@ const AutocompleteInput: React.FunctionComponent<AutocompleteInputProps> = ({
       />
       <div className="relative">
         {popoverOpened ? (
-          <div className="absolute br--bottom br2 bb bl br bw1 b--muted-2 bg-base w-100 z-1 shadow-5">
+          <div
+            style={{ maxHeight }}
+            className={`absolute br--bottom br2 bb bl br bw1 b--muted-2 bg-base w-100 z-1 shadow-5 ${styles.scroll}`}>
             {renderOptions()}
             {loading && (
               <div className="flex flex-row justify-center items-center pa4">