Merge pull request #83 from perimetre/7.4.0

7.4.0

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

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"

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,42 @@ const Template: Story<AutocompleteInputProps<{ id: number; label: string }>> = (
 };
 
 export const Input = Template.bind({});
+
+export const InitialText = Template.bind({});
+InitialText.args = {
+  defaultValue: 'Option 999'
+};
+
+/**
+ * A story that displays an Autocomplete example
+ *
+ * @param props the story 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({});

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