From 786f5613315e8b336f62973df139e5bf70d21ebb Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Wed, 17 Aug 2022 14:53:12 -0400
Subject: [PATCH 1/2] feat: autocompleteInput now can also be controlled

---
 CHANGELOG.md                                  |  6 +++
 package.json                                  |  2 +-
 .../AutocompleteInput.stories.tsx             | 39 ++++++++++++++++++-
 src/components/AutocompleteInput/index.tsx    |  7 ++++
 4 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 747850c..2e2e87d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [7.4.0] 2022-08-17
+
+### Added
+
+- AutocompleteInput can now also be controlled
+
 ## [7.3.1] 2022-08-17
 
 ### Fixed
diff --git a/package.json b/package.json
index 4a86eeb..3ec74aa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "7.3.1",
+  "version": "7.4.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
diff --git a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
index 0b7e0de..d73b0e6 100644
--- a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
+++ b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
@@ -1,6 +1,6 @@
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Meta, Story } from '@storybook/react/types-6-0';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { AutocompleteInput, AutocompleteInputProps } from './index';
 
 export default {
@@ -39,3 +39,40 @@ const Template: Story<AutocompleteInputProps<{ id: number; label: string }>> = (
 };
 
 export const Input = Template.bind({});
+
+export const InitialText = Template.bind({});
+InitialText.args = {
+  defaultValue: 'Option 999'
+};
+
+/**
+ * @param props
+ */
+const ControlledTemplate: Story<AutocompleteInputProps<{ id: number; label: string }>> = (props) => {
+  const options = useMemo(
+    () =>
+      Array(10)
+        .fill(null)
+        .map((_, i) => ({
+          id: i,
+          label: `Option ${i + 1}`
+        })),
+    []
+  );
+
+  const [state, setState] = useState<{ id: number; label: string } | undefined>(options[1]);
+
+  return (
+    <AutocompleteInput
+      {...props}
+      id="storybook-autocomplete"
+      options={options}
+      itemToString={(item) => (item ? item.label : '')}
+      filterItem={(item, inputValue) => item.label.toLowerCase().includes(inputValue.toLowerCase())}
+      selectedItem={state}
+      onItemToggle={(item) => setState(item || undefined)}
+    />
+  );
+};
+
+export const Controlled = ControlledTemplate.bind({});
diff --git a/src/components/AutocompleteInput/index.tsx b/src/components/AutocompleteInput/index.tsx
index ee5d89f..2ad1810 100644
--- a/src/components/AutocompleteInput/index.tsx
+++ b/src/components/AutocompleteInput/index.tsx
@@ -22,6 +22,10 @@ export type AutocompleteInputProps<Item> =
      * The initial selected item
      */
     initialSelectedItem?: Item;
+    /**
+     * The initial selected item
+     */
+    selectedItem?: Item | null;
     /**
      * Whether or not should always show the result list regardless if the user is searching or not.
      *
@@ -290,6 +294,7 @@ const DownshiftAutocompleteContent = <Item extends { id: string | number }>({
  * @param props the react component props
  * @param props.options The options that should be displayed in the dropdown
  * @param props.initialSelectedItem The initial selected item
+ * @param props.selectedItem The selected item
  * @param props.displayRegardlessIfSearching Whether or not should always show the result list regardless if the user is searching or not.
  * @param props.onItemToggle A callback that is called every time the user selects or unselects an item
  * @param props.defaultValue The input defaultValue property
@@ -312,6 +317,7 @@ export const AutocompleteInput = <Item extends { id: string | number } = { id: s
     itemToString,
     onItemToggle,
     initialSelectedItem,
+    selectedItem,
     defaultValue,
     displayRegardlessIfSearching
     // displayRegardlessIfFocused
@@ -322,6 +328,7 @@ export const AutocompleteInput = <Item extends { id: string | number } = { id: s
       onChange={onItemToggle}
       itemToString={itemToString}
       initialSelectedItem={initialSelectedItem}
+      selectedItem={selectedItem}
       initialInputValue={defaultValue}
       defaultIsOpen={
         displayRegardlessIfSearching !== undefined && displayRegardlessIfSearching === true ? true : undefined

From 6500122b6dbb47ca319f476c379910902e06f8fa Mon Sep 17 00:00:00 2001
From: AssisrMatheus <assisr.matheus@gmail.com>
Date: Wed, 17 Aug 2022 14:55:09 -0400
Subject: [PATCH 2/2] fix: fixes empty jsdocs

---
 .../AutocompleteInput/AutocompleteInput.stories.tsx           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
index d73b0e6..6d4a8a3 100644
--- a/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
+++ b/src/components/AutocompleteInput/AutocompleteInput.stories.tsx
@@ -46,7 +46,9 @@ InitialText.args = {
 };
 
 /**
- * @param props
+ * A story that displays an Autocomplete example
+ *
+ * @param props the story props
  */
 const ControlledTemplate: Story<AutocompleteInputProps<{ id: number; label: string }>> = (props) => {
   const options = useMemo(